画像分割ツール

Instagramの「グリッド投稿」――1枚の横長写真を9枚（あるいは4枚、6枚）の正方形タイルに切り分け、プロフィールグリッド上で1枚の画像として再現する手法――は、元画像を正確に均等な、正しい順序のピースに切り分けなければ、その錯覚は崩れてしまいます。このツールはその分割をブラウザ内でローカルに行います。グリッドサイズを選ぶだけで、画像を均等なサイズのタイルに分割し、プレビューして1つのZIPファイルとしてダウンロードできます。連続した投稿としてアップロードする準備が整います。

このツールとは？

画像分割ツールは、1枚の元画像を同じサイズの小さなタイルのグリッドに分割するもので、最も一般的なのはInstagramの「グリッドレイアウト」トレンドです。1枚の横長写真やイラストを、プロフィールグリッド上でまとめて見たときに元の画像に再現される、一連の正方形画像として投稿します。

この技法自体は単純な幾何学です――元画像の幅と高さをそれぞれ列数と行数で割り、結果として得られる各長方形を個別のファイルとして切り出します――ただし、これを汎用の写真編集ソフトで手作業で正確に行うのは面倒でミスが起こりやすく、特に3x3以上のグリッドでは1つのタイルのわずかなずれが全体のシーケンスを狂わせます。

このツールは画像の実際のピクセル寸法からグリッドの境界を正確に計算し、HTML5 Canvas APIを使って各タイルをブラウザ内で完全にレンダリングするため、すべてのタイルが正確に揃い、画像自体があなたのデバイスから外に出ることはありません。

なぜこれを使うのか？

気合を入れて描いたイラストをInstagramのグリッド演出で公開したいが、写真編集ソフトで9枚に手動トリミングしていたら1枚だけ数ピクセルずれてしまい、グリッド上で継ぎ目がガタガタになった経験がある――このツールならピクセル単位で正確に9等分されるので、そのミスを避けられます。
横長のパノラマ写真をカルーセル投稿の連続する複数枚として公開したいが、どこで区切ればいいか目分量では自信が持てない――1x4や1x3のグリッドを選ぶだけで、等間隔の区切り位置が自動的に決まります。
9枚のタイルを1枚ずつ「名前を付けて保存」していく作業がとにかく面倒で、いつも途中で嫌になる――「すべてダウンロード（ZIP）」ボタン1回で、番号付きの9枚がまとめて手に入ります。
投稿する前に、実際にグリッド上でどう見えるか確認したい――ダウンロードする前にブラウザ上でタイルのプレビューが見られるので、変な位置で顔が分割されているといった失敗に事前に気づけます。
同じ画像を2x2と3x3の両方で試して、どちらのグリッドサイズがイラストの構図に合うか比較したい――ドロップダウンを切り替えるだけで何度でも分割し直せます。
投稿前のイラストや未公開の写真を、画像編集系のオンラインサービスにアップロードするのは気が引ける――このツールは画像をサーバーに送らず、ブラウザ内のCanvasだけで処理を完結します。

使い方

ドロップゾーンをクリック（またはドラッグ＆ドロップ）して、デバイスから画像を選択します。
ドロップダウンからグリッドサイズ――1x2、1x3、2x2、3x3、1x4――を選びます。
コントロールの下に、結果のタイルが即座にプレビュー表示されます。
「すべてダウンロード（ZIP）」をクリックすると、番号付きのPNGファイルとしてすべてのタイルが1つのZIPアーカイブに入って取得できます。

例

入力

1200×1200pxの正方形写真、グリッド：3x3

出力

400×400pxのタイル9枚、tile-1.pngからtile-9.pngまで

タイルは左から右、上から下の順に番号が振られます――これはInstagramにアップロードする順序と同じです（右下のタイルから始めて逆順に進めることで、新しい投稿を公開するたびに古いタイルが下に押し出され、グリッドが正しく再構成されます）。

よく使われるグリッドサイズとその用途

