ウェブサイトの印象はカラーで決まる？色とユーザー心理の関係性

あなたは「色彩心理学」という学問をご存知ですか？
 
個人的に好きな色、嫌いな色というのはあるでしょうが、一般的に「赤」＝「情熱的」といった感覚は持っていますよね。
色彩心理学は、このように色と人間の心理(感じ方)との関連性を研究する学問です。
 
今回は、この色彩心理学をウェブサイトのカラーにも当てはめて考えていきます。

ユーザーになってほしい心理状態に近しい色をウェブサイトで活用できれば、その分スクロール率や成約率にもプラスの影響を与える可能性があります。
まずは色の持つ効果を知るところからスタートしましょう。
 
 

暖色と寒色、中性色

 
色には大きく分けて「暖色」「寒色」「中性色」と分類分けされています。
近い色同士を並べて輪のように丸く配置した図を色相環と言い、12色または24色で表されます。
 

 
「暖色」は赤や黄色、オレンジなどに代表される暖かみを持つ色を指し、人間の感情を高揚させる効果があります。
別名「進出色」とも呼ばれており、手前の方に突出したように近づいて見える色です。
また、暖色を見ると時間の流れが早く感じるとも言われています。
 
一方「寒色」は青や青に近しい色で、奥まって遠くへ引っ込んだように見えるため「後退色」とも呼ばれます。
暖色とは反対に興奮を鎮める鎮静作用を持ち、誠実さや清潔さも生まれます。
 
「中性色」は暖色と寒色の間の色をして位置づけられ、緑や紫などがこれに当てはまります。
また、色相環にはありませんが「中間色(無彩色)」と呼ばれる白や黒、灰色も中性色に含めることががあります。

寒暖をあまり感じさせず、穏やかさ柔らかさを持ちやすくなります。
 
色の概要をお伝えしたところで、次は代表的な9色が持つ意味や効果をご紹介していきましょう。
 
 

赤は情熱的な色

 
赤は興奮色とも言われており、アドレナリンを分泌させたり心拍数を挙げたりする色です。
 

赤の持つポジティブなイメージ

情熱、積極性、行動的、勇気、温かさ
 

赤の持つネガティブなイメージ

危険、緊張、怒り、衝動
 

