ランディングページに製品動画を載せる方法（自動再生・サイズ・配置）

文：Ivan Cernja・2026年10月11日

ランディングページの上部に製品動画があれば、訪問者は文字を読む前に、あなたが何をしているのかを理解できます。どの環境でも、ページを重くせずに自動再生させるにはいくつか押さえるべきポイントがありますが、ブラウザのルールさえわかれば難しくありません。

パターンを選ぶ

自動再生のルール

Chromeのポリシーは簡潔です。「ミュートでの自動再生は常に許可されます」。一方、音声付きの自動再生には、そのサイトで以前に操作したことがあるなどの条件が必要です（Chrome for Developers）。MDNはブラウザ共通の同じルールを説明しており、Safariでは自動再生にplaysinline属性も必要だと記しています（MDN Web Docs）。つまり、ファーストビューのループはミュートにしてplaysinlineを付けることが必須で、音声付きの動画はクリックを待つべきです。Chromeのガイダンスは、動画が必ず再生されると思い込まないこと、再生されていないのに一時停止ボタンを表示しないことにも注意を促しています（Chrome for Developers）。

HTML

<video src="/product.mp4" poster="/product.jpg"
  autoplay muted loop playsinline preload="metadata"></video>

ポスター画像は動画の読み込み中にすぐ表示されます。また、preload="metadata"を指定すると、必要になる前にブラウザがファイル全体をダウンロードするのを防げます。このページのサイドカードにある動画も、同じマークアップを使っています。

軽く保つ

• GIFではなく動画を使う。web.devの例では、3.7 MBのGIFが551 KBのMP4と341 KBのWebMになりました（web.dev）。
• ミュートのループからは音声トラックを削除し、表示されるサイズに合わせて縮小しましょう。ffmpegならffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4のようなコマンドで、30秒のループを数MBに収められることがほとんどです。
• 音声付きの長い動画には動画ホスティングを使う。Wistia、Vimeo、YouTubeなどを使えば、アダプティブストリーミングと再生コントロールが無料で手に入ります。

配置と長さ

• 見出しが見える状態を保つ。動画は見出しを支えるためのものです。ノートパソコンの画面で見出しがスクロールしないと見えない位置まで押し下げないようにしましょう。
• 枠は16:9にし、モバイルの幅でも大事な部分が切れないようにしましょう。
• ループは短く。Wistiaのデータでは、エンゲージメントがもっとも高いのは1分未満の動画です（Wistia）。30秒未満のループなら、繰り返しが気になることはほとんどありません。

動画を用意する

まだ動画がないなら、Teasrがランディングページから1920 x 1080のMP4を約10分でつくります。ブランドに合わせ、実際の画面を使い、料金は€19.50からです。音楽が付いていますが、ミュートのループ用には上のコマンドで削除できます。