ウェブサイトを見せるための最適な収録方法

アドレスを貼ると、ツールが自前のブラウザでページを開き、カーブに沿ってスクロールさせ、結果をエンコードします。あなたの画面にも、マウスにも、パソコンにも左右されないので、動きは一定で、出力のサイズも自由です。Website Scroll Video もその一つです。まず Cookie バナーとチャットウィジェットを取り除き、デスクトップ・タブレット・スマホの幅でページを読み込み、最大 4K・60 fps の MP4・WebM・GIF を書き出します。一時停止、ホバー、背景も加えられます。

限界は、届く範囲です。レンダラーが開けるのは匿名の訪問者が開けるものだけなので、ダッシュボード、パスワード付きのステージングサイト、localhost は対象外です。いま使えるレンダラーは代替ツールのページで比較しています。

Screen Studio のようなツールは、画面を録画したあと、人がやるはずの編集をこなしてくれます。カーソルの軌跡をなめらかにし、クリックした場所にズームし、背景を加えます。製品が使われている様子を見せるなら最良の選択です。ただしスクロールはあなた自身の手によるものなので、長いページを手でスクロールすれば、ホイールのリズムがそのまま残ります。

OBS Studio、QuickTime、macOS のスクリーンショットツールバー、Windows の Snipping Tool は無料で、開けるものなら何でも録画できます。録画以外は何もしてくれないので、Cookie バナーも、通知のポップアップも、ホイールのむらも、すべてファイルに残ります。準備をすれば良い結果が出せます。手順はウェブサイトのスクロール動画を録画する方法で説明しています。

スクロールを録画する拡張機能は自分のブラウザの中で動くので、ログイン中のページも収録でき、たいていはスクロールも自動化されます。録画があなたのパソコン上で行われるため、品質はパソコンの性能に左右され、拡張機能にも左右されます。制限付きで無料のものもあれば、有料のものもあります。それぞれがどんなときに向くかは拡張機能とレンダラーの比較で扱っています。

Rotato のようなモックアップツールは、スクリーンショットや動画を 3D のノートパソコンやスマホにはめ込み、デバイスごと動かします。ヒーローショット向けで、ページを順に見せる用途ではありません。また、元になる映像が必要です。よくある組み合わせは、上のいずれかの方法で作ったスクロール動画を、モックアップアプリでデバイスにはめ込むやり方です。

HowdyGo のようなツールは、製品の操作の流れを、見る人が自分でクリックして進めるステップとして取り込みます。営業やオンボーディングのチーム向けに作られていて、価格もそれに見合ったものです。デモを動画や GIF として書き出せるものもありますが、クリックして進むツアーと、眺めるスクロールは別物です。

• ポートフォリオ、ローンチの投稿、テンプレートの掲載： レンダラー。ポートフォリオ用にウェブサイトを収録するを参照してください。
• ナレーション付きの製品紹介： 仕上げまでこなす画面録画ツール。
• 自分しか開けないページ： シンプルな画面録画ツールか拡張機能。
• デバイスに映したサイトのヒーロー画像： モックアップアプリに、スクロール動画を素材として渡す。
• 迷ったら： まずレンダラーを試してください。プレビューは無料で、登録時に付く 51 クレジットで 2 本ほど書き出せます。