全画面動画背景 FV

このパーツの使いどころと実装ポイント

このパーツは、背景いっぱいにビジュアルを敷き、その上に暗いグラデーションのオーバーレイと白い見出し・コピー・スクロール誘導を重ねた全画面ヒーローです。背景は position:absolute と object-fit:cover で領域を隙間なく覆い、上から下へ濃くなる linear-gradient のオーバーレイを重ねることで、明るい映像の上でも白文字がはっきり読めるようにしています。サンプルでは静止画ですが、同じ枠を動画背景に置き換える前提の設計です。

向いている場面

世界観で勝負するブランドサイトや、商品・空間の魅力を映像で伝えたいページに向きます。アパレルや飲食、ホテル、クリエイティブスタジオのトップなど、第一印象で雰囲気を伝えたい場面で効果を発揮します。

カスタマイズと注意点

• 動画にする場合は video 要素に置き換え、自動再生・ミュート・ループとモバイル用のポスター画像を設定する
• 背景に対し文字が読めるよう、オーバーレイの濃さを内容に合わせて調整する
• 背景画像・動画には意味の伝わる alt や説明を付け、装飾だけにしない

大きな動画は読み込みが重く通信量も増えるため、容量を抑え、回線が遅い環境では静止画にフォールバックする配慮があると親切です。見出しは h1 としてページの主役に据えてください。