色で決まる!ぱっと見の印象作り。

色で決まる!ぱっと見の印象作り。

こんにちは、デザイナーのレミーです。
WEBデザインをする上で日々迷うのが、色!しかしWEBサイトの第一印象を決めるのも、色!
使用されている色が持っている「意味」や「効果」によってぱっと見の印象は決まっちゃうんですよね…
今回はそれぞれの色を活かしている素敵なサイトを参考にしながら「色の印象」についてまとめてみました!

色の印象について

標識やピクトグラム等、日常生活においても「色が持つ意味」は利用されています。 色によっては、警戒、信頼感、不安感、安心感、高そう、安そう…といったように人の感じ方はプラスにもマイナスにもなります。 一般的に抱く色の感覚を利用することで、よりターゲットに伝わりやすくなります。

1.「赤色」の印象

赤は、目を引く色、視覚誘導する時も認識しやすい色と言われています。
交通標識や救急車など人の注意を引きたいときによく使用される色です。

moji

他にも、「購買意欲を高める」効果があるので、商品紹介サイトでも使用されていますね!

site

こちらは、ヴィダルサスーン様のアイロン・ヘアードライヤー特集サイト。全体的に赤色を多様しているので、印象深くインパクトがあります。

2.「オレンジ色」の印象

オレンジ色は、明るい・希望をイメージさせる色です。
前向きにさせる商品や楽しいサービスのデザインによく使用されます。

moji02

site02

長崎にある認定こども園小浜こども園様のサイト。オレンジ色を使用することで、次入園を希望しているであろうターゲットが、こども園の明るい・楽しそうな雰囲気を連想しやすくなっています。

3.「黄色」の印象

黄色は、オレンジ色と似ている意味が多く、こちらも前向きな印象を持つ色です。
ポジティブで明るい印象を与えたいときに使用すると効果的です。

moji03

他にも、「クリエイティブな雰囲気」を出す効果もあります!
site03

デザイン会社デジタル・アド・サービス様のサイト。鮮やかな黄色は閃きやアイデア、希望を連想させます。クリエイティブな雰囲気が感じられるサイトです。

4.「緑色」の印象

緑色は、環境に関することや健康、教育関連で使用されることの多い色です。
癒しやリラックスといった印象を与えます。

moji04

一般的には、上記に挙げたように健康や環境に関するサイトに使用される緑色ですが「爽やか」な雰囲気を出したい時にも使用されています。

site04

こちらは、炭酸飲料Sprite様のサイト。ロゴの緑とボトルの緑がいいアクセントになっていて爽快感のあるサイトです。

5.「青色」の印象

青色を使用すると、信頼や清潔感のある印象を与えます。
信頼感が重要な企業のブランドカラーにもよく使用されています。

moji05

企業のブランドカラー以外にも、飲料系のサイトでもよく使用されていますよね。
シズル感を引き立てる色」でもあります!

site05

炭酸飲料ORANGINA様のサイト。全面的に青色を使用することで、写真のオランジーナをより美味しそうにみせています。飲料系の冷たくて美味しそうな「シズル感」を出したいデザインによく使用される手法です。

6.「紫色」の印象

紫色は、高級・優雅など高価なイメージを持たれます。また、謎めいた雰囲気や魅惑的な印象を与えます。

moji06

site06

化粧品ブランドANNASUI様のサイト。黒とブランドカラーの紫を使用。紫の印象が強く、ミステリアスな印象のサイトです。

7.「白色」の印象

白色は、背景としてもよく使用され、ベースになります。清潔な印象を与えることもでき、シンプルなデザインにも向いています。

moji07

site07

デザインの本なるほどデザインのランディングページ。背景の白に黒文字と、いたってシンプルな配色。色を取り除くことで他の重要なコンテンツを強調し、目立たせています。

8.「黒色」の印象

黒色もまた、背景やベースとして使用されることが多い色です。黒色を多様すると、スタイリッシュやミステリアスな印象を持たれます。

moji08

site08

時計ブランドSEIKO様のサイト。黒をベースにすることで高級感が増し・スタイリッシュな印象になります。白文字が一番目立つのも黒を基調にしたときです。

まとめ

デザインをする上で色に困ったら、「どう思われたいのか」「何を伝えたいのか」を考えると、イメージにぴったりな色を見つけやすくなります。
その色が持つ「意味」と「効果」を最大限に活かし、ユーザーの行動喚起をするようなWebサイトにしていきたいですね!


Previous: 分かりにくい図を、分かりやすくする Next: サイトの顔!メインビジュアルの鉄板レイアウト!

© 2017 ALL CONNECT Inc. All Rights Reserved.