写真の上に文字を置くと読みにくい！そんなときの5つの対処法

Webサイトのメインビジュアルなどでよく見る、写真の上に文字を重ねるデザイン。

おしゃれに見える一方で、

「文字が写真に埋もれて読みにくい…」

「白文字にしたけど、明るい部分だけ見えない…」

ということもよくあります。

今回は、そんなときに使える5つの対処法をまとめます。

① 写真にオーバーレイをかける

一番使いやすいのが、写真の上に半透明の色を重ねる方法です。

例えば写真を少し暗くして、その上に白文字を置くと、文字がぐっと読みやすくなります。

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.3);

}

ポイントは、暗くしすぎないこと。

写真の雰囲気を残しながら調整します。

② グラデーションを使う

写真全体を暗くしたくない場合は、文字がある部分だけにグラデーションをかける方法もあります。

例えば左側に文字があるなら、

左側は暗め → 右側に向かって透明

にすると自然です。

写真を活かしながら、文字もしっかり見せられます。

③ 文字色を写真に合わせる

「写真の上＝白文字」と決める必要はありません。

明るい写真なら黒や濃いグレー、暗い写真なら白など、背景との明るさの差を意識すると読みやすくなります。

色そのものだけでなく、明度差を見ることがポイントです。

④ 文字の後ろに背景をつける

どうしても写真と文字が重なってしまう場合は、文字の後ろに半透明の背景をつける方法もあります。

例えば、

CONCEPT

私たちについて

のようなタイトル部分だけ背景をつけてもOK。

デザインのアクセントにもなります。

⑤ 最初から「文字を置ける写真」を選ぶ

実はこれがかなり大切です。

人物や商品が画面いっぱいに写っている写真よりも、左右どちらかに余白がある写真の方が文字を配置しやすくなります。

写真を選ぶときから、

「この空いている部分にタイトルを置こう」

と考えておくと、あとから無理に調整する必要がなくなります。

まとめ

写真の上に文字を置くときは、

「おしゃれに見えるか」だけでなく「ちゃんと読めるか」も大切。

読みにくいと感じたら、

オーバーレイ・グラデーション・文字色・背景・写真選び

の5つを見直してみると改善しやすくなります。

私自身もWebサイトを制作するとき、写真と文字のバランスを見ながら何度も調整する部分です。

ほんの少し暗くしたり、文字の位置を変えたりするだけでも、印象は大きく変わります😊

「写真を活かすこと」と「文字を読ませること」の両方を意識するのがポイントですね。