黄色を効果的に使ったWebデザインまとめ

黄色を効果的に使ったWebデザインまとめ
黄色を効果的に使ったWebデザインまとめ

たまにはシリーズもので特定の色を使ったデザインまとめをやってみたいと思います。というわけで第1弾は「黄色」です。以前書いた「12色の色が与える印象について。配色に困った時のいろいろ。」では色についての印象などをまとめていますので、まずはそちらから読んでいただくのも良いと思います!

黄色の特徴は?

黄色の特徴

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

参考になりそうなサイトを集めてみました

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

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

キューピーマスタード
http://www.kewpie.co.jp/mustard/index.html
キューピーマスタード
マスタードを連想させるために濃い目の黄色が背景に使われています。こういったものと連想させるためのカラー設定もデザインではよく見られますね。

スーパーマリオブラザーズ2
http://www.nintendo.co.jp/3ds/abej/
スーパーマリオブラザーズ2
黄色の印象である「元気で明るい」イメージを出すために拝啓にストライプ柄とあわせた黄色が使われています。コイン=黄色というイメージからも黄色の配色が役立っています。

ハイパーシャープライナー
http://www.maybelline.co.jp/campaign/hypersharp/
ハイパーシャープライナー
メインカラーが黒を使っている分、アクセントカラーの黄色がより目立つコントラストの高い配色になっています。女性向けのサイトですが、アイライナーという商品性からも黒を使ったデザインが雰囲気に合っています。

シュークリーム専門店ビアードパパ
http://www.beardpapa.jp/
ビアードパパ
クリームに使われている卵というイメージや、黄色は食欲を出す色のため背景に大きく使われています。写真と合わせてデザインすることで、食べたい気持ちにさせてくれるサイトですね。

KStation
http://www.killingsworthstation.com/
KStation
70%SOLDという部分と、メニューに明るい黄色を使うことで自然とそこに目がいくような配色になっています。写真の透過度をあげることで、黄色がより目立つようになっています。写真にマウスホバーしたときのアクセントの黄色も面白いです。

玉川大学芸術学部
http://tamagawa-va.jp/
玉川大学芸術学部
背景にアクセントになる黄色い文字のパーツをデザインすることで、芸術学部らしい現代的なデザイン性を演出しています。

LED高天井照明 TAKATEN
http://www.takaten.com/
TAKATEN
背景がグレーが多い色合いなので、黄色を部分的に使いアクセントになっています。マーカーのように文章の背景にひかれた黄色が、文字の視認性と目立つ効果を持ち合わせていますね。

RIP SLYME
http://ripslymestar.com/
RIP SLYME
リップスライムの特設サイト。テーマに合わせた宇宙の青と黄色の組み合わせがコントラストになっています。青と黄色は補色の関係なので、組み合わせて使うと派手な印象になります。

まとめ

色々なサイトを見ていると、黄色はやはりアクセントとして使われるケースが多いですね。黄色を使うだけでパッと明るい印象になるので使いやすいと思います。そのほかにも食欲を出す色として使われたり、企業や商品のイメージに合わせて使われたりと色々な配色方法がありました。みなさんもぜひ参考にしていただけるとうれしいです。それではー!!

関連記事を読む

黄色を効果的に使ったWebデザインまとめ

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]