色彩は面積比で扱う

坂本邦夫 — Wed, 27 Jan 2010 03:15:32 +0000

色彩のイメージは面積によって大きく変わります。その面積比についてご説明いたします。

ベースカラーを中心に配色

メインの１色をベースカラーと呼んでおりますが、インテリア等のカラーでよく使われるのがベースカラー、サブカラー、アクセントカラーという考え方で、その面積の比率を考えて配色を行うという手法です。この手法はウェブサイトの配色でも非常に有効です。

ベースカラー 70%
サブカラー 25%
アクセントカラー 5%

この割合で配色すると調和しやすいのですが、あまり細かい数字にはこだわらなくて良いでしょう。ただし先程決めたベースカラーの割合が減ってきて、他の色が目立ちすぎるようなら注意しましょう。ベースカラーがきっちりと定まっていれば、サブカラーとアクセントカラーを選ぶことはそれほど難しいことではありません。

面積比に従って並べる

色彩を考える時には色をこのように面積比に従って並べていきましょう。大事なことは面積比を重視して適当に色を塗らないということです。同じ２色を使っていても、面積比が変われば印象が全く変わって見えてしまいます。逆の言い方をすれば面積比を守っていけば、イメージがぶれにくくなります。あとで困らないように必ず守るようにしてください。

例では同じ色相と彩度で明度だけ変えた２色を並べていますが、これを入れ替えるだけでも皆さんの受ける印象が違う物になることと思います。

実際に配色を行う時には２色を分離して使うことも多いと思いますが、距離を置かずに並べることは隣り合った色が調和するかどうかを考えるのに有効です。

ご自分で配色を行う時には下の画像のようなものを作り、それに彩色をしていくと面積比もわかりやすいでしょう。

関連記事：

ベースカラーを決定

坂本邦夫 — Wed, 27 Jan 2010 03:06:38 +0000

全体の基調となるベースカラーを慎重に決定します。

ベースカラーの選定

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

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

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

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

色の面積効果に注意

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

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

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

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