悩んだ時に色をプラスするのではなく、減らしてシンプルになるようにします。
色数を減らす
配色がこれでよいかどうか悩む場合が多いと思います。もしあなたの配色がベースカラー・サブカラー・アクセントカラー合わせて6色以上ある場合には、分割したサブカラーやアクセントカラーなどから1色減らしてみましょう。
ここで間違っても色を増やしてはいけません。5色で制御しきれないものが6色で収まるとは限りません。色数を増やしたい場合にもいったん色数を減らしてから、使用する色を再検討しなおすのが近道でしょう。
色の面積を減らす
単純なことではありますが、色を使う面積を減らせばそれだけシンプルになっていきます。内容が増えすぎて、レイアウト部が混沌としてきた場合などは素直に色の面積を減らしましょう。
文字よりもバナーや写真などを小さな面積に詰め込んだ時や、テキストに色を付けている場合に特に混雑して感じられます。
色を塗りたいテーブルのセルの背景にベタで色を塗るのではなく、白い部分を増やしたり、余白を広めに取ったりするなど、アクセント的に用いてやればスッキリとした印象を与えることができます。
引き算のカラーコーディネート
カラーコーディネートに限ったことではありませんが、迷ってしまった時はウェブ上の各要素の色が本当に必要なのかどうかを考えて削っていくことも必要です。場合によっては色彩設計を見直す必要もあるでしょう。
この色を減らすと言う引き算のカラーコーディネートが出来るようになれば、色彩の効果を今以上に上手に使いこなすことが出来るようになったと言ってよいでしょう。
« 隠す
全体の基調となるベースカラーを慎重に決定します。
ベースカラーの選定
いよいよここから色彩設計をしてまいりますが、これまでの手順を振り返ってみると、ウェブサイトの目的の整理、そこから導き出される言葉からのイメージの選定、競合サイトの調査という手順で進めてきました。現段階で集めたデータを整理すれば、色相が数種類に絞られていることと思います。
いろいろ考えた末に残った色には理由があるということですので、簡単には切り捨てられないとは思いますが、シンプルで印象に残る配色を目指すためにメインのカラーを１色（ベースカラー）に絞ることにいたします。
一口に赤と言っても、オレンジ色に近い物や臙脂のような深い色もあります。出来るだけ多くの色を作ってみて、イメージに合うような色を選びます。色相を明度や彩度などを変えながら、グラフィックソフトなどで実際に大きな面積で色を塗りましょう。まぶしく見えないかなどを確認しながら、自分が伝えたい印象に本当に合う色をベースカラーとして決定します。
また社員などがいれば投票してもよいでしょう。１人で決めずに第３者の共感を得られる色を選択出来れば、理想の色にまた一歩近づいたと言えます。メインに使われなかった色はアクセント的に用いることにすればよいでしょう。以降の配色については全てこのベースカラーを基準に行っていきます。
色の面積効果に注意
色彩には面積効果というものがあり、使われている面積によって見え方が変わってきます。一般的には色の面積が大きくなるとより明るく鮮やかになります。また重い色はより重くなったりというようにその印象にも影響を与えます。
左の例では左右共に#FF6633の同じ色なのですが、右側の面積の大きい方が明るくあざやかに見えていると思います。ベースカラーは大きく使われることも多いので、大きさによる印象の違いが出ないように決めたベースカラーを様々な面積で塗ってみて、確認することをおすすめします。
ベースカラーに白を選んだ場合
ウェブサイトの背景色は何も指定しなければ白く見えるはずです。Yahoo!のページを見ていただければご理解いただけると思いますが、一番面積として大きいのは白ですが、実際にはロゴの赤の方が印象に残るとおっしゃる方が多いのです。白を印象に残すのは難しいので、ベースカラーに白を選ばれた場合はベースカラーを変更し、その上で配色する部分の面積を減らし、背景色に白を指定することにします。
« 隠す
▲このページの先頭に戻る
