色彩で集客が変わる！ユーザーの記憶に残るサイトを制作する方法

デザインには様々な要素がありますが、その中でも欠かせない要素の一つが”色”です。
色はそれぞれ心理的に作用する効果、イメージがあり、人は色の効果に左右されることがあります。
バーゲン、セールではよく赤が使われますが、これは赤が購買意欲を高めたり顧客の回転率を上げる効果を持っているためです。

何となく色を選んでしまっている場合にはユーザーに思ってもいないイメージを与えている可能性がありますので、色の印象を把握して選ぶことが重要です。

そこで今回は、色の効果を適切に活用できるように基本的な色の効果・イメージとホームページ事例をご紹介します。
ユーザーに思いどおりの印象を与えるために知っておくべきことですので、ぜひご覧いただき色選びの参考にしてみてください。

寒色・暖色・中性色

画像引用：http://www.webcolordesign.net/color_basic/color_psychology/warm_cold_color.html
　　
色を大きく分類すると、有彩色と無彩色にわけることができます。
有彩色は赤、青、黄など色味のある色のことです。
無彩色は色味がない白から黒までのことをいい、明るさの度合いしかありません。

有彩色には「色相、明度、彩度」の3つの性質があり、色相の差が違うと色が持つイメージが異なります。
色は人間の心理に働きかける効果があり、暖色は交感神経に、寒色は副交感神経に作用します。
暖色と寒色では体感温度が3度も違うといわれています。

寒色

青などの冷たさを感じる色のことです。
特に、彩度が低い色は「沈静色」といいます。

暖色

赤などの暖かさを感じる色のことです。
特に、彩度の高い色は「興奮色」といいます。

中性色

緑、紫など、暖かさも寒さも感じない色のことを中性色といいます。

進出色・後退色

画像引用：http://handywebdesign.net/2012/07/12colors-give-you-the-impression/
　　
色は波長の長さにより、暖色は前に飛び出して見え（進出色）、寒色は後ろに下がって見えます（後退色）。この特徴を活かして、遠近感、主張させる部分をわけることも可能です。

寒色系が与えるイメージ

青

水、氷、海を象徴する青色は、興奮を鎮める、食欲減退、集中力を高めるといった効果があります。

青のイメージ
冷たい、涼しい、信頼、清潔、男性的、知的、理性、理解、抑制、誠実、デリケート、寂しさ、冷酷、哀しみ、開放感、気持ちよい、夏、忠実、公平、精神、眠り、自らを律す、遊び心がない

参考：

全薬工業　アルージェ
http://www.arouge.com/index.html

全体に青色を取り入れた、清潔感を感じるデザインです。
所々に手描きの柔らかな柄を使用することで、青を使いながらも堅苦しくないイメージに仕上がっています。

ニプロファーマ株式会社
https://www.np.nipro-pharma.co.jp/index.php
医薬品受託製造のニプロファーマのホームページは、適度に青色を使用し、信頼感や誠実さを感じるデザインです。

ポカリスエット
http://pocarisweat.jp/

全体的に青色を使用したこのホームページでは、背景の水しぶきがより一層爽快感を感じさせます。
製品のイメージにぴったりのデザインです。

暖色系が与えるイメージ

赤

炎、日光を象徴する赤は、暖色系の中でも刺激が強くエネルギーを高める色です。
食用増進作用、警戒を促す、新陳代謝を促進する、目を引き注目されやすくするといった効果を持ちます。

赤のイメージ
情熱、活発、暑い、勝利、興奮、危険、積極的、爆発、活動的、生命力、活力、ストレス、華やか、衝動的、エネルギー、派手、地獄、目立ちたがり、元気、自己主張、燃える

参考：

グンゼ　ホットマジック
http://www.gunze.jp/hotmagic/

赤色のヘッダーとグラデーションが、見るからに温かさを感じさせるデザインです。

株式会社アピア
http://www.apiajapan.com/

「ランカーへの挑戦」というキャッチコピーに合わせ、強い情熱と積極性を感じるデザインに仕上げています。

橙

赤と黄の中間である橙は、重すぎず軽すぎず快適な温度感をイメージさせる色です。
食欲増進作用、開放感を与える効果を持っており、暖色系のなかでも好かれやすい色です。

橙のイメージ
家庭的、明快、活動的、人間的、にぎやか、暖かい、温もり、元気、健康、好奇心、活力、しみ、楽天的、八方美人、自由奔放、見栄っ張り、美味しそう、ポジティブ、自信家、高揚感、陽気、カジュアル、オールマイティ、安っぽい

参考：
　
ヒヨノコ.com
http://hinoyoko.com/

温かみのある橙色に画用紙のようなテクスチャがマッチし、温もりを感じさせます。

Google cardboard
https://vr.google.com/cardboard/

はっきりとした橙色が好奇心を刺激するデザインで、製品に興味を持たせてくれます。

桃

桃色は、可愛らしさや美しさを象徴する色で女性向けのデザインによく使います。
女性ホルモンの分泌を促したり、幸せな気持ちにしてくれる効果があります。

桃色のイメージ
エレガント、女性的、ロマンチック、安らぎ、美容、春、ハート、甘い、優しい、安らぎ、繊細、幸福、不安定、かわいくいたい、媚び、愛、外見重視、艶やか、美しさ、感謝、解放、世話好き

参考：

CLEAR IMPRESSION
http://www.clearimpression.jp/

