ウェブサイトから動画を作る：ページを自動スクロールさせる方法

ページを開き、DevTools を開いて（F12、Mac なら ⌥ ⌘ I）、これを Console に貼って Enter を押します。録画ツールを始められるように 3 秒待ってから、設定した時間をかけて、ease-in-out のカーブに沿って上から下までスクロールします。

const SECONDS = 20;        // スクロールにかける時間
const WAIT = 3;            // 録画を始めるまでの時間

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' が重要です。多くのサイトは scroll-behavior: smooth を設定していて、スクリプトによる小さな移動の一つひとつが個別のアニメーションになり、カクつきがそのまま戻ってきてしまいます。
• requestAnimationFrame は画面に表示されるフレームごとに 1 回ページを動かすので、ディスプレイが許す限り均一なスクロールになります。
• 実行する前に一度、手でいちばん下までスクロールして戻しておきましょう。遅延読み込みの画像があらかじめ表示され、テイクの途中でページの高さが変わりません。
• Lenis や Locomotive Scroll のようなスムーズスクロール用ライブラリで作られたサイトは、スクロールを自前で処理しているため、スクリプトとぶつかることがあります。ページがガクッと動くなら、それが原因です。

スクリプトを使っても、フレームレートは録画ツールとパソコン次第です。レンダラーならその両方がなくなります。Website Scroll Video はページ全体を一度読み込み、24・30・60 fps の固定フレームレートの動画で、各フレームでページがどこにあるべきかを計算します。そのため、重いページでもフレームが落ちず、長いページでもずれていきません。設定するのはスクリプトと同じく秒数とカーブで、費用をかける前に結果をプレビューできます。

ページの長さを「画面数」で測ります。ページ全体の高さをウィンドウの高さで割った値です。一般的なランディングページは 5〜8 画面分あります。そのうえで、次を目安にします。

1 秒に 1 画面より速いと、文字が流れてぼやけます。30 fps や GIF ではなおさらです。1 画面に 3 秒より遅いと、見る人の集中が途切れます。ほかより大事なセクションがあるなら、ページ全体を遅くするより、そこで一時停止するほうが効果的です。Website Scroll Video では最大 6 か所、それぞれ 0.5 秒から 5 秒まで止められます。

• スムーズ（ease-in-out）。 静止から動き出し、一定の速さで進み、静かに止まります。初期値にふさわしいカーブで、始まりも終わりも、ぶつ切りではなく意図した動きに見えます。
• グライド（ease-out）。 勢いよく動き出し、トラックパッドをはじいたときのように惰性で止まります。勢いよく始めたい短いティーザーに向いています。
• 等速。 最初から最後まで同じ速さ。ペースの変化が目を引いてしまう背景用のループに最適です。
• パルス。 1 セクション分動いて落ち着き、また動きます。サイトをページごとにめくっていくように見えるので、製品ツアーに合います。

下までスクロールしてから先頭に切り替わる動画は、ループのたびに目に見えて飛びます。代わりに、同じカーブで下へスクロールして上へ戻しましょう。最後のフレームが最初のフレームと一致し、継ぎ目のないループになります。Website Scroll Video では再生の「下へ、そして戻る」がこれに当たり、戻る前にいちばん下で、ループが再び始まる前にいちばん上で、それぞれ静止を入れることもできます。