WEBマーケティングにおける色彩心理学―使って便利なサイト4選大公開

色彩心理学

ヒトは、何かを見分けるとき、「色」を基準に識別することが多い。
読者の方も経験済みだろうが、店構えがコンビニエンスストアと理解できた時、その店が何かはぱっと見た時の看板の色合いで判断できる。
青ならローソンだし、グリーン+オレンジ・赤ならばセブンイレブン、グリーン+ブルーであればファミリーマートなど、一瞬で見分けがつく。
それだけ、色から得られる情報は多いのだ。

 

これは「与えられた情報」についての記述になるが、以後は「与える印象」について記してみたい。
ご存知の通り、サイトデザインには色彩面でも配慮が必要だ。
色の与えるイメージは、そのサイト(ひいては会社)の伝えたいメッセージと合致している必要があるからだ。

余談ではあるが、「青いライトが夜間の駅での飛び込み自殺を大幅に抑えた」事例というのをニュースで読んだ方もおられるだろう。
この例のように、色の与える心理的作用(色彩心理学)を知っておくことは、これから購入を考えてくれる人に大きな影響を与えると考えてよい。

 

1.色のイメージは文化圏によって異なる

色のもつ「意味」をまず考えてみたいと思う。
日本での色気=セクシーさを考えた時、一番に思いつくのが「ピンク」という色ではないだろうか。

これは、文化圏をまたぐと違うものとなる。
アメリカではブルーやレッド、フランスではホワイト、スペインではグリーンとされている。
同じものをイメージさせるにしても、文化的背景が異なれば受け取るメッセージは異なってしまうことに留意しよう。
海外を相手にWEBサイトを公開したいと考えている場合、この辺りに配慮できるスタッフを用意(または外注)した方がよさそうだ。

 

2.生理的な影響

以下、代表的な色合いを挙げてみる。

  • 赤を含む暖色系=アドレナリン放出により食欲増進などのように各種五感が研ぎ澄まされる(興奮状態)
  • 青を含む寒色系=落ち着きを司る神経伝達物質が分泌され、冷静な判断を導く(安心感)
  • 黄色を含むアクティブな色合い=エンドルフィンの分泌から、活動性を導き出す(明朗)
  • 白(無色を感じさせるもの)=緊張感を引き出す(冷たさ・孤独感)
  • 黒=存在感の強調による威圧感(高級感・圧倒的)

これら代表的な色が生理的な面に影響を与えるポイントが異なることを理解したうえで、サイトの基本色選びをしよう。
脳にダイレクトに働きかける部分であるだけに、サイトイメージとこの「生理的影響」は避けては通れない。

 

3.ターゲットに合わせた色選び

ターゲットに合わせた色選び

先の、色の生理的作用を理解した上で、「色の与えるイメージ」を考えてみよう。
特にサイトのベースカラーはサイトのイメージを大きくコントロールする部分でもあるので、慎重に選択してほしい。

3-1.オレンジ

赤と黄色のミックスである「オレンジ」は、アクティブでありながらもさほど警戒心を与えない万人受けする色合いだ。
これをうまく利用しているのが「クックパッド」「キューピーマスタード」「サントリー角ハイボール」のサイトだろう。
いずれのサイトも、誰にでも共通する「食」のコンテンツを取り扱うものだ。
食べ物を目の前にした時のワクワク感を演出しつつ、「誰でもどうぞ」という間口の広さを印象付ける。

3-2.青(ブルー)

「青」がテーマカラーとすべきなのは、さわやかさや知的さを印象付けたいサイトだろう。
Facebookや各種検索サイト、クラウドソーシングサイトなどでよく使用される安定感ある色と言えるのではないだろうか。
先の生理的影響の面からも冷静さを導き出すことがわかっているから、きちんとした真面目な印象も与えることが可能なのだ。
また、青空などの写真をバックに用いることで、伸びやかさをサイトに添えることもできるかもしれない。

3-3.緑(グリーン)

「緑」はどうだろうか。
もちろん「ナチュラル」「エコ」「天然・自然素材」を印象付けたいときに使用したい色だ。
疲れた時には緑を見ると良い、とさえ言われる色であるだけに、落ち着きや安心感を醸し出したい時に使うべき色であることは間違いない。
代表的な例としては、「ガーデニングのインナチュラル」「パナソニック・エコナビ特設サイト」「大林組・つながる生きもの特設サイト」「サントリー・壁面緑化ミドリエ」などが挙げられる。
近年の「エコブーム」に乗り、このグリーンを基調としたサイトが増えたと見る向きもあり、今後も生活に密着した商品を取り扱うサイトでは注目しておきたい色と言える。

3-4.赤(レッド)

「赤」は、トップページに強烈なメッセージを載せたい時に使用するとよい。
彩度・明度にもよるが、赤という色そのものが「興奮色」であることは間違いない。
そのため、商品自体に強烈なインパクトがあるようなものによく使用される。
「宝くじ公式サイト」「野村証券・ネットアンドコール」「ユニクロ・ヒートテック特設サイト」などがこの赤という色を上手く使いこなしていると言える。
宝くじも投資もギャンブルであると言え、やはり期待をさせる興奮色が必要だ。
ヒートテックならば、当然暖かさをイメージさせながら、「今ならこの値段」と赤文字で表示されるとついクリックしてしまいたくなる。

