動画LPとは？作り方・埋め込み方と自動再生の注意点

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

LPに動画を入れたら、商品の魅力がもっと伝わるのでは。そう考えて動画を置いてみたものの、スマホでは自動再生されない、ページが重くなった、という壁にぶつかっていませんか。

動画LPとは、ファーストビューなどに動画を組み込んだランディングページのことです。文章と画像だけでは伝わりにくい動きや使い方を見せられる一方、入れ方を誤ると、表示速度の低下や再生されない不具合で逆効果になることもあります。

この記事では、動画LPの意味と動画広告との違い、メリット・デメリット、videoタグやYouTubeでの埋め込み方、スマホで自動再生させる条件、公開後にABテストとヒートマップで効果を高める方法までを、ブラウザやYouTubeの公式の情報をもとに解説します。

01｜動画LPとは

1-1. 動画LPとは

動画LPとは、ファーストビュー（ページ冒頭）などに動画を組み込んだランディングページのことです。文章や画像に加えて動画で商品・サービスを伝えることで、静止画だけでは表現しづらい情報を届けやすくする狙いがあります。

動画LPは、まったく新しいページ形態というより、LPの表現形式の一種です。記事のように読ませる「記事LP」、スマートフォンでスワイプしながら読み進める「スワイプLP」などと並ぶ選択肢の一つです。それぞれ得意な見せ方が異なるため、商材やターゲットに応じて適した形式を選びます。

LP形式	特徴・向いている場面	詳しい解説記事
記事LP	記事のように読ませ、情報量やストーリーで納得感を高めたい商材に向く	記事型LPとは？成果が出た事例から学ぶWeb広告の勝ちパターン
スワイプLP	スマホでスワイプして読み進める形式。モバイル中心の閲覧に向く	スワイプLPの事例7選と作り方｜テンプレートで10分
動画LP	ファーストビューなどに動画を組み込む形式。動きや使い方を見せたい商材に向く	本記事で解説

1-2. 動画広告との違い

混同しやすいのが「動画広告」との違いです。動画広告は、YouTubeやSNSなどの配信面でユーザーに見せる広告クリエイティブそのものを指します。一方の動画LPは、その広告などをクリックした先（遷移先）のページに動画を組み込んだものです。役割も置かれる場所も異なります。

項目	動画LP	動画広告
置かれる場所	広告などをクリックした先のLP	YouTube・SNSなどの配信面
主な役割	動画でLPの説得力を高め、CVにつなげる	ユーザーの興味を引き、クリック・送客を促す
主な目的	申し込み・問い合わせなどのコンバージョン	認知・誘導（LPへの送客）

本記事は「遷移先のLPに動画を組み込んだ動画LP」に絞って解説します。BtoBの動画広告の配信設計は、BtoB動画広告とは？成果を出す配信設計とLPO改善の全体像【2026】で解説しています。

1-3. 動画LPの強み

動画LPの強みは、文章や画像では伝わりにくい「動き」「質感」「時間の流れ」を一度に伝えられる点にあります。短い時間で商品やサービスの魅力を直感的に理解してもらいやすく、印象にも残りやすくなります。

動画LPが活きやすいのは、実際の動きや使い方を見せたい場面です。たとえば、操作手順のある商材、形のない無形サービス、使用前後の変化を見せたい商材などでは、文章や画像だけよりも動画のほうが伝わりやすいことがあります。逆に、情報がシンプルで静止画でも十分に伝わる商材では、動画が必須とは限りません。自社の商材や訴求内容に動画が合うかどうかを、まず見極めることが出発点になります。

｜Squad beyondの解決事例を公開中！

02｜動画LPのメリット

動画LPのメリットは、短い時間で多くの情報を伝えられ、ユーザーの理解や関心を高めやすい点にあります。文章や画像だけでは伝えづらい内容を、動きや音声を交えて表現できることが特徴です。代表的なメリットを整理します。

