00:00
こんにちは、フリーランスデザイナーのちふねこです。今日は、知ってるだけで差がつく見やすさの作り方というテーマでお話ししていきます。
毎週火曜日は、デザインに関するコツだったりをお話ししてるんですけど、デザインって聞くと結構ハードル高いというか、自分は関係ないなーって思う方結構いらっしゃるんじゃないかなと思うんですけど、
デザインって実はそんなに、なんだろう、敷居が高いものでもなくって、多分皆さんめちゃくちゃデザイン、普段からされてると思うんですよ。
デザインっていうのはあくまでビジュアルで伝える手段なので、そのビジュアルっていうのは目に見えるもの、イラストだったり図や画像、文字っていうそういう目に見える情報をまとめて伝える手段っていうのがデザインなので、
もっと具体的に言うと、プレゼンの資料とかもそうですし、あとはSNSの投稿画像だったり、ブログのアイキャッチ画像だったり、そういった部分でデザインって実はデザイナーに限らず結構使う場面ってあるんですよね。
で、そういった何かを伝えるために作った画像だったり資料っていうのが伝わらなかったら意味ないじゃないですか。
なんだろう、見た時にその見にくいデザインになってたら、もうそもそも見る気も失せちゃうし、中の情報入って、頭に入ってこないっていう風になると、
本来何か伝えるっていう目的でそれを作ってるのに、その目的が果たせなくなっちゃうので、
そのまず最低限の見やすさっていう部分について、今日は一つ最低限これだけ知ってると役に立つよっていうコツを一つご紹介したいと思います。
見やすさっていうのはズバリ明度差で作れます。この明度差っていうのは明るい度合いの差って書くんですけど、
色の3要素の一つで明度っていうものがあって、まあ細かい専門用語としては別に覚えなくていいんですけど、
この明度差が何かっていうと、要は明るさの差、文字通りそうなんですけど、どうやって判断するかっていうと、白黒にした時の白さ黒さってイメージするとわかりやすいかなと思います。
わかりやすい色の例で言うと黄色はめちゃくちゃ明度が高い色で、反対に青、紺色とか赤とか茶色みたいな濃い色は明度が低い色に分類されます。
でこの明度の低い色、高い色っていうのをしっかり使い分けて、背景と文字の色の差をしっかりつけるっていうのがこの見やすさを作る時のポイントです。
03:11
でなんでこの明度差があると見やすさにつながるのかっていう理由の部分なんですけど、明度差をつけることで境界がはっきりするから見やすくなるんですよね。
逆に言うと明度差がない状態っていうのは境界が曖昧。その背景と文字の色の境界が曖昧で見にくくなっちゃう。
この境界が曖昧だと見にくい、わかりにくいっていうのはデザインだけじゃなくて、この例えば音声配信で言うところの
なんだろう、めちゃくちゃ滑舌悪くてもごもご喋ってて何て言ってるかわからないみたいな状態のことと同じなんですよね。
なんか例えばこんな風に全然口を大きく開けずに早口でベブベブ喋って何て言ってるかわかんないじゃないですか。
ちょっと難しいんですけど、こんな感じでその言葉の境界がわからないというか、
輪郭がわからない状態って全然聞き取りづらいじゃないですか。 それをビジュアルでうまく見やすいものにするには明度差っていうものが大事になってきて、
その明度差をしっかり背景と読ませたい文字とか、何かメインのイラストとかのその差をしっかりつけることによって
見やすさっていうのが生まれてきますというのがここまでのお話です。 ここからは具体的にデザインでその明度差って活用するにはどうしたらいいのかっていうところなんですけど、
基本的には背景と文字の色を決めるときにこの明度差っていうのを意識してもらったらいいかなと思います。
明度差とか専門用語っぽいのを使うと、なんか堅苦しそうというか難しそうって思うかもしれないんですけど、めちゃくちゃやってることは簡単ですごくシンプルなんですよ。
背景がもし明るめ、明度が高い明るめの色なら上に載せる文字は暗くしましょう。 逆に背景が暗い色の場合は上に載せる文字は明るいものにしましょうっていう、
もうただこれだけです。 暗いものには明るいものを載せてそれぞれの境界がはっきりするようにしましょうっていう、これだけが分かっていれば見やすさっていうのは作れます。
なので例えば白い背景のプレゼン資料を作っている時に文字、黄色い文字でタイトルバーンって入れちゃうと、そのタイトルいくら大きくても全然見えないです。
06:01
明るい背景に明るい文字載せちゃうと全然見えないので、白い背景なら文字の色はもっと明度の低い黒、シンプルに黒とか紺色、緑とかそういった明度の低い色を載せないと、載せれば見やすさは作れます。
逆に文字は黄色がいいんだっていうなら、背景は白をやめてもっと明度の低い色、文字の黄色は明度が高いので背景は明度を低くして真っ黒にしたり、青系にしたりっていう風にその背景と文字の色の明度差っていうのをしっかりつけるっていうのが大事です。
この明度が高い色低い色っていうのがよくわかんないよっていう方は、何かデザインソフトで白黒モードに変換するっていうのをやってみると、なんとなくつかめてくるかなと思います。
モノクロモードとかイラストレーターとかフォトショップだとあるんですけど、普通のスマホに入っている画像加工、画像編集でもこういう白黒にする加工って多分入ってますよね。
それをやってみたらだいたい、この色は黒になっちゃうんだなとか、この色は意外と明るい白っぽくなるんだなっていうのがなんとなくわかってくると思います。
で、この背景と文字はじゃあ明度差はっきりつければいいんだってなると思うんですけど、そこであるあるのMG例が一つあります。
文字の加工でよくやる簡単にできるドロップシャドウっていう影をつけるっていう加工あると思うんですけど、パワーポイントとかにも入ってますし、SNS画像を作るキャンバーとかの文字加工でも入っているめちゃくちゃ使いやすい加工だと思うんですけど、
それが結構落とし穴があって、例えば白い背景に黒い文字ってもうシンプルでめちゃくちゃ明度差あって見やすい配色なんですけど、その黒い文字に黒い影つけちゃうと一気に境界がわからなくなっちゃうんですよ。
その、この明度差で見やすさを作れる理由が境界がはっきりするからだったのに、このドロップシャドウっていう黒い影を黒い文字に落としちゃうと、その文字の暗さと影の暗さって繋がっちゃうので境界が曖昧になっちゃうんですよね。
なので、黒い文字には黒い影落とさない。黒に限らず、明度が低い文字、青とか赤、緑とかにも黒い影は落とさない。落とすとめちゃくちゃ見づらくなるので、そこだけ注意してください。
09:12
逆に白い文字とか明るい文字に影つけたら、その分境界がはっきりするので、これはめちゃくちゃ見やすくなっておすすめです。
という感じで今日は、知ってるだけで差がつく見やすさの作り方として、明度差をつけるっていうのをご紹介しました。
明度差をつけることによって境界がはっきりするので、文字とか強調したイラストとかが見やすくなりますよ、というお話でした。
聞くだけフリーランス講座の毎週火曜日はこんな感じでサクッと学べるデザインのお話をお届けしています。
デザインをやっている方もそうじゃない方も、何かスキルアップのヒントとして参考になれば幸いです。最後までありがとうございます。
