Pick Up! 色彩心理

【徹底解説】色がもつ効果とデザイン例 11選

投稿日:

デザインに欠かせない「色」。「なんとなく赤が目立つから」、「なんとなく青がキレイだから」そんな理由でデザインに使う色を決めていませんか?それぞれの色が持つ効果やイメージを知っておくと、デザインの説得力が増し、意図のあるデザインをつくることができます。

今回は色のもつ効果とイメージをご紹介します。日々のデザインのヒントにお使いください。

 

赤-RED-

 

情熱|強さ|活動的|力強さ|おめでたい|興奮|怒り|停まる|刺激|生命力

 

 

「赤」の効果

赤は、「積極・行動力・活力・興奮」といった力強いイメージを与えます。また、信号やパトカーといった、注意や危険を表すサインとして活用されています。
血液や肉の色であるため「命を表す色」ともいわれています。そのため人間は本能的に赤に反応する傾向があり、例えば食欲や性欲といった人間が持つ本能を刺激することができます。

 

広告領域での「赤」

広告領域では、強調するときや注意を向けたい時などに活用されます。
本能を刺激する特性から、イベント、セール・特売など消費者に行動を起こさせたい場面で多く活用されています。

また、女性的なイメージを直感的に伝える事や、明度を変えることにより高級感や華やかさを演出することができます。

 

「赤」を活用したWeb広告・サイトデザイン

SK-Ⅱ
暗めの赤を使用して、高級感のある華やかな女性のイメージを醸成していると考えられます。
SK-Ⅱ以外にも、女性向け化粧品ではパッケージやロゴなどに多く使用されています。

 

楽天
サイトを訪れるユーザーに購買を促すため、キャッチやキャンペーンの告知など様々な場面で赤が活用されています。
ロゴや楽天イーグルスの赤は、別名「クリムゾン」と呼ばれています。

 

 

ピンク-PINK-

 

可愛らしい|安らぎ|優しい|温厚|幸福|ロマンティック|若さ|甘さ|やわらかさ

 

 

「ピンク」の効果

ピンクは人を和ませ、優しい気持ちにしてくれる色です。そのため、人に非常に良い印象を与える色です。人の興奮や攻撃性を弱める効果があることから、海外の刑務所では壁をピンク色に塗ることも多いそうです。
恋愛、若さ、美容、愛情などを表現する際に好んで使用される色です。

 

広告領域での「ピンク」

緊張を和らげる効果があり、柔らかさを視覚的に訴えることができます。
また、桜の季節を連想させるので春のキャンペーンにもよく使用されています。
「女性」をイメージさせる色でもあるために、「男性」をイメージさせるブルーと合わせると、自然な配色になり男女関係なく好まれる演出ができます。

 

「ピンク」を活用したWeb広告・サイトデザイン

Beats
オーディオブランドのBeatsのバナーです。ピンクはギフト商品との相性が非常に良い色です。
「ギフト」という切り口での広告で、ヘッドフォンにギフトを想起させるリボンが絡みついたデザインになっています。
ピンクだけでなく、黒を配色させることで、男女でもクリックしたくなる効果をあげています。

Evian
水=ブルーというデザインではなく、ピンクを使うことで親しみやすさと個性を打ち出したデザインになっています。

 

 

 

オレンジ-ORANGE-

 

活発|太陽|暖かさ|健康|ぬくもり|にぎやかさ|フレッシュ

 

 

「オレンジ」の効果

エネルギーと解放間を与えてくれる色で、人をポジティブにしてくれる色です。赤と黄色のイメージの中間にあります。また食欲を増進させてくれる効果もあります。

 

広告領域での「オレンジ」

ポジティブな印象を与えたいときに効果を発揮します。また、オレンジは年齢・性別関係なく、万人受けしやすい特徴もあります。
アクセントカラーとして用いることも非常に効果的です。全体のバランスを明るく統一させることができる色です。

 

「オレンジ」を活用したWeb広告・サイトデザイン

KAGOME(野菜ジュース つぶより野菜)
オレンジは健康的な色で、人を元気にするカラーです。
そのため、毎日口にする食品や飲料品に積極的に採用されています。
このKAGOMEの野菜ジュースは、写真のインパクトとオレンジの補色であるグリーンを適度に使うことで、健康的で美味しそうなイメージを表現しています。

 

