Webサイトのデザインをしていると画像の上にテキストを配置する機会がよくあります。
しかし、背景となる画像によってはその上に配置するテキストが読みにくくなってしまうこともあります。

デザイナーがデザインする場合は、それらも考慮して出来るだけ読みやすく調整したり、画像を選定することも出来ますが、
ブログや動画サムネイルの上にタイトルを配置するような場合、どんな画像が来ても読みやすくするには少し工夫が必要です。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

上のサンプルでは画像の上に配置したテキストが読みにくいですね。

この記事ではブログや動画サムネイルの上にテキストを配置する場合にスポットを当ててどんな画像が背景に来てもその上の文字が読みやすくするアイデア・テクニックをご紹介したいと思います。

画像を暗くする

画像の上に半透明の黒い幕をかけることでテキストを読みやすくすることが出来ます。

疑似要素で黒い幕を作ります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

グラデーションをかける

上の例では画像全体が暗くなってしまいます。
綺麗な画像の色味を変えたくないという場合は、グラデーションをかけることで画像の色味を残しつつ、テキストを読みやすくすることが出来ます。

疑似要素で黒いグラデーションを作ります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストを下に配置した場合

この方法は以下のようにテキストが画像の下に配置している場合、特に効果を発揮します。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

グラデーションを多少濃くしてもそのグラデーションが画像を邪魔することはありません。

画像を暗くする（フィルターマスクを使用）

フィルターマスクを使うことでも画像を暗くすることが出来ます。
それにより画像の上に配置したテキストを読みやすくすることが出来ます。

filterプロパティのbrightnessを使います。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキスト周辺だけ背景を暗くする

画像全体ではなく、テキスト周辺だけ背景を暗くすることで画像の上のテキストを読みやすくすることが出来ます。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

背景を真っ黒にする

テキスト周辺だけ背景色を付けるため、半透明である必要はありません。
真っ黒にすることも出来ます。ただし、テキスト量によっては画像全体を覆ってしまうので注意が必要です。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像をぼかす

画像をぼかすことで画像の上に配置したテキストを読みやすくすることが出来ます。

filterプロパティのblurを使います。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

テキストシャドーを付ける

テキストシャドーを付けるすることで画像の上に配置したテキストを読みやすくすることが出来ます。

text-shadowプロパティを使います。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

組み合わせて使用する

テキストシャドーの場合、他の方法と組み合わせることで画像の上に配置したテキストを更に読みやすくすることが出来ます。

画像を暗くする場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

グラデーションをかける場合の実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
少しの工夫で画像の上に配置したテキストを読みやすくすることが出来ますね。
重要なテキストが読めなければ意味が無くなってしまいます。
Webサイトを作る際は、そのテキストがちゃんと読めるか、読みやすいかを確認するようにしましょう。