名称都道府県設計水の教会北海道安藤忠雄モエレ沼公園北海道イサムノグチ公立はこだて未来大学北海道山本理顕せんだいメディアテーク宮城県伊東豊雄ショウナイホテル スイデンテラス山形県坂茂会津さざえ堂 福島県-那珂川町 馬頭広重美術館栃木県隈研吾那須芦野・石の美術館 STONE PLAZA栃木県隈研吾幕張メッセ千葉県槇文彦東京スカイツリー東京都日建設計すみだ北斎美術館東京都妹島和世浅草文化観光センター東京都隈研吾江戸東京博物館東京都菊竹清訓国立西洋美術館東京都ル・コルビュジエ東京文化会館東京都前川國男法隆寺宝物館東京都谷口吉生日本銀行 本店東京都辰野金吾ミキモト 銀座2丁目店東京都伊東豊雄エルメス銀座店東京都レンゾ・ピアノニコラス・G・ハイエックセンター東京都坂茂安田講堂 (東京大学大講堂)東京都岸田日出刀日本テレビタワー東京都リチャード・ロジャース日生劇場東京都村野藤吾虎ノ門ヒルズ森タワー東京都

企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ

オンライン上で 自分だけの掛け軸をデザイン 自分だけのデザインの掛け軸をオンライン上でシミュレーション。 作成した掛け軸デザインを元に、京都表具協同組合の経験豊かな 表具師に相談することも可能です。

色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー

2025年に開かれる「大阪・関西万博」。その公式ロゴマークが決まりました。どんなデザインかというと…ネットなどで賛否両論、大きな話題になっています。「気持ち悪い」「かわいい」「あれにそっくり」…あなたはどう思いますか？ ロゴマークが表すものと、それが生まれた背景を探ると、半世紀前の万博からつながる熱い思いにたどり着きました。 （大阪放送局 記者 甲木智和／ネットワーク報道部 記者 成田大輔 大石理恵）

道路の方角は、隣り合う街どうしで微妙に違っていたりする。それが分かりやすいように道を方角によって塗り分けてみたところ、街の地形や歴史が見えて面白かった。 北海道、東京、京都、ニューヨークなどでやってみた。 今回、こんな地図を作った。 なんのこっちゃと思うが、拡大するとこうなっている。 道路を、その方角によって塗り分けたものだ。 右側の黄色いエリアは江東区。中央のカラフルなのは銀座とか日本橋だ。街ごとに道の方角が少しづつ違うということが色によってとても分かりやすくなっている。銀座から日本橋まで歩くと少しづつ道がカクッと曲がってるなーという感覚があるが、そういうこともまざまざと示されている。 こんなことできるかなと思ってやってみたらできて、結果も面白かったのでいろんな場所でやってみようというのが今回の趣旨です。 （本記事の地図は OpenStreetMap のデータをもとに加工したものです。末

つだしん @tsudashin 消費者庁の資料をリデザインしてみた2 とにかく引き算がだいじ、デザインに正解は無いのであくまで一例です pic.twitter.com/N3zd9M86Ze 2020-06-10 22:14:52

こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効

初めまして、ameko(@tk04amedama)と申します。 普段は都内の制作会社でWEBデザイナーをしています。 と言ってもまだまだ新米なので、日々勉強中です。 その勉強の一環で、最近のWebサイトで使われている メインビジュアルの構図を一覧にしてまとめた画像をTwitterに投稿してみたところ、思いがけず多くの方に反応いただけたので、その後に行っていた構図ごとの分類分けや分析も公開してみようと思い、初めてnoteに投稿してみました。 はじめに集めたサイトの数は全部で７０個。自分の仕事の参考のために集めたものなのでほとんどがBtoB向けサイトです。（BtoC向けサイトだと、この構図一覧もまた、全然違うものになりそうだなと思う。） 構図の名前は、なんとなく自分なりに語呂がいい名前をつけているだけなので、あまり突っ込まずふんわり流していただけると幸いです。（もしこの構図の正式名称とかあった

私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク

でんがみ @dengami 着物ってもっとゆるふわな服でしょ？浮世絵とか絵巻の人々を見てみなよ。あんなタイトに着てるかい？昨今ワイドパンツやロングスカートが流行ってるけど、着物も本来あーいう足さばきが軽やかな服なんだよ。タイトスカート風しか許さない昨今の着付けの方が邪道だよ。 2019-06-20 20:43:30 でんがみ @dengami ちなみにコレ、京都経済センターで展示された「The KIMONO展」飛鳥〜現代までの着物👘の移り変わりが、素材や織り、染め方まで忠実に再現された復元資料展示で実際の着こなしがわかるの。着物👘の概念がすごく自由になったわ(写真🆗で、資料集めとして良い展示でした🌷) pic.twitter.com/na7hEIazGE 2019-06-20 21:04:49

人工知能や深層学習が、デザインにも使用できるものが増えてきましたね。 落書きのように簡単に描いたスケッチから、写真のようにリアルな画像を自動生成する「GauGAN」を紹介します。 GauGAN Turns Doodles into Stunning, Photorealistic Landscapes GauGANは、印象派の画家ポール・ゴーギャンにちなんで名付けられたNVIDIA AI Researchプロジェクトの一つです。 ブラシツールや塗りつぶしツールで描いたスケッチを元に、雲や山や木や水や草や岩などのラベルを付けると、写実的な画像を自動生成します。他の画像をつなぎ合わせたり、テクスチャをカットアンドペーストするだけではなく、アーティストが何かを描くのと同じように、新しい画像を生成します。 SPADEが使用されており、既存の方法よりもリアルな画像を生成します。

こんにちは。 今回はProjectStepUPでUIデザインをやってきた自分が、独学で勉強する方法を考えてみました。これをやりきれば、『自力で綺麗なUIが作れる状態』にはなるはず。 内容は初心者にわかりやすいというのを大事に、かなり簡素化して書いております。とりあえず4STEPにわけてみました。そういや高校時代に4STEPとかいう数学問題集あったなあ... STEP1：UIデザインに関係する一般知識を得る ◎目的 このステップはUIデザインに関する前提を知るためにあります。STEP2以降と平行してやってOKです。というよりちゃんと学ぼうと思ったら無限に続きそう。 主なトピックとしては、UIUXとはなにか・人間中心設計・デザインの4原則・デザインガイドラインの4つでしょうか。 ・UIUXとはなにか UIデザインはUX（顧客体験）大きな流れの一部なので、そこを理解しているかどうかは本質的なUI

お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>

2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co