黄味ピンクのストライプと女性のイラストが、オシャレかつ女性的なデザインです。

ゼリア新薬　プレフェミン
http://prefemin.jp/

全体的には白を用いながらも、要所で明るいピンクを使ったホームページ例です。
一目で「女性向け」の印象を与えます。

リクルート　ゼクシィ
http://zexy.net/

ヘッダー、アイコンと様々な箇所にピンクを使い、ブライダル・ウェディングにぴったりの幸福感のあるデザインに仕上がっています。

黄

黄は明度が高く軽さをイメージさせる色です。
コミュニケーションを良好にしたり、会話をスムーズにする効果を持ちます。

黄のイメージ
希望、好奇心、向上心、快活、軽い、明朗、発展、愉快、軽率、酸っぱい、躍動、不安、注意、天気、のどか、ひょうきん、マイペース、無邪気、おしゃべり、若さ、未熟、奇抜、社交的

参考：
　
スマイルとうほく
http://smile-tohoku.jp/

明るい黄色が印象的で、前向きな気持ちしてくれるデザインです。

bb.
http://birdybabies.jp/

遊んでいる子供の写真、星や虹色の装飾に黄色が合わさり、好奇心や愉快さをイメージするデザインに仕上がっています。

中性色系が与えるイメージ

緑

植物を象徴する緑色は、穏やかな感情にさせリラックス効果をもたらす色です。
心身のバランスを整え、緊張を和らげてくれます。

緑のイメージ
平和、安全、新鮮、社会性、バランス、強調、おだやか、エコロジー、環境、回復、生命力、再生、安息、保守的、受動的、安定、バランス感覚がいい、刺激が少ない、爽やか、若々しい、平凡、脇役タイプ、無関心、再生、平穏

参考：

医療法人社団曙会 流山中央病院
http://www.nch.or.jp/

緑色を効果的に使い、病院の安全性や安息、回復のイメージを表現しています。

ヘルスケア＆メディカル投資法人
http://www.hcm3455.co.jp/

こちらは、先程の事例と比べると黄味の強い緑色を使用した事例です。

IGNIS
http://www.ignis.jp/

全体的にはベージュを採用することでリラックスムードを演出し、所々に落ち着いた緑色を使うことで植物の生命力を表現しています。

紫

高貴な色とされてきた紫色は、神秘的なイメージを持ちインスピレーションを与えてくれる色です。
赤と青のイメージを持ち合わせるほか、個性的に見せる効果を持ちます。

紫のイメージ
エキゾチック、上品、神聖、感性、不思議、不吉、不安定、下品、意地悪、高貴、高級、ムード、魔法、優雅、複雑、魅力、癒し、変わりもの、ナルシスト、妄想、永遠、浮つき、ミステリアス、二面性、幻想的、ムード

参考：

京都麻織物
http://www.linenkyoto.com/

淡い紫色が、リネンの品質の良さ、魅力を引き立てています。
余白をたっぷりとりポイントで紫色を使用したことで、くど過ぎない印象です。

春帆楼
http://www.shunpanro.com/recruit/

やや赤みのある紫色を所々に使用しています。
優雅さを感じるデザインです。

無彩色系が与えるイメージ

光を反射する白は、明るさや開放感をイメージさせる色です。
空間を広く感じさせる、軽い印象を与えるといった効果を持っています。

白のイメージ
威厳、可能性、純粋、冬、無限、明るい、祝福、天国、刷新、頼りない、空虚、潔癖、神聖、清純、清潔、無意味、無垢、透明感、リセット、憧れ、降参、はじまり、汚れていないイメージ、無、無機質、スタート

参考：

sonihouse
http://www.sonihouse.net/

白い箇所をたくさんとったデザインで、スッキリとした印象に仕上がっています。

dove
http://japan.mydove.jp/

全体的に白を用いており、製品の青がアクセントになっているデザインです。
白と青の配色が清潔感、透明感をイメージさせます。

黒

光を吸収する黒は、強い意志やこだわりを感じる色です。
自己主張を強くする色でありながら、他のどんな色とも合う特徴を持っています。

黒のイメージ
威厳、上質、クール、重力、不安、沈黙、クール、陰気、暗い、悪、男性的、自信、忠誠、闇、脅威、力、極限、高級、都会的、秘密、厳しい、無口、強情、シャープ、大人、ポーカーフェイス、洗練、格好いい

参考：

ジュエリー銀座千雅
http://www.jw-senga.co.jp/

真っ黒なデザインにジュエリーの写真が映えるデザインで、上質さや高級感を表しています。

MINI Cooper S 5 DOOR
http://www.mini-5door.jp/

黒のクールさ、男性的なイメージを効果的に使ったデザインです。
青をアクセントカラーに用いることで、さらに男性的な雰囲気が増しています。

まとめ

いかがでしたでしょうか。色には様々なイメージ、心理的効果があります。
色別のホームページ事例をご覧いただくとわかるとおり、何色を使うかによって印象が大きく異なることがわかります。

例えば、軽い印象を与えるとマイナスな士業なら誠実さを与える青、食品なら美味しそうに見える赤やオレンジ、というようにお店やブランドのイメージに合う色を選ぶことが重要です。
合わない色を選んでしまうと、食品なのに食欲をなくしてしまうなど悪影響を与えてしまいます。

最適な色を選ぶためにも、色の持つ効果を知っておきましょう。