動画を GIF アニメーションに変換する方法

GIF が今でも使われる現場

動画フォーマットは MP4 や WebM が主流になった一方で、GIF を要求してくる場所はいまだに残っています。GitHub の Issue / Pull Request の本文に動きを貼り付けるとき、Slack や Discord のチャットに数秒のリアクションをループ再生で添えるとき、ドキュメント (Notion / 社内 Wiki / README) に短い操作デモを挿絵として埋め込むとき、いずれも MP4 だとプレビュー再生してくれない箇所が多く、結局 GIF に落とし直す羽目になります。

具体的なサイズ感で言えば、画面録画ツール (macOS の標準録画、Cleanshot、Loom) で 10 秒のバグ報告動画を撮ると MP4 で 2-3 MB に収まりますが、それを GIF に変換すると 8-15 MB に膨らみがちです。フレームレートや幅を雑に決めると 30 MB を超えてしまい、Slack のプレビューが切れたり、GitHub の Issue にドラッグ & ドロップしたときに拒否されたりします。逆にちゃんと設定すれば 1-3 MB に収まるので、結局は「fps と幅を意図して下げる」工程が必要で、これがブラウザ内で動く video-to-gif のスコープです。

ブラウザだけで GIF を作る手順

動画 → GIF 変換ツール を開き、変換したい動画をドロップします。MP4 / MOV / WebM / MKV / AVI などの主要コンテナを受け付け、複数ファイルを一度に投入できます。読み込みが終わると「fps (1-60)」「幅 px (64-4096)」のスライダーと、ファイルごとの開始 / 終了時刻入力 (mm:ss または秒) が出ます。

実用的な初期値は 10 fps / 480 px あたりです。fps を 24 → 10 に落とすだけでフレーム数が 1/2 以下になるためファイルサイズに直接効きますし、Slack や Notion 内の小さなプレビュー枠では 10 fps でも動きはほとんど劣化を感じません。幅は元動画のアスペクト比を維持したまま自動で高さを決めるので、480 px に縮めれば横方向のピクセル数が画面録画の 1/3 以下になり、これも支配的にサイズに効きます。開始 / 終了を指定して必要な数秒だけ切り出せば、さらに無駄なフレームを削れます。「GIF に変換」を押すと内部の ffmpeg.wasm がエンコードを開始し、完了後はファイルごとのダウンロード + 全件 ZIP ボタンが現れます。

palettegen / paletteuse の 2 パス変換

GIF は本来 1980 年代後半の規格で、1 フレームあたり 8-bit パレット (= 同時に使える色が最大 256 色) しか持てません。動画から雑に変換すると、空のグラデーションや肌色のような連続階調の領域でひどいバンディングが起きます。これを抑えるために ffmpeg は palettegen で動画全体から最適化された 256 色パレットを生成し、paletteuse でそのパレットを使ってフレームごとにディザリングしながら量子化する、という 2 パス処理を採用しています。video-to-gif も内部でこの 2 パスを実行しているため、シングルパスで作った GIF よりも色再現が明らかに良くなります。

ファイルサイズに効く支配項は フレーム数 (= fps × 秒数) と 解像度 (= 幅 × 高さ) で、圧縮アルゴリズム (GIF の LZW) は補助的にしか効きません。例えば 480 px / 10 fps / 5 秒の GIF は、960 px / 30 fps / 5 秒の同じ素材に比べてざっくり 1/12 のサイズになります。「画質が悪いから fps を上げる」より「fps と幅を 1 段下げて見せたい部分だけトリミングする」ほうが結果が小さく綺麗にまとまります。逆方向 — Slack 投稿用に動きの良さを優先したい、SNS に貼って自動再生させたい — のときは GIF ではなく MP4 のほうが効率的なので、変換した GIF をさらに圧縮したい場合は gif-to-mp4 で H.264 化すると 1/5 〜 1/10 まで縮みます。

アップロード型 GIF メーカーとの違い

「動画 GIF 変換 オンライン」で検索すると、動画をサーバーに送って GIF を返す Web サービスが多数並びます。ここで送信する動画には、画面録画ならエディタの中身 (未公開のコードや顧客データ)、デモ動画なら社内ダッシュボードのスクリーンショット、登壇リハーサルなら未公表のスライドが、文字通り全フレームに焼き込まれています。利用規約には「処理済みファイルは 1 時間後に削除します」と書かれていることが多いものの、削除されたかを利用者が外部から検証する手段はなく、CDN キャッシュやアクセスログまで本当に消えたかは事業者を信じるしかありません。

video-to-gif は ffmpeg.wasm を Web Worker 上でロードし、入力動画は Worker のメモリ上で palettegen → paletteuse の 2 パスを通り、最終的に Blob として <a download> で取り出せるだけの構造です。動画を外へ送る通信路はソースコード上に存在せず、リポジトリは GitHub で公開しているのでコード単位で監査できます。DevTools の Network タブを開いたまま操作すれば、初回の WASM フェッチ以外に動画ファイルが外へ出るリクエストが無いことを目視で確認できます。