【Next.js】動画ヒーローの作り方と注意点

公開日: 2026年9月12日 · 読了目安 9 分

Next.js のファーストビューに背景動画を置く判断基準。自動再生、poster、モバイル、完成ヒーローとの使い分け。

先に結論：映像が商品でないなら、動画ヒーローは後回し

製品やサービスの LP では、短い入場付きの静止画ヒーローの方が CTA が埋もれません。映像そのものが作品、店舗、イベントのときは動画が勝ちます。

自動再生するなら muted、playsInline、loop、poster がセットです。音を出して始めると離脱します。

静止画ヒーローの作り方は https://design-layer.com/articles/nextjs-animated-hero-section-guide です。先にそちらで公開し、必要になってから動画に替える判断が安全です。

1つ目は、poster が無く、読み込み中が黒いことです。

2つ目は、ファイルが大きすぎることです。ヒーロー用は短く、解像度を抑えます。

3つ目は、見出しのコントラスト不足です。動画の上には、必ず読めるオーバーレイを置きます。

意味の無い装飾なら aria-hidden。字幕が必要なら track を付けます。LCP を動画にしないよう、poster を先に見せます。

通信とバッテリーのコストが大きいです。md 未満は poster だけ、という分岐は現実的です。

ループする映像とタイポのリズムが揃った塊は、video タグを置くだけでは出ません。

DesignLayer でライブプレビューし、映像 URL と見出しだけ差し替えてください。https://design-layer.com/components

無料コピーは1日3回です。音が出る設定のまま公開しないでください。

運用で繰り返し出る質問です。

背景全面には向きません。コントロールと余白が出ます。自己ホストか、短いループファイルです。

点滅が激しい映像は使わない。情報は見出しと本文に書く。reduced-motion では静止画に落とします。