au
auのカラーといえば、オレンジというのは誰もが持っているイメージでしょう。
しかしauのWebサイトではオレンジを全面に押し出すことはせずにアクセントカラーとして適度に使用しています。
そのため、オレンジが示す文字やデザインの訴求効果が非常に高くなっています。

 

 

黄色-YELLOW-

 

光|活動的|軽快|エネルギー|希望|明るさ|月|注意

 

 

「黄色」の効果

「光」や「太陽」のイメージを与える、有彩色でも一番明るい色です。集中力や判断力、記憶力を高める効果があるとされている色で、人を明るくしてくれるポジティブなカラーといえます。また人が緊張してしまっているときなどに、気持ちを和らげる効果があります。

 

広告領域での「黄色」

広告は、人の目をひくことが重要です。黄色はその目的に積極的に使用したい色です。
赤や白と相性が良く、視覚的に広告効果を高めることができます。
シチュエーションとしては、注意・危険をあらわす、子どもをイメージさせる、コミュニケーションを良好にさせる、などに使えます。

 

「黄色」を活用したWeb広告・サイトデザイン

バニラエア
黄色と補色である彩度の高いブルーを使うことで全体的にもまとまりのあるデザインです。
バニラエアのサイトと同じ配色のため、クリック遷移しても違和感がありません。
リゾートを想起させるイラストを配置しており、旅行に行く楽しさを表現しています。

 

LEGO
子ども用の商品と黄色は、非常に相性の良い組み合わせです。
LEGOのロゴは赤色ですが、Webデザインには黄色を全面的に配色しています。
赤と黄色は子どもが好む色であり、商品に親しみを与えている広告になっています。

 

 

緑-GREEN-

 

自然|新鮮|さわやか|健康|森林|安全|平和|リフレッシュ|癒し

 

 

「緑」の効果

癒しやリラックス、人の気持ちを落ち着かせるという心理効果があります。かつて自殺の名所であったイギリスのある黒色の橋の色を緑色に塗り替えたところ、自殺者が激減したという事例があります。

 

広告領域での「緑」

安心や信頼が重要な企業や、自然や環境に配慮する企業のコーポレートカラーに使用されることも多く、その類の広告でよく使用されます。
健康や成長という印象を与えることができるため、健康食品の広告にも使われます。
また、緑は青と黄色と混ぜた中間色のため、周辺の色と調和しやすい特徴があり非常に使い勝手のいい色です。

 

「緑」を活用したWeb広告・サイトデザイン

ヘルシア緑茶
健康と若々しさをイメージさせるために緑を全面的に使用したカラーリングをしています。
ポイントとしては、2つ。
まず、緑でも背景の緑と文字部分と下部に濃い緑と使用して使い分けをしていること。
もう一つは、緑の補色である赤を最も訴求したい部分に配置しバランスを保っていることです。
赤と黄色を配色する場合には、それぞれ主張が強い色で難しいのですが、このバナーでは緑によって調和しており統一感があります。

 

LINEモバイル
LINEのカラーといえばこの緑が定着しています。やや黄緑に近い彩度の高いコーポレートカラーは元気さと快適さを訴求することに成功しました。
LINEもモバイルでも、すでにLINEアプリで浸透しているカラーを使うことで、その親しみやすさを感じさせています。

 

 

青-BLUE-

 

クリア|爽快|清潔|清涼|水|空|海|落ち着き|静寂|信頼

 

 

「青」の効果

血圧や心拍数を下げ気持ちを落ち着かせ集中力を増加させる心理効果があります。野球のキャッチャーは青いミットを使うのが良いとうい話をテレビで見たことはありませんか?これは、ピッチャーが投げる際に見るキャッチャーミットを青にすることで、ピッチャーの集中力が増し良い投球に繋がるからです。

 

広告領域での「青」

青は爽やかさや誠実さ、知的なイメージを醸成したい際に活用されます。
明るめの青では、夏の青空や海といった爽やかで涼しげなイメージを醸成することができます。
反対に、暗めの青をで寂しい感じを演出しターゲットに対して不安感や悲しさを抱かせるといった、ネガティブな軸での訴求を行うこともできます。

 

