ホームページに最適な配色を選ぶ方法

無数にあるホームページの中で、あなたはどのように他のホームページとの差別化を図っていますか？　ユニークな商品やサービスを売りにしている人も少なくないはずです。ホームページは視覚で入ってくる情報が多いため、差別化するためには、掲載するコンテンツやビジュアルも大きく影響してきます。

今回は、その中でもホームページにおける「最適な配色の選び方」のポイントをご紹介します。色は人の心理にも影響を与えるため、適切な場所で適切な色を使うことで、購買・参加意欲を掻き立てたり、あなたが伝えたいことを後押ししてくれる要素になるでしょう。

今回の記事を読んで、さっそく色の使い方を見直してみましょう。

1. 色の組み合わせを考えよう
2. 事業に適切な色を選ぼう
3. ブランドカラーを見つけよう
4. 色を上手く使うためのコツ
5. 色の選び方のコツ
6. 全体の配色を設定しよう

あなたのホームページはどれくらいの色を使って作っていますか？　注目してほしい箇所を色で目立たせていたら、いつの間にかカラフルに・・・。なんてことありませんか？　色が多くなりすぎると、目立たせたい部分がかえって見えづらくなったり、まとまりのないページに見えてしまうので、多くても ２〜３ 色で抑えましょう。組み合わせによって与えるイメージも変わってくるため、いくつか候補を出したうえで、あなたのホームページにぴったりな色を探してみましょう。

また、色の組み合わせを考える上で「視認性」についても注意が必要です。文章やロゴなど、背景の色と被ってしまい閲覧者に「この文章の読みづらいな〜」と思わせてしまうと、伝えたい情報をうまく伝えることができません。

色選びをする時に、まずはあなたが個人的に好きな色を選びましょう。色にはそれぞれ、与える印象や心理効果があります。あなたのホームページが意図するメッセージに合致しているかどうかを考えながら、色を選んでみましょう。例えば、高級感を出したいのであればモノトーンカラー。専門的なホームページなら、真面目なトーンの色が合います。 飲食を扱っているのであれば、食欲を促すカラーを選ぶと良いでしょう。

ブランドカラーは、そのブランドの「個性」を際立たせていく上で必要不可欠な要素です。例えば、 文字を一言も読まず、配色のみでどこかのブランドを連想できたのであれば、その色がブランドのイメージと深く繋がっていることを意味します。

あなたのホームページやお店のブランドにはブランドカラーがありますか？　業界や業種によって一般的な配色は変わります。例えば、お水を販売している会社のブランドカラーは緑を基調としたものが多かったり、清涼飲料水だと青や水色で爽やかな印象が多いかと思います。そのため、カフェ、アクセサリーショップ、不動産、小売など、あなたの属する業界や業種でよく使われている色についてリサーチしてみましょう。

お料理でいうと、スパイスは少量でも十分なのと同じように、ホームページでもアクセントとなる色は、少量でも存在感があります。明るい色は人目を引きますが、見る人の心的パワーも消耗させてしまいます。そのためホームページ内をモノトーンで統一し、一色だけアクセントカラーを使う方法も効果的です。そうすることで、全体的にはシンプルで落ち着いた印象になり、目立たせたい部分だけにアクセントカラーを使うことで、全体のデザインとしてもメリハリをつけることができ、伝えたいことをさらに強調させることができます。 

一色では物足りなければ、二色使って見ると良いでしょう。しかし両方を均等に使うのではなく、そのうちの一つを「メインカラー」とし、もう片方は使用頻度を下げて「サブカラー」として使います。

ホームページの配色として、色を表現するのは背景色や文字色のみではありません。あなたが普段何気なく使っている画像や写真も、色を表現する方法の一つです。レストランのホームページでステーキの写真を載せると、ステーキの程よい赤みや店内の温かみなどが、この三色からイメージすることができます。

商品、パッケージなどや、もしくは仕事で一貫して使用している色がすでにあるのなら、まずはその色を使ってみましょう。もし、すでに会社のロゴがあるなら、そのロゴの色に合わせると良いでしょう。

下の例は陶芸品のホームページですが、商品の写真を背景画像の色に合わせた配色にし、全体的に洗練された印象になっています。さらに、陶芸品の写真を背景に設定することで、どのようなホームページなのかが背景画像と使っている色から連想することができます。

Jimdo では横幅をフルサイズで背景画像として使えるレイアウトを用意しています。もし、ホームページ用として良い写真や画像を持っていれば（もしくはフリー素材で見つけたら）、その写真に合わせて色を選んでみましょう。 

ホームページ全体の配色が決まったら、さっそく画像やロゴを挿入してみてイメージと合っているかを確認をします。そのあとは、ホームページの細かい配色も見直して、全体の配色を仕上げていきましょう。

どこの色を変えたら良いのかわからない場合は、見出し、ボタン、ナビゲーションメニューの色を変えるところから始めてみましょう。配色のコツが掴めてきたら、他の要素の色も変えて楽しんでみてください。

「保存」を押さない限り、デザイン設定は適用されませんので、何度でもやり直しすることができます。また、詳細設定をオンにすると各要素（パーツ）を個別に変更することができます。 

いかがでしたか？　 あなたのホームページも、配色のコツを踏まえて三色以内に抑えてみると、洗練されたページに早変わりするはずです。さっそくホームページを見直してみましょう！