「より効果を上げるための色の選び方」 色彩心理学からのWEBアプローチ

2020.07.20

こんにちは。ファインピクサースタッフの高橋です。
私は心理学を学んできたのですが、WEBサイトの制作に関わる中で活用できることが多いことに気付きます。

そこで今回は「色」に注目してお話しします。

色の影響

人にはそれぞれ好みの色がありますよね？

好きな色を見たり、好きな色の服を着たりすることで、気分が良くなったりいつもより元気になったりする経験が誰にでもあるのではないでしょうか。
つまり色は私たちの感情や行動に少ながらず影響を与えるものと言ってよいでしょう。

このような色の影響について研究した学問に「色彩心理学」があります。

色彩心理学（Color psychology）とは…
色彩心理学は、人間の行動の決定要因としての色相の研究です。
色は、食べ物の味など、明確ではない認識に影響を与えます。
色は、人々に特定の感情を引き起こす可能性がある性質を持っています。

出典：Wikipedia:Color psychology

この色彩心理学はすでに多くのブランドのロゴや商品の開発や、交通標識や照明などにも取り入れられています。

スーパー等の小売店・eコマースサイトを思い浮かべてみてください。
特別な割引商品や値下げを強調する商品についているPOPの色はどんな色が使われているでしょうか？

そう赤や黄色が多いですね。なぜでしょう？
これは簡単です、赤や黄色は目立ちやすく注意を喚起しやすい。

色彩心理学では赤は興奮をさせ行動的にさせるイメージや覚醒感につながるイメージを持つと言われ購買色とも言われていますし、黄色は希望やにぎやかさをイメージさせます。
他の商品との違いを目立たせるだけでなく、特別な価格であることを主張するのに赤や黄色は効果的だと言えるでしょう。

このように色には固有の意味やイメージがあり、それをうまく活用してサイト内に配置することでより効果を上げることができます。

ここにいくつか代表的な色と色彩心理学での意味をまとめてみました。

しかし、色にはポジティブなイメージばかりだけではないので、注意も必要です。
使い方によっては効果を得られないばかりか、逆効果になってしまうこともあります。

色の効果と効果的な配色のポイント

想像してみましょう。
派手な赤いPOPだらけの店…ちょっとうるさいですね。

しかもどれが本当に安いのか良いものなのか、注目するべき商品もわかりにくくなってしまいます。
結果、売り手側が売りたいものは売れず、お客様は疲れてしまう。
赤という興奮色は多用するされると疲労を感じやすく、黄色のにぎやかさはうるささに感じられてしまう。
これでは逆効果です。
全体のブランドイメージを損ねてしまうことにもなりかねません。

では、WEBサイトにおいては、どのような場所にどのような色の配置がより効果を上げられるのでしょうか？
まず簡単に実践できるポイントは、行動を起こさせたいポイントを絞って配色を考えること。

お問い合わせに繋げたいのであれば「お問い合わせ」へのリンクやバナー、購入を促したい商品であれば「購入」ボタン等には、能動的なイメージを持つ色を配置するのが良いでしょう。

もちろん色だけでなく、能動的な色へと変化する動きのあるバナーなどを配置することもより効果を上げる良い方法だと言えます。

次にWEBサイトの内容とサイトカラーがマッチしているかチェックしてみましょう。
例えば健康食品を販売するサイトを作るとしましょう。

何色をサイトカラーとしたら良いでしょうか。

販売する商品が売れるように赤？黄色？あまりオススメできません。
健康や安全をイメージするには緑や青といったカラーイメージがオススメです。
全体の基調を緑にしつつ重要な内容や行動を促す部分には適切にオレンジなどを配色していくのが効果的でしょう。

このようにサイトカラーやブランドイメージと色とのマッチングを考えられたサイトは、ファーストビューでPVを損ねることが少なく、その後のサイト内での遷移も有効に導くことができます。

この配色バランスについては、多くのプロのデザイナーは経験的に色彩心理学の応用的な感覚を身につけているので驚きですね。
やはり総合的な色のバランスや配置については経験あるデザイナーに相談するのが、一番の近道と言えるでしょう。

今のサイトのイメージに問題を感じている、もしくはなかなか結果に繋がらないお悩みをお持ちの場合は、ぜひご相談ください。>> ご相談はコチラ

今回は色彩心理学的なお話しでしたが、心理学的な視野に立つとマーケティング的な視野やWEBサイトの展開などまだまだ面白い見方ができます。いずれまたお話しさせていただきます。