3-5.黒(ブラック)

「黒」は読者にどう映るだろう。
ベースカラーに使用すれば、商品を目立たせることが可能な万能色と言えるが、かなりヘビーな印象だ。
重厚なイメージが付きまとうため、商品を「高級そうに魅せる」効果が期待できる。
与える印象のキーワードとしては「質実剛健」「品質」「ドラマティック」などだろうか。
「ブルックス・ドリプレッソ」「ニコン・Df特設サイト」「カシオ・ProTrek特設サイト」などが黒を基調としたサイトとなっている。
いずれも商品を前面に押し出す美しい写真が効果的に用いられており、ベースの黒がその商品写真を際立たせている。
商品写真を目立たせる色であるだけに、商品写真を撮影するカメラマンの腕と、画像処理のテクニックが求められることも付け加えておく。

 

4.色が人の行動に与える影響

色が人の行動に与える影響

工事現場でよく使用される、「黄色×黒」のロープを見たことがあるだろう。
通称「トラロープ」と言われるものだが、これは実はかなり考え抜かれたカラーリングだ。
黄色という刺激の強い目立つ色に、黒という重厚で否定的な側面を持つ色を組み合わせることで「進入禁止」「接近注意」を強烈にアピールしている。
道路標識でもこの「黄色×黒」は、特に注意が必要な個所に利用されている組み合わせだ。
この黄色×黒の標識は「警戒標識」と呼ばれ、特に危険が予見される場所に設置される。

色によって危険性をアピールできるように、サイト内での色の使用方法は、ダイレクトに効果につなげることが可能だ。

4-1.コンバージョンにつなげるボタンは何色?

これは、サイトのベースカラーに影響されることから、ストレートに「何色」という事は難しい。
だが、目立つ色である必要は述べるまでもない。

だが、やはり「興奮色」「購買色」と呼ばれる、赤やオレンジに近い色が適していることは各種通販サイトを見ても明白だ。
「いざ、購入!」というタイミングで、クールダウンさせてしまうことは何としてでも避けたい。
また、同じ赤やオレンジでも、柔らかく弱い色調(明度が高いなど)であれば、ボタンそのものが目立たない可能性もある。

どうしても、サイトの色調設計上で柔らかい色を使わざるを得ない場合は、ボタンの周囲をぐるりと別色で囲むなどして目立たせる工夫が必須となる。
ベースカラーに埋もれないように、かつ悪目立ちしないような色設計が大切だ。

4-2.そのベースカラーはロゴを殺していないか

「ロゴは既に決まっているよ」という企業がほとんどだろう。
ロゴに使用する色は、やはりその会社のイメージを決めてしまう。
それに沿うようなサイトの色設計でなくてはならない。
最悪の場合、ロゴが発信するイメージと、サイトの発信するイメージが異なってしまい、サイトを見ることすら苦痛と感じてしまう色彩に敏感な人もいることだろう。

例えば、ロゴの色やサイトの色調が合致し、効果を出しているケースであっても、CI(コーポレート・アイデンティティ)やBI(ブランド・アイデンティティ)により再度ロゴを作り直すようなタイミングでは、サイトそのものも一新しなければならない。
そのロゴの色や会社・商品イメージを殺すような色設計であってはならないからだ。

大変手間と言わざるを得ない作業だが、上記で述べてきたように「色が与えるイメージ」「購買意識への影響」を考えると、たかが色、とは言っていられない。
せっかくCIやBIを実施するのだから、その意図をきちんとサイトでも表現しなくてはならない。
時にはサイト大改編、ともなるだろう。

 

5.カラーコーディネートに迷ったら

色が与える印象や効果を知ったところで、「じゃあ、実際にどう組み合わせれば良いの?」という所に話題は及ぶ。
確かに、Webサイトは単色では構成できない。
色の組み合わせのトータルで印象が決まるのだ。
サイトは、会社の顔であり、商品のイメージを決める。
この入り口部分の印象がよろしくないと、商品そのものさえ価値を落としてしまう。

実際にWebサイトのコーディングをする、ないしはデザインをする際に役立つサイトをいくつか紹介してみたい。

5-1.ウェブ配色ツール Ver2.0

http://www.color-fortuna.com/color_scheme_genelator2/

「カラーピッカー」でクリックした色を基本に、それに沿う配色(組み合わせ)を示してくれるサイト。
配色の明暗、色相差、ロゴ色指定などで、様々な組み合わせをシミュレーションできる。

全体像を把握した上で「これがいいだろう」と思える組み合わせができたなら、画像下に表れるテーマカラーや全体の背景、メニューといった主だった箇所の色を「♯」で始まるHexカラーコードとして表示してくれる。
簡易的に全体のバランスを見てみたいときには便利なサイトだ。
デザインの知識や経験がなくても、気軽にトライできるのがいいところと言える。

