経営者向けのメルマガ『経営塾』

その色で大丈夫? ホームページの配色を見直そう

皆さんはホームページの色についてどのようにお考えでしょうか?
何となく好みのカラーを選択していませんか?

いちど【色の持つ効果】について考えてみましょう。

その選択次第で親しみが増したり、問い合わせを後押ししてくれるかもしれませんよ。

今回は、ホームページのデザインに欠かせない色の選び方について解説していきます。ぜひ最後までお読みください。

色選びのポイント

ホームページの改善を図る際には、大きくは見た目と中身に分けられます。
見た目の改善で、大きく印象を左右するのが「配色デザイン」です。

ただ好みをもとにバランスよく配色すれば良いわけでなく、

  • 訪問者にどんな印象を与えたいのか?
  • その印象は自社が提供する商品やサービスとマッチしているか?

といったポイントを踏まえて色を選ぶことが大切です。消費者の購買の判断は、実はかなり色が影響を与えていることがわかっています。

また、

  • お問い合わせボタン(CVボタン)の色
  • ロゴの色
  • ホームページ全体を印象づける色
    それぞれに適切な色がありますので、一つひとつ解説していきます。

お問い合わせボタン(CVボタン)の色

商品の購入や問い合わせなど、具体的な行動を起こすきっかけとなるボタンを「コンバージョンボタン」と呼びます。「お問い合わせはこちら」などと書かれているボタンをよく見かけると思います。

コンバージョンボタンには、「赤」「オレンジ」を使うのが有効です。
実際に緑と赤のボタンを同条件で比較した結果、赤の方が2割ほどクリック率が高まったという結果があります。その理由は、赤色の人の行動を導きやすいという特性が関係していると考えられます。

ただし、コンバージョンボタンが周囲の色に埋もれてしまっては、意味がありません。白い背景色に明るい色のボタンを配置してしまうと、見えにくくなります。つまり、周りから「浮いた」印象のあるような色を選択すれば赤に限らずお客さんの目に留まりやすくなります。

ロゴの色

企業のホームページには、企業やサービスを印象づけるロゴが使用されます。選択のポイントは、その色がブランドイメージと一致しているかどうか、ということ。

これに正解はありませんが、日本の代表的な企業のロゴマークの多くは、

  • 「活動的」な印象を与える赤
  • 「誠実」な印象を与える青
  • 「優しさ」を感じさせる緑

の3色で占められています。

企業イメージと色のイメージに沿って考えることがオススメですが、他社と差別化を図ってあえて意外な色を選ぶのも間違いではありません。

ホームページ全体を印象づける色

ではサイト全体を印象づける色について考えていきましょう。
ここでは、色ごとに解説していきます。

1)白・黒

白は、清潔や純粋さを、黒は、威厳や高級をイメージさせます。
白は日本人がもっとも好む色のひとつですが、白と黒の組み合わせは、私たちの感情にあまり影響を与えず、使いやすい配色です。

また、写真や画像を目立たせたいときには白と黒が最適です。
特にファッション通販サイトなどでは、白黒の背景がおすすめです。

2)青

青には興奮を抑え、冷静にさせる作用があります。「若さ」や「知性」を感じさせる青は、ホームページにいちばん使われやすい色です。
FacebookやTwitter、vimeoなどIT企業のロゴで青が使われることからも「信頼」のイメージを使った戦略と言えるでしょう。

3)緑

緑は興奮を鎮めたり、目の疲れを癒す効果があります。
緑は自然・健康・安心を象徴しているので、健康食品や野菜を販売する会社などに特におすすめです。また顧客に安心感を与えるため、病院や保育園のホームページにも適しています。

4)赤

赤は情熱やエネルギーを象徴する色です。コカ・コーラの赤を思い浮かべる人は多いでしょう。目を引きやすい色なので、販売色とも呼ばれ、割引などの表示にも欠かせません。

ただし、扱いが難しい色でもあり、色の組み合わせや配色を間違えると落ち着かない印象を与えてしまいます。ちなみに【あきばれホームページ】のWebサイトでは、深みのある落ち着いた赤色をイメージカラーとして採用しています。

5)橙色・黄色

橙色は、暖色系の中ではもっとも万人受けする色です。
橙色や黄色はビタミンカラーと呼ばれていて、親しみやすさと元気や活力、エネルギーがみなぎるような印象を与えます。

橙色は食欲を高める効果があり、食品を宣伝する配色としても最適で、クックパッドや吉野家、バーガーキングでも効果的に配色されています。
また黄色は、「明るさ」「楽しさ」「かわいらしさ」といったイメージを与えるため、子どもの元気さを表すのに最適です。

まとめ

さて今回はホームページのカラーデザインについて詳しく解説しましたが、いかがでしたでしょうか。

ふだん色の与える影響を感じることはあまりありませんが、実は人の行動、判断に大きな影響を与える要素のひとつです。

これまで、何となく色を選んでいた方は、今回の内容を参考に色選びを見直してみてはいかがでしょうか?

ページの一番上へ

初めてのホームページ作成

初めての方へ

初めてのホームページを作成する際に失敗しない勘所をご紹介。自作であれ、制作会社に依頼する場合であれ、ここだけは押さえて欲しいポイントをまとめました。

費用を抑えたホームページ制作

低コストでHP作成をしたい

ホームページを作成予定の方に、低料金でホームページを作る方法をご説明します。なるべく低料金でホームページ作成をしたい方は、ぜひご覧ください。

ホームページでお客さんを増やせる!
初心者むけガイドブック無料プレゼント

無料PDF

HP初心者むけ
集客できる
ホームページの作り方

本ガイドブックでは、初心者の方を対象に以下の3つをお話ししています。

  • どうすれば苦手な営業をせずに済むのか
  • どんなホームページを作れば、お客さんを増やすことができるのか
  • 低価格でホームページを作るにはどうすればよいか

集客でお悩みの方、ホームページ活用でお困りの方は、ぜひご一読ください。