GIFアニメーション作成ツール

JPEG・PNG画像を2枚以上並べ,順番,共通の表示時間,出力寸法を指定してGIFアニメーションを生成します.各画像は指定した幅と高さへ描画されます.

読み込み中...

このツールが向いている用途

操作欄に戻る ↑

JPEG・PNG画像2〜60枚からブラウザ完結で手軽にループGIFアニメーションを作成したい用途に向いています.

まず試せること

80x60の画像を2枚読み込み遅延を300msに設定すると,0.6秒周期でループする80x60のGIFが生成されます.

利用条件

表示時間は全フレーム共通で,画像は指定寸法へ変形し256色へ減色され,透過は保持しません.1辺1,600px,幅×高さ×枚数で4,000万画素までです.

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
第1章

GIF生成のための画像準備とメモリ空間でのファイル管理

本ツールはJPEG・PNGの静止画像を2〜60枚読み込み,GIFアニメーション用のフレーム列を作ります.選択時に対応形式だけを取り込み,各ファイルのオブジェクトURLをプレビューに使います.破損画像は生成時のCanvas描画で読み込みに失敗すると処理全体を中断してエラーを表示するため,選択時に全画像の内容を個別検証する方式ではありません.

フレーム削除,すべて削除,新しい生成結果への置き換え,ページ離脱時には不要なオブジェクトURLを解放します.選択画像の読込・描画・GIF生成はこのページ上のブラウザ機能で行いますが,サイト本体の取得やブラウザ拡張等まで制御する説明ではありません.

第2章

フレーム順序と共通フレーム遅延

読み込んだ画像は配列順に並び,画面の上下ボタンで順序を入れ替えられます.再生速度はFPSを直接指定する方式ではなく,すべてのフレームへ共通して適用する表示時間を50〜2000ミリ秒から選ぶ方式です.例えば100ミリ秒なら理論上は毎秒約10枚ですが,GIF再生の実時間はブラウザ等の最小遅延処理にも左右されます.

設定値はGIFのグラフィック制御拡張へ10ミリ秒単位に換算して書き込みます.画像ごとに異なる遅延を設定する機能はありません.

第3章

出力寸法の指定とキャンバス領域における描画仕様

GIFの幅・高さは各50〜1600pxで指定します.最初の画像が800pxを超える場合は初期値だけ600px以内へ縮小し,それ以外は元寸法を初期値にします.生成時は指定寸法のCanvasへ各画像をそのまま引き伸ばして描くため,元画像との縦横比が異なると歪みます.

contain・cover・クロップ・余白追加は選べません.また,幅×高さ×画像枚数が4000万画素を超える設定では,過大な処理を避けるため生成を開始しません.

第4章

自前エンコーダーによる256色制限とGIF圧縮の仕組み

キャンバス上に指定寸法で描画された各フレームのフルカラーピクセルデータは,JavaScriptによって実装された独自のGIFエンコーダーによってバイナリデータへと変換されます.GIFフォーマットの厳格な規格に従い,1つのアニメーションファイル内で同時に表現できる色数は最大256色に制限されています.

本ツールに内蔵されたエンコーダーは,この制約を満たすため,あらかじめ定義された固定の256色パレット(ウェブセーフカラーに近い均等な色空間とグレースケールを組み合わせたもの)を参照し,元画像の各ピクセルの色を最も近いパレット上の色へと近似させるパレット化処理を実行します.

この減色アルゴリズムの適用により,グラデーションの滑らかさが失われたり,微細な色調の違いが同一の色に統合されたりするため,フルカラー画像と比較して色調の変化が生じることは避けられません.パレット化されたインデックスデータは,続いてLZW(Lempel-Ziv-Welch)圧縮アルゴリズムによってエンコードされます.

このアルゴリズムは,データ列内に現れる繰り返しのパターンを動的に辞書化して置き換えることで,データを圧縮する仕組みです.パレット化による色数の減少は,このLZW圧縮におけるパターンの出現頻度を高める効果があり,結果として出力されるファイルサイズの削減に寄与します.

この一連のパレット化と圧縮処理によって,ウェブ標準に準拠したGIF89aファイルの構造がブラウザのメモリ内で構築されます.

第5章

キャンバス抽出とリアルタイムプレビューから保存への展開

エンコード処理が完了すると,バイト配列はimage/gifのBlobとなり,オブジェクトURLを使って結果欄に表示されます.設定した共通フレーム遅延,指定寸法への伸縮,256色パレットによる色の変化を,保存前に実際の生成ファイルで確認できます.順序・寸法・遅延を変えた場合は再生成が必要です.