5-2.ColorSchemer

http://www.colorschemer.com/online.html

メインに据える色が既に決まっている際に利用してみたいサイト。
左上の「Current Color」に、RGBないしはHEXによる色指定をすると、それに合わせやすい色を15色紹介してくれる。
それぞれにRGBとHEXによるコードが現れるので、実際にサイトを変更する際も作業が早いかもしれない。

色紹介画面の中央下部にカラーピッカータイルもあり、この中からロゴカラーやテーマカラーに近いものを選べば、RGBやHEXの数値を指定しなくとも大方の組み合わせは理解できる。

5-3.Color Palette Generator

http://www.degraeve.com/color-palette/

画像がメインとなるページ特有の悩みとして、その写真に近い色を抽出するのに手間取ることが挙げられる。
いちいちカラーコードを作成することも面倒、更には多くの色を分析するとなると時間がかかって仕方がない。

こんなときは、このサイトを利用するのが最もスピーディだろう。
画像をどこかにアップロードし、その画像URLをこのサイトの「URL of image:」に入力すれば、その写真を構成している色をHEXコードで抽出してくれる。
すんなりと目に馴染む画像やサイトが見つかったら、このサイトを通して色の分析をしてみるのもいい。

5-4.和色大辞典

http://www.colordic.org/w/

特に「和テイスト」を意識したサイト作りに役立つサイト。
特別な機能こそないが、日本の伝統色の名称と、そのHEXコードを知ることができる。
好みの色が見つかれば、その部分をクリックすると、RGBの数値も表示される。
PhotoshopやIllstrator用スウォッチファイルをダウンロードすることもでき、デザイナーには便利なサイトかもしれない。

 

色はイメージ=トータルで設計することが必須

色彩心理学による「色の決め方」がとても大切なことは冒頭で述べた通りだ。

サイトの全体的なイメージを決定するテーマカラーや、ポイントポイントで配置すべきコンバージョンボタンにも配慮する必要がある事も理解できた。
色は、ヒトの脳裏に焼き付くものであり、またある種の行動を促すことができる。
サイトデザインで色が重視されるのはこのためだ。

  1. 色のイメージは文化圏によって異なる
    国をまたぐサイトを作成する場合は、発信する先の文化的背景もりかいしなければならない。
  2. 生理的な影響
    赤=興奮色・購買色
    青=冷静な判断・信頼感…。
    それぞれの色の持つ生理的反応も頭のどこかに入れておくべき。
  3. ターゲットに合わせた色選び
    サイトのベースカラーは、そのサイトのイメージを大きく変化させる。
    3-1.オレンジ
    アクティブ、親しみやすさ。
    食品を扱うサイトに多くみられる。
    3-2.青(ブルー)
    爽やかさ・安心感。
    各種検索サイトやSNSなどでよく見られる。
    3-3.緑(グリーン)
    ナチュラル・エコ・安心感。
    生活に密着した、安心・安全をアピールしたいときに用いたい。
    3-4.赤(レッド)
    商品自体に「特殊感」のある場合に用いる。
    または、アクティブなイメージを植え付けたい際にベースカラーとして使用する。
    3-5.黒(ブラック)
    商品の高級感を印象付けたい際に用いたいベースカラー。
    写真が目立つ分、写真の質や画像処理の腕が問われる。
  4. 色が人の行動に与える影響
    「トラロープ」に見られる黄色×黒は危険なイメージを抱かせる。
    色には間違いなく、人に何らかの行動を取らせる力がある。
    4-1.コンバージョンにつなげるボタンは何色?
    通販サイトでは「興奮色」「購入色」である暖色系のボタンが多用されている。
    ベースカラーに埋もれないような色設計が大切。
    4-2.そのベースカラーはロゴを殺していないか
    会社のロゴを入れ込む場合は、それに合わせた色設計が必須。
    ロゴの色と、サイトの色が殺し合っていないか、統一感があるかを再度チェック。
  5. カラーコーディネートに迷ったら
    サイトの配色は、色の組み合わせが命。
    5-1.ウェブ配色ツール Ver2.0
    カラーピッカーで選んだ色に馴染む色を、架空のブログでシミュレーション。
    5-2.ColorSchemer
    メインの色が決まっている時に、それに馴染む色を選びたいときに使うべきサイト。
    5-3.Color Palette Generator
    ある画像を構成する色をピックアップし、カラーコードを調べられるサイト。
    5-4.和色大辞典
    日本の伝統色の「和名」とHEX、RGBコードを調べることができるサイト。

 

上記の便利なサイトも用いながら、会社の顔、商品の顔となるWebページのカラーリングにチャレンジしてほしい。

世代によって好まれる色合いも変化してくる。
そのため、同じ商品を取り扱うサイトであっても「ターゲット層」を変えたWebページを複数作るのであれば、テキスト(文章)のみならず色合いも変化させたい。
それだけ、色が人の脳に与える影響はとても大きいのだ。