スプライトシートの切り出しツール（無料）｜緑背景の画像を透過してキャラごとに分割
緑一色の背景にキャラを横一列に並べた画像は、このページのツールに入れるだけで、背景が透明になり、キャラごとのPNGに分かれます。ZIPでまとめて保存できます。画像はブラウザの中だけで処理され、どこにも送られません。
この記事で分かること
- 緑背景の一覧画像を、透過PNGに切り分けるツールの使い方
- 切り出しやすい一覧を作るための指示文のひな型と、守る5つの決まり
- 当サイトの20枚の一覧で試した結果（18枚が期待した数に切れた）
- 緑の縁が残る、絵が割れる、くっつくときの直し方
切り出しツール
下の枠の中に、緑背景の一覧画像をドラッグするか、枠をクリックして選びます。画像のコピーを貼り付けても入ります。
処理はこの端末のブラウザの中だけで行われ、サーバーには送られず、保存もされません。
使い方
- 一覧画像を入れるPNG・JPEG・WebPに対応しています。大きな画像は、長いほうの辺が3000pxになるように縮めて処理します。
- 赤い枠の数を確かめる切り出された場所に、赤い枠と番号が出ます。キャラの数と同じなら、そのまま保存できます。
- 必要なら下の調整を動かす緑の縁が残るときや、絵が割れるときの直し方は、このページの後半にまとめています。
- 保存する「すべてをZIPで保存」で、01.png、02.pngの順に入ったZIPが手に入ります。上の段から下へ、段の中は左から右の順です。
「全部を同じ大きさにそろえる」にチェックを入れると、いちばん大きい絵に合わせた同じ大きさのキャンバスに、足もとを下に合わせて置いた形で出力されます。ゲームエンジンで、歩きの差分などを同じ位置に重ねたいときに使います。
切り出しやすい一覧の作り方
ツールが正しく切れるかどうかは、一覧の作り方でほぼ決まります。当サイトでは、ゲームの絵を作るときに、次の指示文の形を使っています。実際に使った指示文の一部です。
A single horizontal row of exactly 4 separate game sprites, evenly spaced,
on a solid flat pure chroma-key green background (#00FF00),
no shadow, no ground, no text.
Each sprite fully separated by wide green gaps (at least 60 pixels).
All four are the same character: ...
No green on the character.日本語にすると、次の5点を指定しています。
- 数を決める「横一列にちょうどN個」と数を書きます。ツールの結果と数を照らし合わせられます。
- 背景を純色の緑にする影や地面、グラデーションを入れさせません。
- 絵のあいだに広い緑の隙間を入れる隙間が狭いと、隣の絵とつながって1つに数えられます。
- 同じキャラのポーズや表情は1枚の一覧に入れる1回の生成で描かれるので、線の太さや色味が同じ流れになります。別々に生成した場合との差は、数字では測っていません。
- キャラに緑を使わない緑の部分も透明になってしまいます。
当サイトでは、この指示文を画像生成のCodexで使っています。ほかの画像生成サービスでも同じ書き方で通るかは、確かめていません。
当サイトの20枚で試した結果
ゲーム制作で実際に作った一覧画像20枚を、初期設定のままツールに入れて、切れた数を数えました。「期待」は、そのゲームを組み立てたときに使った絵の数です（2026年11月3日に確認）。
結果は、20枚のうち18枚が期待した数に切れました。1枚あたりの絵の数は2〜8個です。
期待した数にならなかった2枚は、どちらも6個のはずが4個になりました。絵どうしが近く、隣の絵の枠に入り込んだり、ほとんど接したりしている一覧です。ツールは、枠が重なった絵を1つにまとめます。
このような一覧は、絵のあいだの隙間が足りないことが原因と考えられます。隙間を広く指定して一覧を作り直すか、ほかの画像編集ソフトで切り分けてください。なお、この20枚は当サイトのキャラと同じ系統の絵です。ほかの画風での結果は確かめていません。
うまくいかないときの直し方
| 起きること | 直し方 |
|---|---|
| キャラのまわりに緑の縁が残る | 「緑を消す強さ」を上げます |
| キャラの一部が透けた | 「緑を消す強さ」を下げます。緑がかった色を絵に使っていないかも確かめます |
| 1体のキャラが割れて複数になる | 「つなぐ距離」を上げるか、「小さな破片は近い絵に足す」を入れます |
| 別のキャラがくっつく | 「つなぐ距離」を下げます。それでも直らなければ、一覧を隙間広めに作り直します |
| ごみのような小さな点が切り出される | 「小さな破片の大きさ」を上げます |
ツールの仕組み
緑を消す計算は単純です。画素ごとに、緑の値から、赤と青の大きいほうを引いた差を求めます。この差が「しきい値」を超えた分だけ透明にし、「幅」の範囲でなめらかにつなぎます。差がプラスの画素は緑成分も抑えて、縁に残る緑の色にじみを減らします。
切り分けは、透明でない部分が連なっている塊を1つの絵として数える方法です。縮めた画像で隣り合う画素をたどり、指定した距離までの小さな隙間はつなげます。最後に、枠が重なる絵を1つにまとめ、上の段から下へ、段の中は左から右の順に並べます。
緑の背景で作る方式の限界は、画像生成の側で緑が完全な純色にならない場合があることと、キャラに緑を使えないことです。たとえば緑色の食べ物を描きたいときは、切り出したあとで別の色を重ねる方法があります。当サイトの回転ずしのゲームでは、ワサビの緑を、切り出した皿の上にコードで描いています。
関連する記事
一覧に入れる絵の作り方は、ゲーム素材をAIで作る方法にまとめています。ドット絵にしたいときは、ドット絵をAIで作る方法も参考になります。立ち絵の差分は、立ち絵の差分をAIで作る方法で枚数の決め方を説明しています。作った素材を使ってよいかの確認は、AIで作ったゲームの著作権と規約チェックリストが参考になります。
キャラの絵から動きの素材まで作るツールや、ドット絵の整形ツールは、ゲーム素材のAIツールをGitHubで比較した記事で工程順に比べています。
