ビフォーアフター比較動画の作り方

言葉で説明するのは難しくても、見せれば一瞬で伝わる改善があります。8秒かかっていたページが1秒で開くようになった。ごちゃごちゃしていたダッシュボードが読みやすくなった。分かりにくかった購入フローから3ステップが消えた。こうした変化を文章で書けば一段落必要ですが、動画なら6秒で足ります。

ビフォーアフター比較動画は、画面録画で作れる最も説得力のある形式であると同時に、最も失敗しやすい形式でもあります。2本の録画が揃っていないと、視聴者は伝えたかった違いではなく、意図しなかった違いに注目してしまいます。

このガイドでは、改善そのものに語らせる比較動画を Recorded で企画・録画・編集する方法を紹介します。

比較動画が向いている場面

• パフォーマンス改善: 読み込み時間、ビルド時間、描画速度、同期時間
• リデザイン: 新しいレイアウトやナビゲーション、ビジュアルを旧版と並べて
• ワークフローの改善: 7回のクリックが2回に
• バグ修正: 壊れていた挙動と、修正後の挙動
• 自分の作業のビフォーアフター: デザイン整理、リファクタリング、移行、文章の書き直し

画面上の結果がまったく同じバックエンドのリファクタリングのように、変化が目に見えない場合、比較動画は役に立ちません。視聴者が実際に見える違いがあるときに使いましょう。

鉄則: 変えるのは1つだけ

比較の説得力は「改善した部分以外はすべて同じ」という事実から生まれます。つまり2本の録画は次を共有すべきです。

• 同じウィンドウサイズと画面解像度
• 同じキャプチャモードとフレームレート
• 同じ開始状態（同じページ、同じデータ、同じアカウント）
• 同じ操作を、同じ順序で、同じペースで
• 同じテーマ — ビフォーをライトモード、アフターをダークモードで撮らないこと

1つでもずれると、視聴者は結果を疑う理由を得ます。最初の録画ボタンを押す前にすべて固定しましょう。

比較動画を企画する

1. 操作のスクリプトを正確に書く。 ナレーションではなくクリックの順番です。「ダッシュボードを開く → レポートをクリック → 過去30日を選択 → エクスポートをクリック」
2. 何を測るか決める。 時間、ステップ数、エラー回数、あるいは体感的な分かりやすさ。動画の中で明言しましょう。
3. 同一のテストデータを用意する。 両環境に同じレコードが入ったデモアカウントを使えば、「そっちはデータが少なかっただけでは」という反論を防げます。
4. ウィンドウサイズを固定する。 一度調整したら、テイクの間は触らないこと。
5. 各バージョンをリハーサルする。 片方だけ手間取ると、結果がこっそり誇張されてしまいます。

2つのバージョンを録画する

「ビフォー」と「アフター」は1本の長いテイクではなく、2本の別々の録画として撮りましょう。ファイルが分かれていた方がトリミングも位置合わせも撮り直しも簡単です。

1. Recorded でキャプチャを設定します — 両方で同じモニター、ウィンドウ、範囲を選択
2. フレームレートを1つに決め、両テイクで維持
3. 操作スクリプトどおりに「ビフォー」を録画
4. 環境を切り替えます — 新しいビルド、新しいデザイン、ステージング URL
5. ウィンドウサイズが変わっていないか再確認
6. まったく同じ操作スクリプトで「アフター」を録画

ヒント: 読み込み時間を比較するなら、読み込みを始めるクリックの少し前から録画を開始し、完了の少し後で停止しましょう。この余分なフレームがあると、公平な開始点でトリミングしやすくなります。

比較動画を編集する

同じ開始点にトリミングする

両方の録画をエディタで開き、まったく同じトリガーの瞬間 — 通常はクリックしたフレーム — から始まるようにトリミングします。片方が0.5秒早く始まると、実際は遅くなくても遅く見えます。

両側にはっきりラベルを付ける

テキストオーバーレイで画面に Before と After を表示します。その際は:

• 両方のクリップで同じ位置に配置
• 最初の1秒だけでなく区間全体に表示
• 圧縮や小さなモバイル画面でも見えるよう高コントラストに

2つ目のオーバーレイとして経過時間やステップ数を出せば、改善は感覚ではなく数値になります。

ズームで視線を誘導する

違いが画面の隅 — スピナー、カウンター、メニュー — で起きるなら、両方のクリップの同じ瞬間にズーム効果を入れましょう。片方だけズームすると対称性が崩れるので、ズーム区間は両方に同じように適用します。

速度変更は慎重に

速度調整はチュートリアルには有効ですが、比較動画では危険です。どちらかの速度を変えると、視聴者はタイミングを信頼できなくなります。長い待ち時間を縮める必要があるなら、両方のクリップにまったく同じ速度を適用し、その旨を画面に明記しましょう。

レイアウトを選ぶ

• 順次再生: 「ビフォー」を再生してから「アフター」。シンプルで誠実、どの画面比率でも成立する最も安全な選択です。
• 左右並べ: 2つのクリップを並列表示。長さが近く、半分の幅でも読める程度に画面が単純なときに向きます。
• 決定的瞬間でカット: 山場まで両方を見せ、そこで切り替える。性能差が劇的なときに効果的です。

縦型やソーシャル向けでは、左右ではなく上下に積むことで、それぞれが読めるサイズを保てます。

誠実さを保つ

比較動画はマーケティングであると同時に証拠でもあります。反論されて持ちこたえられない結果は、その動画が得た以上の信頼を失わせます。

• 片方だけキャッシュをクリアしない
• 「ビフォー」をわざと遅い回線で走らせない
• 「アフター」でこっそりステップを飛ばさない
• 条件を明示する: どのマシン、どの回線、データ量はどれくらいか
• 一番運が良かった1回ではなく、典型的なケースを見せる

書き出しと共有

• MP4: 動画を埋め込む・アップロードするあらゆる場所に
• GIF: README、変更履歴、チャットに貼る短い比較 — 数秒以内に収めましょう
• 縦型クロップ: ソーシャル向けに、上記の上下積みレイアウトで

ダウンロードされた後でも分かるファイル名を付けましょう。comparison-final-v3.mp4 より checkout-flow-before-after-2026-09.mp4 です。

簡易チェックリスト

[ ] 両テイクのウィンドウサイズ、解像度、フレームレート、テーマが同じ
[ ] 同じ開始状態と同じテストデータ
[ ] 同一の操作スクリプトを両バージョンでリハーサル済み
[ ] 両クリップを同じトリガーフレームでトリミング
[ ] Before/After のテキストオーバーレイを同じ位置に
[ ] ズーム効果を両クリップに同じように適用
[ ] 片側だけに速度変更を掛けていない
[ ] 測定条件を画面か説明文に明記

まとめ

良い比較動画は「良くなりました」と主張しません。視聴者に見せて、自分で判断してもらいます。2本の録画をできる限り揃え、示したい1点だけを変え、結果にはっきりラベルを付けましょう。次にリデザインや速度改善、より簡潔になったフローをリリースするときは、旧バージョンが消える前に両方を録画しておいてください。それは後から撮り直せないカットです。