FramerやWebflowのテンプレート紹介動画を作る方法

文：Ivan Cernja・2026年10月14日

対象者、代表的なレイアウト数点、実際の操作ひとつを見せます。 短い紹介動画は、購入者がライブプレビューを開くか判断する助けになるものです。テンプレート全体を高速スクロールに詰め込む必要はありません。

購入者には、販売されるデザインと、見せるためのデモコンテンツを区別する必要があります。動画と商品説明の両方で明確にしてください。

ページ数より購入者から考える

制作会社のポートフォリオ、飲食店のサイト、SaaSのランディングページ用テンプレートでは解決する問題が異なります。関係する用途から始め、その購入者に役立つページやセクションを見せます。

すべての部品を同じ重要度で紹介しないでください。分かりやすいレイアウト、内部ページ、デザインの考え方を示す細部をひとつずつ選びます。複数のスタイルがあるなら、付属するバリエーションか別商品かを説明します。

実際の操作を収録する

メニュー、フィルター、ホバー状態、レスポンシブな動作は、動くプレビューで見せます。購入者が受け取れない操作を示唆する演出は加えないでください。ポインターを意図的に動かし、結果の状態を認識できる時間を取ります。

モバイル版を見せるなら、実際のモバイル用レイアウトを使います。デスクトップの画像をスマートフォンの枠に入れても、レスポンシブ対応の実演にはなりません。

商品掲載用動画の構成例

情報量に合わせたテンポにします。掲載動画はすべての事業に合う証明ではなく、特定のデザインの役立つプレビューです。

掲載先の条件を確認する

Framerは「アップロードした動画、ホストされたMP4ファイル、YouTubeとVimeoの埋め込みコンテンツ」（訳）を説明しています。テンプレートのデモや販売サイトに加える際はFramerの現行手順を使います。これは個々のマーケットプレイスの商品掲載で何を受け付けるかを示すものではありません。

Webflowの動画文書は同社の埋め込み方法を説明しています。マーケットプレイスの規則は別に確認し、販売ページと同じ動作だと考えずに最終的な掲載をプレビューしてください。

購入者が受け取るものを正確に伝える

写真、フォント、独自コード、その他の素材が含まれるか、どんな条件かを明記します。デモのアートワークが映っているだけで、その所有権も得られるように見せないでください。重要な購入条件は、読める商品説明文に残します。

ブランドに合ったテンプレートの告知には、Teasrで公開プレビューを起点に、短いモーション広告を確認できます。動画編集ソフトでテンプレートのデザインを再現する必要はありません。機能を認証するものではなく、特定の操作が売りなら実際の録画に代わるものでもありません。顧客向けの仕事全般は制作会社の発売告知動画パッケージをご覧ください。