てもとツール

画像分割ツール|9分割やインスタの3分割にきれいに切る

1枚の画像を3×3などの格子や縦方向へ切り分けるツール。グリッド投稿用に投稿する順の番号を付け、割り切れない1pxまで配って継ぎ目をそろえます。まとめてZIPで保存でき、画像は手元のブラウザで処理します。

ブラウザ内処理 公開

クリックまたはドラッグ&ドロップで画像を選択

JPEG・PNG・WebP(最大50MB)

分けたい画像を選んでください

格子状のグリッド分割と、縦に順番へ分けるページ分割を選べます

このツールについて

使い方・特徴・補足情報

画像分割とは

画像分割は、1枚の画像を格子状や縦方向へ切り分けるツールです。

3×3や3×1のプリセットを押すと、SNSのプロフィールに並べる形にそろいます。

SNSグリッドを選ぶと番号は「投稿する順」になり、右下から順に出せば絵がつながります。

割り切れない端数は先頭の1枚から1pxずつ配ります。継ぎ目に隙間や細い帯が残りません。

長い画像モードにはのりしろがあり、切れ目の行を次の1枚にも残せます。

切り出したタイルはまとめてZIPで保存するほか、1枚ずつ選んで保存する形も選べます。

こんな人におすすめ

SNSや資料に画像を載せる人

楽になること

1枚を複数枚へ切り分ける

避けたい手間

継ぎ目や並び順がずれること

解決できる困りごと

  • 画像編集アプリで選択範囲の座標を数えながら切り出す作業が、プリセットを押すだけで終わる
  • 割り切れない寸法で継ぎ目が1pxずれたり、右端に細い帯が残ったりするのを防げる
  • グリッド投稿で並べる順番を取り違え、絵が崩れてから貼り直す手戻りがなくなる
  • 長い記事のスクリーンショットを等分したときに、切れ目で行が読めなくなるのを避けられる
  • 9枚のタイルを1枚ずつ書き出して名前を付ける手間が、ZIPのまとめ保存で済む

使い方

  1. 「クリックまたはドラッグ&ドロップ」の枠に画像を1枚入れます。
  2. 分けかたを選びます。プロフィールを一面にするなら「SNSグリッド 3×3」を押します。
  3. 長い画像を読みやすく分けるときは「長い画像を順番に分ける」を選び、のりしろを入れます。
  4. プレビューで枚数と、各タイルの実寸の内訳を確かめます。
  5. 詳細設定で出力形式と番号の意味を選びます。グリッド投稿なら「投稿する順」のままにします。
  6. 「まとめて保存(ZIP)」を押すか、タイルごとの保存ボタンで1枚ずつ端末に保存します。

使用例

プロフィールを一面の絵にする

9枚に切った例です。ファイル名の post01 が最初に投稿するタイル、つまり右下を指します。

入力

art.png(1080 × 1080)
分けかた: SNSグリッド 3×3 / 番号: 投稿する順

出力

art_post09_r1c1.png … art_post01_r3c3.png(9枚 / 各 360 × 360)
幅の内訳: 360・360・360 px / 高さの内訳: 360・360・360 px

割り切れない幅を3列に切る

1000pxを3列にした例です。余りの1pxが左端の1枚に入り、合計は元の幅と一致します。

入力

photo.jpg(1000 × 600)
分けかた: SNSグリッド 3×1 / 出力: PNG

出力

photo_post03_r1c1.png(334 × 600)
photo_post02_r1c2.png(333 × 600)/ photo_post01_r1c3.png(333 × 600)

長いスクショをのりしろ付きで分ける

縦に長い画面を1200pxずつ切った例です。80pxの重なりがあるので切れ目の行が両方に写ります。

入力

screenshot.png(750 × 4000)
分けかた: 長い画像を順番に分ける / 高さ 1200px / のりしろ 80px

出力

p1: 0〜1200px / p2: 1120〜2320px / p3: 2240〜3440px / p4: 3360〜4000px
4枚(最後の1枚だけ高さ 640px)

