Webデザインにおける配色の重要性:色で共感を得るためには

Joe

Joe氏はMarvellousのコピーライターです。クリエイティブなコピーを書いていないときは、新しいSEOやコピーライティングの技術について、読んだり、調査したりシェアして過ごしています。

この記事はMarvellousからの翻訳転載です。配信元または著者の許可を得て配信しています。

Empathy in web design: How to stimulate emotions using colour

人の感情は「色」によって刺激されると言われています。ここでは、Webデザインにおいて色が重要である理由について考察していきます。

painting-draw-pencils-pens-watercolour-paint

どうしてWebデザインにおいて色は重要か

Webデザインにおける配色は大抵の場合、個人の好みに左右され、後から付け加えていくものという印象があります。もしプロダクトのディレクターがオレンジ好きなら、そのプロダクトのロゴはオレンジになるでしょう。

しかし色には見た目以上の効能があります。色には人を悲しくさせたり、信頼を構築したり、そしてブランドの精神を反映したりするはたらきがあります。

色の違いは何を意味するのか

graffiti-wall

特定の色は、人の感情に大きなインパクトを与えるような社会的な意味合いを持っています。特定の色が西洋社会でどのような意味合いを持っているか、幾つかの例を見ていきましょう。

赤は「若さ」「大胆さ」そして「熱意」と関連付けられます。 コカコーラ、任天堂、LEGO、Virgin、CanonそしてKellogg'sなどの世界最大級のブランドも赤いロゴを使用しています。

黄色く塗った部屋では赤ん坊が良く泣く、という都市伝説など、黄色にはたくさんの先入観がありますが、それ以上にこの色はたくさんの複雑で矛盾する意味合いを持っています。黄色は「危険性」と強く関連づけられますが(発電所のサインや、濡れた床のサインを思い浮かべてください)、同時に「活力」「前向きさ」「楽観性」を代表する色でもあります。

青はWebデザインでは人気のある色です。青は「平和」「穏やかさ」「静けさ」そして「信頼」(この記事で後ほど述べます)と強く関連づけられているからです。

緑は一般的に自然や地球保全と関連づけられます。例えば健康食品のブランドにとってこの色はうってつけです。緑は「健康」や「成長」、「栄養」といった概念に強く浸透しているからです。

白黒

Nike、PumaやAppleなどの色のないロゴは、「明晰さ」「中立性」「バランス」のイメージを想起させます。

写真がブランドの主な強みである時は(例えばイベント会社です)、白黒のロゴはピッタリです。白黒のロゴは、派手なロゴに比べ見る人の視線を奪うことがなく、写真に主張をまかせられるからです。

紫/ピンク

紫とピンクのロゴは「創造性」「空想力」や「若さ」と関連づけられます。この色は女性向けの製品に限定されません。ピンクと紫が女性のものであるという事は偏見であり、研究によって、青色がどちらの性別でも男女共通の「好きな色」であると宣言される一方で、どちらの性別もさほどピンクが好きではないという事がわかっています。

異文化での色の心理学

people-jogger-jogging-colors  

西洋側の目線で物を見る事は、時として簡単な事です。

しかし、東洋と西洋の境界線が曖昧になり、多くのブランドが大陸や文化にまたがるグローバルな展開を求める状況では、あるものが世界の他の場所でどのように異なって解釈されるのか、知っておく事は大事です。

例えば、白という色は西洋の視点では「純潔さ」「潔癖さ」そして「純粋さ」と関連づけられていますが、東洋の感覚では「苦悩」や、「悲嘆」「悲しみ」を表すところもあります。中東でも白は同じく「苦悩」の象徴で、西洋世界での黒と同様、「哀悼」を表すものとして認識されています。

色から想起する感覚に大きな違いがあるのは、西洋と東洋だけではありません。同じ大陸の中でも、一つの色合いについて様々な認識がある事があります。

イギリスでは黄色は一般的に「危険」「活気」「前向きさ」を意味する事ができますが、一方フランスでは「嫉妬」と結びつけられ、ギリシャでは「悲しみ」の色と考えられています。東洋では(ちょうど西洋での青のように)、黄色は男性の色と強く考えられています。 

色を使って信頼を構築する方法 

paypal   青色を使う事で信頼感を生み出す事が可能です。この事は金融サービスに関連するロゴマークやブランド(たとえば、PayPal、CitiBank、Barclays、RBS、VisaそしてBank of Americaなど)において、一般的に青色が用いられる理由の一つです。

青色は信頼、秩序、穏やかさと静けさの色です。青色はしばしば、平和的で穏やかなものとして描写されますが、それは海を連想させるからかもしれません。青色は安全や安心とも密接に結びつけられています。

Webデザインでうまく調和するカラーパレットをつくる方法

Screen-Shot-2016-04-19-at-16.46.15私たちはWebサイト用のカラースキームを考えるときに、Adobeのカラーホイールからインスピレーションを受けることがあります。Adobeのカラーホイールは相互にうまく調和する色の組み合わせを取り揃えています。

繊細なパステルトーンであれ、それともトロピカルで鮮やかな色彩の組み合わせであれ、Webサイトやブランドによってうまく調和する色の組み合わせを選ぶことができます。

毎日のインスピレーションのために、Google ChromeのPalettabプラグインもあります。このプラグインは新しいタブを開く度、新しいカラーパレットとフォントの組み合わせを提案してくれます。

賢く色を使う

あらゆるデザインと同じく、ルールは破られるためにあります。多くの人々が緑を自然と結びつけるからといって、必ずしも新しい健康食品店のブランディングには緑が最適であるというわけではありません。

色に紐付けられている伝統的な感情を覆すことは、目立ったり、業界内で頭を抜きん出て認知されるブランドとなる為の効果的な方法にもなります。

色が人にもたらす感情について、研究や調査に基づいて入念に考えられているのであれば、どのようなカラースキームでも有効で効果的な選択になりえるのです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて