デザイナー長期保存版!Webデザイン、グラフィック、DTP…製作に役立つ「色彩心理学」

2014.10.9 デザイン

すみません、目次が超絶長いです。

Webデザインのネクストステップは心理学だと思います。

広義で言う「Webデザイナー」はだいたいコーディングができて、ソフトウェアで画像をいじれてWebサイトのレイアウトができて…といったところかと思いますが、コーディングなんてできなくてもWebサイトは作れますし、専門的に勉強している僕らの何が長けているかって、

「ここをこうすることにより、こんな効果が見込める」
「これをこうするのにはこんな意図があって、それはこれを表現してる”」

というノウハウ的な部分だと思います。
なのでメモのために色彩心理学、色が成し得る効果についてメモします。

Webデザインのネクストステップは「色彩心理学」。その理由

物言わぬ「商品」やWebサイトが何かを伝えることができる唯一の手段である「外観」

実はかなり影響を与えています。

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」

調査対象のうち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である。と言った具合です。

そのプロダクトにとって何のカラーが適切か明確なガイドラインはありませんが、カラーがブランドと一致し、説得する役割を果たすことが重要です。

新しいブランドである場合、イメージの強い競合が持つカラーと違うカラーにブランドカラーを設定することで差別化が図れますがその際は気を付けること。

消費者が好む色は?

消費者の多くは、類似色からなるカラーパターンや、アクセント色とのコントラストが強い配色を好むとされています。

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 消費者が好む色|ツーブロッカ

活発な補色を用いることがコンバージョンを誘発する手段というのは研究からも裏付けられているそうです。

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 消費者が好む色|ツーブロッカ

上の図はどちらもカラーコーディネート的に違和感はありませんが、右の赤いボタンのページのほうが21%もコンバージョン率が高いそうです。(=隔離効果 によるもの)

確かに違和感はないのですが、周囲に、左の図の緑ボタンと同じ色相の要素が多いように感じます。

彩度でボタンを際立たせていますが、調和してしまうのは免れないようです。

参照元記事:The Psychology of Color in Marketing and Branding

日常で色にどんな影響を受けているのか?

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 日常で色の影響を受けるパターン|ツーブロッカ

色別に分類した図が、上のものです。

実際に書き出してみると、「あぁ、なるほど」ですよね。

既に影響を受けている経験があるからです。

色が持つ影響(色の錯覚)について

明度対比

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 明度対比|ツーブロッカ

周りにある色の影響を受けて、対象の色が本来よりも暗く見えたり明るく見えたりすること。

彩度対比

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 彩度対比|ツーブロッカ

背景と対象を比べ、背景の色の彩度の影響で対象の彩度が高く見えたり低く見えたりすること。
彩度の低い背景に、同じ色相で背景より彩度の高い色を置くと対象の彩度は本来よりも高く見える。
逆に、彩度の高い背景に、同じ色相で彩度の低い色を置くと対象の彩度は本来よりも低く見える。

明度対比と似たような現象。

色相対比

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 色相対比|ツーブロッカ

隣接する色どうしが影響して、色相がすこしズレて(若干違う色に)見えること。
左と右の図の中心のオレンジは同じ色だが、Aは背景の色が影響し、中心のオレンジが若干黄色が強く見える。

補色対比

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 補色対比|ツーブロッカ

補色同士を隣接させることで、お互いの彩度が増したように見えること。
2色感の明度差が少ないほど、効果が大きい。

AとBの緑は同じ色だが、Aは左に補色である紫があるために、影響を受けて、Bの緑よりも彩度が高く見える。

縁辺対比

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 縁辺対比|ツーブロッカ 色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 縁辺対比|ツーブロッカ

色が隣り合わせるその境目で、隣の色の影響を受けてギリギリの”縁”が明るく見えること。

膨張色/収縮色

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 膨張効果|ツーブロッカ

黒い服を着ると引き締まって見え、白を着ると太って見える。
また、肌の色も明度対比を起こすので、黒を着ると反対に肌の色は明るく見え、白を着ると肌の色はくすんで見える。

進出色・後退色

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 進出後退|ツーブロッカ

同じ平面に存在しても、突出して見える色、奥にあるように見える色のこと。

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 進出後退|ツーブロッカ
赤・オレンジ・黄色など暖色系が進出色
青・青紫・青緑など寒色が後退色

色の面積効果

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 色の面積効果|ツーブロッカ

同じ色を、小さな面積と大きな面積で見比べた場合、色みや明るさに差が出ているように見えること。

