色別に参考になるWebサイトのまとめがあれば、色がWebサイトのイメージに与える影響がわかりやすいな〜と思ってこの記事を書きました。

というわけで第1弾は黄色(イエロー)です。色そのものの印象を知りたい方はこちらの記事にまとめていますので、ぜひご覧ください。

12色の意味と心理に与えるイメージまとめ!配色のコツも教えます

黄色(イエロー)のイメージ・特徴は?

黄色の特徴

黄色は明度が高く、集中力を高めたり気分を明るくしたりする効果があります。

そのためWebデザインでも黄色が使われる場合は、明るく・元気なイメージに使われることが多いです。そのほか注意を促す色でもあるので、注目させたい部分にポイントとして使うケースもよく見かけますね。

実際に黄色を効果的に使ったサイトをまとめてみました。

黄色の配色が参考になるサイトをまとめました

世田谷文化生活情報センター

http://setagaya-ldc.net/

世田谷文化生活情報センター
目立たせたい部分や見出しタイトル(Programなど)にポイントで黄色が使われています。メニューもマウスホバーしたときの黄色を使った表現が面白いです。

明光義塾

http://www.meikogijuku.jp/

明光義塾
明光義塾の背景にも使われている黄色をアクセントカラーとして使っています。中央のスライド画像のイラストにお、黄色だけを使った着色がされていてシンプルですが目を引くようになっています。

ガラフル

http://www.felissimo.co.jp/galafull/

garafull

ファーストビューに黄色を大きく配色することで、ポップな雰囲気を作っています。白・ピンクと色を組み合わせて女性向けのターゲットであることがわかりやすくなっています。

スーパーマリオブラザーズ2

http://www.nintendo.co.jp/3ds/abej/

スーパーマリオブラザーズ2

黄色の印象である「元気で明るい」イメージを出すために拝啓にストライプ柄とあわせた黄色が使われています。コイン=黄色というイメージからも黄色の配色が役立っていますね。

マリオシリーズは黄色がイメージカラーとしても機能しています。

FM-JAGA(エフエム帯広)

http://www.jaga.fm/

jaga エフエム帯広

ほぼ白と黄色の配色ですが、黄色はメニューのフォントやロゴなど、使用箇所を限定して使っているので派手な印象は抑えられ、元気で明るい印象があります。

白ベースで黄色をアクセントに置くと、清潔感があって元気な雰囲気になりますね。

シュークリーム専門店ビアードパパ

http://www.beardpapa.jp/

ビアードパパ

クリームに使われている卵というイメージや、黄色は食欲を出す色のため背景に大きく使われています。写真と合わせてデザインすることで、食べたい気持ちにさせてくれるサイトですね。

リプトン チルド

https://www.liptonchilled.com/

リプトン

リプトンのロゴにも使われている黄色なので、ファーストビューで背景に大きく使うことで商品イメージを強く打ち出しています。

ただ背景すべてに黄色を使ってしまうとコンテンツに集中できないので、黄色の背景はヘッダーのみに留めてバランスをとっています。

玉川大学芸術学部

http://tamagawa-va.jp/

玉川大学芸術学部

背景にアクセントになる黄色い文字のパーツをデザインすることで、芸術学部らしい現代的なデザイン性を演出しています。

スクロールするとその背景のデザインが動いて、個性的なサイトに仕上がっているなと思いました。

LED高天井照明 TAKATEN

http://www.takaten.com/

TAKATEN

背景がグレーが多い色合いなので、黄色を部分的に使いアクセントになっています。

マーカーのように文章の背景にひかれた黄色が、文字の視認性と目立つ効果を持ち合わせていますね。

Birdybabies

https://birdybabies.jp/

birdybabies

ベビーシッターや英会話など子供向けサービスBirdybabiesのサイト。

子供らしさを表現できるようにファーストビューのスライドで大きく黄色が使われています。写真との組み合わせで子供の元気さがうまく表現されています。

明度や彩度の高い黄色を使うと、子供向けのイメージをうまく表現できますね。

まとめ

色々なサイトを見ていると、黄色はやはりアクセントとして使われるケースが多いですね。黄色は色の主張が強いので、あまりたくさんのスペースで使わなくてもしっかりと効果を発揮してくれます。

黄色の色の派手さから、他の色が落ち着いていても、その中に黄色を使うことで少しポップな雰囲気も作ることができます。

また黄色を使うだけでパッと明るく元気な印象になりますね。そのほかにも食欲を出す色として使われたり、企業や商品のイメージカラーの場合は全面に使って黄色の印象を強めたり、といった使われ方が多いと思いました。子供向けのサイトにも多く黄色は使われていることもわかりました。

みなさんもぜひ黄色の使い方の参考にしていただけるとうれしいです。それでは!

▼第2弾は緑(グリーン)のWebサイトまとめです

緑の色の効果(イメージ)をうまく使ったWebデザインまとめ