活用シーン

プロフィールを一面の絵にする

1枚のイラストを9枚へ切り、プロフィールの3列に並べます。投稿する順の番号が付くので迷いません。

横一列の3分割で見出しを作る

横長のバナーを3枚に切り、プロフィールの一段を見出しのように使います。文字の位置は切る前に決めます。

長い記事のスクショを分けて送る

縦に長い画面を読める単位へ切ります。のりしろを付けると、切れ目の行が次の1枚にも残ります。

資料の図を分けてスライドへ配る

1枚にまとめた図を列ごとに切り出し、スライドへ1つずつ貼ります。切り抜き位置の目分量がいりません。

大きな絵を紙に分けて印刷する

1枚の絵を4分割や9分割にして、A4用紙へ順番に印刷します。貼り合わせると大きな掲示物になります。

並べた写真を1枚ずつに戻す

田の字に並べて保存した写真を、元の4枚へ切り戻します。等分で並べた画像なら位置がそろいます。

技術的な解説

補足: 仕組み

切り出しはCanvasのdrawImageに元画像の矩形をそのまま渡し、等倍でコピーします。

拡大縮小をしないので、imageSmoothingEnabledを切って隣の画素が混ざらないようにしています。

端数はMath.floorで基本の長さを出したあと、余りを先頭のタイルから1pxずつ足す形です。

ZIPはfflateのストリーミングで組み、書き出したタイルから順に詰めていきます。

もっと詳しく

グリッド投稿は右下のタイルから出す

SNSのプロフィールは、新しい投稿が左上に入り、右へ・下へと古い投稿が並びます。

つまり9枚を左上から順に投稿すると、並びが逆になって絵が崩れます。

このツールの「投稿する順」は右下を1番として振っています。ファイル名のpost01から順に出せば、意図した並びになります。

余白を足す・縮める・切り分けるの使い分け

投稿先の比率に合わせる方法は3つあります。余白を足す、寸法を縮める、切り分けるです。

端が切れるのを防ぎたいなら余白追加、容量や表示サイズを合わせたいならリサイズを選びます。

切り分けるのは「1枚を複数枚として見せたい」ときだけです。目的が違うと仕上がりも変わります。

のりしろを付けるとよい画像・不要な画像

のりしろは、切れ目で文字や表の行が途切れるのを防ぐための重なりです。

長い記事や会話の画面を分けるときは、40〜100pxほど重ねると読み手が迷いません。

逆にグリッド投稿では重なりが二重に写り、絵がずれて見えます。プリセットでは入力欄を出しません。

よくある質問

分割した画像はどの順番で投稿しますか?

ファイル名のpost01から順に投稿します。プロフィールは新しい投稿が左上に入るため、右下のタイルを最初に出すと意図した並びになります。

分割すると画質は落ちますか?

PNGで書き出す設定なら、拡大縮小をしない等倍のコピーなので画素はそのまま残ります。JPEGやWebPを選んだときだけ再圧縮が入り、細い線や文字がわずかに眠くなります。

とても大きな画像も分割できますか?

1辺30,000px・合計4,000万画素までです。これを超えるとタブが落ちる恐れがあるので、読み込んだ時点でエラーとして知らせます。

何枚まで分割できますか?

列と行はそれぞれ10まで、合計は100枚までです。1枚の幅や高さが1px未満になる指定は、黙って通さずエラーで知らせます。

分割した画像の大きさがそろわないのはなぜですか?

元の寸法が分割数で割り切れないときは、1px単位の差が必ず出ます。余りは先頭のタイルから配り、合計が元の寸法と一致するようにしているので、内訳を画面で確かめてください。

画像はどこかに送信されますか?

読み込んだ画像は端末の中だけで処理し、ファイルの中身を外部へ送る仕組みは持っていません。ZIPの組み立ても開いているブラウザの中で終わります。

関連記事

このツールの使い方や活用例をブログでも紹介しています。

関連ツール

同じカテゴリの他のツールも合わせてどうぞ。