Framer、Webflow、Wix のテンプレートのプレビュー動画を作る方法。公開したサイトを出現エフェクトごと収録し、売りになるセクションで一時停止させ、掲載ページと SNS 用に書き出します。
Aviral Lakhanpaul 更新5 分で読めます
テンプレートを Framer の無料アドレスに公開し、その URL をスクロール動画ツールに貼って、「ライブ収録」に切り替えます。そうすれば Framer の出現エフェクトやスクロールアニメーションが、訪問者が見るとおりに再生されます。ヒーロー、機能紹介のグリッド、料金のセクションで短く一時停止させ、インタラクティブなカードにホバーを加えて、掲載ページ用の 16:9 の MP4 と、SNS 用の 4:5 か 9:16 版を書き出しましょう。
Framer のテンプレートは動くように作られています。セクションはビューポートに入るとフェードやスライドで現れ、要素はスクロールに合わせて拡大したりパララックスで動いたりし、カードはポインターに反応します。画面録画ならそのすべてを捉えますが、むらのあるホイールの動きも、3 つのアニメーションが同時に発動したときにパソコンが落とすフレームも一緒に記録されます。単純なページ全体のキャプチャはどれも捉えられません。静止画には反応すべきスクロールがないからです。プレビュー動画には、動きと均一なスクロールの両方が同時に必要です。
テンプレート、またはそのデモを、.framer.website のアドレスか独自ドメインに公開します。プライベートウィンドウでパスワードなしに開ける必要があります。
ホームページにアドレスを貼ります。エンジンで「ライブ収録」を選んでください。静止画の上をパンするのではなく、スクロール位置ごとにページを撮影するので、出現エフェクト、スクロールに連動する変形、追従するセクションが、ブラウザで見るのとまったく同じように再生されます。
たいていのテンプレートのトップページには 12〜20 秒が合います。動きは「スムーズ」が無難です。「パルス」はセクションごとに動いてそれぞれで落ち着くので、テンプレートの構成がよく伝わります。
スクロールを止めたい場所をページ上でクリックします。ヒーロー、ベントーグリッドや機能紹介のグリッド、お客様の声、料金。一時停止は最大 6 か所、それぞれ 0.5 秒から 5 秒までです。動画が上へ戻ってくるなら「往復とも」をオンにします。
「カーソルを表示」をオンにし、「ホバーを追加」してから、カーソルを止めたいカードやボタンをクリックします。カーソルがそこまで移動してホバー効果が再生され、0.5 秒から 5 秒とどまってから次へ進みます。カーソルの種類は macOS 風からシンプルなドットまで 8 種類です。
掲載ページ用に 1080p か 1440p の 16:9 の MP4 を書き出したら、デバイスを「モバイル」に変えて、X、Instagram、TikTok 用にスマホレイアウトの 9:16 か 4:5 版を書き出します。
「静止パン」はページを一度読み込み、その上をフレームが下へ移動していきます。速くて完全に均一ですが、スクロールで動くものはすべて、ページを読み込んだ時点の状態で止まったままです。「アニメーションを最後まで進める」をオンにすると、登場エフェクトが先に完了した状態まで進むので、フェードの途中で写り込むものはなくなります。「ライブ収録」はエフェクトを実際に再生します。レンダリングにはかなり時間がかかり、書き出しに 13 クレジットが加算されます。
リンクを貼れば、スクロールのプレビューは無料です。登録すると 51 クレジットが無料で付き、クレジットカードは不要。書き出した動画にウォーターマークは入りません。
スクリーンショットの上をパンするのではなく、実際のページをスクロールする収録方法を使います。Website Scroll Video ではそれが「ライブ収録」エンジンで、スクロール位置ごとにページを撮影するので、出現エフェクトやスクロールに連動する変形が再生されます。
URL からはできません。まず無料の .framer.website アドレスに公開してください（非公開リストにもできます）。そのうえで、そのリンクを使います。
正確な上限は、各マーケットプレイスのアップロードガイドラインで確認してください。掲載ページには 1080p の 16:9 の MP4 が無難な標準で、SNS 用に 4:5 か 9:16 版を用意します。