「青」を活用したWeb広告・サイトデザイン

ファブリーズ
除菌・消臭効果のあるファブリーズだけに、使用後の爽やかさや爽快感を演出するため、背景の青空や、バクダンのテキスト、CTAのテキストなど様々な青が活用されています。
ファブリーズのロゴ自体も青です。

 

メットライフ生命
ロゴをはじめサイトの各所で青を活用して、誠実さや知的さが醸成されています。イメージを大切にしたい保険業界では、メットライフ生命以外にもアクサダイレクト生命、アフラック、といった大手複数社で、青をコーポレートカラーやサイトで活用しています。

 

 

 

紫-PURPLE

 

優雅|上品|神秘|古典的|伝統|知性|気品|ロマンス|ミステリアス|エキゾチック

 

 

「紫」の効果

高貴な色であり、スピリチュアルのイメージカラーでもあります。そのため、セラピストなどが好んで使う色で古くから宗教的な色としても使われてきました。
しかし、ネガティブなイメージもある色で、病的な印象や異常な精神状態をあらわす色でもあります。

 

広告領域での「紫」

触覚を想起させる色という特徴もあるため、手で触る商品などで使うとその効果を発揮できます。
人の心にある悲しみや怒りという感情を癒す効果があります。そのため、そういった関連の商品の広告には積極的に使いましょう。
色の組み合わせとしては補色の黄色と非常に相性が良く、視認性を高める効果もあります。

 

「紫」を活用したWeb広告・サイトデザイン

NIKAWA
京都にあるジュエリーブランド「NIWAKA」のバナーです。
世界的にも知られるハイブランドであり、その高貴さを背景のパープルが見事に演出しています。

 

SIGNAL
仮想通貨市場情報プラットフォームのウェブサイトです。
世界・宇宙・AI・ビッグデータ・ITというキーワードを連想させるサイト構成になっており、黒をベースにアクセントカラーとしてパープルを活用しています。
画面は全体的に暗いのですがそのことにより、彩度の高いパープルが一層際立っています。

 

 

茶色-BROWN-

 

ぬくもり|安定|素朴|落ち着き|質素|堅実|静けさ|アンティーク

 

 

「ブラウン」の効果

や土、大地などの自然を感じさせる色です。そのため、緊張を緩和し安定しているという印象を与えてくれます。やや大人のイメージを持っており、伝統や歴史を感じさせる効果がある色です。
効率を上げる効果があり、地道な作業などをするときには、着実に進める力を与えてくれます。

 

広告領域での「ブラウン」

ブラウンは冒険心を抑制し、伝統と歴史、安定感と繋がりを与える色です。
そういった印象を与えたい広告にとっては最適な効果を発揮できます。
補色のダークブルー系と相性が良く、組み合わせることで大人らしい高級感を演出できます。

 

「ブラウン」を活用したWeb広告・サイトデザイン

コカ・コーラ(コカ・コーラ コーヒープラス)
コカ・コーラとコーヒーという一見ミスマッチにも感じる組み合わせの商品です。
仕事中や休憩時の気分転換などで飲む大人をマーケットとした飲料であり、広告も大人向けに仕上がっています。
ブラウンの背景とコーヒー豆、コカ・コーラの赤が食欲を刺激するカラーとなっています。

 

パティスリー和三郎
パティスリー和三郎は山梨県の古名屋ホテルに隣接する、伝統のあるパティスリーです。
店内もブラウンで配色され、サイトもアールデコの雰囲気があり現代のお洒落さと伝統を感じさせるものになっています。

 

 

黒-BLACK-

 

重厚感|力強さ|都会的|モダン|気品|厳粛|高級

 

 

「ブラック」の効果

黒は無彩色で光を反射せず、全ての色を吸収、遮断する効果を持った特殊な色です。「強さ」「権威」という印象と神秘的な雰囲気を与える色です。
しかし、他の色に比べて負のイメージがあり「不吉」や「死」「恐怖」「不安」というマイナスなイメージを与える色でもあります。

 

広告領域での「ブラック」

黒は広告においては非常に重要な色です。例えば枠で囲まれた中のものを浮き出す「額縁効果」を持つ色で、収縮、後退の効果もあります。そのため黒と一緒に配置された他の色は前面に見えるのです。
その特徴のため、有彩色を最も効果的に引き立てる色といえます。

 

