読みやすい配色の基本
こんにちは、フリーランスデザイナーのちふねこです。
今日のテーマは、読みやすい配色、色選びのコツについてお話ししていきます。
何か自分で資料のデザインだったり、SNSに投稿するバナーだったり、
あとは自分のサイトとか、何かデザインで作るってなった時に、
その配色、色選びですね。これをやる時に絶対に守ってほしいルールが一つありまして、
それが今日の一瞬で読みやすいをしっかり作る色選びについてなんですけど、
その結論からまず言ってしまうと、色の背景と文字のコントラストを意識するっていうところなんですが、
例えば背景が白いページ、何かそうだな、資料のデザインをしているとして、
背景が白いページに、普通黒い文字で基本的な文章を書いていくと思うんですけど、
そこに強調したい見出しとか、何かアイコンみたいなのがあったとして、
そこに色をつけたいってなった時に、皆さんは何色をつけますか?
一旦二択で考えてほしいんですけど、一つは赤色、二つ目は黄色、いかがでしょうか?
この赤と黄色の二択で、もう直感で赤色だなって思った方は、配色センス抜群だと思います。
ただこれがただ直感で、何で赤がいいんだろうってうまく言葉にできない方は、ぜひここからの私のお話で、
コントラストについてぜひ聞いていただければと思います。
これを意識できるだけで、他でも応用できていくんですよね。
何で赤色の方が読みやすい配色って考えられるのかがわかっていると、
他のデザインをする時にもどんどん応用していけるので、他の配色作りたいってなった時にも失敗しない、見づらい配色を選ばないっていうのをちゃんと意図的にできるようになるので、
何でこの色がいいのかって説明できるっていうのは、すごくスキルとして他の場面でも応用できていくので、
ぜひ参考にしていただければと思います。
明度差の重要性
じゃあ何で今回白い背景に黒い文字の中、強調したい色を考える時に赤がいいのかっていうと、
つまりコントラストをしっかりつけた方が読みやすいっていうことなんですけど、
コントラストってもっと専門的な用語で言うと、色の明度、明度の差をしっかりつけるっていうことなんですけど、
多分コントラストって言った方が馴染みがあるんじゃないかなと思います。
もっと噛み砕くとメリハリとか色の、そうなの明るさの違い、差をしっかりつけるっていうところなんですけど、
この明度の感覚が初めの頃ってわかりづらいんですよ。わかりづらいんですが、本当明るさって考えるとなんとなくわかってくるのと、
具体的なやり方として目を細めていくと、色の彩度、鮮やかさが落ちて、色味が落ちて白黒っぽく見やすくなるんですよ。
ちょっとこれは音声だけじゃうまく伝えられないかもしれないんですが、
何か色の明度比較したい時に目を細めてみると、その明度差、境界線がどんどん曖昧になっていくなとか、目を細めてもしっかり見えるなっていうので、ここ明度差ちゃんとしてるんだなみたいに判断できたりするんですけど、
そういう感じで背景と文字、今回で言うと背景の白と赤、文字の赤の明度差、コントラストが高いか低いか、白と黄色だったらそのコントラストは高いのか低いのかっていうのを判断できれば、今回の読みやすい配色っていうのは一瞬でわかるんですよ。
で今回の黄色っていうのは、いわゆる明度が高い色、とっても読彩色の中では明るい色なんですね。黄色っていうのはすごく白に近い色。
なので白に近い黄色を白い背景の上に使っちゃうと、その境界線ってほとんどわかんなくなっちゃうんですよ。
すごくぼんやりして見えるので、よく目を凝らせば、そりゃ黄色い文字っていうのも、文字の太さとかにもまたよるんですけど、細い文字はいよいよ読みづらいと思います。
黄色以外で明度の明るい色っていうと、パステルカラー、いわゆるパステルカラーっていう淡いピンクとか淡い水色とか、小学生の女の子が好きそうな夢かわいい系の色っていうんですかね。
そういう色とかは、赤青黄色緑とか基本の原色に白をたくさん混ぜた色なので、明度も明るくなって白に近い色になっちゃうんですよね。
なのでそういう明度の高い明るい色を白い背景の上で使っちゃうと、その境界線ってわかりづらくて、特に文字とかはもう読めなくなってしまう。
なので白い背景を使っているときは、明度の差、コントラストを強くするために文字だったり、上に載せる要素の色は明度の低い色、しっかり濃い色って言うんですかね。
赤だったり青だったり緑だったりの、淡くないしっかり濃い、なるべくビビッドめな色を使うと読みづら、読みやすいデザインっていうのは作れます。
逆に背景が黒、仮に真っ黒な背景だとすると、その上に文字載せたいってなったら、赤とかは見づらくなっちゃうんですよ。
特に青とかだったら、より黒に近い色だったりするので、すごく読みづらくなっちゃうので、黒い背景に文字を載せたいときは黄色だったり白だったりっていう明度の高い色を載せると、しっかり読みやすいデザイン、読みやすい配色が選べます。
なのでここで大事なのは、とにかく背景と文字の色のコントラスト、明度さをしっかりつけるっていうのが意識できていれば、最低限読みやすさっていうのは担保できます。
最初の問題で提示したような白背景に黄色い文字っていう表現が結構よくSNSとかで見かけるんですよね。
それがすごくもったいないなーって思う場面がよくあって、とかあとは黄色以外で多い色で言うと蛍光色。
なんだろう、すっごく明るい黄緑だったり明るいミントブルーとか、そういったものを文字で、白い背景の上の文字で使ったりしてるとすごく読みづらい。
色としての存在感はあるのに、やっぱり明度が近い、背景と明度が近いせいでコントラスト低くなって、ぱっと見で読めないっていうストレスにつながっちゃうんですよね。
それがすごくもったいないなーと思う場面があるので、これを聞いているあなたはぜひ自分で何かそういうデザイン、資料作ったり、SNSの投稿画像やバナーを作ったりする際には
背景と文字の明度差、コントラストがはっきりしてるかなっていう意識で、ぜひ色選びしていただけると自然と読みやすいデザイン、読みやすい配色っていうのが作れるので
それをぜひ意識できるしていただけると幸いです。
以上です。聞くだけフリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています。
デザインをやってる方もそうじゃない方も何かスキルアップのヒントとして参考になれば幸いです。
今日も最後まで聞いてくださりありがとうございます。
