Logo
BulkPicTools

スプライトシートをGIFに変換 — 無料

スプライトシート画像からアニメーションGIFを再構築。グリッドを自動検出、再生速度も調整可能。

スプライトシートをドラッグ&ドロップ

スプライトシート画像 (PNG/JPG/GIF) — ローカルでGIFに再構築、アップロード不要

透かしなし • アップロード不要 • 無料

スプライトシート→GIF変換ツールの主な機能

グリッドを自動検出

スプライトシートをアップロードすると、行数と列数を自動で検出して入力欄に反映します。結果はいつでも手動で修正でき、行優先・列優先の読み取り順序にも対応しています。

再生速度を調整

FPSスライダー(1〜50 FPS)でアニメーションの速さを調整できます。横に1フレームあたりのミリ秒がリアルタイムで表示されます。スプライトシート自体にタイミング情報は含まれないため、全フレーム共通の遅延になります。

自動で最適化

出力されるGIFは自動的に圧縮・最適化されます。画質の低下をほとんど感じさせずにファイルサイズを削減します。手動で有効にする必要はありません。

ローカル処理、アップロード不要

スプライトシートがデバイスから離れることはありません。すべてブラウザ内で処理されます。

ガイドとヒント

スプライトシートをアニメーションGIFに変換する方法

スプライトシートは、アニメーションのフレームをグリッド状に配置した1枚の画像です。ゲーム開発者やUIデザイナーが、キャラクターのアニメーション、エフェクト、画面遷移をまとめて管理するために使います。スプライトシートをGIFに戻せば、コード環境なしでアニメーションをプレビューしたり、SNSで共有したり、クライアントに作品を見せたりできます。処理はすべてブラウザ内で行われ、ファイルがサーバーにアップロードされることはありません。

グリッドは自動で検出されます

スプライトシートをアップロードすると、画像の投影を走査して行数と列数を自動で算出し、そのまま入力欄に反映します。検出できない場合(フレーム間に隙間がまったくない場合など)は、適当な値を当てずに手動入力を促すメッセージが表示されます。もちろん手動での修正もいつでも可能です。一般的なレイアウトは4×4(16フレーム)、2×4(8フレーム)、CSSアニメーション用の単一行ストリップです。フレーム間に枠線が見える場合は、「余白」に数ピクセルを入力してカットできます。

再生速度の設定

FPSスライダーで速度を設定します。範囲は1〜50 FPSで、横に1フレームあたりのミリ秒が同時に表示されます。1フレーム100ms(10 FPS)はほとんどのWeb用途に適した標準的な速さです。動きをなめらかにしたい場合は20 FPS以上に、呼吸や待機などのゆっくりしたループには2〜5 FPSが向いています。スプライトシートにはフレームのタイミング情報が含まれないため、全フレーム共通の遅延になります。

透明部分の扱い

スプライトシートの透明部分は既定で保持され、出力されたGIFの背景も透明のままです。透過に対応しない用途(一部のチャットアプリでは透明が黒く表示されます)には、「背景」で単色を指定すると、各フレームに背景色を敷いたうえで合成されます。なおGIFは透明・不透明の2値しか扱えないため、柔らかな影やアンチエイリアスのエッジは平坦になります。これはGIF形式の制限であり、変換の不具合ではありません。

GIFが最適とは限らない場合

GIFは最も扱いやすい形式ですが、常に最適とは限りません。DiscordやSlackに投稿する前にファイルを小さくしたい場合はGIF圧縮ツールを、動画やより小さなファイルが必要な場合はGIFからMP4やGIFからWebPをお使いください。逆にアニメーションをグリッドに戻したい場合はGIFからスプライトシートが使えます。

よくあるスプライトシートの問題と対処法

グリッドが正しくても、再構築したアニメーションが思い通りにならないことがあります。ここではよくあるケースと対処法を紹介します。追加のソフトは必要ありません。

末尾に空白フレームが入る

スプライトシートは最後の行に空のセルを置くことが多く、そのままGIFにすると止まった空白フレームになります。空白セルを除外をオンにすると、完全に透明なセルがスキップされ、末尾の空白フレームがアニメーションに入りません。

フレームの順番が違う

ループの順番がおかしい場合、シートが縦方向(列優先)に並んでいる可能性があります。読み取り順序を「行優先」から「列優先」に切り替えると、プレビューがすぐに更新されます。

セルに余白や枠線がある

フレーム同士の隙間は切り出しをずらします。余白に数ピクセルを入力して、各セルの四辺をカットしてください。プレビューの緑の枠が実際に切り出される範囲をリアルタイムで表示するので、確認してから生成できます。

アニメーションが速すぎる・遅すぎる

速度はFPSスライダーで調整します。横のミリ秒表示も連動して変わります。スプライトシートにはタイミング情報がないため、全フレームに共通の遅延を設定する形になります。

透明背景が黒や白になる

透明を保ちたいなら背景設定を変更しないでください。アルファチャンネルが保持されます。透過に対応しないプラットフォーム向けには、背景で単色を指定してください。GIFは2値の透明しか扱えず、柔らかなエッジは平坦になりますが、背景自体は保たれます。

スプライトシート→GIFとスプライトシート→CSSアニメーション

どちらも同じグリッド画像から始まります。そのまま共有できるアニメーションファイルが欲しいなら、本ツールでGIFを作成してください。ゲームエンジンやCSSのsteps()アニメーション用にフレームを分割したい場合は、GIFからスプライトシートで逆変換できます。

使い方

1

スプライトシートをアップロード

スプライトシート画像(PNG/JPG/GIF)をドラッグ&ドロップします。画像サイズを読み取り、グリッドの行数と列数を自動で検出します。

2

グリッド行列を確認

自動検出された結果がそのまま入力されます。必要に応じて手動で修正してください。縦方向に並んでいるシートの場合は、読み取り順序を「列優先」に切り替えます。

3

グリッドプレビューをチェック

左側のプレビューでは、実際に切り出される範囲が緑の枠で表示され、各セルに番号が振られます。行数・列数が違っていれば、ここでひと目で確認できます。

4

再生速度と背景を設定

FPSスライダーでアニメーションの速さを調整します。透明部分は既定で保持されますが、単色の背景を指定して塗りつぶすこともできます。

5

結果を確認

パラメータを変更するとGIFは自動で再生成され、左下にそのまま再生されます。問題なければ「結果を見る」をクリックし、結果ページでダウンロードしてください。

スプライトシート→GIF変換ツールについてよくある質問

はい!スプライトシートをアップロードし、グリッドの行列数を確認すると(自動検出されますが手動でも修正できます)、各セルが個別のGIFフレームに分割されます。再生速度はFPSスライダーで調整できます。