超簡単デザイン 色のお話（2） 明度

色の基本…「色相」「明度」「彩度」のうち
先日、「色相」の話をさせていただきました。

少しあいてしまいましたが、
今日は「明度」の話をします。


ちょっと復習しますが…
「色相」とは、文字通り「色味」のことです。
赤とか青とか、黄色とか。
それが色味＝「色相」です。

前回のマンセル色相環もご覧くださいね。


明度とは？

で、「明度」というのは、
これも文字通り「明るさ」のことです。

赤なら、真っ赤な赤からだんだん白っぽくなって
限りなく白に近くなる。
これが「明度」です。

【図1】をご覧ください。
こんな感じですね。


【図1】



ちなみに、真っ赤や真緑から黒い（暗い）方向に行くのは
「彩度」の関係なのですが、
まぁ、固いこと言わず
明るさ暗さが「明度」と思ってもらってもいいかもです(^^)


白から黒への明度の変化を
特に「グレースケール」と言ったりします。【図2】


【図2】



コントラストとは？

コントラストというのは、テレビとか、
パソコンの画面などで良く使いますよね。
画面でコントラストと言うと、
くっきりしているとか、ぼやけているとか
そんなことを言うと思います。


グラフィックでも、似たようなことですが、
隣り合った色の「明度の差」のことを言います。

コントラストが高い（強い）のは、隣り合った色の明度の差が激しい。
コントラストが低い（弱い）のは、隣り合った色の明度の差があまりない。

【図3】がコントラストが高い例。
【図4】がコントラストが低い例です。


【図3】

【図4】



図3は赤と黄色という色相的にもはっきり違う組み合わせで
コントラストを高く（明度差を大きく）してみました。

図4は赤とベージュという色相的には比較的近い組み合わせで
コントラストが低い（明度差があまりない）配色です。



コントラストが強いのと弱いのとどちらがいい？


はっきりしたパキッとして見えるのは
コントラストが強い方です。

コントラストが弱いとぼやっと見えがちです。

ですから、文字…特に小さな文字を
きちんと読ませようと思うと
ある程度コントラストが強くないといけません。

しかし…

先ほどから書くように、
色には「色相」の要素もあります。
さらには「彩度」の要素もあります。

コントラストが強ければ
良い配色というわけにはいきません。

コントラストが強すぎる配色は
刺激が強すぎ、却って読みにくかったり
不快感を与えることもあります。

（上の図3の赤と黄色の組み合わせをずっと見ているのは
つらくありませんか？）

コントラストが弱くても、心地良い配色もあります。
いわゆる「パステルカラー」などはその典型ですね。

配色というのはそれくらいデリケートな部分があります。
その辺もまた追々お話しますね。


近い明度のグループを考える


最初の【図1】を縦に
濃いところ、中間、淡いところを
抜き出してみました。【図5】


【図5】



いかがでしょう？

Aは、いわゆるビビッドな色たち。
強く、はっきりした色の群です。

Bは、中間トーンの群。
文字にも背景にも、比較的使いやすい色の群です。

Cは、ソフトな色、いわゆるパステルトーンの色です。
ただし、背景などにしか使えないですね。


明度を考える時、こういう明度のグループで考えると
考えやすいのでは、と思います。


では、次は「彩度」を書きます。