カクつき、ポップアップ、切れたページのないウェブサイトのスクロールを画面録画するには。ページを整え、録画ツールを設定し、スクロールを自動化して、最後にトリミングします。
Aviral Lakhanpaul 更新7 分で読めます
まずページを整え（Cookie バナーを閉じ、チャットウィジェットを閉じる）、ブラウザのウィンドウを欲しいフレームとぴったり同じ大きさにし、一定のフレームレートで書き出せる録画ツールで 60 fps で録画して、スクロールは手ではなくスクリプトに任せます。あるいは録画ツールを使わず、スクロールを計算してくれるレンダラーに URL を渡す方法もあります。
ページを録画する方法があります。ページがスクロールするあいだ、モニターに映っているものを画面録画ツールが記録します。もう一つはレンダリングです。ツールが自前のブラウザでページを開き、1 フレームずつ動画を組み立てます。このガイドが扱うのは前者です。それが正解になる場面もあるからです。ページが公開されていて、スクロールだけが必要なら、リンクから作る手順ガイドのほうが早く済みます。
自分で録画するのが理にかなうのは、次のような場合です。
localhost、またはあなたしかアクセスできないネットワーク上にある。失敗テイクの多くは、録画を始める前に決まっています。次のことを一度やっておけば、どのテイクも良くなります。
html { scrollbar-width: none; } を追加してください。先に出力の形を決め、ブラウザのウィンドウをその形にします。16:10 の画面全体を録画してからあとで 9:16 に切り抜くと、ピクセルの大半を捨てることになり、ぼやけた仕上がりになります。
Retina などの高 DPI ディスプレイでは、ウィンドウの 2 倍のピクセル数で録画されます。これは好都合で、1080p に縮小しても文字がくっきり残ります。
| 設定 | 使う値 | 理由 |
|---|---|---|
| フレームレート | 60 fps | スクロールは途切れない動きです。30 fps では 1 フレームごとの移動が 2 倍になり、ガタつきに見えます |
| フレームレートのモード | 固定（CFR） | 可変フレームレートのファイルは、編集ソフトや一部のプレーヤーでカクつきます |
| 録画範囲 | 画面全体ではなく、ブラウザのウィンドウか指定した領域 | あとで切り抜かずに済むので、解像度を失いません |
| カーソル | 何かを指しているとき以外は非表示 | スクロールの途中で画面の真ん中に止まったカーソルは、ミスに見えます |
| 画質 | 高ビットレート。編集するならロスレス | スクロールする文字はエンコーダーにとって最も難しい素材です。毎フレーム、すべてのピクセルが動きます |
Mac の標準の録画機能（Shift ⌘ 5）と QuickTime は、可変フレームレートのファイルを書き出します。macOS・Windows・Linux で無料の OBS Studio なら、自分で選んだ固定フレームレートで録画できます。Windows では Snipping Tool と Xbox Game Bar でも録画できますが、いちばん細かく調整できるのは OBS です。
動画がプロらしく見えるかどうかは、このステップで決まります。マウスホイールはカクッ、カクッと刻みで動き、トラックパッドははじいて惰性で流れます。どちらも 20 秒間一定の速さを保つことはできません。原因についてはスクロールの録画がカクつく理由で詳しく説明しています。
確実な解決策は、ブラウザ自身にスクロールさせることです。DevTools のコンソールに短いスクリプトを貼れば、決めた時間をかけて、イージングカーブに沿ってページ全体をスクロールします。スクリプト全文とペースの決め方は、動画用にウェブサイトを自動スクロールさせる方法にあります。
スクリプト内の時間を、スクロールにかけたい長さに設定します。
最初に 1〜2 秒、ページの上で静止した時間を取ります。あとでトリミングできますし、静止した最初のフレームはサムネイルとしても見栄えがします。
ページが止まるまで、マウスにもトラックパッドにも触れないでください。どんな入力もスクリプトとぶつかります。
動き始めの最初のフレームと最後のフレームで切り、前後に好きなだけ静止を残します。
ここまでをきちんとやると、1 テイクに 15 分かかり、形を変えるたびにもう 1 テイク必要です。ページが公開されているなら、レンダラーが URL からそのすべてをこなします。デスクトップ・タブレット・スマホの幅でページを開き、ポップアップを取り除き、2 倍の密度でページを読み込み、24・30・60 fps の固定フレームレートで動きを計算します。録画し直す代わりに、設定を変えてもう一度書き出すだけです。
リンクを貼れば、スクロールのプレビューは無料です。登録すると 51 クレジットが無料で付き、クレジットカードは不要。書き出した動画にウォーターマークは入りません。
OBS Studio です。macOS・Windows・Linux で無料で使え、固定フレームレートで録画でき、ウィンドウ単体も録画できます。macOS や Windows に標準搭載の録画機能でも撮れますが、フレームレートや画質を調整できる幅は狭くなります。
たいていは、可変フレームレートのファイル、30 fps での録画、あるいは毎フレーム動く文字に対してビットレートが低すぎることが原因です。高ビットレートで固定 60 fps で録画し、スクロールはホイールではなくスクリプトに任せてください。
録画しながらスクロールします。速さを一定に保つため、できればスクリプトを使いましょう。画面録画ツールが記録できるのはその瞬間ウィンドウに映っているものだけなので、動画の長さはページが動く速さで決まります。