「ブラック」を活用したWeb広告・サイトデザイン

オールドパー
高級ウィスキーのオールドパーのバナーです。明治時代から日本のリーダーに愛されてきたウィスキーだけに、気軽に飲める値段の商品ではありません。
黒を背景にすることでその商品の高級感と文字の意志の強さがしっかり伝わってきます。

 

NIKEiD.GENERATOR
NIKEiDはNIKEのスニーカーを自分の好きなカラーにカスタマイズできる商品です。
そのフラッグシップ店舗としてのウェブサイトですが、黒を背景にし、「どこにもないカラーをつくろう」というキャッチコピーをつけることで、その商品のカラフルさと自由にコーディネートできる楽しさを伝えています。

 

 

灰色-GRAY-

 

中立|協調性|洗練|シャープ|落ち着き|信頼

 

 

「グレー」の効果

白と黒の両方の性質を持っている色で、落ち着いた印象を与える効果があります。やや地味な印象を受ける色でもありますが、都会的でハイセンス、上品で洗練されたイメージもあります。
苛立ちや疲れなどのストレスを和らげる効果もあります。

 

広告領域での「グレー」

グレーは主役にも脇役にもなれる「万能色」です。
ブルーなどの寒色系の色と合わせるとスマートで引き締まった印象になり、オレンジなどの暖色系の色と合わせると落ち着いた印象になります。
日本では江戸時代にこの色が大流行しており、微妙な色の違いによりグレー系統の和名がたくさん生まれました。日本の伝統色として好まれ、日本人は「粋な色」として認識されています。

 

「グレー」を活用したWeb広告・サイトデザイン

SONY(wena)
SONYのハイブリッド型スマートウォッチ、wena wristのバナーは、グレーの背景に商品を合わせることで高級感を感じさせます。
スマートフォンと連動させるなどの未来を感じさせる機能を写真だけで伝え、文字は最小限でおさめられています。
赤をアクセントカラーで配置させ、全体的にもまとまりを感じさせます。

 

BE PROUD
歯科界にマーケットを絞ったホームページ作成、経営コンサルティングを行っているBE PROUDのWebクリエイティブです。
グレーをベースに水墨画で描かれた戦国武将を素材として配置しており、華やかではないのに、鮮烈な印象を与える作品になっています。その意志の強さと力強さが全面的に押し出されています。

 

 

白-WHITE-

 

クリーン|清楚|清潔|純粋|完璧|無垢|シンプル

 

 

「ホワイト」の効果

無彩色であり、光を反射する最も明るい色です。清潔なイメージがあるこの色は、他の色を引き立てる役割があります。神聖なイメージがあり、純粋さや希望、厳粛さを与える色です。

 

広告領域での「ホワイト」

白は、清潔なイメージを持っていることから身の回りにある日用品などの広告に多く取り入れられています。病院や介護施設などを象徴するイメージもあり、コーポレーカラーなどでも多く使われています。
バナーやウェブ上においては基本的には白を背景とするため、紙媒体の白の使い方と違い、他の色との組み合わせが必要になるでしょう。

 

「ホワイト」を活用したWeb広告・サイトデザイン

DODA
転職情報サイトのDODAのバナーです。背景を真っ白にして「新しいスタート」を表現しています。
ブルーをアクセントカラーに使い、ビジネスの雰囲気を演出しています。

 

松竹芸能オンラインストア
お笑いタレントを数多く輩出している松竹芸能のグッズを販売しているオンラインストアです
エンターテインメント業界ということで、サイトも非常に多くのギミックがあり、見ている側を退屈させません。
様々な要素がありながら白を基調としているために統一感を感じます。

 

 

 

  • この記事を書いた人
  • 最新記事

宮田 あゆみ(Web行動心理学研究所 編集部)

Webディレクター・マーケター・ライター
2018年に株式会社インフォデックスに入社。 Web行動心理学研究所の編集部としてライティング・マーケティング・PRを行いながら、WEB広告・LP・サイト等数々のディレクションも担当している。

-Pick Up!, 色彩心理

Copyright© Web行動心理学研究所 - by infodex co. , 2019 All Rights Reserved.