画面録画からGIFを作成する方法

GIF書き出しが適している場面、Recordedの640px/10fpsパイプラインの仕組み、ファイルサイズを抑えつつ見やすいクリップに仕上げるコツを解説します。

画面録画からGIFを作成する方法

すべての録画が動画である必要はありません。ちょっとしたUIの変更、ホバー時にしか現れないバグ、アプリ内の3ステップの操作――こうした内容は、再生ボタンをクリックしてもらう動画ファイルよりも、ループするGIFの方が素早く伝わることがあります。RecordedはMP4やMOVと並んでGIFへの直接書き出しに対応しており、その書き出しが実際にどう動作するかを理解しておくと、試行錯誤の回数を減らせます。

GIFが動画より優れている場面

GIFは、動画では扱いにくい場面で真価を発揮します。READMEにインラインで埋め込む、Slackのスレッドにそのまま貼り付ける、GitHubのIssueやプルリクエストのコメントに埋め込む、Notionのドキュメントに貼り付ける――といった場合です。GIFはどこでも再生UIなしに自動再生され、デフォルトでループし、音声も不要です。そのため、短く、無音で、繰り返し再生される操作の共有に最適です。

一方で、ナレーションが入るもの、数秒より長いもの、画面上に細かいディテールが多いものにはあまり向いていません。そうした内容にはMP4で書き出し、動画をリンクする方法を選びましょう。

RecordedのGIF書き出しの仕組み

書き出しダイアログでGIFを選択すると、Recordedは単純に録画を再エンコードするのではなく、GIFの制約に合わせて特別に設計された2パスのパイプラインを実行します。

  1. 幅640pxにスケーリング。 高さは録画のアスペクト比を保つように自動調整されます。GIFにはMP4のような効率的なフレーム間圧縮がないため、これによってファイルサイズを妥当な範囲に抑えられます。
  2. 10fpsに削減。 GIFはくっきり見せるために30fpsや60fpsを必要としません。UI操作やカーソルの動きであれば10fpsで十分読み取れ、フレーム数(およびファイルサイズ)を抑えられます。
  3. 専用のカラーパレットを生成。 GIF標準の256色パレットをそのまま使うのではなく、Recordedはまず対象のクリップを解析し、そのクリップに最適化したパレットを作成してから、2パス目でそのパレットを適用します。これにより、グラデーションやアンチエイリアス処理されたテキストがバンディング(縞模様)やノイズっぽく見えるのを防げます。

これは固定のパイプラインであり、MP4書き出しのような解像度・フレームレート・画質のスライダーはGIF書き出しにはありません。これは意図的な単純化です。GIFの用途はかなり限定的なので、よく調整された1つの設定でほとんどのケースをカバーできます。

良い結果を得るには

パイプライン自体は固定なので、より見栄えの良いGIFを作るには、入力する素材側をコントロールすることが重要です。

  • 書き出す前にしっかりトリミングする。 まずエディターで、本当に必要なループ部分だけに録画を絞り込みましょう。45秒の録画をそのままGIFにすると大きく重いファイルになりますが、実際に挙動を示す4秒間だけをGIFにすれば、小さく共有しやすいファイルになります。
  • 可能であればフルスクリーンではなく、ウィンドウや特定の範囲をキャプチャする。 すべて幅640pxにスケーリングされるため、小さな文字やアイコンが詰まった1920px幅のフルキャプチャは、その解像度では潰れて読めなくなります。関連するパネルだけを切り出したキャプチャなら、読みやすさを保てます。
  • 動きをシンプルに保つ。 素早いズーム、激しいカーソルの動き、密度の高いアニメーションは、落ち着いた確実な操作と比べて10fpsでの表現に不向きです。クリックを順に見せるフローをデモするなら、状態ごとに素早く動かさず、それぞれで一瞬止めるようにしましょう。
  • 単色が多いUIに注意する。 パレット生成は、クリップが一度に表現しなければならない色数が少ないほどうまく機能します。ほぼモノクロなインターフェースに小さなハイライト変化がある構成の方が、色数の多い賑やかなダッシュボードよりもずっと効率よく圧縮できます。

シンプルな作業フロー

  1. いつも通り録画します。必要以上に長めに撮っておきましょう。後からトリミングする方が、撮り直すより簡単です。
  2. エディターで、共有したい正確なループ部分までクリップを切り詰めます。数秒あれば通常は十分です。
  3. 書き出しダイアログを開き、フォーマットとしてGIFを選択します。
  4. 書き出します。Recordedがスケーリング、フレームレートの削減、最適化パレットの生成を自動的に行います。
  5. 出来上がったファイルをそのままREADME、課題管理ツール、チャットに貼り付けます。追加の変換作業は不要です。

GIFとMP4:適切なフォーマットの選び方

どちらのフォーマットが適しているか迷ったら、視聴者がそれをどう使うかを考えてみましょう。再生ボタンをクリックする必要がある、ナレーションを聞く必要がある、あるいは10〜15秒より長いものを見る必要があるなら、MP4で書き出してください。無音でループするだけでよく、貼り付けた場所ですぐに読み込まれてほしいなら、GIFの方が適しています。そして、Recordedの書き出しパイプラインは、面倒な手動設定なしにその選択が報われるよう調整されています。