画像グリッド分割ツール

画像をブラウザ内で N×M のグリッド状のタイルに分割します。

ツールを読み込み中…

画像グリッド分割ツール画像をドロップし、HTML canvas を使って N×M の均等なグリッド状のタイルに切り分けます。必要な行数と列数を選び、各タイルをプレビューしてから、fflate で作った ZIP として一括ダウンロードしたり、1 枚だけ保存したりできます。すべてブラウザ内のローカルで処理されるため、画像がアップロードされることはありません。

画像グリッド分割ツールとは?

画像グリッド分割ツールは、1 枚の画像を均等なタイルのグリッドに分割できる、ブラウザ上で動く無料ツールです。行数と列数を指定すると、画像が「行 × 列」枚の同じサイズのタイルに分割され、左から右・上から下の順に番号が振られます。1 枚の横長画像から Instagram や SNS のカルーセルを作る、スプライトシートやテクスチャアトラスを個別のフレームに切り分ける、画像パズルを作る、大きなスクリーンショットを小さなセクションに切るといった用途に便利です。ブラウザで開ける任意の画像(PNG、JPEG、WebP など)に対応し、各タイルのプレビューをリアルタイムで表示し、すべてを ZIP でダウンロードしたり 1 枚ずつ保存したりできます。

画像グリッド分割ツールの使い方

  1. 画像をドロップゾーンにドラッグ&ドロップするか、クリックしてファイル(PNG、JPEG、WebP、またはブラウザで開けるその他の画像)を選びます。
  2. グリッドの行数と列数を設定します。値を変更すると、ツールが自動的に画像を「行 × 列」枚の均等なタイルに分割します。
  3. タイルの枚数と、プレビューグリッドで各タイルを確認します。タイルのサムネイルをクリックすると拡大用のライトボックスが開きます。
  4. 「ZIP をダウンロード」をクリックすると、すべてのタイルが行・列順の名前で 1 つのアーカイブにまとめて保存されます。
  5. または「最初のタイルをダウンロード」をクリックすると、タイルを 1 枚だけ保存できます。1 枚だけ必要なときに便利です。

使用例

3 枚の Instagram カルーセルを作る

3240×1080 の横長バナーをドロップし、行数を 1、列数を 3 に設定すると、1080×1080 の正方形が 3 枚できます。ZIP をダウンロードして、つながったスワイプ式カルーセルとして投稿できます。

スプライトシートをフレームに切り分ける

4×4 のキャラクタースプライトシートを読み込み、行数と列数を両方 4 に設定すると、均等に切られた 16 枚のフレームが得られます。ZIP をダウンロードして、各フレームをゲームやアニメーションで個別に使えます。

縦長のスクリーンショットを分割する

長いスクリーンショットをドロップし、行数を 4、列数を 1 に設定すると、画像が縦に積み重なった 4 つのセクションに切られ、1 つずつ共有・添付できます。

よくある質問

画像はサーバーにアップロードされますか?
いいえ。分割は HTML canvas を使ってブラウザ内で 100% クライアントサイドで実行され、ZIP も fflate でローカルに作成されます。画像は端末上で読み込み・処理され、アップロードされることは一切ないため、プライバシーが保たれます。
どんな画像形式を分割できますか?
ブラウザで開ける任意の画像(ドロップゾーンは image/* を受け付けます)で、PNG、JPEG、WebP を含みます。タイルは PNG として書き出され、各タイルが鮮明でロスレスに保たれます。
タイルのサイズと番号はどう決まりますか?
画像は「行 × 列」枚の均等なタイルに分割されます。最後の行と列が余りのピクセルを吸収するので、何も失われません。タイルは左から右・上から下の順に番号が振られます(1 行 1 列目が最初)。
すべてのタイルを一度にダウンロードするには?
「ZIP をダウンロード」をクリックすると、fflate でまとめた、すべてのタイルを含む 1 つのアーカイブが得られます。ファイルは行と列で名前が付くので順番に並びます。1 枚だけなら「最初のタイルをダウンロード」も使えます。
グリッドの大きさや画像サイズに制限はありますか?
ツール側で設定された固定の制限はありません。行数と列数は最低 1 必要で、非常に大きな画像やグリッドはブラウザと端末の利用可能なメモリによってのみ制限されます。すべての処理がローカルで行われるためです。

関連ツール