Loading...
  • 0k
  • 0
ウェブデザイン \ 2016年6月6日

ホームページ配色入門編:正しい色選びのデザイン技法

ウェブデザインにおいて最も重要な要素の一つが、配色パターンの設定です。時に、コンテンツを書くより、配色の決定に時間がかかることも多いと思いますが、配色はサイトがデザイン的に美しいかというだけでなく、全体の雰囲気や、サイトを通して伝えたいメッセージにまで影響を及ぼします。

サイト作成の最初段階で配色パターンを定めるのも、このためです。今回は、配色が苦手な方のために、 色の選び方のポイントやツールをご紹介します。

ホームページの配色パターン

配色パターンとブランド

配色を決定する際は、デザイン全体のテーマから考え始めましょう。色選びはホームページの文字色とのコントラスト、バナーの色との組み合わせなど、狭い視点のみで考えてはいけません。配色はブランド全体を左右する重要なデザイン要素だからです。

例えば、同じ会社であれば、会社のホームページに一つのロゴを、販売している商品のパッケージングにもう一つ別のロゴを使うということはありませんよね?ロゴは一つに統一すると思います。

配色パターンも、これと同じ考え方です。カタログや、その他のマーケティング資料など、別々の媒体であっても、同じ配色パターンを使っていくことがブランディングの基本で、ブランドとしての一貫性を保つことに繋がります。会社のテーマカラーは何にすべきなのか、そこまで考えた上でサイトの配色を決定しましょう。

ホームページの配色パターンとブランド

ひらめきと理論

ホームページの配色パターンは試行錯誤を繰り返しながら決まっていきます。ひらめきやデザインセンスだけで配色が決定されることは少なく、エジソンの「天才は1%のひらめきと99%の努力」という名言のように、むしろ、センスよりもデザイン理論が大事だったりします。

デザイン技法として配色パターンは、それぞれの色の補色や調和を測りながら決めていきます。色の基本体系や相対関係を示すカラーホイールと、これから紹介する「色に関する基本情報」を組み合わせることによって、 ベースカラー、メインカラー、アクセントカラーといった好ましいバランスで、色の使い分けを決めていきます。

カラーホイールは、デザイナー以外の方にあまり馴染みのないツールですが、心配はいりません。インターネット上に、Abobe Kuler(Abobe Color CC)などの無料の便利ツールが用意されているので、配色パターン作成に活用いただけます。

■Abode Kulerの詳細な使用方法はこちらをご覧ください

ホームページの配色パターン、理論

ユーザーエクスペリエンスへの配慮

ウェブデザインは、サイトをセンス良く仕上げる作業とイコールではありません。 優秀なデザイナーはユーザーエクスペリエンスにまで配慮します。サイトのデザイン性だけでなく、実用性の向上のため、配色を考える際は以下の注意事項も考慮に入れてください。

  • ホームページ上の文字は誰にでも読みやすい必要があります。背景色と文字色のバランスが適切でない場合、違和感により訪問者のサイトでの滞在時間が下がります。
  • 色弱者に配慮したホームページであるためには、カラーユニバーサルデザイン機構が推奨している配色セットガイドブックを参考に、色相と明度に注意して配色を考えるようにしましょう。
  • CTA(コール・トゥ・アクション)ボタンや、その他のクリック可能なボタンは、訪問者に行動を喚起する役割を備えています。そのため、目立つ色を選択しましょう。

ホームページの配色パターン、実用性への配慮

色彩心理学

色が、私たちの心理や行動へ多くの影響を与えていることについてご存知でしょうか? 赤色は活動的で、人に行動を促す色であり、青色は誠実さ、緑色は優しさを伝えます。多くの人は配色パターンから暖かさや冷たさを読み取り、色数を抑えたホームページに清潔さを感じます。

このことからも、「自分の好きな色」を選択基準とするのではなく、ホームページのテーマが基準となることが前提となります。色が与える心理的な作用とデザインとの関係についてもっと知りたい方は、こちらの記事を読んでください。分かりやすくまとまっています。

ホームページの配色パターン、色彩心理学

文化的な要素

ホームページのテーマから色選びを始め、カラーホイールによってバランスを調整しても、文化的な要素が落とし穴となり、期待した効果とは異なった結果につながる可能性があります。色は文化圏によって、異なる意味合いを持つからです。

例えば、英語圏において白色は「清浄」や「純粋」を表現しますが、儒教的な文脈においては「無」や「空白」を意味します。緑色は一般的に「自然」を想起させますが、イスラム教の文脈では最も「神聖」な色の意味が強くなります。さらに、米国の大統領選挙の時期になると、赤(共和党)と青(民主党)で州を色分けするため、赤と青の組み合わせは特別な意味を持ちます。

どの国の人から見ても完璧な配色をしようとするのは困難ですが、「色の意味は全世界共通である」という認識を持つのは避けてください。

実践でデザイン力を向上!Wixでホームページを作成しましょう!

ホームページ作成ならWix

 

今後もWixブログを無料購読して、Wixの最新情報・役立つ情報を受け取りましょう!


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

Wixブログを購読 \  

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい