文字の視認性・可読性を高めるデザインの作り方

バナーやサムネイルなどのデザインを作っていると「文字が読みにくい・見えづらい」デザインになってしまう時があります。特にバナーなどは文字が読みづらいデザインになってしまうと、クリック率が低下してしまったりと成果に影響が及んでしまいます。

今回は、『文字』と『背景(写真)』を組み合わせた際に「可読性」と「視認性」を高める定番テクニックやコツを解説していきます!

可読性」とは読みやすい文字か、「視認性」とはパッと見で瞬間的に認識しやすい文字か、になります。

視認性・可読性が低いデザインとは

視認性・可読性が低くなってしまう原因として『文字と背景のコントラス』が主な原因ではないと思います。

自分も新人の時に「文字が見えづらいけど改善できない?」とよくフィードバックをもらっていました。

デザインで以下のような素材を使うシーンが多いかと思います。ちょっとした工夫をしなければ視認性・可読性が低い、読みづらい・見えづらいデザインに仕上がってしまいます。

空背景だと、淡い空だと文字色とのコントラストが弱く、文字が読みづらくなってしまう。

背景がごちゃっとしている写真だと、文字が埋もれてしまう。

写真全体の彩度が高い場合だと、文字が埋もれてしまう。白シャツを着ている人物の上に文字がかかってしまうと、文字と背景が同化してしまう。

上記のような「文字」と「背景」を組み合わせた時に見づらくならない、読みづらくならないようにするために覚えておきたい定番のコツとテクニックをご紹介します!

視認性・可読性を高めるデザインの作り方

(1)シャドウを付ける

境界線を付けてみると読みやすさは改善できるかもしれませんが、野暮ったくなり、チープなデザインになってしまいます。そんな時はシャドウを付けてみましょう。

背景と文字色はそのままで、文字の周りに背景に馴染む彩度が低い色のシャドウを使ってみると文字が浮き出てくるように読みやすくなります。シャドウの透明度を強くしてしまうと、境界線を入れた時のように野暮ったくなってしまうので、背景に馴染む程度のシャドウに設定してみましょう。

(2)透過背景を入れる

一番定番なテクニックです。

背景の前面に不透明度30〜50%程度(デザインに合わせて)の塗りオブジェクトを入れることで、背景写真の主張が弱まり、文字が読みやすくなります。

塗りオブジェクトは写真の色味に合わせた色を使うと、馴染むので自然な仕上がりになります。(今回の場合は暗い青色)

(3)グラデーション

(2)のように前面に塗りを入れてしまうと写真の印象が変わってしまう・暗い印象になってしまう、など写真によっては印象が変わってしまう場合に、グラーデションを入れるを使います。

キャンバスの1/3程度に収まるようにグラデーションを入れることで、写真は見せつつも、文字の読みやすさも改善できるというテクニックになります。

(4)座布団を入れる

座布団とは、文字視認性・可読性を高めるために「文字の背景にだけ座布団(塗り)を入れる」というテクニックになります。上記の作例では、座布団の形を『長方形』にしていますが、丸形や角丸など形を変えることでデザインのバリエーションがでるようになります。

背景写真の印象は崩さずに、文字だけ強調させ可読性を高めることができます。

(5)一部に塗りを入れてみる

背景写真に人物の被写体が入っている場合に、(2)のような全面に塗りを入れテキストを配置すると、被写体に文字がかかってしまったり、違和感が生まれてしまう場合があります。

そのようなときには、被写体をメインに活かしつつ、それ以外のエリアに部分的な塗りを入れてみるテクニックになります。写真がきちんと見えつつも、文字もしっかり強調されるので、バナーではよく使われるテクニックです。

(6)あえてズラして余白を作り出す

背景に全面で写真を使わず、あえて四隅などに余白が生まれるように写真をトリミングを行い、余白部分に文字を配置するテクニックです。背景写真自体には加工を施さないので、写真をきちんと見せるようなデザインの場合に使いします。

ズレていることの不自然さが、文字への視線誘導にもなります。

あえてズラしを使ったテクニックはこちらの記事でもご紹介していているので、合わせて参考にしてもらえると嬉しいです。

(7)色数を減らす

背景写真がカラフルや色数が多い素材の場合、色の多さから文字が埋もれてしまっている場合があります。そんな場合は、写真をモノクロや上記作例のようなデュオトーンなどの加工を施して色数を減らしてみましょう。

デュオトーンやモノクロの加工の方法は以下を参考にしてみてください!

まとめ

バナーやサムネイルなど読ませるための文字はきちんと見せなければなりません。視認性・可読性を高める方法はたくさんありますが、今回は定番テクニックをご紹介しました。

デザインを作っていると「見やすいか・読みやすいか」の判断が自分ではわからなくなってきてしまうときがあります。そんな時には同僚や家族など、身の回りの人に聞いてみると良いかもしれませんね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA