フルブリード写真CTA
実写を画面いっぱいに敷き、暗いグラデーションのオーバーレイで文字の可読性を確保した没入感のあるCTAです。背景画像は position:absolute で inset:0 に広げて object-fit:cover で埋め、その上に cf__overlay の半透明グラデーションを重ね、さらに上にコピーとボタンを…
このパーツの使いどころと実装ポイント
実写を画面いっぱいに敷き、暗いグラデーションのオーバーレイで文字の可読性を確保した没入感のあるCTAです。背景画像はposition:absoluteでinset:0に広げてobject-fit:coverで埋め、その上にcf__overlayの半透明グラデーションを重ね、さらに上にコピーとボタンを置く三層構造になっています。問い合わせや資料請求への最終的な後押しに向きます。
使いどころ
- サービスLPの末尾で行動を促す締めのセクション
- 採用サイトのエントリー導線
- セミナーやイベントの申し込み喚起
カスタマイズと注意
差し替えるのは背景画像、見出しのコピー、ボタンのラベルとリンク先です。写真を明るいものに変えると文字が読みにくくなるため、オーバーレイの濃さをグラデーションの不透明度で調整して、本文とのコントラストを確保します。背景画像にはz-index:-2、オーバーレイには-1が振られているので、新しい要素を足すときは前後関係を崩さないようにします。altには写真の内容を簡潔に記し、ボタン内の矢印アイコンはaria-hiddenでラベルの読み上げを妨げないようにします。小さな画面ではパディングが縮むので、コピーの行数が増えすぎないか確認します。
よくある質問
明るい写真を使うと文字が読みづらくなります。
オーバーレイのグラデーションの不透明度を上げて背景を暗くすると改善します。文字色とのコントラスト比を確保することが第一で、写真の見せ方より可読性を優先します。下側を濃くする縦方向のグラデーションに変えるのも有効です。
背景を動画にしたいのですが可能ですか？
背景のimgをvideo要素に置き換えれば実装できます。ただし自動再生はミュート必須で、データ量が増えるためモバイルでは静止画にフォールバックする配慮が要ります。文字の可読性を保つオーバーレイは動画でもそのまま使えます。