スクロールの録画で、マウスホイールのカクつきやフレームレートのむらを防ぐには

一般的なマウスホイールはカチカチと刻みごとに回り、1 刻みごとにページを決まった距離だけ動かします。ブラウザは各段階を短いアニメーションでなめらかにするので、ホイールを回し続けると、加速して止まる小さな動きが連なることになります。画面上なら目はそれを気にしません。けれども動画にして大きなディスプレイで再生すると、カクつきとして見えます。

• 最善の解決策： ホイールを使わないこと。決まった速さでページをスクロールするスクリプトに任せましょう。コピーして使えるものが自動スクロールのガイドにあります。
• どうしても手でスクロールするなら： 刻みのないフリースピンのホイールや、トラックパッドをゆっくり一定にドラッグするほうが、刻みのあるホイールよりはましです。ただ、20 秒間速さを保てる手はありません。

macOS のスクリーンショットツールバーや QuickTime を含む多くの標準の録画機能は、画面上で何かが変わったときにだけフレームを書き込みます。容量の節約にはなりますが、フレームの間隔がばらつき、編集ソフトや一部のプレーヤーはそれをうまく扱えません。固定のタイムラインに合わせるためにフレームが複製されたり落とされたりして、スクロールがガタつきます。

• OBS Studio のように固定フレームレートで書き出せるツールを使い、60 fps に設定して録画します。
• すでに可変フレームレートのファイルがあるなら、編集する前に固定フレームレートに変換します。HandBrake の「Constant Framerate」オプションで変換できます。

スクロールでは、毎フレームすべてのピクセルが動きます。30 fps では 1 フレームごとの移動が 60 fps の 2 倍になり、文字の多いページではその飛びが目に見えます。24 fps は映画のフレームレートで、映画には合っていますが、スクロールするページでは速さに関係なく 3 つの中でいちばんなめらかさに欠けて見えます。

動きそのものを見せたいなら、60 fps で録画して書き出しましょう。30 に下げるのはファイルを小さくしたいときだけにし、その場合はスクロールを遅くします。GIF はほとんどのツールでフレームレートの上限が低いので、GIF のスクロールは短く、穏やかにしましょう。

ディスプレイが 120 Hz や 144 Hz で更新されていて 60 fps で録画すると、録画ツールはおよそ 2 フレームに 1 フレームを残すことになり、可変リフレッシュレートのディスプレイではその間隔すら均等になりません。録画中はディスプレイを 60 Hz に設定すれば、録画ツールと 1 対 1 で一致します。ProMotion 搭載の Mac なら、この設定は「ディスプレイ」の「リフレッシュレート」にあります。

• 遅延読み込みの画像は画面に入った瞬間にデコードされ、その処理がフレームを奪います。録画の前にいちばん下までスクロールして戻り、すべてを読み込んでおきましょう。
• スクロールに連動する重いスクリプト、動画の背景、WebGL の効果があるページは、パソコンに大きな負荷をかけます。ほかのアプリやブラウザのタブは閉じておきましょう。
• 録画とエンコードを同時に行うと、ページと CPU を取り合います。録画ツールにハードウェアエンコーダーがあれば、それを使いましょう。

上の原因はどれも、本物の画面の上で動きをリアルタイムに記録することから生まれています。レンダラーはそのどちらもしません。Website Scroll Video はページを一度読み込み、画像とフォントを待ってから、各フレームでページがどこにあるべきかを計算して描きます。段階的に動くホイールも、合わせるべきリフレッシュレートも、フレームが間に合わない締め切りもないので、ページがどれだけ長くても重くても、出力は 24・30・60 fps の固定フレームレートを保ちます。