この記事の目次
黄色を効果的に使っているWEBサイトのデザインまとめ
明るい黄色のデザインは目立ちますが、なかなかサイトでは使いづらい雰囲気。
効果的にイエローをWEBデザインに落とし込んでいる各社のサイトをご紹介します。
新潮社
https://www.shinchosha.co.jp/
出版社である新潮社のWEBサイト。
白+黄色+グリッドデザインで非常にすっきりとまとまっています。
ホームページ全体の挙動も軽く軽快。
greyp
https://www.greyp.com/
イエローを基調とした電動バイクメーカーのブランドWEBサイト。
黒+白+黄色でビシッと決めています。
横幅100%+背景に動画も多用し、今風な感じのレイアウト。
写真にもイエローが効果的に利用されてて、黄色＝自社メーカーを印象付けています。
wildmind go!go!
https://gogo.wildmind.jp/
アウトドア・自然体験・外遊びの情報が飛び交う体験メディア。
イエローを利用している割合は少ないですが、差し色となるヘッダー部分の濃い目のブルーと合わさって効果的に使用しています。
シンプルなグリッド型のWEBデザイン構成。
キュレーター会員登録システムや、クリップ等の機能も多数。
Hasegawahiroshi
https://hasegawahiroshi.jp/
フリーランスのWEBデザイナーのポートフォリオサイト。
本業なので、シンプルで余白を取りながらも可読性の高いWEBサイト。
ちょっとしたアニメーション演出もストレスなく気持ちが良いです。
enklarelliv
https://enklarebilliv.se/
ドイツの車関係メディア。
ヘッダーとフッターは黒で締めていますが、メインコンテンツはNEWSサイトらしく白背景と黒文字で可読性が高い。
リンクの矢印、ボタン等の細かなパーツをサイトメインのイエローカーラーと統一をしているので嫌みがないです。
mitchelladam
http://www.mitchelladam.co.uk/
イングランド、バーミンガムにある企業のコーポレートサイト。
レイアウトや構成自体は普通のWEBサイトと言えますが、左下に突き出たヘッダー部分がイエローカラーで形状も個性的で印象に残ります。
その他、各ページのボーダーや写真選択時等もイエローカラーを利用。
tweedees
http://www.tweedees.tokyo/
日本のポップグループバンドのオフィシャルサイト。
みんな大好きクレスト（紋章）のロゴとイエロー、ホワイト、グレーの三色旗のようなTOPページから良い感じ。
下層ページに入るとMENUがイエロー地で左固定となります。
右メインコンテンツ部分も背景にグレー、テキストエリアはホワイト、見出しにイエローが使われるなど、TOP三色旗カラーを踏襲した色使いで違和感がない。