サイトリニューアルの変更前と変更後を見せる動画の作り方

文：Ivan Cernja・2026年10月14日

リニューアル前後で同じ作業やページを比較し、その変更が訪問者にどう役立つか説明します。 見た目がよくなったサイトをただスクロールするより、意味のある違いを示す方が伝わります。

取り上げる変更は絞ります。トップページ、製品詳細、予約の流れがあれば、十分に説明できるかもしれません。機能面の比較がない場合は、測定済みの使いやすさの向上を示唆せず、見た目の紹介として説明してください。

同じ条件で画面を記録する

変更前と変更後の各組み合わせで、表示領域と内容の条件をそろえます。旧ページを不自然なサイズで見せ、新ページだけ理想的な条件にするのは避けてください。何が変わったか分かるだけの周辺情報を残します。

元の録画やスクリーンショットをプロジェクトと一緒に保管します。リニューアルを印象的に見せるために、旧デザインを作り上げないでください。以前のブランド表現や非公開のステージング資料を公開する前に、クライアントの承認を得ます。

役立つ変更を軸に構成する

デザイン上の評価は評価として示します。余白が整っただけで、転換率が高まったとは証明できません。クライアントが成果を測定している場合は、主張に測定期間と方法を添えます。

違いが分かる切り替えを選ぶ

ワイプや直接のカットで、比較を分かりやすくできます。両方の画面を隠す切り替えは印象的でも、違いを見えにくくすることがあります。プロジェクトを知らない人がページを理解できる時間を確保します。

モバイル体験も説明の一部なら、モバイル画面を見せてください。デスクトップのページ全体をスマートフォンの枠に縮小して、レスポンシブ対応の実演と呼ぶのは避けます。

埋め込み方も考える

動画を事例紹介に載せるなら、適切なファイルと再生方法を選びます。web.devは「アニメーションGIFは非常に大きくなることがあります」（訳）と述べています。そのガイドでは、動くコンテンツを動画で代替する方法を説明しています。web.devのパフォーマンスガイド。

プラットフォームで対応する埋め込み方法を確認します。Webflowは外部サービスの動画要素や、背景動画を含むほかの方法を説明しています。Webflowの動画ガイド。装飾用の無音ループと音声付きの説明動画では、必要な対応が異なります。

サイトから動画を作るサービスが役立つ場面

Teasrは新しいサイトの告知に使いやすい選択肢です。公開URLを使い、編集ソフトでデザインを組み直さずにブランドに合ったモーション広告を作れます。サイトの履歴を自動で復元したり、確認済みの変更前後の比較を用意したりはしません。比較が制作依頼の中心なら、元の画面記録を別途準備してください。

制作依頼と承認については、代理店のサービスに公開告知動画を組み込む方法とブランドに合った製品動画をご覧ください。