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