ベースカラーを決定

ベースカラーの選定

いよいよここから色彩設計をしてまいりますが、これまでの手順を振り返ってみると、ウェブサイトの目的の整理、そこから導き出される言葉からのイメージの選定、競合サイトの調査という手順で進めてきました。現段階で集めたデータを整理すれば、色相が数種類に絞られていることと思います。

いろいろ考えた末に残った色には理由があるということですので、簡単には切り捨てられないとは思いますが、シンプルで印象に残る配色を目指すためにメインのカラーを1色(ベースカラー)に絞ることにいたします。

一口に赤と言っても、オレンジ色に近い物や臙脂のような深い色もあります。出来るだけ多くの色を作ってみて、イメージに合うような色を選びます。色相を明度や彩度などを変えながら、グラフィックソフトなどで実際に大きな面積で色を塗りましょう。まぶしく見えないかなどを確認しながら、自分が伝えたい印象に本当に合う色をベースカラーとして決定します。

また社員などがいれば投票してもよいでしょう。1人で決めずに第3者の共感を得られる色を選択出来れば、理想の色にまた一歩近づいたと言えます。メインに使われなかった色はアクセント的に用いることにすればよいでしょう。以降の配色については全てこのベースカラーを基準に行っていきます。

色の面積効果に注意

色彩には面積効果というものがあり、使われている面積によって見え方が変わってきます。一般的には色の面積が大きくなるとより明るく鮮やかになります。また重い色はより重くなったりというようにその印象にも影響を与えます。

左の例では左右共に#FF6633の同じ色なのですが、右側の面積の大きい方が明るくあざやかに見えていると思います。ベースカラーは大きく使われることも多いので、大きさによる印象の違いが出ないように決めたベースカラーを様々な面積で塗ってみて、確認することをおすすめします。

ベースカラーに白を選んだ場合

ウェブサイトの背景色は何も指定しなければ白く見えるはずです。Yahoo!のページを見ていただければご理解いただけると思いますが、一番面積として大きいのは白ですが、実際にはロゴの赤の方が印象に残るとおっしゃる方が多いのです。白を印象に残すのは難しいので、ベースカラーに白を選ばれた場合はベースカラーを変更し、その上で配色する部分の面積を減らし、背景色に白を指定することにします。