2-1. 短時間で多くの情報を伝えられる

動画は、映像・音声・テキストを組み合わせて情報を届けられます。同じ内容を文章で読んでもらうより、短い時間で要点を伝えられる可能性があります。

2-2. ページの滞在時間が伸びやすい

動画を再生してもらえれば、その分ページにとどまる時間が長くなりやすくなります。商品やサービスへの理解が深まることが期待できます。

2-3. テキスト量を抑えて見せられる

伝えたい情報を動画にまとめることで、ページ上の文章量を抑えつつ内容を補えます。長い文章を読むことに負担を感じる読者にも届きやすくなります。

2-4. 静止画では伝えづらい訴求ができる

商品の動き、使い方、サービスの利用イメージなど、静止画では伝わりにくい情報を具体的に見せられます。実際の利用シーンを想起してもらいやすくなります。

2-5. CVR改善につながる可能性がある

理解の促進や滞在時間の向上を通じて、結果としてCVR（コンバージョン率）の改善につながる可能性があります。ただし必ず上がるわけではなく、後述するように検証が前提となります。LPでの滞在時間の測り方と見方は、滞在時間とは｜GA4での指標名と計算方法、LPでの見方で解説しています。

03｜動画LPのデメリット・注意点

動画LPには、表示速度の低下や情報過多といった注意点があり、動画を入れれば必ず成果が上がるわけではありません。導入を検討する際は、メリットだけでなく以下の点も踏まえる必要があります。

3-1. 表示速度が低下することがある

動画は容量が大きく、組み込み方によってはページの表示速度を下げてしまうことがあります。

Googleのweb.devでは、ページの主要な内容が表示されるまでの時間を測る指標LCP（Largest Contentful Paint）を2.5秒以下に収めることを、良好なユーザー体験の目安としています。LCPの対象になる要素には <video> 要素も含まれ、ポスター画像の読み込み時間と動画の最初のフレームの表示時間のうち、早い方が使われます（出典：Largest Contentful Paint（LCP）｜web.dev）。ファーストビューに置いた動画は、ページの表示の速さの評価に直接かかわるということです。動画の容量や読み込み方法には注意が必要です。LPの表示速度が落ちる原因と対策は、LPの表示速度を改善するには？原因と対策方法を解説で解説しています。

3-2. 情報過多になりやすい

動画で多くを伝えようとするあまり、ページ全体の情報量が増えすぎると、かえって何を伝えたいLPなのかが分かりにくくなります。動画とテキストの役割を整理することが大切です。

3-3. 自動再生が逆効果になる場合がある

動画の自動再生は、環境によってはユーザーの離脱や表示速度の低下につながることがあります。また、音声付きの自動再生はブラウザ側で制限されていて、作り手の思いどおりには再生されません（詳しくは4-7）。再生方法は一律に決めず、検証しながら判断するのが無難です。

3-4. 制作にコストと時間がかかる

動画の用意には、文章や画像だけのLPに比べて制作コストや期間がかかる傾向があります。費用対効果を見ながら進める必要があります。

動画LPは万能ではありません。商材や目的によっては、動画を使わないシンプルなLPのほうが成果につながる場合もあります。「動画を入れること」自体を目的にせず、自社の商材に合うかどうかを見極めることが重要です。

04｜動画LPの作り方とポイント

動画LPは、「どこに・どんな動画を・どう見せるか」で成果が変わります。やみくもに動画を入れるのではなく、ユーザーの体験を意識した設計が必要です。作り方の主なポイントと、実際にLPへ動画を入れる方法を整理します。

4-1. 目に入りやすい位置に動画を置く

ファーストビューなど、ユーザーが最初に目にする位置に動画を配置すると、関心を引きやすくなります。ページのどこで動画を見せるかを最初に設計しましょう。ただし、ファーストビューの動画は表示の速さに直接かかわるため（3-1）、軽くする工夫とセットで考えます。

4-2. 動画は短く・要点を絞る