保存ボタンはブラウザのダウンロード機能でanimation.gifを書き出します.新しいGIFの生成,すべて削除,ページ離脱時には不要になった結果URLを解放します.

第6章

クライアント側処理における容量増加と機能的制約

本ツールのアーキテクチャは,すべての画像操作とファイル結合をブラウザのローカルメモリとCPUリソースに依存しているため,クライアント環境の処理能力に直結したいくつかの制約が存在します.特に,入力する画像の枚数が増加したり,指定する出力寸法の解像度が大きくなったりするにつれて,プレビュー用画像の保持,キャンバスへのピクセル展開,そしてLZW圧縮アルゴリズムの実行という各フェーズで必要となるメモリ消費量が急激に増加します.

デバイスの物理メモリやブラウザに割り当てられたリソースの上限に近づくと,エンコード処理にかかる時間が極端に長くなるだけでなく,場合によってはブラウザのプロセスが停止したり,強制的にタブがリロードされたりする現象が発生する可能性があります.そのため,極端に巨大なファイルサイズの生成や,非常に多くの枚数を用いた長時間のフレーム処理には適していません.

軽量かつ単一目的の生成に特化し,ブラウザ内でのエンコーダー実装を優先した結果,複雑な追加機能は備えていません.利用者はこれらの制約を理解し,適切な寸法入力と画像の枚数管理を行うことで,ローカル処理を活用したGIFの生成をスムーズに実行できます.

第7章

用途別の設定手順と生成後の確認項目

保存前後で同じ動きに見えるかも比較してください.

編集内容はブラウザ内の一時的な状態であり,ページを再読み込みしたあとにフレーム順や設定を復元するプロジェクト保存機能はありません.完成ファイルを保存したら,別のブラウザや実際の掲載先でも一度再生し,動きが停止して見えないか,背景色との組み合わせで輪郭が崩れていないかを確認してください.

GIFは動画と比べて同じ画質でも容量が大きくなる場合があるため,写真中心・長時間・高フレーム数の素材には必ずしも適しません.短い図解や数枚の状態変化という用途に絞ると,本ツールの共通遅延と固定パレットの特性を活かしやすくなります.

短い操作説明や表情差分のアニメーションを作る場合は,まず画像を実際に見せたい順で追加し,上下ボタンでフレーム順を確定します.次に出力幅と高さを決めます.本ツールは各画像を同じCanvas寸法へ直接伸縮するため,縦横比の違う画像を混在させると形が変わります.事前に同じ縦横比へトリミングしておくか,歪みが許容できるかプレビューと生成結果で確認してください.

表示時間を短くすると動きは速くなり,長くすると各画像を認識しやすくなります.ただし,すべてのフレームへ同じ値が適用されるため,特定の1枚だけ長く止める用途には対応しません.その場合は同じ画像を複数枚追加する方法が候補になりますが,枚数上限とファイル容量は増えます.

生成後は,結果欄で少なくともフレーム順,動く速さ,縦横比,文字の読みやすさ,色の変化を確認してください.とくに写真や滑らかなグラデーションでは固定パレットへの減色が目立ちやすく,細い文字や小さな図形は縮小時につぶれることがあります.期待と異なる場合は,元画像側で色数を減らす,出力寸法を用途に合わせる,フレーム数を絞るといった調整が有効です.

生成されたGIFは繰り返し再生され,ループ回数を指定する画面はありません.SNSやCMSへ掲載する場合は,サービス側の寸法・容量制限や再圧縮の有無も別途確認してください.本ツール内のプレビューが正常でも,掲載先で自動変換されると色や速度が変わる場合があります.

よくある質問(FAQ)

A.
JPEGまたはPNGを2〜60枚選択できます.出力幅・高さは各50〜1600pxで,総画素処理量が上限を超える組み合わせでは生成を開始しません.
A.
現在は全フレームに同じ表示時間を適用します.50〜2000ミリ秒の範囲で共通値を指定できます.
A.
各画像を指定した出力幅・高さへそのまま描画するため,元画像と比率が異なる場合は伸縮して見えます.クロップや余白追加の選択機能はありません.
A.
GIFは各フレームを256色以下のパレットへ変換します.写真やグラデーションでは色の段差が出ることがあり,透過表現も元のPNGと同じになるとは限りません.