GIFメーカー
アニメーションGIFは、Slackでのリアクション、README内の短い手順説明、ランディングページの製品マイクロインタラクションを手早く見せる方法として今も便利です。このGIFメーカーは、PNG/JPGフレームまたはトリミングしたMP4を256色のループGIFにまとめ、ダウンロード前にfps、キャンバスサイズ、ループ回数を調整できます。
GIFの作り方
-
1
フレームを追加
PNG/JPG画像を順番にアップロードするか、短いMP4を追加してフレームを抽出します。
-
2
フレームレートを設定
UIデモなら8–12 fps、動画に近いなめらかな動きなら15–24 fpsが目安です。
-
3
サイズとループを選択
キャンバスサイズを変更し、GIFを無限ループにするか、指定回数で停止させるかを選びます。
-
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を使ってください。
12–15 fpsが実用的な初期値です。動きが読み取りやすく、ファイルも大きくなりすぎません。GIFを動画に変換するプラットフォームでも扱いやすい範囲です。
エンコードはページ内で実行され、完成したGIFがダウンロード用に返されます。元のフレームは書き出し後に保存されません。
関連ツール
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
PNGからSVGへのベクター変換
PNGのラスター画像をブラウザ内でSVGパスに変換します。ロゴ、アイコン、線画に最適です。しきい値、色数、スムージングを調整できます。
画像アップスケーラー
AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。
バーコードジェネレーター
Code 128、EAN-13、UPC、ITF-14 など9種類の一次元バーコードを作成します。データはブラウザ内に残り、SVG または PNG をダウンロードできます。
写真エディター
切り抜き、回転、明るさ、コントラスト、彩度、フィルター、テキスト追加に対応し、JPG・PNG・WebPへ書き出せるブラウザベースの写真エディター。
GIFを圧縮
ブラウザ内でアニメーションGIFを小さくします。サイズ縮小、保持するフレーム数の調整、エンコード品質の変更を行い、ダウンロード前にループを確認できます。