長すぎる動画や容量の重いファイルは、離脱や表示速度低下の原因になります。伝えたい要点に絞り、短くまとめることを心がけます。

4-3. 自動再生と音声の扱いに注意する

自動再生やいきなりの音声は、環境によっては逆効果になることがあります。特にスマートフォンでは、動画を自動再生する場合に音声をミュートにする必要があるなど、ブラウザや端末側の制約もあります（4-7）。音声がなくても伝わるよう字幕やテロップを入れ、ミュート再生や短尺ループなどを試して、検証して決めるのが安全です。

4-4. LP全体のメッセージと動画を一致させる

動画だけが浮いてしまわないよう、LP全体の訴求と動画の内容をそろえます。広告色を強くしすぎず、ユーザーが知りたい情報を届けることを優先します。

4-5. 動画の近くにCTAを置く

動画を見て関心が高まったタイミングで次の行動に移れるよう、動画の近くに申し込みや問い合わせなどのCTA（ボタン等）を配置します。

4-6. LPに動画を入れる2つの方法（videoタグ・YouTube）

LPに動画を入れる方法は、大きく2つあります。

1つ目は、HTMLの <video> タグで動画ファイルを埋め込む方法です。よく使う属性は次のとおりです（出典：<video> 動画埋め込み要素｜MDN Web Docs）。

属性	意味
autoplay	再生できる状態になった時点で、自動で再生を始める
muted	最初から音声を消音にする
loop	最後まで再生したら先頭に戻って繰り返す
playsinline	動画を要素の再生領域の中（インライン）で再生する
poster	動画のダウンロード中に表示する画像
preload	再生前にどこまで読み込むかのヒント（none・metadata・auto）

ブラウザによって対応している動画形式が違うため、<source> 要素で複数の形式（WebMとMP4など）を並べると、ブラウザは理解できる最初のものを使います（出典：<video> 動画埋め込み要素｜MDN Web Docs）。web.devでは、GIFアニメの代わりに動画を使う書き方として <video autoplay muted loop playsinline> を紹介し、iOSで自動再生するには playsinline が必要としています。ファーストビューより下にある動画は loading="lazy" で表示領域に近づくまで読み込みを遅らせる方法がありますが、LCPの対象になる動画には loading="lazy" を使わないように、とも書かれています（出典：動画の遅延読み込み｜web.dev）。loading 属性に対応していないブラウザでは、この属性は無視されます（出典：動画の遅延読み込み｜web.dev）。

2つ目は、YouTubeに動画を上げて、埋め込みコード（iframe）をLPに貼る方法です。YouTubeの埋め込みプレーヤーでは、autoplay=1 で読み込み時に自動再生、playsinline=1 でiOSのインライン再生を指定できます。コントロールバーを表示する場合は、幅480ピクセル・高さ270ピクセル以上、アスペクト比16:9のプレーヤーがすすめられています（出典：YouTube Embedded Players and Player Parameters｜YouTube IFrame Player API）。動画ファイルをLPのサーバーに置かずに済むので、容量の大きい動画はこちらが向いています。

4-7. スマホで自動再生させる条件

スマホで「動画が自動再生されない」原因の多くは、音声です。ブラウザは、音声付きの動画が勝手に流れないように自動再生を制限しています。

• Chrome：ミュートされた自動再生は常に許可されます。音声付きの自動再生は、ユーザーがそのサイトをクリックやタップで操作した後などの条件を満たしたときだけ許可されます（出典：Chrome の自動再生ポリシー｜Chrome for Developers）
• iPhone（Safari）：音声トラックが無い動画や muted を付けた動画は、ユーザーの操作なしで自動再生できます。ユーザーの操作なしにミュートが外れると、再生は止まります。iPhoneでは playsinline を付けた動画が画面内で再生され、付いていない動画は全画面での再生になります（出典：New <video> Policies for iOS｜WebKit）

