ショッピングサイト、LPのデザインに役立つ!色彩心理から学ぶ色の効果

img_color_header

この記事は約 4 分で読めます。


あなたはどうやって色を決めていますか?

「なんとなく」「この色が好きだから」等の理由で決めていませんか?

色が与える影響を侮ってはいけません!

色彩の効果を知ることによって目的へ誘導することができ、目標達成も夢ではありません!

色がどれだけ人への心理へ影響を与えているのか説明していきましょう。

1.それぞれの色が与える色彩心理

私達は色にどのような印象を受けているのでしょうか?
それぞれの色で考えていきましょう。

1-1.【赤】行動力、興奮、生命力

人間の感情的興奮や刺激をもたらし、交感神経に刺激を与え体温・血圧・脈をあげる。

赤は購買意欲をかき立てる色。
なのでよくバーゲンセール広告等で見たことあると思います。
赤を入れるだけで売上げアップに影響が出てくると言われています。

ランディングページだと、ボタンに赤を使うとコンバージョンアップの期待ができるかもしれません。

例)Shinya BODY Lab
img_color_01

【向いているケース】

  • 価格訴求(低価格訴求)・格安キャンペーン訴求したい
  • 行動力を示したい

1-2.【オレンジ】親しみ、幸福感、活気

消化、新陳代謝をよくする作用があるため、食欲を増進させる効果あり。

オレンジは暖色系の中でもやわらかい温もりを感じる色です。
太陽の色を見てお分かりのように、潜在意識の中で暖かい色として認識しているのでしょう。

しかし、安っぽいイメージを与えてしまう色でもあるので、注意して使用しましょう。

例)ゴーゴーカレー
img_color_02

【向いているケース】

  • 食欲増進効果を狙いたい(飲食系)
  • 親しみ感を与えたい

1-3.【黄】明るい、希望、にぎやか

運動神経を活性化させ、脳の活性化がよくなり頭の回転が早くなり集中力がアップする。

光や太陽のイメージで、見ているだけで楽しい気分にさせてくれる色です。

注意をうながす色としても使われています。

例)千里金蘭大学 児童学科
img_color_03

【向いているケース】

  • にぎやかさ、活発さをアピールしたい(子供系)
  • 学習に関連している

1-4.【緑】安全、癒し、平和

筋肉の緊張をほぐし、リラックスさせてくれる効果がある。

木や森などの自然の色でもあるので、心を穏やかにさせてくれる色です。

例)シーエッチ建築工房
img_color_04

【向いているケース】

  • 安心安全売りにしている(建設系、医薬品系)
  • 落ち着いた印象にしたい

1-5.【青】誠実、爽快感、冷静

赤とは逆で、鎮静作用があり、精神を落ち着かせる効果がある。

爽やかさと知的な印象を感じさせてくれます。

例)男デオナチュレ

【向いているケース】

  • 誠実、信頼感を訴求したい
  • 爽やかで、若々しいイメージにしたい
  • 涼しげな季節感を出したい時

1-6.【紫】高級感、神秘的、癒し

集中力アップ効果あり。

自分の潜在能力に気づかせてくれる色でもあり、創造力をかりたてたり、感受性を高める効果があります。

例)ANNA SUI
img_color_06

【向いているケース】

  • 高級感を訴求したい
  • 上品さ、美、女性らしさを訴求したい(化粧品系、ウエディング系)

1-7.【ピンク】思いやり、幸せ、恋愛

心と体を若返らせる効果あり。

ピンクは人を思いやる温かさを与える色です。

女性らしさをイメージさせる色でもありますが、女性から嫌われる色でもあります。

味覚的な甘さを刺激する色なので、ダイエット系には注意が必要。

例)イラストレーターよぴんこのイラスト制作所
img_color_07

【向いているケース】

  • 女性らしさを訴求したい
  • やさしい、やわらかいイメージにしたい

1-8.【茶】安定、堅実、温もり

茶は大地の色を連想させ、私たちの暮らしに溶け込んでいる色です。

なので空間の中に馴染み目立たず調和します。

例)伝匠美

【向いているケース】

  • 安定している印象を与えたい
  • 落ち着いた雰囲気にしたい
  • 伝統や文化を感じさせたい

1-9.【黒】力強さ、高級感、かっこよさ

黒は他の色を吸収する性質があるのでどんな色とも合います。

画像を引き立てたい時に最適です。

例)コカ・コーラ
img_color_08

【向いているケース】

  • 夜の雰囲気(フォーマル感)を訴求したい
  • 伝統や文化を感じさせたい
  • 大人な雰囲気にしたい

1-10.【グレー】上品、落ち着き、安心感

グレーは協調性が高く、自己主張せず周囲の色を引き立てる調和する色です。

薄いグレー色は、よくWEBページの背景として活用されています。

例)mon cifaka
img_color_11

【向いているケース】

  • 上品でお洒落な印象を与えたい
  • 控えめな印象にしたい
  • 様々な色を使った画像(商品画像等)を載せたい

1-11.【白】清潔、純粋、信頼感

クリーンなイメージが強い白。

白は他の主張を邪魔せず、ほかのイメージを上手く取り入れてくれる色です。

例)iichi
img_color_09

【向いているケース】

  • 様々な色を使った画像(商品画像等)を載せたい
  • 清潔感を訴求したい

まとめ

色って面白いですね。

あなたがこれから制作したいショッピングサイト、LPはどのような印象にしたいですか?

現在あるショッピングサイト、LPは目的に合わせたカラーで制作出来ていますか?

メインカラー選択はとても重要です。
しかし、色彩心理にとらわれすぎて、伝えたい内容とずれが生じたり、全体のカラーバランスが悪くならないように注意が必要です。

色彩心理はwebページ、ロゴ、画像制作をする上でも使えるので、参考にしてみて下さい。

LP(ランディングページ)制作の教科書4ステップガイド

本書を読むとできるようになること
・LPの基礎知識と制作手順が分かります。
・ユーザーが求めるLPデザインの制作方法が分かります。
・LPのコンバージョン率UPさせるコツが分かります。

主な内容
1.LP(ランディングページ)とは?
・1-1.Web サイトとLP の目的の違い
・1-2.制作の流れ
2.戦略設計
・2-1.ターゲットユーザー像(ペルソナ)の設定
・2-2.競合調査
3.情報設計
・3-1.シナリオを考える
・3-2.レイアウトを考える
4.デザイン
・4-1デザインに入る前の3 ステップ
・4-2.デザインの5つのコツ
・4-3.訴求力の高いファーストビューの制作方法
・4-4.効果的なコンバージョンエリアの制作方法

ダウンロード

最新の記事情報が取得できます。