連載一覧へもどる

第5回:ショップイメージの定着 商品・訪問者に適したページカラーを考える

初めてネットショップを制作される方の多くが、まず最初に悩まされるのがページカラーではないでしょうか?

あなたはどうでしたか??


お店・ウェブサイト内のページカラーは、使い方によっては大きな機会損失につながる危険性がありますので、今回はページカラーについてご説明しましょう。


コーポレートサイトやBtoB商材サイトなどとは違い、ネットショップにおいては、

美しい配色で見やすい

ということだけでは少し物足りなさを感じてしまいます。

よく耳にするのが、自分が好き・美しいと思う色をそのままネットショップのキーカラーにしたい、というパターンです。 もちろん商品の特性にあっているのであれば、まったく問題ありません。

しかし!その色がもし商品の特性や、お客様層にあっていないと、どうでしょうか。

ちょっと極端な例ですが、食材をメインで取り扱っているネットショップの、キーカラーが『』や『グレー』、というサイトにあなたが訪れた場合、どう思いますか?

食欲はそそられますか?

おそらくほとんどの方が
「あまりおいしくなさそうだな~」
って感じるのではないかと思います。


ネットショップのキーカラーを決める上で、重要な要素をよく理解しておく必要があります。 それがズバリこの5点です!

  1. ①販売商品、お店のコンセプトを決める
  2. ②①に反応する顧客層をイメージする
  3. ③色が持つメッセージを理解する
  4. ④キーカラーを決める
  5. ⑤サブカラーを決める

まずは色の特徴を掴みましょう!

色には大きく分けて暖色と寒色があり、それぞれに明度や彩度と呼ばれる色の明るさや鮮やかさがあります。
文章で説明するより見た方が早いですので下のイラストを見て下さい!

  • 暖色
    • #e81e1e
    • #f6f117
    • #ed661a
  • 寒色
    • #1a1aec
    • #1ee8e8
    • #2f2fbe
  • 明度 - 高
    • #ffb2b2
    • #ffffb1
    • #ffd1b2
    • #b2b2ff
    • #b2ffff
    • #d1d1f0
  • 明度 - 低
    • #600000
    • #626100
    • #602b00
    • #000060
    • #006260
    • #1d1d4a
  • 彩度 - 高
    • #ff0000
    • #ffff00
    • #ff6202
    • #0303ff
    • #03ffff
    • #2020d0
  • 彩度 - 低
    • #d92b2b
    • #ede723
    • #df6925
    • #5454aa
    • #5aa6a6
    • #4444a8

何となく色の種類や要素がお分かり頂けましたか?
そしてこの「色」ですが、それぞれに感じ方があります。

これはご説明するまでもないと思いますが、暖色系の色は「温かみ」や「元気さ」などを感じますね。
逆に寒色系の色は「冷たさ」や「クールさ」などを感じます。
中には中性色や中間色と呼ばれる、暖色と寒色のちょうど中間に位置するような色もあります。
(緑や紫が中性色・中間色と言われています)

基本的にはこの「暖色」「寒色」を意識してメインカラーとサブカラーを決めればいいのですが、
先に申し上げた「明度」と「彩度」によっても若干色の感じ方が変わりますので少しご説明しますね。

■明度
明度とはその名の通り色の明るさのことで、どんな色でも明度が100%なら白、明度が0%なら黒となります。
明度が高いと自然に白に近付いていきますので淡い色に、逆に明度が低いと黒に近付いていきますので重厚な色になっていきます。

明度が高いと色が淡く、優しいイメージになりますので子供向けの商品や手作りの商品を扱うショップをお持ちの方は明度が高めの方がいいかもしれません。
逆に明度が低いと落ち着いたシックなイメージになりますので、高級な商品や少し年齢層が高めの人をターゲットにするようなショップをお持ちの方は明度が低めの方がいいかもしれませんね。

明度

■彩度
そして彩度ですが、これは色の鮮やかさの度合いになります。彩度が100%の色のことを純色と言ったりもします。彩度が0%に近付けば近付くほどグレー(無彩色)に近くなっていき、彩度が0%になればどんな色でもグレーになります。

彩度が高いと色鮮やかになりますのでその色が持つ特性をより強調させることができます。
また彩度を低めれば色がぼやけますのでその色が持つイメージを緩和させることができます。

彩度

ショップページ以外でも活用しましょう!

今ご説明した色の使い方はショップページに限った話ではありません。
例えばセールのバナーの色使いやキャンペーンの専用ページなど応用できる場所はいくらでもあります。
是非色の特性を理解してネットショップ運営に取り組みましょう!

さて、ここからはいくつか実際の事例をご紹介していきたいと思います。

スイーツ贈答ラファッソン様

  • キーカラー:茶色
  • サブカラー:黄色
スイーツ贈答ラファッソン

こちらのサイトは焼き菓子を販売しているネットショップですが、「重厚」「堅実」「温かみ」をイメージさせる茶色をキーカラーに用い、レモン、バナナ、パイナップル等の連想させる黄色をサブカラーに用いているため、相性が抜群ですね!

エコバッグオンリーショップ 「the new shoppingbag」 様

  • キーカラー:アイボリー
  • サブカラー:白
エコバッグオンリーショップ 「the new shoppingbag」

こちらのサイトはエコバッグのみ扱っているネットショップです。キーカラーには主張の弱い色を使用していますが、カラフルなエコバッグ画像を多様することにより、サイトに明るさ、親しみやすさを与えています。

シンプル・無地Tシャツ専門販売サイト「EDGY」様

  • キーカラー:黒
  • サブカラー:グレー
シンプル・無地Tシャツ専門販売サイト「EDGY」

こちらのサイトはオリジナルプリントTシャツを販売しているネットショップですが、「暗さ」「重さ」「硬さ」をイメージさせる黒をキーカラーに用いてますが、販売商品のTシャツの色が鮮やかなため、力強さが強調されてますね!またサブカラーにグレーを用いることにより、シャープさが加わっています。

平川氏の格言:効果的な色使いでサイトイメージの定着と売上アップを目指そう!

連載一覧へもどる