つまり、スマホで自動再生させたい動画は「ミュート」と「playsinline」がそろっていることが前提です。さらに、iPhoneが低電力モードのときや、端末側で自動再生をオフにしているときは自動再生されません（出典：動画を自動再生させる｜Squad beyond FAQ）。自動再生されなくても内容が伝わるよう、poster（最初に見せる画像）にも訴求の要点を入れておきましょう。

なお、動画LPに使う動画を内製するか外注するかは、費用・期間・クオリティのバランスで判断します。費用は内製か外注か、動画の規模や品質によって幅があるため、複数の選択肢を比較して決めるとよいでしょう。

動画LPに組み込む動画と、配信面に出す動画広告クリエイティブとでは、求められる作り方が異なります。動画広告そのものの設計・制作・検証は、ショート動画広告の作り方と出し方｜設計・媒体別仕様・検証で詳しく解説しています。

05｜動画LPで効果を出すには（検証と改善）

動画LPは作って終わりではなく、公開後にABテストとヒートマップで検証・改善してこそCVにつながります。動画を入れたこと自体に満足せず、実際のユーザーの反応を見ながら改善を重ねることが、成果を出すうえで欠かせません。多くのLPは公開してからが本番であり、動画LPも例外ではありません。

まず取り組みたいのがABテストです。動画のある／なしや長さ・内容・配置などを変えた複数のパターンを比較し、どれがより成果につながるかを数値で見極めます。ABテストの具体的な進め方は、LPのABテストの正しいやり方は？メリットや手順、ツールを解説で解説しています。

あわせてヒートマップを使えば、動画の位置までユーザーが到達しているか、動画のあたりで離脱されていないかを可視化でき、改善の手がかりが得られます。見えた課題を次のテスト仮説につなげ、小さく試して改善を積み重ねることが、動画LPで成果を出す近道です。

06｜Squad beyondで動画LPを作り、検証・改善する

ここまで見てきたように、動画LPは「作る」だけでなく「検証・改善する」ことが大切です。Squad beyondでは、動画を組み込んだLPの作成から、ABテスト・ヒートマップでの検証までを同じ管理画面で進められます。なお、Squad beyondは動画そのものを撮影・編集するツールではなく、用意した動画をLPに組み込んで検証・改善していく用途に向いています。

6-1. 動画をアップロードする・YouTubeを埋め込む

Version編集画面から、画像や動画をアップロードしてLPに追加できます（出典：画像/動画をアップロードする｜Squad beyond FAQ）。アップロードできる動画の拡張子はmp4・GIF・アニメーションWebPで、容量の目安（アップロード前）は動画2MBです。アップロードした画像や動画はサーバー側で自動で圧縮され、容量が2MB以上の動画は、YouTubeなどにアップロードしてWidgetで表示する方法がすすめられています（出典：Squad beyondにアップロードできるファイルについて｜Squad beyond FAQ）。

画質を落とさずに長めの動画を使いたい場合は、高画質モード（有料）でMP4のアップロード容量が2MBから20MBになります（出典：高画質モード（有料）について｜Squad beyond FAQ）。

YouTubeの動画は「YouTube埋込コード対応」のWidgetに埋め込みコードを貼って使います。埋め込みURLの末尾に「autoplay=1&mute=1」を足すと、消音したまま自動再生されます（出典：YouTubeを埋め込むWidgetを使いたい｜Squad beyond FAQ）。なお、スワイプLPエディタでアップロードできる動画はGIFとアニメーションWebPです（出典：スワイプLPエディタ_画像アップロード容量制限について｜Squad beyond FAQ）。

6-2. 自動再生とミュートを設定する

mp4の動画は、ツールバーの「オーディオ設定」で「音声出力」をオフにするとミュートになります（出典：動画をミュートにする｜Squad beyond FAQ）。スマートフォンで自動再生するには音声がミュートになっている必要があり、mp4の走査方式は「プログレッシブ形式」である必要があります（出典：動画を自動再生させる｜Squad beyond FAQ）。

