Webサイトのトップページやバナーで、画面いっぱいの写真の上にキャッチコピーを配置するデザインは定番ですよね。

しかし、実際に作ってみるとこんな悩みにぶつかりませんか？

「写真の明るい部分と白い文字が同化して、文字が読めない…」
「文字に影をつけてみたけど、なんだか古臭くてダサい…」

写真は単色ではなく、明るい部分と暗い部分が混ざっているため、そのまま文字を乗せるとどうしても視認性が下がってしまいます。
これを、写真を美しく見せつつ文字もくっきり読ませるプロのテクニックが、背景オーバーレイです。

 

背景オーバーレイとは？

オーバーレイ（Overlay）とは、上に重ねるという意味です。
Elementorの「背景オーバーレイ」機能を使うと、背景画像とテキストの間に、半透明のカラーフィルム（フィルター）を挟み込むことができます。

サングラスをかけると眩しい景色が見やすくなるのと同じように、写真の上に半透明の黒や色を重ねることで、写真の雰囲気を残したまま、上の文字を際立たせることができるのです。

 

背景オーバーレイの基本設定 – 黒の半透明

まずは一番よく使う、王道の黒の半透明を重ねる手順です。

⚫︎ 設定手順

背景画像を設定しているコンテナ（またはセクション）を選択します。

左側のパネルからスタイルタブを開きます。

背景の下にある背景オーバーレイ（Background Overlay）をクリックして開きます。

普通タブのBackground Overlayでクラシック（筆のアイコン）を選びます。

色は黒（#000000）を選択します。

その下にある不透明度（Opacity）の数値を調整します。

 

 

💡 プロのワンポイント：不透明度の黄金比
不透明度は「0.3 ～ 0.5」あたりに設定するのがおすすめです。暗くしすぎると写真の良さが死んでしまい、薄すぎると文字が読めません。文字がギリギリ読みやすくなるポイントを探りましょう。

 

応用編　もっとおしゃれに。グラデーションの活用

単色のオーバーレイでも十分ですが、さらにデザイン性を高めるならグラデーションがおすすめです。

例えば、写真のメインの被写体は上にあって明るく見せたいけど、下の方に配置した文字は読ませたいという場合です。

⚫︎ グラデーションの設定方法

バックグラウンドタイプでグラデーションを選択します。

カラー1（上部）を透明にします。

カラー2（下部）を黒（半透明）にします。

位置や角度の数値を動かして、グラデーションのかかり具合を調整します。

こうすることで、上半分は写真がクリアに見え、下半分は文字が読みやすいという、非常に洗練されたデザインを作ることができます。

 

サイトの個性を出す「ブランドカラー」のオーバーレイ

背景オーバーレイは黒だけではありません。サイトのテーマカラーを半透明にして被せるテクニックもよく使われます。

例えば、青がテーマカラーの企業サイトなら、様々な写真の上に半透明の青をオーバーレイとしてかけます。
すると、別々の場所で撮られたバラバラの色味の写真でも、サイト全体で統一感（トーン＆マナー）を出すことができます。

さらに描画モード（Blend Mode）を「乗算（Multiply）」や「オーバーレイ」に変更すると、より写真に色が馴染んでプロっぽい仕上がりになります！

 

 

まとめ

画像上の文字が読みにくい時は、文字自体をいじるのではなく、背景を調整するのが正解です。

・文字に無理なドロップシャドウをつけない。

・スタイル ＞ 背景オーバーレイで半透明の黒を重ねる。

・状況に合わせてグラデーションを活用する。

この機能を使うだけで、素人っぽさが抜け、一気に「デザイナーが作ったようなWebサイト」に近づきます。設定も簡単なので、ぜひ今すぐ試してみてくださいね！