Web行動心理学研究所 - Powered by infodex co.

Web行動心理学研究所は、ディスプレイ広告のパフォーマンスを向上させるため、株式会社インフォデックスが外部有識者の皆さんと共に運営している研究チームです。 ユーザーがWeb広告と接触して反応する際の「行動心理」について、基礎的な研究やテスト配信に基づいたデータの蓄積~公開を行っています。 ブログでは、マーケティングや広告制作に活用できそうな行動心理の紹介や、行動心理を適用したバナーを実際に広告配信をして広告効果を検証したレポートなどを掲載しています。

ユーザーの感情を引き出す色でWebサイトをデザインしよう!


株式会社インフォデックス"


色が人の心に与える影響をご存知ですか? 色には、それだけでメッセージを伝えたり、イメージを喚起したりするパワーがあります。

自社のWebサイトや広告を製作する際、「色の発信力」を考慮することで、ユーザーへのメッセージが何倍も伝わりやすく、反応も上がることがあるのです。
そこで、街で見かける「色の効果事例」や「カラー戦略事例」をご紹介します。そこから、なぜあのサイトは人気なのか、なぜ、クリックしてしまうのか、など色が与える心理効果が見えてきます。

ユーザーは看板カラーに「感情的に」引き寄せられている

株式会社インフォデックス"

街でみる看板は、色だけでもメッセージや個性、ポジションを表しています。Webサイトも同様。メインに使用するカラーは、ユーザーに何かを伝え、それを見たユーザーも無意識のうちに反応しています。Webサイトや広告をデザインする時は、ユーザーに「どう思ってもらいたいか」を明確にしてから、それに合ったカラーを選ぶようにしましょう。

まず、基本色である「赤・青・黄・緑」の役割と、人に与える影響を見てみます。

「赤」

注目度を上げるには最適な色。人目を引き、鮮やかで情熱的な印象を与えるので、人を興奮状態にする効果があり、衝動買いを誘います。(使用例:バーゲンセールのPOP)

「青」

目立つ色ですが、その効果は「赤」とは逆で、気分をクールダウンさせるパワーがあります。人の感情を落ち着かせ、冷静な判断、思考を引き出します。(使用例:銀行、教育機関、保険)

「緑」

「癒し」「安心」「安全」など、気持ちを安らかにする効果あります。周囲に溶け込みやすい色なので目立たず、強い印象を残さない、という面もあります。(使用例:薬局、クリニック、リラクゼーション)

「黄」

「赤」と同様目立つ色ですが、イメージは軽く、「明朗・快活・若さ・安さ」などを表します。高級感や信頼性につながる色ではないので、使うときは注意が必要です。(使用例:ディスカウントショップ)



人は、カラーと実態がピッタリ合っていると安心してその場を過ごせるものです。赤や黄の病院では落ち着かないですよね。インターネットの場合も同様です。ユーザーにその場で感じてもらいたい感情をカラーで演出してください。その色を見せることで、ユーザーは感情的に反応し、レスポンスにつながるのです。

カラーの組合せが伝える業界別メッセージ4パターン

では、上記のようなメッセージを持った色たちを、実際にどのようにWebデザインとして活用していけばいいかを考えていきましょう。

Webサイトで表現したいこと、ユーザーに感じてもらいたい感情は何でしょうか? ターゲット層のイメージ、商品のイメージなどさまざまなものがあると思われます。Webデザインに使用するカラーも同様、複数の色を組み合せることで、複数のメッセージを表現できるのです。

実際に、どのような色の組み合せでどのような心理効果があるのか、事例を見てみましょう。


1.赤+黄=手軽に食欲を満たす! 若者や子供が集まる場
人を興奮させる「赤」と軽さ、若さを表す「黄」の組み合せは、食欲を刺激し、手軽に楽しめる場を表現しています。マクドナルドなどファストフード店に見られる配色です。


2.赤+白=食欲と清潔感、女性が長居したくなる場
同じ「赤」でも「白」と組み合わせれば、ピンク色を連想させ女性が安心するイメージになります。「白」の清潔感効果で落ち着きが増し、女性が長居したくなるレストランやカフェ、雑貨ショップなどに見られます。


3.青+黄=知性を手軽に楽しむ場
「青」と「黄」の看板で目立っているのが、中古本販売のBOOKOFFです。まさに知性の「青」と、安さの「黄」を組み合わせたカラー配色が印象に残りますね。


4.緑+白=癒される場、安心で清潔な場
「緑」と「白」の組み合せと言えば、病院やクリニック。病院は、消費者から見れば「痛み」を連想する場所であるため、抵抗を和らげる癒しカラーの「緑」に、信頼と清潔感をイメージさせる「白」が合う場なのです。

化粧品も、スーパーも、ネット通販ショップも、カラーで価格帯をアピールできる

株式会社インフォデックス"

このようにカラーには一定のイメージがあるため、組み合わせ方で価格ランクも表現できるようになります。
同じ業界内や同じ商品でも、メインカラーで他社と差別化すれば、自社のポジションをアピールでき、自社商品にマッチしたユーザーを集められます。

価格帯別メインカラー例


・低価格帯、手軽感
「黄」を多く見せて目立たせる。(例:マツモトキヨシ、ドン・キホーテ)

・中間の価格帯
「赤」と「白」の組み合わせ。赤に黒を加え落ち着いた赤色にするほど、高級な印象に近づきます。(例:楽天市場、イオン、成城石井)

・重厚感、高級感
「黒」「金」「銀」「紫」を背景やアクセントカラーとして効かせる。(例:メルセデスベンツ、イヴ・サンローラン)



どのような価格帯のWebショップで購入したかは、ユーザーの満足度につながります。ターゲットが満足する雰囲気を演出していきましょう。
ユーザーの心を動かす色の世界をつくろう

色は、人の心にストレートに影響を与えるため、印象を一瞬で左右し、その後の行動を決定します。色の影響力は、商品の売れ行きを変えてしまうほど強いものです。Webサイトも、カラーの意味を意識してデザインするだけで、コンバージョンを大きく改善できるでしょう。






参考:ビジネスに役立つ 使える!色彩の教科書 芳原信著/洋泉社