フレームをここにドロップ
クリックして選択 · または貼り付け (Ctrl/Cmd + V)
ブラウザ内で処理 · アップロードなし
画像(コマ)を2枚以上追加してください。並び順のまま左上から詰めて1枚に並べます。
複数の連番画像を1枚の『スプライトシート(sprite sheet)』に並べて、PNG で書き出せるツールです。ゲームのキャラクターアニメ、エフェクト、ドット絵のコマ、Live2D/動画から切り出したフレームなどを、規則正しいグリッドに均等パックしたいときに、重いツールやコマンドラインを使わずブラウザだけで作れます。使い方はかんたん。コマ画像を2枚以上ドロップ(または選択・貼り付け)し、並び順を上下ボタンで調整して、列数・フレームサイズ・間隔・背景を選ぶだけ。各フレームは指定したフレームサイズの正方形セルに『全体(余白あり)』または『敷き詰め(切り抜き)』で収められ、左上から順に詰めて並びます。背景は透過(PNG の alpha を保持=ゲーム素材向き)・白・黒から選べます。さらに、出来上がったシートの『全体の寸法・1フレームの寸法・列×行・枚数』を1行のテキストで表示し、コピーできます——実装側でフレームを切り出す(frameWidth/frameHeight や列数を指定する)ときにそのまま貼れます。プレビューは画面に収まるよう縮小して表示しますが、保存される PNG は指定どおりのピクセル寸法で書き出されます。処理はすべてお使いのブラウザ内で行い、画像を外部のサーバーや API に送信することは一切ありません(会社・学校などアップロードが禁止された環境でも安全に使えます)。
使い方
- コマ画像を2枚以上ドロップ/選択/貼り付けで読み込みます(アップロードはされません)。
- 上下ボタンで並び順を整え、列数・フレームサイズ・間隔・背景(透過/白/黒)を選びます。
- PNG で保存します。必要なら『シート情報』(寸法・フレーム寸法・列×行・枚数)をコピーして実装に貼れます。
よくある質問
画像はどこかにアップロードされますか?
いいえ。読み込み・シート合成・PNG 書き出しまで、すべてお使いのブラウザ内で行います。画像が外部のサーバーや API に送信されることは一切なく、端末内で完結します。会社や学校などクラウドのツールが使えない環境でも安全にお使いいただけます。
各フレームのサイズが違っても大丈夫ですか?
はい。各フレームは指定した正方形セル(フレームサイズ)に合わせて自動で拡大・縮小されます。『全体(余白あり)』は画像全体を入れて周りに余白を作り、『敷き詰め(切り抜き)』はセルを埋めてはみ出しを切り取ります。すべてのフレームが同じセル寸法で並ぶので、実装側で等間隔に切り出せます。
背景を透明にできますか?
はい。背景は『透過』『白』『黒』から選べます。透過を選ぶと PNG の透明部分(alpha)がそのまま保持されるため、ゲームやアニメのスプライト素材に向いています。
実装でフレームを切り出すための情報は分かりますか?
はい。プレビュー上部に『シート全体の寸法・1フレームの寸法・列×行・枚数』を表示し、『情報をコピー』ボタンで1行のテキストとしてコピーできます。frameWidth/frameHeight や列数を指定してフレームを切り出すときにそのまま貼れます。