動画背景 ヒーロー
動画背景ヒーローは、画面いっぱいに ループ動画を敷いた上にコピーとボタンを重ねる ファーストビューです。動画は object-fit:cover で全面を覆い、上に半透明のグラデーション オーバーレイ を重ねて文字の可読性を確保しています。
このパーツの使いどころと実装ポイント
動画背景ヒーローは、画面いっぱいにループ動画を敷いた上にコピーとボタンを重ねるファーストビューです。動画はobject-fit:coverで全面を覆い、上に半透明のグラデーションオーバーレイを重ねて文字の可読性を確保しています。再生はautoplay muted loop playsinlineで自動・無音ループとし、停止ボタンも備えています。
向いている場面
テクノロジー企業、ブランドサイト、飲食・観光・施設など、空気感を映像で伝えたいトップページに向きます。静止画では伝わりにくい動きや世界観を一目で示したい場面に効果的です。
カスタマイズと注意点
オーバーレイの濃さを変えると、明るい映像でも文字が読めるよう調整できます。動画は容量が重くなりがちなので、軽量化とposter画像の指定で初期表示を補うとよいでしょう。アクセシビリティの観点から、サンプルのように動画の一時停止ボタンを必ず用意し、自動再生は無音に限定します。動きに敏感なユーザー向けに、prefers-reduced-motionで再生を抑える配慮も推奨です。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
背景動画はなぜ無音で自動再生にしているのですか
多くのブラウザは音声付き動画の自動再生をブロックするためです。mutedにすることで確実に自動再生でき、ユーザーを驚かせる音も鳴りません。音を出したい場合はユーザー操作をきっかけにします。
動画が重くて表示が遅くなりませんか
対策が必要です。動画を圧縮し、poster属性で最初のフレーム画像を指定すると読み込み中の見え方が良くなります。通信や端末に配慮し、動きを減らす設定では再生を止める実装も検討してください。