Webページの色を決める方法を解説！クリック数を伸ばすのは何色？
「Webページの色をどう決めたらいいか分からない」
「アクセスやクリック数が増える色ってあるの？」
今回はそんな悩みや疑問に答えます。
結論からいうと、色をうまく使えばセンスのいいWebページがつくれるだけでなく、アクセスやクリック数を伸ばすことも可能です。
本記事では、Webページの色を決める方法と、クリック数を伸ばす色について解説していきます。ぜひWebページをつくる際の参考にしてください。
Webページの色を決める方法【3ステップで解説】
Webページの色を決める方法は、次の3ステップです。
-
- 色の基礎知識について理解しよう
- メインカラーを決めよう
- 組み合わせる色を決めよう
順番に解説していきますね。
1.色の基礎知識について理解しよう
まずはWebページの色について、最低限の基礎知識を理解しましょう。
好きな色を適当に組み合わせるのはNGです。色の好みやセンスは人それぞれなので、悪い印象を与えてしまったり、アクセスが減少する要因になりかねません。
例えば、ユーザーの視線を引こうとして10色も20色も使ってしまうと、ページが見づらくなるうえに統一感もなくなります。
一方、シンプルで見やすいWebページは3つの色だけで構成されることが多いです。3色構成の場合、それぞれの色に明確な役割を与えることで、さらにまとまりが出ます。
それぞれの役割を簡単に説明すると次のとおり。
-
-
-
- メインカラー ：イメージカラーとして使われる
- ベースカラー ：背景等に使われる
- アクセントカラー：強調するために使われる
-
-
より詳しい内容については、このサイトも参考にしてみてください。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」
3つの色の比率や役割についてまとまっています。
さらに深掘りして、Webページの色について知るならこのサイトがおすすめ。
ここに書かれている内容をおさえれば、色の基礎知識については申し分ないでしょう。
2.メインカラーを決めよう
基礎知識をおさえたらWebページのメインカラーを決めます。
メインカラーは、Webページの印象を大きく左右する最も大事な色。Amazonならオレンジ、Facebookなら青、LINEなら緑というように、有名なサイトや企業にもイメージカラーがありますよね。
色はロゴマークよりも記憶に残りやすいため、Webページの象徴となりうるのです。
そして、色にはそれぞれに固有のイメージがあります。メインカラーはユーザーに「どんな印象を与えたいか？」「なにを伝えたいか？」で決めましょう。
下記のサイトが役立ちます。
12の色について、イメージや心理的作用が記載されているので、ぴったりの1色を見つけてみましょう。
有名なWebページがどのような色を使っているか知りたい場合は、Web Colour Dataを利用してください。
URLを入力すれば、そのWebページの配色パターンを表示してくれます。センスのいいWebページをつくるためには、素敵なデザインをどんどん真似していくことも有効です。
3.組み合わせる色を決めよう
メインカラーが決まったら、それを元にあとの2色を決めます。
色には相性があり、合わない色を組み合わせてしまうとゴテゴテしたページになるので注意しましょう。相性のよい色を見つけるには、色相環を使うのが便利です。
色相環では、似ている色が隣同士に、似ていない色が反対側に並べられています。
ベースカラーは、メインカラーに近い色を選ぶと調和しやすくなるでしょう。逆にアクセントカラーは遠い色を選んだ方がより役割を果たしやすいです。
ただ、あれこれと考えるのが面倒なら、配色パターンの見本帳を使うのもひとつ。
使いたいメインカラーを選択すれば、バランスのよい色の組み合わせをいくつも教えてくれます。
また配色全体のイメージから、Webページの色を決めたいならこのサイトも便利です。
配色パターン見本40選：ベストな色の組み合わせを探せるツール
「万人受けする配色」や「元気・アクティブ系の配色」等、与えたい印象にマッチする配色が40パターン用意されています。
ここまでの内容を参考にして、ぜひWebページにぴったりな色を決めてくださいね。
Webページのクリック数を伸ばす色
色は人間の感情だけでなく、行動にも大きな影響を与えることが分かっています。そのため申し込みボタンの色を変えるだけでも、クリック数は大きく増減するのです。
ではどの色にするとクリック数が伸びるかというと、それはWebページの内容や読者層によっても違うため一概にこれということは出来ません。
ただ一般的には、「ボタンに赤や緑を用いると、クリックされる確率が高まりやすい」とされています。
| 色 | 効果 | クリックされやすいもの |
| 赤 | 購買意欲を煽る | 安いものやセール品 |
| 緑 | 安心感を与える | 高くて長期的に使うもの |
赤や緑にすれば確実にクリック数が伸びるとは限りません。しかし、色を決める際のヒントにはなるでしょう。
色の効果を確かめるには、同じページでボタンの色だけを変えて、数字を比較するのが有効。繰り返すうちに最もクリック数の高くなる色が見つかります。
まとめ
最後に本記事の内容をまとめます。
-
-
-
- Webページでは好きな色を適当に組み合わせるのはNG
- Webページは3つの色で構成すると見やすくなる
- Webページのイメージはメインカラーで決まる
- 色の組み合わせは色相環で決めるとバランスがよくなる
- 色を変えるだけでアクセスやクリック数が増減する
-
-
色がWebページに与える影響には、われわれが思っている以上に大きいものがあります。
Webページのアクセスやクリック数を増やすために、ぜひ本記事で解説した内容や、紹介したサイトを参考にしてみましょう。