配色と面積

色で塗りつぶした四角を三つ四つならべて、その色の組み合わせが、人にどんな印象をあたえるかっていう配色事典とか配色見本とかあるじゃないですか。

知的とかやさしいとか情熱的とかエレガントとかいって。

ああいうのって、でも、実際に Web デザインで配色を考えるときには、かならずしも実践的じゃないなあ、って思うんですよね。

というのは、あれ、四角がみんな同じ面積でしょ。あるサイトで使われている色をすべて抽出して、同系色のものはまとめて4色にしたとして、その4色で塗られている4種類の部分のそれぞれの面積の和が、みんなほとんど同じになるなんてことはありえないとおもうんですよね。

4色の組み合わせで人に与える印象って、各色の面積がばらついていても、変わらないものなんでしょうか。けっこう大小、その差がおおきく開いてる場合でも。

正直、昔から、4色もつかえるかよ、それともあれか、ちゃんと色彩学の勉強をした人ならやれんのか、とか思ってまして、でもそれは、同じ強さで4色を使おうと思うから無理なんですよね、って、ようやく最近そのへんに気がついてきた次第です。

色彩については、はずかしながらちゃんと勉強したことはことなくて、聞きかじりまじりの我流なんですけれども、配色って、少なくとも、Webページや雑誌なんかでは以下のようになってると思います。

１，トーンカラー

全体のトーンを決定づける色。あるいは同系色の一群の色。ページ全体の面積に占める割合は比較的大きい。

２，アクセントカラー

ページの中で、視線誘導上のポイントとなる箇所に用いられる色。全部あわせてもページ全体の面積に占める割合は非常に小さい。

３，ベースカラー

トーンカラーとアクセントカラーをのせて、それ自体としては人に積極的な印象を与えない色。ページ全体の面積に占める割合は印象の薄さの割には大きい。

それで、色数の比としては、上から、1:2:1 とか、ちょっとカラフルなやつで、2:3:1 とかなってるんじゃないですか。面積比はたぶん、4:1:5 とか。たんなる印象としてですけど。

そんなわけで、同格の４色の組み合わせじゃなくて、そういう色の役割も念頭におきつつ、面積の差も考慮に入れた配色事典なり、配色見本がほしいなあ、と思うんです。

URL を入力すると、そのサイトで使われている色を抽出してくれる Web アプリもいろいろありますけど、面積比のサポートも是非お願いしたいですね。ああいうのって、一回画面キャプチャして色を抽出するんでしょうか？ あるいは、firebug みたいに、firefox のエクステンションでもいいですね。

たぶん、円グラフで見るのがいいんじゃないでしょうか。その上で、トラディショナルとか、スポーティとか、ドレッシーとかいってほしいですよね。なんだ、ドレッシーって。
-----------------
sent from W-ZERO3