「写真に文字を載せたら読みにくい」を、サクッと解決する4つの方法
バナーやLPのメインビジュアルを作っているとき、こんなことありませんか？
写真の上にテキストを置いてみたら、
「なんだか文字が読みにくい……」
そんなときは、文字色やフォントを変える前に、文字と背景のコントラストをチェックしてみましょう。
特に写真は明るい部分と暗い部分が混在しているため、文字が背景に埋もれてしまうことがあります。
今回は、そんなときに使える4つの対処法を紹介します。
1. 背景にオーバーレイをかける
写真の上に半透明の色を重ねる方法です。
写真の雰囲気を残しながら、文字が乗る部分の明暗を整えられます。
例えば、白文字なら黒や濃い色のオーバーレイを重ねることで、文字が読みやすくなります。
逆に、黒文字なら白などの明るい色を重ねる方法もあります。
まずは20〜50％程度を目安に、写真を見ながら調整してみましょう。
写真の雰囲気を残しつつ、全体的に文字を読みやすくしたいときにおすすめです。
2. グラデーションで「文字の置き場所だけ」暗くする
写真全体を暗くしたくない場合は、文字が乗る部分だけグラデーションで暗くする方法もあります。
例えば、写真の下部に文字を配置するなら、下から上に向かって黒→透明のグラデーションをかけます。
写真の見せたい部分を暗くしすぎず、文字の周辺だけコントラストを確保できます。
写真の雰囲気をできるだけ残したいときに向いています。
3. テキストにシャドウや縁取りをつける
背景を変えたくない場合は、文字そのものにシャドウや縁取りをつける方法があります。
背景と文字の境界がはっきりするため、写真の上でも文字が読みやすくなります。
ただし、シャドウや縁取りを強くしすぎると、文字が目立ちすぎたり、デザインの印象が変わったりすることも。
まずは弱めに設定して、必要な分だけ調整するのがコツです。
4. 文字の背景に「色の面」を敷く
文字の後ろに、半透明の帯やボックスなど、色の面を敷く方法です。
写真の明るさや色に左右されにくいため、確実に文字を読みやすくできます。
例えば、
- 写真の上に黒い半透明の帯を敷く
- その上に白文字を配置する
といった方法があります。
とにかく文字を確実に読ませたいときにおすすめです。
どれを選ぶか迷ったら
4つの方法には、それぞれ向いている場面があります。
もちろん、複数の方法を組み合わせてもOKです。
例えば、「薄いオーバーレイ＋弱めのテキストシャドウ」のように重ねると、写真の雰囲気を残しながら、自然に文字を読みやすくできます。
まとめ
文字が読みにくいとき、いきなり文字色やフォントを変えるのではなく、まずは文字と背景のコントラストを確認してみましょう。
そのうえで、
- オーバーレイ
- グラデーション
- シャドウ・縁取り
- 背景に色の面
などを使って、文字が読みやすい状態を作ります。
大切なのは、「文字を目立たせる」のではなく、「文字が背景に埋もれない状態を作る」こと。
「なんだか文字が読みにくい……」と感じたときは、まず背景とのコントラストをチェックしてみてください。