明るい色は大きな面積の場合のほうが、いっそう明るく見える。
暗い色は面積が大きい場合のほうが、いっそう暗く見える。

家具や布生地のカラーサンプルと実物を比べた場合など、これに当てはまる。

同化現象

色相の同化

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 色相どうか|ツーブロッカ

背景色が、柄の影響を受けて、柄の色相に偏って見えること。

AとBは同じ背景色。上に乗せている柄の色が青か赤の違いで、背景色も若干柄の色に近く見える

明度の同化

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 明度同化|ツーブロッカ

背景色が、柄の影響を受けて、柄の明るさに偏って見えること。
AとBは同じ背景色。上に乗せている柄の影響で、背景が、Aは明るく、Bは暗く見える

彩度の同化

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 彩度同化|ツーブロッカ

背景色が、柄の影響を受けて、柄の彩度に偏ってハッキリした色に見えること。
AとBは同じ背景色。上に乗せている柄の影響で、Aのほうがハッキリとした背景色に見え、Bはくすんで見える。

配色の考え方

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 配色の考え方|ツーブロッカ 色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 配色の考え方|ツーブロッカ

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 配色の考え方|ツーブロッカ

類似の調和/共通性の調和

色相やトーンが似ている色を組み合わせたとき、調和すること。
統一感を出すことが出来る

  • 図「類似の調和A」は色相環上、近い位置にある同士の配色
  • 図「類似の調和B」はbright/softという近いトーン同士の配色

対照の調和/明瞭性の調和

 

色相やトーンが対照的な場合には調和すること。
変化を出すことができる。

  • 図「対照の調和A」は色相環上、対象の位置にある色どうしの配色。
  • 図「対照の調和B」はvivid/glayishという対照のトーン同士の配色。

色彩心理学「色の保つ心理的な効果」のメモ

では、ここから細かく別れた各カラーがもたらす心理的な影響をメモしていきます。

カラーコードはこちらを参考にしていますが、これらは必ずしもこのカラーコードのみが正解ということではなく、あくまで一例として捉えてください。
人や、上で述べた「明度の同化」や「色相の同化」により表現の仕方が異なってしまう場合があるかもしれません。

併せて、ご覧頂いただいている方へ。もちろんですが、効果を保証するものでは一切ございませんよ。


※2015年2月7日追記:カラーサンプルを追加しました。ディスプレイの設定により若干の差は生じますが、ご参考ください!


 

ピンク

ピンク カラーサンプル
#FFC0CB

ピンクを使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 ピンクを使ったうぇbサイト|ツーブロッカ

ピンク色の効果は?

女性らしさ。上品さ、若々しさ。誰かに甘えたい、愛されたい乙女の象徴。
女性ホルモンの分泌を調整するとも言われる。
女性に最も好まれる色であると同時に、「女性らしさ」に距離を置く女性などには最も嫌われる色という説も。

穏やかなピンクは筋肉の緊張・弛緩を数値化した「ライトトーナス値」が最も低い色とされており、交感神経に働きかけて脳を活性化し、血行を良くする。
また、味覚的な甘さを刺激する色で、ダイエットの時に取り入れるには注意が必要。

イライラしがちなとき、攻撃に敵になってしまうとき、また、穏やかに話し合いを進めたいときなど取り入れると良いかも。

ピンクを好む人はロマンチスト。辛いこと、逆境からは逃避する傾向があり愛されたい、優しくされたい願望がある。
他人に対する愛情を大切にし、気配りのできる優しさとの二面性を持つ。

ローズ・ピンク

ローズピンク カラーサンプル
#EE8EA0

ピンクよりも深みがあり、より大人な女性らしさ、母性の演出。

ショッキングピンク

ショッキングピンク カラーサンプル
#ff0099

セクシャルな要素が強いピンク。
女性としての魅力をよりアピールしたいときに活用できる。

反対に、「体力回復」の意味合いもある。

マゼンタ

マゼンタ カラーサンプル
#FF00FF

色彩心理の中で、マゼンタは、優しさ、親切さ、思いやりを意味する。
同じく、女性的な要素が強い。

マゼンタが好きな人には、性格や個性が強い人が多い。

サーモン・ピンク

サーモンピンク カラーサンプル
#FF9E8C

”素直で明るい”を意味する「白」と
“愛情と生命力”の「ピンク」が混ざった色のため、そんな感じ。

反面、深層心理では良からぬ欲望が渦巻いている可能性がある。

ベビー・ピンク

