ホームページを作成しようと思ったとき、どのようなことを考えれば良いホームページを作ることができるのでしょうか。良ホームページとはどんなホームページなのでしょうか。
株式会社みやあじよでは、「お客様の売上をあげること」を目的にホームページを制作しています。
今回は、「売上をあげる」などお客様の目的を、ホームページを制作することで達成していくために重要なポイントの一つである、 ホームページの配色の考え方についてまとめてみました。
配色の決め方
目的を明確にする
デザインを考えるときに重要になるのは以下の4つです。
- ホームページ作成する目的
- ホームページを公開することによって期待する効果
- ターゲット
- 伝えたいイメージ
ターゲットの違う2つの英会話教室を比べてみます。
| 都心にあるA英語教室 | |
| ホームページの目的 | 集客 |
| 期待する効果 | 売上が上あがる |
| ターゲット | キャリアアップを目指す20～30代女性 |
| 伝えたいイメージ | 親しみやすい、落ち着いている |
| 駅前にあるB英会話教室 | |
| ホームページの目的 | 集客 |
| 期待する効果 | 売上があがる |
| ターゲット | 英語を習いたい小学生とそのお母さん |
| 伝えたいイメージ | 楽しそう、元気、明るい |
A英会話教室では
- キャリアアップを目指す都会の女性
- 親しみやすい、落ち着いているイメージ
という点から、全体を白やグレーでまとめ、柔らかいパステルカラーや、スタイリッシュなビビッドカラーなどでアクセントをつける配色などが考えられます。
B英会話教室では
- 小学生とその保護者
- 楽しそう、元気、明るいイメージ
という点から、黄色やオレンジ、水色などカラフルな色を背景にしてもいいかもしれません。
この配色がもし逆になってしまうと、どうでしょうか。
キャリアアップを考える大人の女性に、親しみやすく落ち着いたイメージを与えるのに黄色やオレンジなどのカラフルな色はどうでしょうか。
英会話を習わせようとするお母さんと子供が、白やグレーで統一された落ち着いたデザインのホームページを見て楽しそうと思うでしょうか。
もちろん、配色以外のデザインによっては例外もあるので一概には言えませんが、目的、効果、ターゲット、イメージこの4つを明確にして配色を考えることは、デザインを考える上でも重要なポイントになってきます。
調査する
目的、効果、ターゲット、イメージを明確にしたら、次はホームページのキーカラーを決めていきます。
キーカラーを決めていく上では、先述した4つのポイントの他に以下のことを調査することが重要です。
- 競合他社との比較
- すでにあるロゴや商品、店舗の雰囲気
都心にあるA英会話教室を例にあげましたが、競合する他の会社のホームページと同じ配色・デザインでは、せっかくホームページをつくっても印象に残りにくいため、競合他社のホームページ をリサーチし印象に残るデザインを考えていきます。
また、すでにあるロゴや、商品、店舗の雰囲気とも統一感のある配色を考えていかなければなりません。
ロゴや商品、店舗の雰囲気と統一感がある色をキーカラーにすることで、ホームページの目的を正確に伝えることができ、結果として目的を達成することができるホームページとなるのです。
配色のバランスを考える
ホームページを制作する上での配色の決め方を考えてきましたが、どんなに良い配色を考えても配色のバランスが悪ければ良いホームページは作れません。
そこで、バランスの良い配色を考える上でよく用いられる方法が、75:25:5の法則です。
75:25:5の法則
75:25:5の法則は、その名の通り
- ベースカラー70％
- メインカラー25％
- アクセントカラー5％
の配分で配色するとバランスの取れた配色になるというテクニックです。
ベースカラーベースカラーは、一番面積が広いためメインの色を引き立て全体に統一感を持たせる色になります。
メインカラーメインカラーは、先述したキーカラーやコーポレートカラー、ブランドカラーを用い、ホームページのイメージを印象づける主役の色になります。
アクセントカラーアクセントカラーは一番目立つ色を使い、その名の通りアクセントとなって全体を引き締め、見ている人の目を引く役割を持つ色になります。
4色以上の色を使う場合は、色相やトーンのどちらかが共通する色を使うとバランスが崩れにくいです。
色が与える印象
色の選び方やバランスの考え方をまとめてきましたが、最後に、どの色がどのような印象を与えることができるのかについてまとめたいと思います。
ホームページ以外にも、なにか色を選択するときの参考になると思います。
赤
エネルギー、情熱、積極的
ピンク
女性、柔らかい紫
高貴、神秘、宇宙、厳粛青
信用、清潔、若さ水色
清涼感、透明感紺
フォーマル 、誠実緑
穏やか、自然、平和、リラックス黄緑
ポジティブ、ポップ黄色
明るい、陽気、カジュアル金色
高級感オレンジ
温かい、親しみ、活動的ベージュ
協調性茶色
安らぎ、重厚、伝統黒
高級感、自信グレー
安定、上品、調和、落ち着き白
清潔、平和、純粋、柔らかい
まとめ
いかがでしたでしょうか。ここまで、ホームページ制作における配色の方法と重要性についてまとめてきました。色の与える印象と配色のバランスを考えることで、より効果的なホームページを作ることができます。
株式会社みやあじよでは、このようにホームページの目的と効果、最適なカラーリングを考えてデザインを行っています。
また、制作していく上で目的の設計からゴールの設定までお手伝いしていくので、具体的な目的やコーポレートカラーやブランドカラーが決まっていない方、ロゴやホームページのデザインのリニューアルをしたい方も、ぜひお気軽にご相談ください。
