WEBDESIGNER.TOKYO
ウェブデザイナー.トーキョー

デザイン・就職・転職・仕事 - WEBデザイナーのための情報メディア

明るく先進的なイメージを表現するビビットなイエローを利用したWEBデザインまとめ

UPDATE2020.03.17

黄色を効果的に使っている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三色旗カラーを踏襲した色使いで違和感がない。

DESIGN