Webサイトデザインで知っておきたい、色が与える印象と効果
投稿者：制作部
2013/11/15 10:27
この記事は約5分で読むことができます。
人の印象は、出会って数秒で決まると言われています。
同じように、Webサイトの印象もはじめのほんの一瞬で決まってしまいます。
そして、視覚から得られる情報のうち約80％は色による情報だと言われています。
Webサイトの配色には、人の心理に影響を与え、気分を変える、重要な役割があるのです。
今回は、色が与える印象と効果についてご紹介します。
色のイメージと心理的効果
色に対して抱くイメージは人によって少し異なりますが、例えば、暖色（赤や橙色など）を見ると暖かいと感じ、寒色（青など）を見ると涼しいと感じるように、色には「暖かい色」「冷たい色」など、多くの人が共通で抱く感覚があります。
それでは、基本的な色の特徴や効果を見ていきましょう。
【特徴】
目につきやすく、インパクトのある色です。
警告、注意やバーゲンSaleの文字に使われたりします。
【心理的影響】
気分を高揚させ、やる気が出てくる。
暖かく感じる。
食欲を刺激する。
【イメージ】
炎、情熱的、活気、リーダーシップ、晴れやか、暖かい、元気が良い。
【特徴】
活発で元気、開放的な印象を与えます。
ポジティブなイメージが強く、他の色との相性も良いので、美容系、飲食系など幅広いデザインに使われます。
【心理的影響】
食欲を刺激する。
陽気な気分、開放感を感じる。
暖かさを感じる。
【イメージ】
陽気、親しみ、暖かい、にぎやか、健康、活力、家庭的、好奇心。
【特徴】
光にもっとも近い色であり、有彩色の中でもいちばん明るい色です。
また、注意を喚起しやすく、道路工事や踏切などの注意を呼びかけるサインなどに使われます。
【心理的影響】
集中力を高める。
気分を明るくする。
注意を促す。
【イメージ】
光、希望、快活、のどか、若さ、注意、開放感、明るい。
【特徴】
感情を抑制する理性的な要素を持っていると言われており、エコや教育関連のサイトでよく使われ、目の疲労回復などにも活用される色です。
【心理的影響】
鎮静効果。
集中力を高める。
【イメージ】
穏やか、若さ、安全、調和、ナチュラル、平和、バランス、協調。
【特徴】
空や海の色でもある青は気持ちを静める要素を持っており、すがすがしく好感度が高い色です。
涼しさを感じさせる商品や海を連想させる商品にも青い色がよく使われます。
【心理的影響】
信頼感を与える
食欲を減退させる。
興奮を抑える。
涼しさを感じる。
【イメージ】
平和、安全、冷静、誠実、清潔、若い、爽やか。
【特徴】
自然にはあまりなく、染料が高価だったため、位の高さを象徴する色となりました。合わせる色によってイメージが左右される色です。
神秘的な美しさを感じさせるため、美容系のサイトによく使われます。
【心理的影響】
想像力をかき立てる。
鎮静効果。
感受性を高める
【イメージ】
高貴、優雅、神秘、知的。
【特徴】
光を吸収する色で、他の色との相性が良く、明るい色は特に引き立ちます。
高級なイメージを持たせたいときや、男性的なデザインをするときによく使われます。
【心理的影響】
収縮効果。
後退効果。
重く見せる効果。
強く見せる効果。
【イメージ】
高級感、男性的、暗闇、恐怖、神秘、重力、沈黙、絶対的。
【特徴】
清潔・純粋さを与え、どんな色とも相性がよく配色を明るくしてくれます。クリーンな印象を与えるため、病院や飲食店など清潔であるべきところには白がよく使われます。
【心理的影響】
清潔感を感じさせる。
ものを軽く感じさせる。
始まりを感じさせる。
【イメージ】
清潔、純粋、神聖、天国、平和、健康、可能性、心理、軽い、明るい。
気をつけたい、Webサイトの色づかい失敗例
例えば、イタリアンレストランのWebサイトには、お店のお料理がよく映えるように、橙色やベージュ、茶色などの優しい暖色が使われることが多いですが、これを紫色に変えてしまったとしたら、どうでしょうか。
美味しそうなお料理が台無しになり、食欲もなくなってしまいます。
これでは、せっかくサイトを見てもらっても、お店に行きたいと思ってもらえませんね。
食欲を刺激し、暖かな印象を与える橙色ですが、この色が高級車のWebサイトに使われていたとしたらどうでしょうか。
親しみやすい印象も与える橙色では、せっかくの高級車も安っぽく見えてしまいます。
重厚でクールな印象の高級車には、黒やグレーなど、男性的な洗練された印象を与える配色がよく合います。
赤は目につきやすくインパクトがあるため、ユーザがアクションを起こしやすくなる色のひとつです。
Saleの文字なども赤で書かれることが多く、ユーザの購買意欲を刺激します。
逆に、定価で売りたい商品の価格を赤で表示してしまったとしたらどうでしょうか。おそらくユーザは、「この商品は価格が下がっている」と勘違いをしてしまうでしょう。
このように、色は皆さんが思っている以上にユーザの心理に影響を与えています。
色選びに迷ったら、それぞれの色の特色を思い出してみてください。
今回ご紹介した「色のイメージと心理的効果」を知っているだけで、配色においてユーザを混乱させるような失敗はなくなり、それぞれのサイトに最適なイメージを持ってもらうことができるはずです。
【編集担当：松沢】
