ayanpaのデザインうんちく: 配色を考える～マンセル色環～

配色を考える～マンセル色環～

屁持論：
色は「願望」、「自然」は色の黄金率

色もイロイロあるけれど　その3 カラーと対比では色の対比について書いたが、
今回は、マンセル色環を利用した「配色」の方法を考えてみるがね。

「配色」で一番重要なのは、隣り合う色が邪魔し合わないようにすることだなも。
綺麗な配色をするためのコツは、「グレースケールで作成してから色をつける」だなも。
（※グレースケールに関しては色もイロイロあるけれど　その１を参照。）

コンセプトによってメインカラーが決まっているのなら、後でそれを基本に濃淡をつけたり補色を加えたりするだけだで、コンテンツも決まっとらんうちから配色についてあれこれ悩むよりも、まずグレースケールのDTP（画面編集）できっちり作りこんでからの方が「ここは目立たせたい、ここは隣のコンテンツに対して抑えよう」と自然に強弱の差が出せて作業効率があがるし、良いものが出来る。

グレースケールは明暗だけで表現力に乏しいと思うかもしれないが、デッサン力のある人は濃淡だけで色や質感を表現することができるのである。
デッサン力のない人にとっても、最初は戸惑うかもしれないが色という複雑な情報がない分だけ余分なことを考えなくてもいいのである。

「塗り絵」を頭に浮かべてもらうといいと思うのだが、図柄の輪郭線があるものとないものとではどちらが色を決めて塗りやすいだろうか？
ただ、子供の「塗り絵」と違うのは、図柄の輪郭線だけでなく「明暗」が加わることだがや。

だで、順番としては、次のように行うと迷いが少にゃー。

コンセプトの確立
　　↓
コンテンツの洗い出し
　　↓
全体の輪郭線作成（画面分割）
　　↓
グレースケールのＤＴＰ作業
　　↓
カラーのＤＴＰ作業

--------------------------------------------------------------------------------

下図を見て欲しいのだが、最も明るいのを100％として、「80％・55％・25％」の組み合わせのグレースケールを作ったとする。

そこでマンセル色環の登場なのだが、図左側の「明度」の縦軸の80％の明るさに対応する横軸の色の種類は「Vp/P/B」であるということがわかる。
55％は「Lgr/L/S/V」あたり、25％は「Dgr/Dk/Gr/Dl/Dp」あたりになるがや。

ここまでわかれば、あとはこれにイメージカラーを当てはめるだけである。
「明度対比」として、便宜上の組み合わせを「Dk/Lgr/Vp」とすると上図の1番上の段のようになる。彩度を上げるには横軸に移動させ、「Dp/V/B」とするのが図2段目だ。

図1段目・図2段目どちらにしても明度は「80％・55％・25％」の組み合わせであるので、図3段目のように「Dk/V/Vp」と混ぜて「彩度対比」させても良い。さらに、図4段目は異色混合の形で、これでも「80％・55％・25％」の組み合わせである。
このように、グレースケールで作成しておくことで、後々色々なバリエーションが組めて選択肢も増えるし配色に自由がきくのである。