バナーやハガキなどのデザインを作っていると「文字が見えづらいけど改善できない？」とよくフィードバックをもらいます。ユーザーが分かりやすいと感じられるようなデザイン物を制作する上で、「文字の読みやすさ」は非常に重要です。
そこで今回は、「文字」と「背景」を組み合わせた際に「視認性」と「可読性」を高める5つのポイントをまとめます。
文字の「視認性・可読性」とは
視認性とは
「視認性」は、文字や文章だけではなく目に見えるもの全てに使う言葉で、パッと見たときの認識のしやすさを意味しています。視認性は明度に大きく影響され、明度差が大きいほど見やすく、小さいほど見にくくなります。下記の画像のように、道路標識は視認性の高い配色でデザインされています。
可読性とは
「可読性」とは、字の如く「文字や文章の読みやすさ」を意味します。可読性はフォントの大きさや太さ・行間・余白などに大きく左右されます。フォントの太さを調整して文字が潰れないようにしたり、適切な行間・余白を作ったりすることで読みやすくなります。
文字の視認性・可読性を高める5つのポイント
1. シャドウをつける
写真の上に文字を載せる場合、単色の背景に比べて文字が埋もれてしまうことがあります。文字に境界線をつけてみると読みやすさは改善できるかもしれませんが、デザインのテイストと合わないケースもあります。
そんな時は文字にドロップシャドウをつけると読みやすくすることができます。背景色に馴染む彩度の低い色を使うと、文字が浮き出てくるように輪郭を際立たせ、違和感なく文字を写真の上に配置することができます。
2. 座布団をひく
文字の長さに揃えた長方形の塗り（座布団）を敷くことで文字を読みやすくすることができます。文字の下に高コントラスト比の背景色を敷くことで、どのような背景でも背景写真の印象は崩さずに、文字だけ強調させ可読性を高めることができます。
3. 透過背景を入れる
背景の前面に不透明度30%ほど（デザインに合わせて）の塗りオブジェクトを入れることで、背景写真の主張が弱まり、文字が読みやすくなります。塗りオブジェクトの色味によって写真の雰囲気も変わってくるので、写真の色味に合わせた色を使うと、背景に馴染んで自然な仕上がりになります。（下記の例は青色の透過背景を入れています）
4. グラデーション
前述のように前面に塗を入れてしまうと写真の印象が変わってしまう・暗い印象になってしまう、など写真の印象を変えたくない場合は、グラデーションを使います。画像の1/3程度に収まるようにグラデーションを入れることで、写真は見せつつも、文字の読みやすさも改善することができます。
5. 一部に塗りを入れてみる
背景写真に人物の被写体が入っている場合などは、前面に塗りを入れると違和感が生まれてしまう場合があります。そのような時には、被写体をメインに活かしつつ、それ以外のエリアに部分的な塗りを入れてみます。被写体がきちんと見えつつも、文字もしっかり強調されるので、バナー等でよく見られるテクニックだと思います。
まとめ
バナーやハガキなど読ませるための文字はきちんと見せなければなりません。文字を強調したいあまり、袋文字などの装飾を追加し過ぎてしまい、かえって文字が読みづらくなってしまったことがあったので気をつけたいです。
視認性・可読性を高める方法はたくさんありますが、今回まとめたポイントを頭に入れてデザインしていきたいです。
