可読性の高い色の組合せを使おう！
普段色々なWEBサイトや印刷物、プレゼン資料などを見ているとたまに、なぜこの組み合わせにしたの！？という色の組合せに出くわします。と言うのは、文字が読みづらくなってしまっている組み合わせのことです。きっと目立たせたい、おしゃれにしたいといった思いで作成されたものだと思うのですが、文字が読みづらくてはデザイン以前の問題なので、そこは最低限注意したいところですよね。何度か同じようなことを書いたかもしれませんが、何度でも伝えたいことなので書きます。あと、私も色の使い方が完璧な訳ではありません。日々勉強です。
本題に入る前に用語の説明をしておきます。
- 明度…色の明るさ
- 彩度…色の鮮やかさ
では、百聞は一見にしかず、ということで例を挙げます。
例１
最も可読性が高いと言われる組み合わせは黒と白。これはWEBでも紙でも、一番よく見る組み合わせですね。意識しないくらい使われているのはちゃんと理由があります。
そして隣のやつ。これが一番良く見る失敗例だと思います。目立たせたい→黄色が目立つ、の結果、目がやられる。重要だから目立たせたかったはずが、読めないだけでなく見る者の心をざわつかせます。
そもそもこの黄色ってなんか不安になりませんか？注意を引きたいのに不安にさせては良くないので、赤に寄せるなり、彩度を下げるなりしてもう少し落ち着いた色にしてあげた方がいいと思います。
例2
例でわかりやすくしていますが、実際にこれもよくあるやつです。デザインの鉄則として、色の種類を少なくすると統一感が出るというのはご存知かと思いますが、意識するあまり背景色と同色すぎて読みづらくなってしまっているパターンですね。同色を使うのであれば、明度の差をつけると見やすくなります。左は文字色を背景色より明度と彩度を高くしました。右は明度を低くしたものです。
例3
最後は背景色とは別の色を使う場合です。右の例は文字色も背景色も彩度がマックスなのですが、読みづらいを通り越して不快ですね。これを作っていて頭が痛くなってきましたので、皆さんも閲覧注意です。彩度を下げると左のように見れる組み合わせになりました。
結論
読みやすくするには背景色と文字色で「明度」か「彩度」、もしくは両方で差をつけると読みやすくなる、ということです。それ以前に、一番重要なのは読みづらくなっていることに気が付くことです。気が付かないと直せませんし、気が付いていないのは作った本人だけかもしれません。デザインの前に読みやすいかどうかを意識しましょう。というか、読みやすくすることがデザインのメインの一つだと思います。それではまた～。
「パソコン教室わかるとできる」は教室数トップクラスのパソコン教室なので安心して通っていただけます。全国に約200教室展開していますので、まずはお近くの教室までお気軽に無料体験をお申し込みください！
・無料体験のお申し込みはこちら