ベビーピンク カラーサンプル
#FEC6C5

「ピンク」はいろいろな欲望を含んだ色とされており、「白」は”潔癖性を求めたり”、”何かを放棄したいときに選ぶ色”とされている。

ということは、ベビーピンクに注目が行くときは、疲れていたり精神的に参っていたりある種の危険信号かも。

コーラル色

コーラル カラーサンプル
#FF7F50

オレンジに近いとされており、人気、愛情、暖かさ、自己愛などを意味する。
朗らかで、良い第一印象を与えることが出来る。

チェリーピンク

チェリーピンク カラーサンプル
#D35889

“愛情と生命力”を示す「ピンク」に、エネルギーの象徴である「赤」が入った色。
人間関係を前向きにしたいときに良い方向に働くかも

つつじ色

つつじ カラーサンプル
#DF548F

前述のとおり、エネルギーの象徴である「赤」と”感受性・神秘性”を意味する「紫」の混ざった色。

悩んでいるのではなく、成功させようと考えている時に選ぶ色との見方があり、比較的良い精神状態の時に選ぶケースが多いとのこと。

青 カラーサンプル
#006AB6

青を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 ピンクを使ったWEBサイト|ツーブロッカ

青色の効果は?

男女問わず好ましい色、世界中で最も好感度の高い色との調査結果。

副交感神経を刺激し、内分泌系の働きを鎮静化させたり、催眠効果、発刊を抑える効果を持つ。ビジネスや学習のシーンに多用されているカラー。
血圧や心拍数を下げる効果、解毒・殺菌作用を連想させる効果もある。

誠実さを感じさせる色で、一対一のコミュニケーションをスムーズにする。

自尊心の強さ、見栄、負けず嫌いなど、頑固なほど意思の強い人が青を好む。

水色

水色 カラーサンプル
#9DCCE0

色彩心理の中で、水色は、(10代に近い)若さ、冷静さ、自由などを意味する。

スカイブルー

スカイブルー カラーサンプル
#89BDDE

青系の色。冷静さの象徴でもある。
“自分自身をしっかりとコントロールしたい”意志の表れ。

シアン

シアン カラーサンプル
#00FFFF

落ち着きのある「青」の中でも、「緑」のもつ暖かさも合わせており、自分に落ち着きをもたらしたい人が用いると良い色。

紺(ネイビー)

紺 カラーサンプル
#1D3156

紺を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 紺を使ったWEBサイト|ツーブロッカ

紺色(ネイビー)の効果は?

真面目さ、知的さを意味する。
ビジネスシーンなどでよく用いられるので、信頼感がある色として広く印象を持たれている。

収縮色なので、ファッションにおいては着痩せして見えたりするが、基本的には男性系統の色。
身に付けると、少し近づきにくい印象も与える。

強い不安や不満を払しょくするために、堅固な意志をもって戦っていく姿勢のあるとき、
一直線に、猪突猛進に、突き進んでいく姿勢のあるとき
(または、そうありたい)に紺を選ぶ傾向があるとされる。

インディゴ

インディゴ カラーサンプル
#4B0082

紺よりも深い青?
黒が強いので、尊敬や信頼感を集めやすい。

つゆくさ色

つゆくさ カラーサンプル
#2595C7

ベースである「青」本来の冷静さと落ち着きのほか
簡素さ、また、上品さや清潔さを表す。

基本的には良い精神状態のときに選ばれる。

アイアンブルー

アイアン カラーサンプル
#3A4861

理性的な「青」に加え、”神経質な気持ちですとか、不安定さを表している”とも言われる「グレー」が混ざった深い色。

冷静かつ消極的な印象。
基本的にエネルギー低めな色。

紫(パープル)

むらさき カラーサンプル
#7C4B8D

紫を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 紫を使ったWEBサイト|ツーブロッカ

紫(パープル)色の効果は?

「活発な赤」と「抑制の青」という正反対の属性が混ざり合った色。知性、品格を表す色。感性を磨き、情緒豊かな気分を誘う。
自分の直感に頼って判断するようになること、より美しいものを自ずと選ぶ心理作用がある。

精神的疲労を緩和し、気持ちを穏やかにしストレスを軽減するとされる。
また、想像/創造力を促進させる色である。

体の回復を図ろうとして本能的に惹かれる色であるとも言われる。

紫を好む人は芸術的で神秘的な面が強く情緒不安定的で協調性に掛ける。

ラベンダー

ラベンダー カラーサンプル
#E6E6FA

