GIF

GIF（Graphics Interchange Format）は、アニメーションと透過に対応した画像形式です。短いループアニメーション、リアクション、軽量な動きのあるコンテンツによく使われます。

Related workflow terms: 画面タイムラプス.

GIFの仕組み

GIFはLZW（Lempel-Ziv-Welch）可逆圧縮を使い、1フレームあたり最大256色のカラーパレットで画像を保存します。静止画では、写真やグラデーションより、べた塗り、ロゴ、単純な図形に適しています。

アニメーションでは、フレームの並びとフレームごとの任意の待ち時間を保存します。順番に再生することで動いて見えます。基本的な透過にも対応しますが、各ピクセルは完全に透明か、完全に不透明かのどちらかで、半透明にはできません。そのため、透明背景の上に滑らかなアンチエイリアスの輪郭を作れず、縁がぎざぎざしたり、目立つ色の輪ができたりします。

各フレームを個別に圧縮するため、アニメーションGIFのファイルサイズはすぐに大きくなります。実用的な解像度の5秒間のアニメーションでも数MBになることがあり、現在の動画形式なら同じ内容をその何分の1かに抑えられます。

GIFと動画（MP4、WebM）の違い

GIFと動画形式を比べると、互換性を除く技術面では動画が有利です。

• ファイルサイズ： 同じアニメーションをMP4やWebMにすると、一般にGIFより80〜90%小さくなります。動画コーデックは時間方向の重複、つまりフレーム間の類似を利用しますが、GIFは各フレームを単独で圧縮します
• 色深度： 動画は数百万色を扱えます。GIFは1フレームあたり256色です。グラデーション、影、写真を含む内容では、GIFの見た目が劣ります
• 音声： GIFは音声に対応しません。動画形式なら、必要に応じて音声を含められます
• 再生操作： GIFは操作パネルを表示せず自動でループします。これは利点でも制約でもあります。動画は一時停止、シーク、再生操作ができます
• 互換性： GIFはメール、メッセージアプリ、SNS、フォーラム、ブラウザで広く再生できます。動画の埋め込み対応はサービスごとに異なります。技術的な制約があってもGIFが使われ続ける理由です

動きのある内容を作る撮影ワークフローでは、まず動画として記録し、出力先で必要な場合だけGIFへ変換すると扱いやすくなります。最後まで画質と編集の自由度を保てます。

GIFが適している場面

• 短いUIデモ： ボタン操作、ホバー効果、状態の変化を示す2〜3秒の映像です。自動再生とループにより、途切れなく見せられます
• リアクションやメッセージ： 動画プレーヤーを開かず本文中で再生できるため、チャットやメールで感情を表す素材として定着しています
• ドキュメントの短い例： 技術文書へ簡単なアニメーション例を埋め込む場合、動画プレーヤーを追加せずに済みます
• SNSやフォーラム： GIFのアップロードには対応していても、動画の埋め込みが制限されていたり、手間がかかったりする場所で使えます
• メール配信： 動画への対応が安定しないメール環境でも、アニメーションGIFは多くのクライアントで表示できます

GIF書き出しに対応した撮影ツールなら、画面収録から共有用アニメーションまでを1つの流れで作れます。別の変換ツールは必要ありません。

実際の制作では、ドキュメント、チャット、メールで自動再生する短いデモの最終書き出し形式としてGIFを使うのが適しています。元の録画は動画で保管し、必要な長さまで切り詰めてから、GIFの互換性が必要な部分だけを変換します。画質を保ち、ファイルサイズも管理しやすくなります。

よくある失敗

• 長い録画にGIFを使う： 5秒を超えるとファイルが非常に大きくなります。長い内容はMP4やWebMにし、GIFは短いループに限ります
• フル解像度のまま書き出す： GIFのファイルサイズは、おおむねピクセル数に応じて増えます。1,920×1,080のGIFは、幅480ピクセルの画像より10倍ほど大きくなる場合があります。書き出す前にリサイズしてください
• フレームレートを見直さない： 30 fpsで録画した内容をそのままGIFにすると、必要以上にファイルが大きくなります。多くのUIデモでは10〜15 fpsへ下げても見た目の差は小さく、ファイルサイズを大幅に減らせます
• 滑らかな透過を期待する： GIFの透過は完全な透明か不透明の2択なので、輪郭がぎざぎざになります。透明背景で滑らかな縁が必要なら、アニメーションWebPまたはAPNGを使います