表示の速さについては、Squad beyondではWebPやAVIFなどの新しい画像形式とLazy Loadを使っていると公式FAQに書かれています。そのうえで、離脱を減らすにはページ内の動画や画像を減らして軽くすることも検討するよう案内されています（出典：広告媒体のCLICK数とSquad beyondのPV数の乖離について｜Squad beyond FAQ）。Squad beyond の表示速度への取り組みは、LPの表示高速化への取り組みでも紹介しています。

6-3. 動画あり・なしをABテストで比べ、ヒートマップで見る

同一URL配信のbeyondページで複数のVersionを作り、配信割合を「1」以上にすると、同じ配信URLのまま複数のVersionを出し分けられます（出典：ABテストを実施する｜Squad beyond FAQ）。動画ありのVersionと動画なしのVersion、動画の長さや位置を変えたVersionを用意して比べられます。

ヒートマップは、CV・クリック・離脱の3種類があり、到達率・離脱率・滞在時間・クリック数などの指標を表示できます（出典：ヒートマップについて｜Squad beyond FAQ）。動画の位置までの到達率や、動画の前後での離脱率を見ると、動画が読み進める助けになっているのか、離脱のきっかけになっているのかを確かめられます。

07｜動画LPでよくある失敗3つ

動画LPで起こりやすい失敗を、症状・原因・対策・回避策の順に整理します。

7-1. 重い動画をファーストビューにそのまま置く

• 症状：容量の大きい動画をファーストビューにそのまま置くと、表示が遅くなり、動画を見る前に離脱される
• 原因：ファーストビューの動画はLCPの対象になり、表示の速さに直接かかわることを考えていない
• 対策：動画を短く・軽くし、poster（最初に見せる画像）を用意する。容量の大きい動画はYouTubeなどに置いて埋め込む
• 回避策：公開前に、スマホの回線で実際にLPを開き、ファーストビューが表示されるまでを確かめる

7-2. 音声ありの自動再生を前提に作る

• 症状：ナレーションで説明する動画を自動再生の前提で置くと、スマホでは再生されず、何も伝わらないままになる
• 原因：音声付きの自動再生は、ChromeでもiPhoneのSafariでも、ユーザーの操作が無いと許可されない
• 対策：ミュートで自動再生する前提にし、音声で伝えていた内容を字幕やテロップに置き換える
• 回避策：動画の企画の段階で「音声なしでも伝わるか」を確認項目に入れておく

7-3. 動画を入れて満足し、効果を比べない

• 症状：動画を入れたLPだけを公開していると、成果が上がっても下がっても、動画が効いたのかどうか分からないままになる
• 原因：動画なしのLPや、長さ・位置を変えたLPと比べる仕組みを用意していない
• 対策：動画あり・なし、長さ、位置を変えたパターンを用意し、ABテストで比べる
• 回避策：公開前に「何を比べるか」と「どの指標で判断するか（CVR・到達率など）」を決めておく

08｜動画LPについてよくある質問（FAQ）

09｜まとめ

動画LPとは、ファーストビューなどに動画を組み込んだランディングページのことで、記事LPやスワイプLPと並ぶLPの表現形式の一種です。短時間で多くの情報を伝えられる一方、表示速度の低下や情報過多などの注意点もあり、動画を入れれば必ず成果が上がるわけではありません。

LPに動画を入れるときは、videoタグかYouTubeの埋め込みを使い、スマホで自動再生させたいならミュートとplaysinlineをそろえ、自動再生されなくても伝わるようにposterや字幕を用意しておきましょう。

大切なのは、作って終わりにせず、ABテストやヒートマップで検証・改善しながらCVにつなげていくことです。まずは動画あり・なしの2パターンで小さく試し、ユーザーの反応を見ながら改善を重ねる進め方から始めてみてください。

　

Squad beyondサービス紹介資料はこちらからダウンロード