お役立ちコラム

ホームページの配色はイメージに合っていますか?

ホームページを簡単に製作できるCMS(Content Management System)やエディターが数多く提供されるようになり、自社でホームページを製作する企業も増えてきていますが、ホームページを設計するとき誰もが悩む事のひとつに「配色」があります。
多くのCMSではテンプレートが準備されており、気に入ったテンプレートを選んだあとは文言や写真を差し替えたりページを追加したりすれば、ある程度のホームページが出来ます。そして「色はテンプレートそのまま」や、「この色が好きだから」「なんとなく」で色を決めている人をときどき見かけます。そのような色の決め方で作ったホームページを運用していて「なんとなく会社のイメージと違うんだよな」「いまひとつパッとしない」「成果が上がらない」と感じていたら、配色を変更することをお薦めします。

色にはイメージがある

ホームページを見て閲覧者はその会社や製品のイメージを感じます。イメージは、掲載されている写真や動画、キャッチコピーや文章、会社や製品の情報など様々なコンテンツを見て感じるのですが、その際、色も大きな役割を持っています。
色にはそれぞれ人に与える心理的効果があり、自社や自社製品・サービスのイメージに合う色を使うと良いイメージを与え、合わない色だと逆効果となってしまいます。

(図①)色の持つイメージの例

イメージカラーを考えよう

自社や自社製品・サービスにロゴマークがあり明確に色が決まっている場合はその色を優先しベースにすると良いでしょう。特にロゴや色が決まっていない場合には「ホームページを見た時に一番印象付けたい色」を選びましょう。
色を選ぶには、まずは下記のようなことを書き出してまとめてみましょう。

(表①)確認事項と例

確認事項

内容(例)

ホームページの目的

会社と商品の紹介、新製品情報の発信 など

期待する効果

知名度アップ、売り上げ向上、問合せ数向上 など

顧客層(ターゲット)

関東在住、女性、30代~40代、スイーツ好き など

与えたいイメージ

清潔な、温もり、伝統的、落ち着いた など

同業他社の色

黒、白、黄色 など

与えたいイメージは、矛盾するものが混じっている場合は検討してどちらかを取り、できるだけ方向性を合わせると良いでしょう。また、顧客層とのギャップもチェックしましょう。 同業他社の色は必ず調査して、混同を避けるために可能な限り避けた方が良いです。「ライバル会社を真似している」と思われたら閲覧者に悪い印象を持たれてしまいます。 ここまで書き出したら図①のような色の持つイメージを見ながら大体の色を決めます。(表①の例だと白色と茶色が候補になると思います。)

配色の基本を知ろう

基本1)「70:25:5の法則」を採用しよう パッと見た時に見やすいホームページを目指す時、色の割合は、ベースカラー70%、メインカラー25%、アクセントカラー5%にするのが基本です。 上記で検討したイメージカラーをベースカラーにするか、メインカラーにするか、アクセントカラーで使うかは、ホームページの目的、期待する効果、顧客層、与えたいイメージを元に検討して決めます。

(表②)色の割合

名称

割合

概要

ベースカラー

70%

背景や余白部分など、ページ上でいちばん広い部分。企業のホームページでは白、黒、グレーなど無彩色が多い。

メインカラー

25%

ページの雰囲気を決める重要な色。ベースカラーが白の場合はイメージカラーや同系色を使用することが多い。

アクセントカラー

5%

スポット的に目立たせたい箇所などの色。ロゴマーク、電話番号やお問い合わせフォームを開くボタンなどに使用することが多い。

使用する色は3色~4色まで

あまり多くの色をひとつのホームページに使用すると、イメージが定まりにくく雑然として見えてしまいがちです。配色は「色相環」をもとに同系色の組み合わせ、反対色の組み合わせ、類似トーンや対照トーンの組み合わせの3パターンを基本に決めます。もしなかなか色が決まらなければ、上記の「70:25:5の法則」に当てはめて、

  • ベースカラー:白
  • メインカラー:グレー
  • アクセントカラー:イメージカラー

または、

  • ベースカラー:白 
  • メインカラー:イメージカラー
  • アクセントカラー:赤(またはオレンジ)

を、基本として考え、イメージカラーの同系色を1色追加するとまとまります。

ツールを使って色を選ぼう

ホームページ上で使う色は、赤「R」、緑「G」、青「B」の3色の値によって表現しています。当てずっぽうで値を決めても思い通りの色にならないことが多いので、配色を決めるときはカラーツールを使いましょう。

例1)Adobe Color Adobe color https://color.adobe.com/ja/create マウスによる直感的な操作で色の組み合わせを確認できるカラーツール。様々な配色パターンも用意されています。

例2)NIPPON COLORS

NIPPON COLORS http://nipponcolors.com/ 日本の伝統的な色の、色名、RGB、CMYKを調べる事ができるカラーツール。和風のサイトなどを作るときに重宝します。 Googleで「カラーツール」や「WEBサイト 配色」と検索すると他にもたくさんのカラーツールが見つかりますので、配色の参考にしてみてください。

まとめ

色の持つイメージは、そのWEBサイトのイメージに直結します。配色に対し悪いイメージや違和感を持たれたとき、最悪の場合、閲覧者は離脱するでしょう。つまり色が閲覧者に与えたイメージはコンバージョンにも影響するということです。色の選定で悩んでしまい苦手意識がある方も、基本を踏まえれば洗練されたWEBサイトを作る事ができるはずです。ぜひお試しください。今回の記事が少しでもホームページ改善の参考になれれば幸いです。