どちらかというと落ち着きを求めている反面どこか期待している人が利用しがち。

何かを求めている、そのような色彩心理がありますので、ラベンダーは心機一転する際や新しいチャレンジを試みようと思っている人にとって良い色。

桔梗

ききょう カラーサンプル
#4347A2

「紫」に、「紺」のエッセンスが加わっている。
堅実な色であるとされている。

江戸むらさき色

江戸むらさき カラーサンプル
#614876

感受性の豊かさを表す”紫”と愛情面に優れた「ピンク」の合わさった色。

精神的に満ちている状態を表現する色とも言える。

ディープロイヤルパープル

ディープロイヤル カラーサンプル
#47266e

濃い紫。
心を穏やかにする効果や、思慮深い、大人な印象をあたえる。

赤(レッド)

赤 カラーサンプル
#FF0000

赤を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 赤を使ったWEBサイト|ツーブロッカ

赤(レッド)色の効果は?

壮大さや情熱をイメージさせるエネルギッシュな色。怒りや憎しみなどネガティブな面にも作用し、アドレナリンを分泌させる。

血や肉、熟した果実の色であるため、「生命に直結する色」として遠い昔から人間は本能的に赤に反応するようになった、と考えられている。

赤を選ぶときは、外向的、新しいものや刺激を求める状態で、積極的なリーダータイプの人に好まれやすい色である。

暖色の代表的な色で、赤に囲まれた部屋では、交感神経が刺激され、脈拍と体温が上がることで血流が良くなり体感温度が2℃~3℃上がるという研究結果も報告されている。

ダイエットで代謝を高める効果がある。
セックスアピール的な面も持つ。

ワインレッド

ワインレッド カラーサンプル
#80273F

性的衝動を駆り立てる。
完成を豊かにし、才気を感じさせることが出来る。
女性への怒り・悲しみなどが含まれていると言われているので注意。

橙(オレンジ)

オレンジ カラーサンプル
#FFa500

オレンジを使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 オレンジを使ったWEBサイト|ツーブロッカ

橙(オレンジ)色の効果は?

活発で開放的、実りをイメージする色。
恐怖やプレッシャーによる心の不安や抑圧を取り除く効果があり、前向きな気持ちに作用し、健康的で、躍動感や賑やかさを感じさせる。

進出色/膨張色であるため大きくみせることができる。(=衣服においては太って見える)

オレンジを好む人は明るく社交性に長けており、愛想が良く印象が良い。

ナンパされやすい色、食欲を湧かせる色でもある。

ライトオレンジ(ジェネ)

ライトオレンジ カラーサンプル
#FEB041

明るく優しい気持ちになる。

柿色

柿色 カラーサンプル
#DB5C35

体温を上昇させたり、前向きな気持にさせてくれる。
赤のように直接期な作用ではなく、もっと間接的に働きかける色。

ほぼオレンジ。オレンジ同様に少々ネガティブな人や、人間関係を円滑にしたい人などが用いると効果的。

緑(グリーン)

緑 カラーサンプル
#009A57

緑を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 緑を使ったWEBサイト|ツーブロッカ

緑(グリーン)色の効果は?

“調和や癒しの象徴”である「緑」は、暖色、寒色ではない「中間色」。
一番、人間の目で捉えやすい領域の色。無意識のうちに、疲労を避けて選ぶ色である。
子供用部屋に緑を使うと、人間関係を作るのが上手になる、安心考えられるなどの効果があるとのこと。

神経系統の鎮静作用、鎮痛作用、緊張緩和、催眠作用があるため疲労回復、穏やかな気持ち、安心感を与える。

「保守的・受動的・マイペース」といった印象があるため、補色の赤とは正反対のイメージを持つ色。そのため、積極的で活発な人からは好まれない。

ライム

ライム カラーサンプル
#00FF00

ライムを好む人は、新しい事が好きな分、楽しい事だけを選んで行う傾向があり、努力や我慢と言った事が苦手。

チャレンジングなエネルギーを提供する色。

アップルグリーン

アップルグリーン カラーサンプル
#A2D29E

「緑」をベースに、若干「黄色」を含む。
精神安定や緊張緩和でコミュニケーションを円滑にする色。

深緑色

 深緑 カラーサンプル
#004E2D

落ち着きを与え、緊張緩和やリフレッシュ効果がある。

エメラルドグリーン

エメラルドグリーン カラーサンプル
#00A474

落ち着き、安心感を与える。緊張を和らげる色。

オリーブ

オリーブ カラーサンプル
#5C5424

