# 明度を意識しないと「見えない」「読めない」デザインになってしまう こんにちは、フリーランスデザイナーのちふねこです。 今日は、これだけは抑えておきたい配色の基本ということで、 見やすさは明度差で作るっていうお話をしていきたいなと思います。 今日のテーマは、今お伝えした通り、ズバリ明度差ですね。 この明度差がいかに大切かっていうところを改めてお話したいんですけど、 配色のコツって色々あって、 毎週火曜日のデザイン会でも何度か触れてるんですけど、 色の種類は3色程度に絞るとか、 色のトーンを合わせることで統一感を出せますよとか、 あとはカラーパレットツールを使うと配色作りやすいですよとか、 そういった配色のコツ色々ご紹介してきてるんですけど、 これを全部抑えたとしても、 もし明度差っていうものを理解できてなかったら、 いくら今お伝えした配色のコツを使いこなしていたとしても、 明度差が分かってなかったら、見えない、読めないデザインになっちゃうんですよね。 今日はこの明度差が分かってないと見えない、読めないデザインになっちゃうっていうのが、 どういうことなのかっていうのをお話ししていきます。 まずは明度差っていうのがそもそも何なのかっていうところからなんですけど、 漢字で書くと明るい度合いの差なので、 色の明るさのことなんですよね。 具体的に言うと、白に近いほど明度が高いっていうふうに言われていて、 黒に近いほど明度が低いっていうふうに表現されます。 この明度の概念って無彩色、いわゆる黒白グレーみたいな、 色の情報がない状態だと分かりやすいんですけど、 だんだん白に近い明るいグレーの方が明度が高くて、 どんどん黒に近いダークグレーとか濃いグレーになっていくほど明度が低いっていうふうに、 無彩色の時にはすごく分かりやすいんですけど、 色が付いた時、赤青黄色みたいな、色相っていう要素が入った時に、 ちょっと慣れるまでは明度っていうものが分かりづらかったりするんですけど、 すごくざっくり具体例をいくつか挙げておくと、 黄色だとか、パステル系の色、薄い色とか、いわゆる薄い色は明度が高い。 白に近い色の中でも白に近いような薄い淡い色っていうのは明度が高い色になります。 反対に黒に近い紺色とか、赤の中でもボルドーとか、 あとは緑、濃い緑とか、紫とか、 そういった重たい色というか、黒に近い濃い色っていうのは明度の低い色っていうふうに言われます。 で、こういう色の明るさの度合いによって、色の明度が高い低いっていうのがあって、 それがどう見えない、読めないデザインに繋がっていくのかっていうと、 隣り合う色の明度が近いと境界、いわゆる境目が曖昧になっちゃうんですよね。 要は背景の色と文字の色の明度が近いと、文字と背景の差が分からなくなりますよっていう。 境界線が曖昧になっちゃって、その文字自体が存在感がなくなっちゃいますよっていうことなんですけど。 例えば白い背景、白い紙があるとして、そこに黒いペンで文字を書いたらもうはっきり見えるじゃないですか。 それは白い背景の色と黒い文字の色が隣り合っている時の境界、文字の輪郭っていうのがパキッと見えるから、黒い文字はすごく読みやすいんですけど、 この時に、例えば黄色い蛍光ペンとかで文字書くと、白い背景と黄色い蛍光の文字ってめちゃくちゃ明度どっちも高いので、 境界が見づらくなるんですよね。どこが文字の輪郭か見えづらい。 なので文字の輪郭分かりづらくて、読めないデザインになっちゃうっていう。 こういう感じで、その隣り合う色の明度はなるべく差をつけないと、その境界が存在感なくなっちゃって、見えない読めないデザインになっちゃうっていうところなんですよね。 なので、いくら配色のコツで色を3色程度に絞って、かつトーンも統一させて、 なんならカラーパレットツールを使って配色決めましたってなっても、その色が例えば赤と青と白を使おうってなった時、 いわゆるこの赤と青と白の3色ってトリコロールって呼ばれるような配色なんですけど、 イメージとしてはフランスの国旗みたいな、ああいう赤青白を使うってなった時に、 皆さんはどれが明度が高くて、どれが明度が低いかイメージできますかね。 この3色の場合は、青と赤が明度が低くて、白が明度が高いんですよね。 なので、この中で背景とその上に重ねる文字の組み合わせとしてNGなのが、青と赤を一緒に使っちゃうことなんですよね。 青い背景に赤い文字重ねちゃうとか、逆に赤い背景に青い文字のせちゃうとかが、めちゃくちゃ見づらい配色になっちゃいます。 なので、いくらそのデザインの中で使う配色を、すごく統一感のある綺麗な3色を選べていたとしても、 そこで背景と文字とか重ねる色を間違っちゃうと、せっかく綺麗な配色も読みづらいデザインとか見にくいデザインになっちゃうんですよね。 っていうところで、この明度差っていうのをしっかり理解した上で、何か色の上に色を重ねるとき、文字を重ねるときに、 どうしたら読みやすいか、この文字は読みにくくないかっていうところの判断をするときに、この明度差っていうのを意識できていると、すごく見やすい、わかりやすいデザインになるんじゃないかなと思います。 最後に、このそもそもの明度差の感覚、明度が高い色、低い色の感覚って最初は本当よくわかんないと思うんですよね。 私もしっかり勉強したのって、やっぱり学生時代に課題でそういうことをやってきてたんですよね。 色を自分で作って明度差順に並べるとか、明度がランダムになるように配置するみたいな、そういった課題を自分で絵の具で色作りながら覚えてたところがあるので。 あるんですけど、ただ普段からそういった明度の感覚で意識できることもあって、 例えば、色って同じ、例えばオレンジ一つとっても明度の違いって微妙に差があるんですよね。 例えば今私の目の前に本があるんですけど、2冊の本の表紙どっちもオレンジ使われてるんですけど、こっちの方が明るいなとか、 そういう微妙なニュアンスの差っていっぱい身近にあるので、目に入る色、似た色だけどこれはどっちが明るいのかなっていうのを気にしてみるとか。 実際隣り合わせて目を細めるとこの明度差ってわかりやすくなるって言われてて、目を細めるとより色の要素が削がれてグレーっぽく見えるんですよね。 なので、比べたい色を隣り合わせて目を細めてみたら、こっちの方が明るいグレーだなっていうのが見えたりするので、 そういったところから明度差の感覚ってちょっとずつ磨いていけるんじゃないかなと思います。 今日はデザインやる上でとにかく明度差っていうのは見やすさを作る上ですごく大事ですよというお話でした。 今日も最後まで聞いてくださりありがとうございます。