動画背景ヒーロー（オーバーレイ）
これは、暗いオーバーレイの上に中央コピーと CTA ボタンを重ねた没入型のヒーロー（ファーストビュー）です。土台を position:relative 、暗幕を position:absolute; inset:0 の半透明黒（ rgba(0,0,0,.45) ）で覆い、その上の position:relative…
このパーツの使いどころと実装ポイント
これは、暗いオーバーレイの上に中央コピーと CTA ボタンを重ねた没入型のヒーロー（ファーストビュー）です。土台を position:relative、暗幕を position:absolute; inset:0 の半透明黒（rgba(0,0,0,.45)）で覆い、その上の position:relative なコピー層を display:grid; place-items:center で中央に置く構造です。サンプルでは背景がグラデーションですが、ここを動画に差し替える前提の作りになっています。
向いている場面
世界観を一瞬で伝えたいブランドサイト、施工事例や料理を映したい飲食・建築、サービス紹介の冒頭など、映像で印象づけたい場面に向きます。文字が映像に埋もれないのがオーバーレイ方式の利点です。
カスタマイズと注意
- オーバーレイの不透明度（
.45）を上げると文字が読みやすく、下げると映像が映えます。背景の明るさに合わせて調整します - 背景を
video要素に置き換えるときはautoplay muted loop playsinlineを付けます。多くのブラウザはmutedでないと自動再生しません - 動画はデータ量が大きいため、スマホでは静止画にフォールバックさせると表示が軽くなります
- 見出しは
h1でページ内に 1 つに保ち、コントラスト比を確保して可読性を担保してください
よくある質問
背景動画が自動再生されないのはなぜですか
多くのブラウザは音声付き動画の自動再生を制限しています。video 要素に muted と playsinline を付け、autoplay と loop を指定すると自動再生・無限ループになります。それでも回線や省電力設定で再生されない場合があるため、静止画のフォールバックを用意すると安心です。
オーバーレイは何のためにありますか
映像の上に直接文字を載せると、明るい部分で読めなくなります。半透明の暗い層を一枚はさむことで全体のコントラストを安定させ、どんな映像でも白文字が読めるようにするためのものです。