フルスクリーン動画 メインビジュアル

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

このパーツは、全画面の動画背景に中央のコピーを重ねた、印象重視のメインビジュアルです。サンプルでは動画の代わりに @keyframes でゆっくり動くグラデーション背景を使い、その上に半透明の黒い fmv__veil（ベール）を重ねて文字の可読性を確保しています。中央にはセリフ体の大きな見出しとサブ文、下部には「SCROLL」の誘導を配置した王道の構成です。

向いている場面

• ブランドの世界観を一発で伝えたいコーポレートのトップ
• ホテル・飲食・アパレルなど雰囲気が売りの業種
• 映像素材を活かしたい制作会社・クリエイティブ系サイト

カスタマイズと実装の注意

本番では fmv__bg のグラデーションを video タグへ置き換えます。動画は autoplay muted loop playsinline を付けないとスマホで自動再生されません。文字の上に必ずベールを重ね、明るい映像でも読めるコントラストを保つのが要点です。動画は容量が大きく読み込みが重いため、軽量化と poster 画像の指定、通信量に配慮した再生制御を入れると親切です。視覚効果の動きが苦手な利用者向けに prefers-reduced-motion でアニメを止める配慮もしておくと安心です。h1 はページで 1 つに保ってください。