商品やサービスのLP(ランディングページ)に動画を載せたい。でも、ページの一番上に置くべきか、説明の途中に入れるべきかが決まらない。手元には会社紹介動画もあり、そのまま使えるか迷うこともあります。
動画は「動きを見れば解ける疑問」のそばに置き、対象・概要・重要な条件は、再生しなくても読める状態にします。操作を見せたいなら操作説明の直後、使う場面を伝えたいなら利用場面の見出しの下が候補です。最上部に置くこと自体を目的にせず、読者がそこで知りたいことと映像の中身を合わせます。
ここでは、架空のタブレット用折りたたみスタンドを紹介するLPを例に、文章・静止画・動画の分担と、30秒の映像構成、公開前の確認手順を紹介します。実案件や効果検証の報告ではなく、配置を考えるための作例です。実際の動画やLPを制作・計測した結果ではありません。
最初に、動画を使わずに答えられる疑問を分ける
「何の商品か」「寸法はいくつか」「どの条件で使えるか」は、動画の途中で探すより、短い説明や表で確かめられるようにします。一方、「どう開くのか」「手をどこに添えるのか」「開いた状態からどう戻すのか」は、前後の動きがつながった映像で示す意味があります。
同じ内容を全媒体で繰り返す必要はありません。ただし、購入や利用の判断に欠かせない条件を動画の中だけに置くと、再生できない人には届きません。要点はページにも残したうえで、動画にしかできない説明を足します。
| 読者の疑問 | この作例で使う表現 | その理由 |
|---|---|---|
| 何に使うもの? | 短い説明文と、開いた状態の静止画 | 再生を待たずに用途と形を見られる |
| どう開閉する? | 手元を見せる操作動画 | 手の位置と動く順番を続けて示せる |
| 自分の機器を載せられる? | 寸法・対応条件・注意事項の表 | 必要な数値や条件を読み返して比べられる |
| 次に何を確認する? | 仕様詳細や購入先などへのリンク | 動画を最後まで見なくても次へ進める |
実際の商品なら、対応条件は確認済みの仕様から記載します。撮影時に載せられたという事実だけで、すべての機器への対応や安全性を保証しないようにしてください。
配置の完成例:使い方の見出しの下に、開閉動画を置く
この作例のLPは、上から次の順番にします。動画がなくても概要と条件は読め、動きを知りたい人だけが再生できる構成です。
- 冒頭:「使うときは開いて、しまうときはたたむ」という説明と、開いた状態・たたんだ状態の静止画。商品の用途も短く添える。
- 使い方:見出し「開く・置く・たたむの動きを確認」。その直下に動画を配置し、再生前の画像には手元が分かる場面を使う。そばに「開閉の手順を見る(30秒)」と内容と長さを書く。
- 仕様と注意:対応条件の表と、使う際の注意事項。動画の中で読み切らせようとしない。
- 次の案内:仕様詳細や購入先など、ページの目的に合ったリンクを置く。動画の再生完了を条件にしない。
動画の下にも「開く→機器を置く→機器を外してたたむ」のような手順の要約を添えます。必要な注意事項は省略せず、実際の操作方法に合わせて書き換えてください。記事上部の生成イラストは、この文章・動画・表の分担を示す概念図で、実在サイトの画面ではありません。
ファーストビューに置く方がよい場合は?
ページを開いた瞬間に見える範囲を、ファーストビューと呼びます。たとえば機構の動きそのものが商品の特徴で、静止画と一文だけでは用途をつかみにくい場合は、冒頭に短い実演を置く案を比較できます。その場合も、商品名・用途・次の案内を動画の再生に依存させません。
反対に、既に商品を知っている人が仕様を確認しに来るページなら、大きな動画より仕様への入口を先にする方が目的に合います。会社紹介動画があるという理由だけで、製品の使い方を知りたい人に沿革から見てもらう必要はありません。動画が答える疑問がLPと合わなければ、別ページへのリンクにするか、今回は載せない判断もできます。
30秒の中身は、ページで約束した動きに絞る
「開閉の手順を見る」と案内しているのに、動画の前半がロゴや会社紹介では、知りたい動きにたどり着けません。この作例では、次のように一つの操作を見せます。秒数は構成を検討するための配分で、推奨される最適尺ではありません。
| 再生位置 | 見せる映像 | 編集で残すこと |
|---|---|---|
| 00:00〜00:04 | たたんだ状態と、開いた完成形 | 何の動きを見る動画かを先に示す |
| 00:04〜00:13 | 手を添えて開く一連の動作 | 持つ場所と開き方が見える向き。重要な操作をカットで飛ばさない |
| 00:13〜00:21 | 機器を置き、使用状態を横から見せる | 接点と置き方を映す。使用条件は別途仕様欄でも確認できるようにする |
| 00:21〜00:27 | 機器を外してから、たたむ | 取り外しを省略せず、戻す順番を示す |
| 00:27〜00:30 | たたんだ状態を止めて見せる | 「寸法・対応条件は下の仕様欄へ」と、LP内の次の確認先を案内する |
操作に時間がかかる商品なら、30秒に合わせるために重要な動作を早送りするより、必要な尺を確保します。音声で説明する場合は字幕を用意し、画面にしか出ない重要な動作も言葉で伝えることを検討します。字幕と手元が重なっていないかも確認してください。
LPとSNSで同じ撮影素材を使いたい場合は、撮影前に両方の画角を試すと、後で手元が切れる問題を避けやすくなります。具体的な切り抜き幅と撮影テストは、横動画から縦動画を作るときの画角の考え方で解説しています。
再生する人にも、しない人にも使いやすくする
最初の案としては、再生前の画像と内容の説明を置き、読者が操作して再生する形を検討してください。自動再生を採用する場合も、音が突然出ないか、停止できるか、動く映像の横で本文を読めるかを確かめます。
表示の軽さは、動画ファイルの容量だけでは決まりません。外部プレーヤーの埋め込みも含め、読込方法と配置をセットで確認します。web.devの動画読込ガイドでは、自動再生しない動画の事前読込を抑える設定や、再生前画像の利用を説明しています。一方、最初に見せる主要な動画・画像まで遅延読込にすると、必要な表示が遅れる場合があります。ページ下部の動画と冒頭の主要表示を同じ設定で扱わず、実装担当者と確認します。
また、W3C WAIの音声・動画ガイドは、字幕、視覚情報の説明、文字による内容の提供、使いやすいプレーヤーを挙げています。要約を一行置くだけで、必要な字幕や説明をすべて代替できるわけではありません。映像・音声のどちらに重要情報があるかを見て、必要な補助を制作時点から用意します。
上記の公開一次情報は2026年9月27日に確認。ここで示した配置と30秒構成は編集上の提案であり、公式資料が推奨するLPの定型や成果保証ではありません。
公開前は、再生しない状態から順に確かめる
- 動画を再生せずに読む。用途、重要な条件、次の確認先が分かるかを見る。足りなければ動画を増やす前に文章や表を補う。
- 音を消して再生する。字幕、手の位置、操作の順番が分かるかを見る。分からない動作はカットの追加や画面内の説明で補う。
- スマートフォンでページ全体を見る。再生ボタンを押せるか、映像内の小さな文字を読めるか、動画を止めて本文へ戻れるか、仕様と案内先へ進めるかを確認する。
- 読込と操作を確認する。普段の利用に近い通信環境でも、動画を待たずに本文を読めるかを試す。キーボードでも再生・停止を操作できるか確認する。
- 説明と映像の版を照合する。変更した商品・画面・仕様が旧版のまま映っていないか確認する。動画だけ差し替えた場合は、周辺の説明とリンクも読み直す。
公開後に比較するなら、まず動画の内容か配置のどちらか一つを変更し、変更日と流入条件を記録します。再生数が増えたことと、仕様理解や購入・問い合わせが改善したことは別です。測定していない項目は未取得のままにし、再生した人としなかった人の差だけで動画の効果を断定しないようにします。
動画を作る前に、ページの疑問と映す場面を一組にする
「開閉の方法が分からない→手元を連続して見せる」のように、疑問と場面が対応すれば、配置も必要な素材も具体的になります。対応する場面が見つからず、文章を読み上げるだけになるなら、静止画や説明文で足りるかを先に検討してください。
既存資料のどこを動画にするか迷う場合は、営業資料を動画化する構成例も参考になります。LPで使う映像の構成・撮影・編集を相談したい方は、Musubimeの動画制作サービスをご覧ください。掲載予定のページと「見せたい動作」を共有すると、必要な映像を検討しやすくなります。
2026年9月27日改稿:LP上の配置例、文章・静止画との分担、公開前の確認手順を更新しました。
