実録画前のWebデモ動画は既存スクリーンショットから短いmp4で仮検証する
フロントエンド
UI/UX
動画
知識
運用
原則
SaaSや開発ツールの紹介ページで操作動画を入れたいが、まだ録画専用アカウントや本番デモシナリオが整っていない段階では、既存スクリーンショットから短い無音mp4を作って先にレイアウトと伝わり方を検証すると進めやすい。
適用条件
- 本番用の実操作録画は後で差し替える前提。
- 既に公開可能なスクリーンショットやモック画像がある。
- まず確認したいのが、動画枠のサイズ、ファーストビューでの見え方、ページ内CTAとの関係、ファイル配信の動作である。
判断基準
- 実操作の正確さを訴求するページでは、最終的には録画専用アカウントで実際の操作を撮る。
- 価値訴求や導線確認が目的なら、スクリーンショットのフェード切り替え動画でも十分にページ検証できる。
- Web埋め込みは
video要素でmuted、playsInline、必要に応じてautoPlayとloopを付ける。poster画像を用意すると読み込み前や失敗時の見た目が安定する。 - mp4はH.264/yuv420pにしておくとブラウザ互換性が高い。ページ表示の検証では、動画URLが200で返ること、ファイルサイズが重すぎないこと、モバイル幅でテキストやCTAを押し出さないことを見る。
注意点
仮動画に実データ、メールアドレス、OAuthトークン、非公開メモ、顧客情報を映さない。実録画へ差し替えるときも、録画専用アカウント、seedデータ、通知オフ、ブラウザ拡張オフを前提にする。