LP動画ヒーローの作り方｜尺15〜30秒・字幕・posterでCVRを落とさない設計

結論から言うと、動画ヒーローは「動きでしか伝わらない価値」がある場合にだけ使うべきです。SaaS の UI デモ、美容・食品の質感、イベントの雰囲気などが典型です。

逆に、読み込みが遅い動画や内容が分かりにくい動画は、静止画より直帰を増やします。動画は必須ではありません。

迷ったら、静止画ヒーローで先に公開して CV を確認し、その後に動画化する段階的アプローチが安全です。ファーストビューに静止画＋短尺動画を併用する構成も検討してください。

原則は4つです。① 尺は15〜30秒 ② 最初の3秒で価値提案を見せる ③ 字幕必須（静音再生が大半のため）④ 音声オンはユーザー操作に任せる。

ループ再生は控えめにしてください。同じ映像が延々と繰り返されると、かえって注意が散ります。

テロップはコントラストを確保し、モバイルの小画面でも読めるサイズにします。音声なしでも内容が理解できる構成が前提です。

自動再生には muted・playsinline・poster 画像の3点セットを設定してください。この3つが揃っていないと、モバイルで再生されないか、真っ白なヒーローが表示されます。

パフォーマンス面では、CDN 配信・適切な圧縮（目安2〜5MB）・ファーストビュー以外の遅延読み込みが基本です。LCP 要素が動画になる場合は、poster 画像を最適化します。

動画が再生できない環境向けに、poster と同じメッセージの静止画へフォールバックする実装を必ず入れてください。

動画の直下に明確な CTA を置き、「見るだけで終わる」導線にしないでください。動画視聴率は参考指標に留め、最終 CV を主 KPI にします。

判断は A/B テストで行います。静止画ヒーローと比較し、業種・デバイス別の勝ちパターンを見つけるのが安全です。

CVR が下がる場合は速やかに動画を止め、静止画に戻す判断も必要です。動画は投資した分だけ使い続ける理由にはなりません。

代替テキスト・文字起こしへのリンク・キーボード操作可能な再生コントロールの3点を用意してください。

点滅の激しい映像や自動で大音量になる実装は避けます。詳細は「LP アクセシビリティの基本と実践」を参照してください。

制作フローは「脚本（15秒）→ 撮影または画面録画 → 字幕入れ → 圧縮 → 配置」の順です。最初から 4K 制作は不要なことが多いです。

スマホ撮影でも、1080p・30fps・三脚固定なら実用レベルになります。冒頭3秒にテロップで価値提案を入れてください。

SaaS は画面録画＋ズームで機能を見せ、美容・食品は使用シーンを短く切り替える構成が定番です。

外注する場合も、ブリーフに「伝えたい1文」「NG 表現」「CTA 文言」を渡し、LP との一貫性を担保してください。

動画の25%・50%・75%再生率をイベントで送り、離脱ポイントを特定してください。再生が伸びない場合は、尺を短くするか静止画へ戻す判断材料になります。

動画差し替えの運用も設計しておきます。CDN の URL を固定し、HTML を触らずに動画だけ更新できる構成にすると運用が楽です。

視聴完了率が低くても CV が高いケースがあります。動画が補助的に効いている可能性があるため、視聴率だけを無理に追わないでください。

DesignLayer のブリーフに「ヒーロー：商品デモ動画（15秒・字幕あり）」と書くと、プレースホルダーとコピー構成が動画前提で生成されます。

video タグの実装と再生計測は、本番実装フェーズでエンジニアが追加する分担です。スタジオではコピーとレイアウトを先に固めてください。

動画制作前に LP のコピー構成を確定させると、脚本と LP のメッセージがズレず、制作の無駄が減ります。

Q. 自動再生は必須ですか？ A. 必須ではありません。muted・playsinline なら多くのブラウザで自動再生できますが、poster と静止画フォールバックは必須に近い要素です。

Q. 動画が重くて LCP が悪化したらどうしますか？ A. poster を LCP 要素にするか、動画をヒーローから下げて静止画ヒーローへ戻す選択肢があります。

Q. 視聴完了率が低いのに CV は高い場合は？ A. 動画が補助として効いている可能性があります。無理に視聴率だけを上げる必要はありません。

動画ヒーローは効果もリスクも大きい施策です。尺15〜30秒・冒頭3秒の価値提案・字幕・poster の原則を守り、フォールバックを必ず用意してください。

採用の判断は静止画との A/B テストで行い、CVR が下がるなら戻す勇気を持ちます。主 KPI はあくまで最終 CV です。

まずは静止画ヒーローで LP を公開し、CV を確認してから動画化する順番をおすすめします。DesignLayer のブリーフに動画の有無と尺を書けば、動画前提の構成から始められます。