GIFメーカー

GIFメーカー

少なくとも2フレームを追加してください。

アニメーションGIFは、Slackでのリアクション、README内の短い手順説明、ランディングページの製品マイクロインタラクションを手早く見せる方法として今も便利です。このGIFメーカーは、PNG/JPGフレームを256色のループGIFにまとめ、ダウンロード前にフレームの並べ替えや速度・ループ・品質・キャンバスサイズの調整ができます。

GIFの作り方

  1. 1

    フレームを追加

    PNG/JPG画像を順番にアップロードします。アニメーションはその順番で再生されます。

  2. 2

    フレーム間の遅延を設定

    タイミングはミリ秒単位のフレーム遅延として保存されます。80 msは約12 fpsでUIの動きに向き、500 msは約2 fpsのゆったりしたスライドショーになります。プリセットを選ぶか、任意の値を入力してください。

  3. 3

    キャンバスサイズを選択

    キャンバスサイズを調整して細部を保ちながらファイルを小さくし、完成したGIFを無限ループにするか一度だけ再生するかを選べます。

  4. 4

    書き出してダウンロード

    ツールがパレットを最適化してアニメーションをエンコードし、1つの.gifファイルを返します。

GIF形式の制限

項目 制限または動作
色深度 1フレームあたり256色(8ビットパレット)
アルファ透明度 1ビット透明: 各ピクセルは完全に透明か完全に不透明のどちらか
フレーム遅延 10 ms単位で保存されるため、「60 fps GIF」でも実質的には約50 fpsが上限
圧縮 LZW圧縮。フラットなグラフィックやUI録画で特に効果的
ファイルサイズ 形式上の上限はありませんが、多くのブラウザーやチャットアプリは約10 MBを超えると扱いにくくなります

ファイルサイズを小さくするコツ

  • 必要な動きだけに切り詰める。 リアクションGIFの多くは1–3秒が最も使いやすい長さです。
  • 書き出し前に縮小する。 Slack、X/Twitter、Notion、ドキュメントページなら幅480 px程度で十分なことが多いです。
  • 色数より先にフレーム数を減らす。 fpsを半分にすると容量も大きく下がりやすく、256色から64色へ減らすとグラデーションの劣化が目立つ場合があります。
  • すっきりした背景を使う。 画面録画やフラットなUIアニメーションは、ノイズの多い動画よりずっと圧縮しやすくなります。

MP4やWebMを選ぶべき場合

X/Twitter、Discord、現代的なWebページのように短い動画の自動再生に対応している場所では、MP4(H.264)やWebM(VP9)のほうが、同じ見た目の品質でもGIFより5〜10分の1程度のサイズになることがあります。GIFは、チャット、メール、課題管理ツール、画像として扱われる古いドキュメント環境で今も便利です。

よくある質問

GIFは256色に制限され、パレット方式の画像形式を使います。なめらかなグラデーションはディザのノイズになりやすく、肌色にも帯状のムラが出ることがあります。よりきれいにしたい場合は、動きの細部を減らす、シーンをトリミングする、対応している場所ではMP4/WebMを使うとよいでしょう。

GIF自体が対応するのは1ビット透明のみで、このエンコーダーは各フレームを無地のキャンバスに描画するため透明色をエンコードしません。そのため透過部分は黒く潰れたり塗りつぶされたりすることがあります。仕上がりを予測しやすくするには、アップロード前にフレームを最終的な背景色に合成しておいてください。なめらかなアルファが必要ならAPNGまたはWebPを使ってください。

SlackやX/Twitterなら12–15 fpsが実用的です。これは約65–85 msのフレーム遅延に相当します。このツールの初期値はスライドショー向きの150 ms(約6.7 fps)です。より滑らかなUIの動きにはスムースプリセットを選ぶか、80を入力してください。

いいえ。画像がブラウザーの外に出ることはありません。画像はローカルで読み込まれ、ページ内でGIFにエンコードされ、そのままダウンロードされます。サーバーには何も送信されません。複数ステップの流れでは、ステップ間を行き来できるようフレームと完成したGIFをこのタブのセッションストレージに一時保持します。この一時データは、最初からやり直すとき、フレームを消去するとき、タブを閉じるときに削除されます。

関連ツール

このツールは他の言語でも利用できます