「緑」「灰」「黄色」が混ざった色。

落ち着いた中でもどこか明るさを持たせる色で大人な人間関係を構築したいときに用いると良いとのこと。

草色

草色 カラーサンプル
#627842

“程よい自己主張”をもたらすと言われる。
集団の中で、和を乱さない程度の自己主張を発揮したいような時に用いると効果的とされる。

若草色

若草色 カラーサンプル
#BBD347

好奇心とマイペースさの中間。
若草色を手に取ることがある場合は、迷っていたり自分自身の中で変えたい部分があるのか”際どい”心理状態であるとの見方がある

モスグリーン

モスグリーン カラーサンプル
#7b7c46

学習の際に用いると効率が高まると言われる。
反面、協調性に乏しい部分のある色。

フォレストグリーン

フォレストグリーン カラーサンプル
#2A7762

血流を整える効果があるらしい。

リーフグリーン

リーフグリーン カラーサンプル
#89983B

色彩心理的には、”安定している状態”
落ち着きたいとき、もっと明るく人と接したいときに用いる

黄緑

黄緑 カラーサンプル
#BBC000

”平和で穏便な”「緑」と、”社交的”な「黄色」。
不安のあるときに安心感を与えてくれる。

黄色(イエロー)

黄色 カラーサンプル
#E3C700

黄色を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 黄色を使ったWEBサイト|ツーブロッカ

黄色(イエロー)の効果は?

「黄色」は、ほのぼのと温かい元気を与えてくれる色。

「コミュニケーションカラー」としてよく知られており、心理的な距離を近づけるので、初対面であったり相手の懐に入り込みたいときなどにも効果的。

緊張感をほぐし、快活さと判断力をアップさせる。
神経を興奮させ、うつや精神の衰弱に効果があるとされる。

ほか、消化器系の働きを促進して、消化不良や胃炎、糖尿病などによいとされ、食欲を促進させたり便秘の解消に役立つ色。

黄色を好む人は天真爛漫で冒険好き、甘え上手で人付き合いも得意。

緑黄色

緑黄色 カラーサンプル
#dccb18

言葉を穏やかにしてくれる。

好奇心、行動力を後押しする色といわており、コールトゥアクションに用いやすい

ゴールド

ゴールド カラーサンプル
#FFD700

見識者でプロセスを大事にし、自分らしさに価値を見出すことが出来る。
金色には「意思あるところに道あり」で、強い意思の持続と目標達成へのねばり強い精神力が養われるらしい。

レモンイエロー

れもんイエロー カラーサンプル
#D9CA00

開放感を演出する反面、現実逃避的な意味合いも兼ね備える。

うぐいす色

うぐいす色 カラーサンプル
#706C3E

ストレス緩和の効果あり。
安全・希望・成長といった意味合いもあり。

クリーム

クリーム カラーサンプル
#fff3b8

色彩心理の中では”優しさ”や”許容”、”協調性”を意味する。

茶色

茶色 カラーサンプル
#6D4C33

茶色を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 茶色を使ったWEBサイト|ツーブロッカ

茶(ブラウン)色の効果は?

大地をイメージする色で、安心感を与える現実主義な色。
堅実で安定した印象で無駄遣いや衝動買いが抑えられる。

茶色を選ぶときには、自信と感受性が豊かになっていて、長期的な視点で何かを計画するのにイイ時期。
また、身体を休ませたい時や気が滅入っている状態のとき、身体が茶色に同調しやすくなる。

マルーン

マルーン カラーサンプル
#662B2C

落ち着きと安定感をもたらす。

黄土色

黄土色 カラーサンプル
#B8883B

色彩学では”冒険”を意味する「黄色」に分類される。

が、茶色が強いため”安定をもたらす色”とされている。

“基本的には落ち着いていたいけど、どこか遊び心を忘れたくない”色なのでエンターテインメントのお仕事の際に重宝される。
ネガティブな時に好奇心を刺激するとされる。

亜麻色

亜麻色 カラーサンプル
#D3BD9F

「オレンジ」と「茶色」を足した色。

明るさを損なわない程度に落ち着きをもたらしたい時に持ちいると良いとされる。

茶褐色

茶褐色 カラーサンプル
#664032

“人にあたたかみを与える”「オレンジ」と”人を落ち着かせる”「黒」が混ざった色。

明るさの中に落ち着きを入れることが出来る。

居酒屋などでよく見かける色。

ボルドー

ボルドー カラーサンプル
#533638

