ウェブサイトのスクロール動画の作り方

1. 1

   リンクを貼る

   ホームページの入力欄にアドレスを貼り、Enter を押します。こちらで本物のブラウザにページを開き、フォントと遅延読み込みの画像を待ってから、上から下まで読み込みます。あなたの画面からは何も録画しません。

2. 2

   デバイスと形を選ぶ

   「デスクトップ」はページをデスクトップ幅で読み込み、16:9、4:3、1:1 から選べます。「タブレット」と「モバイル」はそれぞれの幅で読み込むので、サイト本来のレスポンシブなレイアウトが表示され、9:16、4:5、1:1 から選べます。決まった仕様に合わせるなら、正確なサイズを直接入力することもできます。

3. 3

   長さを決める

   長さは 2 秒から 90 秒まで。これがスクロールの速さも決めます。同じページでも、6 秒ならティーザーに、30 秒ならじっくり見せるツアーになります。

4. 4

   動きを選ぶ

   「スムーズ」はゆっくり動き出してゆっくり止まり、「グライド」は勢いよく動き出して惰性で止まり、「等速」は一定の速さを保ち、「パルス」はセクションごとに区切ってページを下りていきます。継ぎ目なくループさせたいなら、再生を「下へ、そして戻る」にしてください。

5. 5

   静止、一時停止、ホバーを加える

   どれも任意ですが、仕上がりの差はほとんどここで生まれます。最初や最後に最大 10 秒静止させ、最大 6 か所のセクションで止め、ボタンやカードをカーソルで指してホバー効果を再生させましょう。

6. 6

   プレビューしてから書き出す

   プレビューはブラウザ内で再生され、何度見直しても費用はかかりません。納得できたら MP4・WebM・GIF のいずれかで書き出します。消費するクレジットの正確な数は、押す前に「書き出す」ボタンに表示されます。

エディターの大半の項目には、無難な初期値が入っています。見直す価値があるのは次の項目です。

ページが長く、売りになるのが上半分だけなら、プレビューの下にあるハンドルをドラッグして、スクロールの開始位置と終了位置を決めましょう。同じ長さでスクロールする距離を短くすれば、そのぶんゆっくりで読みやすいスクロールになります。

長さは、完成した動画 2 秒ごとに 1 クレジット。いくつかの設定には決まった額が上乗せされます。高い解像度、高いフレームレート、ライブ収録、タブレット幅やスマホ幅、一時停止、ホバーです。デスクトップ幅で読み込んだ 10 秒・1080p・60 fps の書き出しは 21 クレジットなので、登録時の 51 クレジットで 2 回分になります。

その後は、クレジットをパックで購入できます（$5 で 100 クレジット、$12 で 400 クレジット、$19 で 900 クレジット）。有効期限はありません。サブスクはなく、どの動画にもウォーターマークは入りません。詳しい表はクレジットの仕組みにあります。

• 出現アニメーションが見当たらない、またはセクションが空白に見える。 高速なエンジンはページの静止画の上をパンするため、スクロールで発動する効果は再生されません。エンジンを「ライブ収録」に切り替えるか、「アニメーションを最後まで進める」をオンにして完了した状態まで進めてください。スクロールアニメーションの収録も参照してください。
• Cookie バナーやチャットの吹き出しが映り込んだ。 「Cookie バナーとポップアップを取り除く」はオンのままにして、取りこぼしたものは「要素を隠す」に CSS セレクタとして追加します。詳しくは収録からポップアップを取り除くで。
• ログイン画面やエラーが表示される。 ページは公開されている必要があります。代わりにログインすることはできず、自動化されたブラウザを最初から拒否するサイトもあります。
• モバイル用の動画が、押しつぶしたデスクトップページのように見える。 デスクトップで縦長のアスペクト比を選ぶのではなく、デバイスで「モバイル」を選んでください。そうすればサイトがスマホ用のレイアウトを返します。モバイル版の収録も参照してください。