すみません、目次が超絶長いです。
Webデザインのネクストステップは心理学だと思います。
広義で言う「Webデザイナー」はだいたいコーディングができて、ソフトウェアで画像をいじれてWebサイトのレイアウトができて…といったところかと思いますが、コーディングなんてできなくてもWebサイトは作れますし、専門的に勉強している僕らの何が長けているかって、
「ここをこうすることにより、こんな効果が見込める」
「これをこうするのにはこんな意図があって、それはこれを表現してる”」
というノウハウ的な部分だと思います。
なのでメモのために色彩心理学、色が成し得る効果についてメモします。
Webデザインのネクストステップは「色彩心理学」。その理由
物言わぬ「商品」やWebサイトが何かを伝えることができる唯一の手段である「外観」
実はかなり影響を与えています。
調査対象のうち85%が、物を購入する時に「色」を第一の理由としており、93%の人はビジュアルをちゃんと見ています。
さらにそれらは最初の90秒以内に無意識のうちに判断され、62%~90%が色のみに基づいているそうです。
退店後、美的観点の問題で店に戻らなかった人は約半数、52%もいます。
コレは無視できませんね
元記事:http://www.shopify.com/blog/14254569-why-all-sale-signs-are-red-the-science-of-color-in-retail
色が与える影響とは
- 心理的な影響
- 暗記力、回想力、認識力を増す。
- 理解、学習、誘導が出来る
- 生理的な影響
- 神経に影響を与える。
- 明るい赤は交感神経系に刺激を与えるので、血圧を上げる効果が見込める
- 青や緑はリラックスさせる生理作用がある など
- 感情的な影響
- 色によって幸せがイメージできたり、その逆で悲しみをイメージできたりする
- 文化的な影響
- 西洋文化では黒が”死”を象徴するが東洋文化では白が”死”を象徴する
色により、ブランドを「誠実」「興奮」「適切」「洗練」「丈夫さ」に分類できる
心理学者で米スタンフォード大学教授であるJennifer Aaker氏の論文で、ブランドイメージとカラーが一致していることの重要性を説いています。
例えば、「ハードでクールなイメージのない、『ピンク色のハーレーダビッドソン（バイク）』を購入するか？」もちろん、NOである。と言った具合です。
そのプロダクトにとって何のカラーが適切か明確なガイドラインはありませんが、カラーがブランドと一致し、説得する役割を果たすことが重要です。
新しいブランドである場合、イメージの強い競合が持つカラーと違うカラーにブランドカラーを設定することで差別化が図れますがその際は気を付けること。
消費者が好む色は？
消費者の多くは、類似色からなるカラーパターンや、アクセント色とのコントラストが強い配色を好むとされています。
活発な補色を用いることがコンバージョンを誘発する手段というのは研究からも裏付けられているそうです。
上の図はどちらもカラーコーディネート的に違和感はありませんが、右の赤いボタンのページのほうが21%もコンバージョン率が高いそうです。（=隔離効果 によるもの）
確かに違和感はないのですが、周囲に、左の図の緑ボタンと同じ色相の要素が多いように感じます。
彩度でボタンを際立たせていますが、調和してしまうのは免れないようです。
参照元記事:The Psychology of Color in Marketing and Branding
日常で色にどんな影響を受けているのか？
色別に分類した図が、上のものです。
実際に書き出してみると、「あぁ、なるほど」ですよね。
既に影響を受けている経験があるからです。
色が持つ影響（色の錯覚）について
明度対比
周りにある色の影響を受けて、対象の色が本来よりも暗く見えたり明るく見えたりすること。
彩度対比
背景と対象を比べ、背景の色の彩度の影響で対象の彩度が高く見えたり低く見えたりすること。
彩度の低い背景に、同じ色相で背景より彩度の高い色を置くと対象の彩度は本来よりも高く見える。
逆に、彩度の高い背景に、同じ色相で彩度の低い色を置くと対象の彩度は本来よりも低く見える。
明度対比と似たような現象。
色相対比
隣接する色どうしが影響して、色相がすこしズレて（若干違う色に）見えること。
左と右の図の中心のオレンジは同じ色だが、Aは背景の色が影響し、中心のオレンジが若干黄色が強く見える。
補色対比
補色同士を隣接させることで、お互いの彩度が増したように見えること。
2色感の明度差が少ないほど、効果が大きい。
AとBの緑は同じ色だが、Aは左に補色である紫があるために、影響を受けて、Bの緑よりも彩度が高く見える。
縁辺対比
色が隣り合わせるその境目で、隣の色の影響を受けてギリギリの”縁”が明るく見えること。
膨張色/収縮色
黒い服を着ると引き締まって見え、白を着ると太って見える。
また、肌の色も明度対比を起こすので、黒を着ると反対に肌の色は明るく見え、白を着ると肌の色はくすんで見える。
進出色・後退色
同じ平面に存在しても、突出して見える色、奥にあるように見える色のこと。
赤・オレンジ・黄色など暖色系が進出色。
青・青紫・青緑など寒色が後退色。
色の面積効果
同じ色を、小さな面積と大きな面積で見比べた場合、色みや明るさに差が出ているように見えること。
明るい色は大きな面積の場合のほうが、いっそう明るく見える。
暗い色は面積が大きい場合のほうが、いっそう暗く見える。
家具や布生地のカラーサンプルと実物を比べた場合など、これに当てはまる。
同化現象
色相の同化
背景色が、柄の影響を受けて、柄の色相に偏って見えること。
AとBは同じ背景色。上に乗せている柄の色が青か赤の違いで、背景色も若干柄の色に近く見える
明度の同化
背景色が、柄の影響を受けて、柄の明るさに偏って見えること。
AとBは同じ背景色。上に乗せている柄の影響で、背景が、Aは明るく、Bは暗く見える
彩度の同化
背景色が、柄の影響を受けて、柄の彩度に偏ってハッキリした色に見えること。
AとBは同じ背景色。上に乗せている柄の影響で、Aのほうがハッキリとした背景色に見え、Bはくすんで見える。
配色の考え方
類似の調和/共通性の調和
色相やトーンが似ている色を組み合わせたとき、調和すること。
統一感を出すことが出来る
- 図「類似の調和A」は色相環上、近い位置にある同士の配色
- 図「類似の調和B」はbright/softという近いトーン同士の配色
対照の調和/明瞭性の調和
色相やトーンが対照的な場合には調和すること。
変化を出すことができる。
- 図「対照の調和A」は色相環上、対象の位置にある色どうしの配色。
- 図「対照の調和B」はvivid/glayishという対照のトーン同士の配色。
色彩心理学「色の保つ心理的な効果」のメモ
では、ここから細かく別れた各カラーがもたらす心理的な影響をメモしていきます。
カラーコードはこちらを参考にしていますが、これらは必ずしもこのカラーコードのみが正解ということではなく、あくまで一例として捉えてください。
人や、上で述べた「明度の同化」や「色相の同化」により表現の仕方が異なってしまう場合があるかもしれません。
併せて、ご覧頂いただいている方へ。もちろんですが、効果を保証するものでは一切ございませんよ。
※2015年2月7日追記：カラーサンプルを追加しました。ディスプレイの設定により若干の差は生じますが、ご参考ください！
ピンク
#FFC0CB
ピンクを使ったWebサイト
ピンク色の効果は？
女性らしさ。上品さ、若々しさ。誰かに甘えたい、愛されたい乙女の象徴。
女性ホルモンの分泌を調整するとも言われる。
女性に最も好まれる色であると同時に、「女性らしさ」に距離を置く女性などには最も嫌われる色という説も。
穏やかなピンクは筋肉の緊張・弛緩を数値化した「ライトトーナス値」が最も低い色とされており、交感神経に働きかけて脳を活性化し、血行を良くする。
また、味覚的な甘さを刺激する色で、ダイエットの時に取り入れるには注意が必要。
イライラしがちなとき、攻撃に敵になってしまうとき、また、穏やかに話し合いを進めたいときなど取り入れると良いかも。
ピンクを好む人はロマンチスト。辛いこと、逆境からは逃避する傾向があり愛されたい、優しくされたい願望がある。
他人に対する愛情を大切にし、気配りのできる優しさとの二面性を持つ。
ローズ・ピンク
#EE8EA0
ピンクよりも深みがあり、より大人な女性らしさ、母性の演出。
ショッキングピンク
#ff0099
セクシャルな要素が強いピンク。
女性としての魅力をよりアピールしたいときに活用できる。
反対に、「体力回復」の意味合いもある。
マゼンタ
＃FF00FF
色彩心理の中で、マゼンタは、優しさ、親切さ、思いやりを意味する。
同じく、女性的な要素が強い。
マゼンタが好きな人には、性格や個性が強い人が多い。
サーモン・ピンク
#FF9E8C
”素直で明るい”を意味する「白」と
“愛情と生命力”の「ピンク」が混ざった色のため、そんな感じ。
反面、深層心理では良からぬ欲望が渦巻いている可能性がある。
ベビー・ピンク
#FEC6C5
「ピンク」はいろいろな欲望を含んだ色とされており、「白」は”潔癖性を求めたり”、”何かを放棄したいときに選ぶ色”とされている。
ということは、ベビーピンクに注目が行くときは、疲れていたり精神的に参っていたりある種の危険信号かも。
コーラル色
#FF7F50
オレンジに近いとされており、人気、愛情、暖かさ、自己愛などを意味する。
朗らかで、良い第一印象を与えることが出来る。
チェリーピンク
#D35889
“愛情と生命力”を示す「ピンク」に、エネルギーの象徴である「赤」が入った色。
人間関係を前向きにしたいときに良い方向に働くかも
つつじ色
#DF548F
前述のとおり、エネルギーの象徴である「赤」と”感受性・神秘性”を意味する「紫」の混ざった色。
悩んでいるのではなく、成功させようと考えている時に選ぶ色との見方があり、比較的良い精神状態の時に選ぶケースが多いとのこと。
青
#006AB6
青を使ったWebサイト
青色の効果は？
男女問わず好ましい色、世界中で最も好感度の高い色との調査結果。
副交感神経を刺激し、内分泌系の働きを鎮静化させたり、催眠効果、発刊を抑える効果を持つ。ビジネスや学習のシーンに多用されているカラー。
血圧や心拍数を下げる効果、解毒・殺菌作用を連想させる効果もある。
誠実さを感じさせる色で、一対一のコミュニケーションをスムーズにする。
自尊心の強さ、見栄、負けず嫌いなど、頑固なほど意思の強い人が青を好む。
水色
#9DCCE0
色彩心理の中で、水色は、（10代に近い）若さ、冷静さ、自由などを意味する。
スカイブルー
#89BDDE
青系の色。冷静さの象徴でもある。
“自分自身をしっかりとコントロールしたい”意志の表れ。
シアン
#00FFFF
落ち着きのある「青」の中でも、「緑」のもつ暖かさも合わせており、自分に落ち着きをもたらしたい人が用いると良い色。
紺（ネイビー）
#1D3156
紺を使ったWebサイト
紺色（ネイビー）の効果は？
真面目さ、知的さを意味する。
ビジネスシーンなどでよく用いられるので、信頼感がある色として広く印象を持たれている。
収縮色なので、ファッションにおいては着痩せして見えたりするが、基本的には男性系統の色。
身に付けると、少し近づきにくい印象も与える。
強い不安や不満を払しょくするために、堅固な意志をもって戦っていく姿勢のあるとき、
一直線に、猪突猛進に、突き進んでいく姿勢のあるとき
（または、そうありたい）に紺を選ぶ傾向があるとされる。
インディゴ
#4B0082
紺よりも深い青？
黒が強いので、尊敬や信頼感を集めやすい。
つゆくさ色
#2595C7
ベースである「青」本来の冷静さと落ち着きのほか
簡素さ、また、上品さや清潔さを表す。
基本的には良い精神状態のときに選ばれる。
アイアンブルー
#3A4861
理性的な「青」に加え、”神経質な気持ちですとか、不安定さを表している”とも言われる「グレー」が混ざった深い色。
冷静かつ消極的な印象。
基本的にエネルギー低めな色。
紫（パープル）
#7C4B8D
紫を使ったWebサイト
紫（パープル）色の効果は？
「活発な赤」と「抑制の青」という正反対の属性が混ざり合った色。知性、品格を表す色。感性を磨き、情緒豊かな気分を誘う。
自分の直感に頼って判断するようになること、より美しいものを自ずと選ぶ心理作用がある。
精神的疲労を緩和し、気持ちを穏やかにしストレスを軽減するとされる。
また、想像/創造力を促進させる色である。
体の回復を図ろうとして本能的に惹かれる色であるとも言われる。
紫を好む人は芸術的で神秘的な面が強く情緒不安定的で協調性に掛ける。
ラベンダー
#E6E6FA
どちらかというと落ち着きを求めている反面どこか期待している人が利用しがち。
何かを求めている、そのような色彩心理がありますので、ラベンダーは心機一転する際や新しいチャレンジを試みようと思っている人にとって良い色。
桔梗
#4347A2
「紫」に、「紺」のエッセンスが加わっている。
堅実な色であるとされている。
江戸むらさき色
#614876
感受性の豊かさを表す”紫”と愛情面に優れた「ピンク」の合わさった色。
精神的に満ちている状態を表現する色とも言える。
ディープロイヤルパープル
#47266e
濃い紫。
心を穏やかにする効果や、思慮深い、大人な印象をあたえる。
赤（レッド）
#FF0000
赤を使ったWebサイト
赤（レッド）色の効果は？
壮大さや情熱をイメージさせるエネルギッシュな色。怒りや憎しみなどネガティブな面にも作用し、アドレナリンを分泌させる。
血や肉、熟した果実の色であるため、「生命に直結する色」として遠い昔から人間は本能的に赤に反応するようになった、と考えられている。
赤を選ぶときは、外向的、新しいものや刺激を求める状態で、積極的なリーダータイプの人に好まれやすい色である。
暖色の代表的な色で、赤に囲まれた部屋では、交感神経が刺激され、脈拍と体温が上がることで血流が良くなり体感温度が2℃～3℃上がるという研究結果も報告されている。
ダイエットで代謝を高める効果がある。
セックスアピール的な面も持つ。
ワインレッド
#80273F
性的衝動を駆り立てる。
完成を豊かにし、才気を感じさせることが出来る。
女性への怒り・悲しみなどが含まれていると言われているので注意。
橙（オレンジ）
#FFa500
オレンジを使ったWebサイト
橙（オレンジ）色の効果は？
活発で開放的、実りをイメージする色。
恐怖やプレッシャーによる心の不安や抑圧を取り除く効果があり、前向きな気持ちに作用し、健康的で、躍動感や賑やかさを感じさせる。
進出色/膨張色であるため大きくみせることができる。（=衣服においては太って見える）
オレンジを好む人は明るく社交性に長けており、愛想が良く印象が良い。
ナンパされやすい色、食欲を湧かせる色でもある。
ライトオレンジ（ジェネ）
#FEB041
明るく優しい気持ちになる。
柿色
#DB5C35
体温を上昇させたり、前向きな気持にさせてくれる。
赤のように直接期な作用ではなく、もっと間接的に働きかける色。
ほぼオレンジ。オレンジ同様に少々ネガティブな人や、人間関係を円滑にしたい人などが用いると効果的。
緑（グリーン）
#009A57
緑を使ったWebサイト
緑（グリーン）色の効果は？
“調和や癒しの象徴”である「緑」は、暖色、寒色ではない「中間色」。
一番、人間の目で捉えやすい領域の色。無意識のうちに、疲労を避けて選ぶ色である。
子供用部屋に緑を使うと、人間関係を作るのが上手になる、安心考えられるなどの効果があるとのこと。
神経系統の鎮静作用、鎮痛作用、緊張緩和、催眠作用があるため疲労回復、穏やかな気持ち、安心感を与える。
「保守的・受動的・マイペース」といった印象があるため、補色の赤とは正反対のイメージを持つ色。そのため、積極的で活発な人からは好まれない。
ライム
#00FF00
ライムを好む人は、新しい事が好きな分、楽しい事だけを選んで行う傾向があり、努力や我慢と言った事が苦手。
チャレンジングなエネルギーを提供する色。
アップルグリーン
#A2D29E
「緑」をベースに、若干「黄色」を含む。
精神安定や緊張緩和でコミュニケーションを円滑にする色。
深緑色
#004E2D
落ち着きを与え、緊張緩和やリフレッシュ効果がある。
エメラルドグリーン
#00A474
落ち着き、安心感を与える。緊張を和らげる色。
オリーブ
#5C5424
「緑」「灰」「黄色」が混ざった色。
落ち着いた中でもどこか明るさを持たせる色で大人な人間関係を構築したいときに用いると良いとのこと。
草色
#627842
“程よい自己主張”をもたらすと言われる。
集団の中で、和を乱さない程度の自己主張を発揮したいような時に用いると効果的とされる。
若草色
#BBD347
好奇心とマイペースさの中間。
若草色を手に取ることがある場合は、迷っていたり自分自身の中で変えたい部分があるのか”際どい”心理状態であるとの見方がある
モスグリーン
#7b7c46
学習の際に用いると効率が高まると言われる。
反面、協調性に乏しい部分のある色。
フォレストグリーン
#2A7762
血流を整える効果があるらしい。
リーフグリーン
#89983B
色彩心理的には、”安定している状態”
落ち着きたいとき、もっと明るく人と接したいときに用いる
黄緑
”平和で穏便な”「緑」と、”社交的”な「黄色」。
不安のあるときに安心感を与えてくれる。
黄色（イエロー）
#E3C700
黄色を使ったWebサイト
黄色（イエロー）の効果は？
「黄色」は、ほのぼのと温かい元気を与えてくれる色。
「コミュニケーションカラー」としてよく知られており、心理的な距離を近づけるので、初対面であったり相手の懐に入り込みたいときなどにも効果的。
緊張感をほぐし、快活さと判断力をアップさせる。
神経を興奮させ、うつや精神の衰弱に効果があるとされる。
ほか、消化器系の働きを促進して、消化不良や胃炎、糖尿病などによいとされ、食欲を促進させたり便秘の解消に役立つ色。
黄色を好む人は天真爛漫で冒険好き、甘え上手で人付き合いも得意。
緑黄色
#dccb18
言葉を穏やかにしてくれる。
好奇心、行動力を後押しする色といわており、コールトゥアクションに用いやすい
ゴールド
#FFD700
見識者でプロセスを大事にし、自分らしさに価値を見出すことが出来る。
金色には「意思あるところに道あり」で、強い意思の持続と目標達成へのねばり強い精神力が養われるらしい。
レモンイエロー
#D9CA00
開放感を演出する反面、現実逃避的な意味合いも兼ね備える。
うぐいす色
#706C3E
ストレス緩和の効果あり。
安全・希望・成長といった意味合いもあり。
クリーム
#fff3b8
色彩心理の中では”優しさ”や”許容”、”協調性”を意味する。
茶色
#6D4C33
茶色を使ったWebサイト
茶（ブラウン）色の効果は？
大地をイメージする色で、安心感を与える現実主義な色。
堅実で安定した印象で無駄遣いや衝動買いが抑えられる。
茶色を選ぶときには、自信と感受性が豊かになっていて、長期的な視点で何かを計画するのにイイ時期。
また、身体を休ませたい時や気が滅入っている状態のとき、身体が茶色に同調しやすくなる。
マルーン
#662B2C
落ち着きと安定感をもたらす。
黄土色
#B8883B
色彩学では”冒険”を意味する「黄色」に分類される。
が、茶色が強いため”安定をもたらす色”とされている。
“基本的には落ち着いていたいけど、どこか遊び心を忘れたくない”色なのでエンターテインメントのお仕事の際に重宝される。
ネガティブな時に好奇心を刺激するとされる。
亜麻色
#D3BD9F
「オレンジ」と「茶色」を足した色。
明るさを損なわない程度に落ち着きをもたらしたい時に持ちいると良いとされる。
茶褐色
#664032
“人にあたたかみを与える”「オレンジ」と”人を落ち着かせる”「黒」が混ざった色。
明るさの中に落ち着きを入れることが出来る。
居酒屋などでよく見かける色。
ボルドー
#533638
“エネルギーの象徴”「赤」をベースに”感受性”を象徴する「紫」、”自信”を表す「茶」が混ざった色。
不安を払拭し、落ち着きや自信を増幅させる。
アンバー
#AA7A40
天然褐色顔料として絵の具や塗料の原料に用いられる色。
“精神を安定させる”、”人に認められやすい”色。
ベージュ
#BCA78D
色彩心理の中では”安心感”、”穏やかさ”、”柔らかさ”を意味する。
無意識のうちにベージュの服や小物を選ぶときには、”心が安定を求めている”、”ストレスがたまりがち”と捉えることが出来る。
杏色
#D89F6D
”社交的”を意味する「オレンジ」をベースに”素直で明るい”意味合いを持つ「白」が混ざっている。
温かみがあり、開放性が加味された色。
杏色に目が行くときは、”人間関係を強固なものにしたい”と思っている
白（ホワイト）
#FFFFFF
白を使ったWebサイト
白（ホワイト）の効果は？
「白」はピュアですが、決して”ゼロ”ではなくいろんな思いや感情を含みつつどこにも偏りのない”無限の色”
心身が浄化され、素直で明るい状態。積極的、前向きな気持になっていると身につけたくなる色とされる。
白を好む人は完璧主義者で理想家、自惚れ屋な一面、美意識の高さを持つ。
刺激がない色で、清潔さと疲労回復に効果がある。
呼吸器感に作用し、呼吸を楽にする効果も。
アイボリー
#FFFFF0
「灰色」と「白」の中間で「黄色」も混ざったような色で”落ち着きを与えつつ、明るさも演出”してくれる。
灰色（グレー）
#646766
グレーを使ったWebサイト
灰色（グレー）の効果は？
”控えめ、疲労、退屈”を意味する。
穏やかな印象も与える。
灰色が好きな人は”順応性がある”とされる。
少し神経質になって気持ちが不安定な時。何事にも消極的な時期。その半面自分の意志や欲求を除外して、何事をも受け入れられる忍耐力のある時期に目につきやすい。
カバーする明るい色が重要。
シルバー
#C0C0C0
気持ちをスッキリさせる効果がある。
”輝き、洗練”といったイメージを与えることが出来る。
銀鼠色
#969998
くすんだシルバーのような色。
“もどかしさ”を象徴する。
熟慮が必要な時にそう呼びかける効果がある。
直感的すぎる判断に”待った”をすることができる色
利休鼠
#6E7972
灰色の部類。
真面目な印象、自分自身に用心深さを与える色。
ローズグレー
#8C8080
基幹色という点では「灰色」の部類。
”落ち着きや疑い深さ”を与えるが、明るさも込められており”自分自身を解放したい意思”も含まれている。
「前に前に」という主張ではなく、落ち着きながら周囲からの視線を集める事ができるとされる。
ブラック（黒）
#212121
黒を使ったWebサイト
黒（ブラック）の効果は？
“たくましさと威圧感”を持ち、光沢がある「黒」は”クラシカルな上品さ”を演出。
断固とした強い意志や不屈を感じさせるため交渉の場面などでは有効。
黒を好む人は自己中心的ですがリーダーとしての統率力に欠ける。
インテリアにおいては作業効率の低下につながってしまうとされる。
墨色
#212222
色彩心理においては”自分自身を投影する色”とされる
指導者になりたい人や、自力本願、あるいは自己中心的な人が好む色。自己主張が苦手な人が用いると良い。
色彩心理学を学ぶために参考にしたWebサイト
- 色彩心理
- 【色彩心理学】色が持つ不思議な力と効果 – NAVER まとめ
- 無意識に選ぶ「服の色」でわかる心理状態と性格タイプ – NAVER まとめ
- COLOR NOTE
- 【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」
- 色見本と配色サイト – color-sample.com
画像の引用などもこちらからさせていただきました。とても勉強になりました、ありがとうございます。
いかがでしょうか？
個人的にはかなり価値のあるメモになりました。これでコンバージョンに一役買うことが出来れば幸いです。
切れないハサミと使えないWebデザイン | sogitani.baigie.blog
この記事を読んで心当たりのある方はぜひ、ここから初めてください！
でわ！