赤を使ったウェブサイトの例

 

 
551蓬莱(http://www.551horai.co.jp/)
温かみのある食品であることが赤色から伝わってきて、空腹感を刺激しています。
 
 

オレンジは親しみやすい色

 
オレンジはにぎやかさを持ちつつ、暖色系の中でも親しみやすい色とも言われており、万人受けする色です。
 

オレンジの持つポジティブなイメージ

にぎやか、温もり、健康、自由奔放
 

オレンジの持つネガティブなイメージ

わがまま、八方美人、傲慢
 

オレンジを使ったウェブサイトの例

 

 
ファンタ(http://fanta.jp/)
親しみやすく温もりを感じやすいオレンジはさまざまなウェブサイトで使用されています。
 
 

黄色は気分が明るくなる色

 
黄色は有彩色の中でも最も明るい色で、集中力や判断力を高めるとも言われています。
 

黄色の持つポジティブなイメージ

明るい、楽しい、活発、元気、躍動
 

黄色の持つネガティブなイメージ

危険、不安、幼稚、軽率
 

黄色を使ったウェブサイトの例

 

 
マツモトキヨシ(http://www.matsukiyo.co.jp/)
薬を服用した後に元気になるイメージを黄色で表現しています。
 
 

緑は安らぎをもたらす色

 
緑は安らぎや穏やかさを持ち、他の色ともバランスが取りやすい色です。
 

緑の持つポジティブなイメージ

リラックス、成長、若さ、安全、平和
 

緑の持つネガティブなイメージ

未熟、保守的、受動的、嫉妬
 

緑を使ったウェブサイトの例

 

 
ニトリ(http://www.nitori-net.jp/)
新生活の応援として若々しさや育っていく様子が伝わってきます。
 
 

青は知的で爽やかさを持つ色

 
青は空や海など爽やかで広大な自然のイメージがあり、気持ちを落ち着かせる色と言われています。
 

青の持つポジティブなイメージ

信頼、誠実、知性、さわやか、涼しさ
 

青の持つネガティブなイメージ

憂鬱、孤独、消極的、保守的
 

青を使ったウェブサイトの例

 

 
みずほフィナンシャルグループ(http://www.mizuho-fg.co.jp/index.html)
知性的で信頼感を持つ青色がウェブサイトに誠実性を加えています。
 
 

紫は二面性を持つ感性を刺激する色

 
紫は場面によってイメージが異なる色で、高貴さや神秘さがある一方、下劣なイメージも持ち合わせています。
 

紫の持つポジティブなイメージ

高貴、神秘、優雅、魅力
 

紫の持つネガティブなイメージ

不安、下品、欲、孤独
 

紫を使ったウェブサイトの例

 

 
メナード化粧品(http://www.menard.co.jp/)
化粧品の持つ魅力的なイメージを紫で醸し出しています。
 
 

茶色は調和や安心感を示す色

 
茶色は気や大地など雄大な自然の持つ安心感をもたらす色ですが、「汚れている」という印象をあたえることもあります。
 

茶色の持つポジティブなイメージ

安心感、穏やか、堅実、伝統
 

茶色の持つネガティブなイメージ

地味、眼光、汚い、退屈
 

茶色を使ったウェブサイトの例

 

 
ミスタードーナツ(http://www.misterdonut.jp/)
商品カラーに合わせていますが、穏やかさや安心感が伝わってくるウェブサイトです。
 
 

白は清潔感のあるまっさらな色

 
白は清潔感や信頼感といったクリーンなイメージを呼び起こし、また始まりを印象づける色です。
 

白の持つポジティブなイメージ

清潔、平和、正義、出発、純粋
 

白の持つネガティブなイメージ

冷淡、薄情、空虚、無意味
 

白を使ったウェブサイトの例

 

 
ソフトバンク(http://www.softbank.jp/)
清潔感があり、新たなスタートを切る意味合いを持つ白がよく映えています。
 
 

黒は高級感と重厚感のある影響が強い色

 
黒は重厚感や高級感があり気持ちを引き締める色と言われており、他の色への影響力を強く持っています。
 

黒の持つポジティブなイメージ

高級感、重厚感、威厳、自信、神秘
車の持つ重厚なイメージを黒で表現し、威厳を感じさせるウェブサイトです。
 

黒の持つネガティブなイメージ

絶望、孤独、不気味、沈黙
 

黒を使ったウェブサイトの例

 

 
マツダ(http://www.mazda.co.jp/)
車の重厚感や高級感がウェブサイトの黒から強く伝わってきます。
 
 

ボタンの色はコンバージョンするかどうかを決める重要な要素

 
色の持つ効果についてお伝えしてきましたが、ウェブサイト全体の色だけでなくボタンにもその効果は当てはまります。
特にユーザーのアクションを促す「購入」「申込み」「問い合わせ」「資料請求」などのコンバージョンボタンは、わずかな差であったとしても成約率が高くなる色を選択するべきです。
 
ボタンの色を変更するだけであればそこまで手間はかかりませんので、複数パターン用意してABテストを実施してみましょう。
今使用されているオリジナルパターンよりも成約率の高い色のパターンがあれば、オリジナルと差し替えて売上アップにつなげてください。
 
 

ボタンの色は何がいい？

 
よくアクションを促すためのボタンは「緑がいい」と言われますが、これは2009年にMozillaが発表した調査結果に基づいています。
 
MozillaはFirefoxのダウンロード数についてボタンの色でテストを行いました。
緑、青、紫、オレンジの4パターンで行われたテストでは、なんとダウンロード数に3倍以上もの差が生まれ、コンバージョン率も最も高くなりました。
 

参考：https://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/
 
この結果に対して、緑は安心感や成長(進歩)をイメージする色であるため、効果が出たのではないかと言われています。
 
しかし、だからといってあなたのウェブサイトでもボタンは緑にしたらいいかというとそういうわけではありません。
あくまでFirefoxのダウンロード数に対しては緑のボタンが最も効果的だった、というだけです。
 
そもそもボタンは目立つように配置しないとクリックを誘導できません。
ウェブサイトの色を考えると埋もれてしまうような場合は、他の色の方が効果を生むケースも十分考えられます。
 
そのため、重要なのはボタンの色もABテストすることです。
結局のところ、ボタンをクリックされるかどうか、コンバージョンに結びつくかどうかはユーザーに聞いた方が早く、そして確実です。

ボタンの色1つで成約率は変化しますので、最も効果的な色は何かを探るために、ぜひABテストを行ってください。
ちなみにグラッドキューブではオレンジの反応が最も高い、という結果が出ています。
 

 
もちろんこれもあくまで一例でしかないので、ご自身でウェブサイトにあった色を見つけてくださいね。
 
それでは次回をお楽しみに！