“エネルギーの象徴”「赤」をベースに”感受性”を象徴する「紫」、”自信”を表す「茶」が混ざった色。

不安を払拭し、落ち着きや自信を増幅させる。

アンバー

アンバー カラーサンプル
#AA7A40

天然褐色顔料として絵の具や塗料の原料に用いられる色。

“精神を安定させる”、”人に認められやすい”色。

ベージュ

ベージュ カラーサンプル
#BCA78D

色彩心理の中では”安心感”、”穏やかさ”、”柔らかさ”を意味する。
無意識のうちにベージュの服や小物を選ぶときには、”心が安定を求めている”、”ストレスがたまりがち”と捉えることが出来る。

杏色

あんず カラーサンプル
#D89F6D

”社交的”を意味する「オレンジ」をベースに”素直で明るい”意味合いを持つ「白」が混ざっている。

温かみがあり、開放性が加味された色。

杏色に目が行くときは、”人間関係を強固なものにしたい”と思っている

白(ホワイト)

FFF
#FFFFFF

白を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 白を使ったWEBサイト|ツーブロッカ

白(ホワイト)の効果は?

「白」はピュアですが、決して”ゼロ”ではなくいろんな思いや感情を含みつつどこにも偏りのない”無限の色”
心身が浄化され、素直で明るい状態。積極的、前向きな気持になっていると身につけたくなる色とされる。

白を好む人は完璧主義者で理想家、自惚れ屋な一面、美意識の高さを持つ。

刺激がない色で、清潔さと疲労回復に効果がある。
呼吸器感に作用し、呼吸を楽にする効果も。

アイボリー

アイボリー カラーサンプル
#FFFFF0

「灰色」と「白」の中間で「黄色」も混ざったような色で”落ち着きを与えつつ、明るさも演出”してくれる。

灰色(グレー)

グレー カラーサンプル
#646766

グレーを使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 グレーを使ったWEBサイト|ツーブロッカ

灰色(グレー)の効果は?

”控えめ、疲労、退屈”を意味する。
穏やかな印象も与える。

灰色が好きな人は”順応性がある”とされる。

少し神経質になって気持ちが不安定な時。何事にも消極的な時期。その半面自分の意志や欲求を除外して、何事をも受け入れられる忍耐力のある時期に目につきやすい。

カバーする明るい色が重要。

シルバー

シルバー カラーサンプル
#C0C0C0

気持ちをスッキリさせる効果がある。
”輝き、洗練”といったイメージを与えることが出来る。

銀鼠色

銀鼠色 カラーサンプル
#969998

くすんだシルバーのような色。
“もどかしさ”を象徴する。

熟慮が必要な時にそう呼びかける効果がある。
直感的すぎる判断に”待った”をすることができる色

利休鼠

利休鼠 カラーサンプル
#6E7972

灰色の部類。
真面目な印象、自分自身に用心深さを与える色。

ローズグレー

ろーずぐれー カラーサンプル
#8C8080

基幹色という点では「灰色」の部類。

”落ち着きや疑い深さ”を与えるが、明るさも込められており”自分自身を解放したい意思”も含まれている。
「前に前に」という主張ではなく、落ち着きながら周囲からの視線を集める事ができるとされる。

ブラック(黒)

黒 カラーサンプル
#212121

黒を使ったWebサイト

色彩心理学、ネットでの情報まとめ!Webデザイン、グラフィックデザイン、DTPデザインの「ネクストステップ」 黒を使ったWEBサイト|ツーブロッカ

黒(ブラック)の効果は?

“たくましさと威圧感”を持ち、光沢がある「黒」は”クラシカルな上品さ”を演出。
断固とした強い意志や不屈を感じさせるため交渉の場面などでは有効。

黒を好む人は自己中心的ですがリーダーとしての統率力に欠ける。

インテリアにおいては作業効率の低下につながってしまうとされる。

墨色

墨色 カラーサンプル
#212222

色彩心理においては”自分自身を投影する色”とされる
指導者になりたい人や、自力本願、あるいは自己中心的な人が好む色。自己主張が苦手な人が用いると良い。

色彩心理学を学ぶために参考にしたWebサイト

画像の引用などもこちらからさせていただきました。とても勉強になりました、ありがとうございます。

 


 

いかがでしょうか?

個人的にはかなり価値のあるメモになりました。これでコンバージョンに一役買うことが出来れば幸いです。

切れないハサミと使えないWebデザイン | sogitani.baigie.blog

この記事を読んで心当たりのある方はぜひ、ここから初めてください!

 

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。