画像タイル分割ツール

画像タイル分割とは

画像タイル分割（画像スライス、分割、カットとも呼ばれる）は、1 枚のラスター画像を行と列で定義される規則的なグリッドに沿って、より小さな長方形のサブ画像（タイル）に分割する処理です。元画像は「行数 × 列数」の個々のタイルに切り分けられます。各タイルは自己完結した画像ファイルで、独立して開く・編集する・共有する・再結合することができます。タイル分割は、地図システム（Google Maps、OpenStreetMap、Bing Maps などのウェブ地図タイルサービス）、フォトモザイク効果、大判印刷用の分割レイアウト、CSS スプライトの分解など、多くの場面で基盤技術として使われています。

タイルベースのワークフローは、1 枚の大きな画像を配信・処理・合成のために小さなピースに分割する必要があるあらゆる場面で活躍します。ウェブ地図は世界を 256×256 px のタイルに分割し、ブラウザは可視部分だけをダウンロードします。印刷デザイナーはポスターを複数の A4 シートに分割して印刷・トリミング後に再構成します。ゲーム開発者や UI デザイナーはスプライトシートを個別のフレームに分割します。本ツールは、ソフトウェアをインストールせずにブラウザ内で迅速かつプライベートに任意の画像をグリッド分割できる手段を提供します。

分割ツールの仕組み

本画像タイル分割ツールは HTML5 Canvas API を用い、完全にブラウザ内で動作します。画像をアップロードすると、サーバーへ送信されることなくメモリ上の HTMLImageElement にデコードされます。次に行数と列数（1×1 から 12×12 まで、最大 144 タイル）を選択します。「画像を分割」をクリックすると、ツールは画像幅を列数で、画像高を行数で割って各タイルの正確なピクセル尺寸を計算し、各サブ矩形を ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) でオフスクリーン canvas に描画します。

各タイル canvas は canvas.toBlob() でロスレス PNG にエンコードされ、元の画像レイアウトを反映したレスポンシブなグリッドで表示されます。タイルにホバーするとハイライトし、タイル（またはダウンロードバッジ）をクリックすると tile_r{row}_c{col}.png という名前でそのタイルを保存できます。スライス計算は元の寸法に基づく整数ピクセル座標を使用するため、タイルを再結合すると常に元画像が正確に復元されます——引き伸ばし、重なり、隙間は一切発生しません。

行・列・タイル寸法

グリッドレイアウトとタイルごとのピクセルサイズの関係はシンプルですが、理解しておく価値があります。W × H の画像を R 行 C 列に分割する場合、各タイルの寸法はおよそ floor(W/C) × floor(H/R) となります。寸法が均等に割り切れない場合、最後の行または列のタイルが残りのピクセルを吸収するため、総カバレッジは常に元画像と一致します。分割ボタンの下にあるサマリーパネルには、ダウンロード前に計算された正確なタイル寸法が表示されます。

グリッド	タイル数	典型的な用途
2 × 2	4	SNS カルーセル用 4 分割
3 × 3	9	Instagram 9 分割モザイク
1 × 4	4	横長バナーの縦割り
4 × 1	4	縦スクロール用セクション分割
6 × 6	36	大判ポスターの分割印刷
8 × 4	32	地図タイルシートの分解

画像タイル分割ツールの使いどころ

画像をタイルに分割するのは、多くのクリエイティブおよび技術的ワークフローで適切な選択です。以下は、デスクトップエディタで手作業するのに比べて本ツールが時間を節約できる最も一般的なシナリオです：

• Instagram グリッドモザイク。1080×1080（またはそれ以上）のアートワークを 3×3 の正方形タイルに分割し、逆順で投稿することでプロフィールが 1 枚の大きな合成画像になります。
• ウェブ地図タイル。高解像度の地図やパノラマから 256×256 px のタイルシートを生成し、leaflet、mapbox、OpenLayers のタイルレイヤーに使用。
• 分割印刷ポスター。ポスターを A4 サイズのタイルに分割し、家庭用プリンターで印刷・トリミング後に大判ポスターとして再構成。
• スプライトシートの抽出。スプライトシートやアトラスを個別フレームに分解し、検証・編集・再パッケージに使用。
• カルーセル・スライダー素材。1 枚のワイドなヒーロー画像を連続した複数のスライドに切り出し、WordPress、Shopify、カスタムサイトのカルーセルに使用。
• ゲーム・UI アトラス。テクスチャアトラスをスライスし、各セルが UV マッピングと正しく整合しているか検証。
• メール対応チャンク。一部のメールクライアントは大きなインライン画像をブロックします。タイル分割すると特定のレイアウトが確実にレンダリングできます。

グリッド全体ではなく単一の矩形クロップが必要な場合は 画像クロッパー ツールを、複数の画像を 1 枚にまとめる場合は 画像コラージュ ツールをご利用ください。

画像をタイルに分割する手順

本ツールでの分割は数秒で完了し、すべてブラウザ内で実行されます。アップロード不要、登録不要、インストール不要です。次の 4 ステップに従ってください：

1. 画像をアップロード。アップロードエリアをクリックするか、PNG、JPG、WebP、GIF、BMP ファイルをドラッグ＆ドロップ。画像はローカルでデコードされプレビュー表示されます。
2. 行数と列数を設定。2 つのスライダーでグリッドを指定します。デフォルトの 3×3 は 9 タイル、最大の 12×12 は 144 タイルを生成します。
3. 画像を分割。「画像を分割」をクリックすると、ツールがタイル寸法を計算し、ボタンの下にクリック可能なプレビューサムネイルのグリッドを表示します。
4. タイルをダウンロード。任意のタイルをクリックすると、tile_r{row}_c{col}.png という名前で PNG として保存されます。必要なタイルごとに繰り返してください。

すべてのステップは JavaScript と Canvas API でローカルに実行されるため、画像がブラウザから外に出ることはありません。これにより分割処理は完全にプライベートかつ即時で、機密性の高い画像にも適しています。