グリッドサイズが異なれば、適した投稿やリビールの種類も異なります。

グリッド	タイル数	典型的な用途
1x2	2	シンプルなビフォーアフター、または2部構成のリビール
2x2	4	小さな正方形のリビール、素早く投稿できる
1x3	3	連続する3つの投稿にまたがる1列
3x3	9	プロフィールグリッド全体を占有――古典的なInstagramグリッドレイアウト
1x4	4	横長のパノラマを連続する4つの投稿に分割

投稿順序を間違えないためのコツ

3x3グリッド投稿でよくある失敗は、タイルを番号順（tile-1から順）にそのまま投稿してしまい、グリッドが完成した時点で画像が上下逆に組み上がってしまうことです。Instagramは新しい投稿を左上から表示するため、実際の投稿順は番号の逆――つまりtile-9（右下）から始めて、最後にtile-1（左上）を投稿する――にする必要があります。

投稿の合間に他の写真を挟んでしまうと、グリッドの途中に無関係な投稿が割り込んで絵が崩れてしまいます。9枚すべてを一気に、他の投稿を挟まずに連続して公開するのが、グリッド演出を成功させる一番確実な方法です。

よくある質問

Instagramのプロフィールグリッドにはどのグリッドサイズを使うべきですか？

3x3（9タイル）が最も一般的な選択です。標準的な3列のInstagramプロフィール表示をちょうど1回分埋めるためです。2x2や1x3の分割は、最近のグリッド全体を占有しない小規模なリビール向けです。

タイルはどの順序で投稿すればよいですか？

Instagramのグリッドは最新の投稿を最初（左上）に表示するため、基本的にはタイルを逆順――グリッドの右下のタイルから始め、左上のタイルで終える――に公開する必要があります。すべてのタイルを投稿し終える頃には、左から右、上から下の順に正しく読める状態になります。

画像は完全な正方形である必要がありますか？

いいえ、ただし（3x3のような）対称的なグリッドレイアウトの場合、正方形の元画像は正方形のタイルを生成し、これはInstagramが正方形グリッド投稿をトリミングする方法と一致します。正方形でない画像も均等に分割されますが、正方形ではなく長方形のタイルになります。

タイルはどのファイル形式で保存されますか？

各タイルはダウンロードされるZIPアーカイブ内にPNGファイルとして書き出され、非可逆再圧縮なしで品質が保持されます。

自分の画像はどこかにアップロードされますか？

いいえ。画像はブラウザに直接読み込まれ、Canvas APIを使って完全にクライアント側で分割されます。サーバーには何も送信されません――ZIPファイルもブラウザ内でローカルに作成されます。

分割後のタイルの解像度はどのように決まりますか？

元画像の幅と高さを、選んだグリッドの列数・行数でそれぞれ均等に割った値になります。たとえば1200×1200pxの画像を3x3グリッドで分割すると、各タイルは400×400pxになります。元画像の解像度が高いほど、各タイルの解像度も高くなります。

元画像の縦横比がグリッドの列数・行数と割り切れない場合はどうなりますか？

ピクセル数が均等に割り切れない場合でも、ツールは各タイルの境界をできるだけ均等になるよう計算して分割します。とはいえ、投稿後の見た目を最も安定させたい場合は、あらかじめグリッドの列数・行数で割り切れる寸法にトリミングしてから読み込むことをおすすめします。

1x2や1x4のような非対称なグリッドは何に向いていますか？

1x2は左右2枚に分けるシンプルなビフォーアフター演出に、1x4は横長のパノラマ写真を4回の連続投稿に分けて公開する用途に向いています。正方形の3x3や2x2と違い、これらは横一列の細長いタイルになります。

分割した画像をInstagram以外のSNSにも使えますか？

はい。生成されるタイルは標準的なPNGファイルなので、Instagramのグリッド投稿に限らず、他のSNSでの連続投稿演出や、印刷物のパネル分割など、複数の均等なピースが必要などんな用途にも使えます。