← ブログに戻る

MP4→GIF:ファイルサイズを小さくする最適設定(見た目を壊さずに)

Published

GIFは罠だ。

GitHubのREADMEやNotionドキュメントで自動再生のループが必要なら、GIFに敵うものはない。

だが、その反面、古くて肥大化したフォーマットでもある。使い方を間違えると、くっきりした文字を破壊する。

ここでは、MP4を、まともな明瞭さと現実的なファイルサイズを保つGIFに変換する方法と、そもそもこの形式を使うべきでない場面を紹介する。


コンバーター

ブラウザでMP4をGIFに変換(サインアップ不要): → 無料のビデオコンバーター


ファイルサイズを小さく保つ設定

40MBのGIFを作りたくないなら:

  1. 短くする。 2〜6秒が上限だ。
  2. 思い切ってクロップする。 4Kデスクトップ全体のGIFなんて作ってはいけない。必要なUI要素だけを切り出そう。
  3. フレームレートを落とす。 12か15fps。
  4. 幅を制限する。 480〜800ピクセルが安定したGIFの上限だ。
  5. 元のUI文字を大きくする。 変換する前から、元のMP4で文字が大きくなければならない。

肥大化の仕組み

GIFフォーマットは現代の動画のために作られていない。

圧縮は非効率で、カラーパレットは限られ、シンタックスハイライトやUIのグラデーションのような密度の高いコンテンツとは相性が悪い。

長い時間、高いフレームレート、高い解像度をGIFエンコーダに突っ込めば、ファイルサイズは爆発する。この3つのうち少なくとも2つは下げよう。


用途別の設定

インラインドキュメント(GitHub/README)。 目指すのは軽いループだ。機能部分にクロップし、4秒以内に収め、15fpsを維持し、幅は800ピクセル未満に。

ランディングページのティザー。 ページの読み込みを遅くせず、きれいな見た目を出すのが目的だ。タイトにクロップして、滑らかな動きのために20fpsくらいまで上げよう。いや、それよりWebMを埋め込んだ方が良い。

バグ報告。 Slackで素早く文脈を伝えるのが目的だ。問題の箇所をタイトにフレームし、8秒以内に収め、12fpsまで落とせば送れるサイズになる。


UIクリップの黄金律

小さすぎる文字は後処理では救えない。

10ptフォントの1440pデスクトップを録画して800pxのGIFに変換すれば、コードはにじんだインクのようになる。キャプチャ側を変えよう。録画前にフォントを拡大し、アクションを中央に置く。 1080p vs 1440p vs 4K:文字をくっきり保つには


GIFを諦めるべき場面

次の場合はMP4かWebMに切り替えよう:

  • クリップが8秒を超える。
  • 文字を読みやすくしたい。
  • ページの読み込み速度が重要。

GIFは、HTML5動画の自動再生ができない場所のために取っておこう。


良いGIFは良いMP4から

元の映像が良ければ、変換結果も良くなる。

元のキャプチャが滑らかなカーソルと落ち着いた自動ズーム、カクつきのない動きなら、GIFにもそれが引き継がれる。AUFZEICHNAはその層をWindowsで自動化する。 デモを見る · 生涯ライセンスの価格


よくある質問

GIFが大きくなりすぎるのはなぜ? フォーマットの圧縮が古いからだ。高解像度と長い時間が重なると、ファイルサイズはすぐに膨らむ。

正しい設定は? 6秒以内、アクションの周りを思い切りクロップ、15〜20fps、元の文字を大きく。

長いデモにGIFを使うべき? いいえ。10秒を超えるものは、圧縮したMP4かWebMにすべきだ。サイズは数分の一で、品質は上だ。

関連記事

Related workflows