【Google AI Studio】時短クッキング No.30：1枚画像の複数イラストを切り出し保存するツールAI Smart Cropper

1枚に複数のイラストが含まれる画像データがあります。たとえばAIに「猫のアイコンを生成してください。1枚の画像に複数のアイコンを生成してください」と頼むと、次のような画像が出力されます。

中から一つ使うだけなら、グラフィックツールで範囲選択してコピペすればいいのですが「すべてを分割保存したい」となると、それなりに面倒です。今回はそれを手助けするツールを作ってみました。

ざっくり分割するツールはすぐできました

最初に作ったプロンプトが次です。

生成されたのが「AI Illustration Cropper」＝イラスト自動分割アプリです。

画像を読み込ませて、PNG形式かJPG形式かを選択して実行します。

画像が次のように分割表示されます。あとは個別ダウンロードしてもいいですし、「Download All」ボタンでまとめて保存も可能です。初版にしては、十分な出来といえるでしょう。ツールとしての方向性もいい感じです。

しいて言えば、一部のイラストに、隣のイラストの一部が入り込んでいるのが気になります（これについては、公開版で対応しています）

どんな処理がされているのか？

一般的に、画像の分割というと、思いつくのが、

グリッド式

です。これは複数のイラストが均等配置されていることを前提に、縦横均等に分割するというものです。しかし、これだとイラストが不規則に配置されている場合は、まったく対応できません。

本アプリでは、タイトルに「AI」とついているように、AIが画像を認識して、イラストが不規則に配置されていても、分割できるようになっています。これが本アプリの傑出した機能となります。

注意：どこからどこまでが1つのイラストなのかは、AIが判断しているため、場合によってはAIが判断を間違ってしまうことがあります。たとえば、2つの物体が細い線でつながっているような場合、AIはこれを1つのイラストではなく、2つのイラストとして誤認することがあります。

公開版「AI Illustration Cropper」

というわけで、初版にいくつかの機能を追加したものが、次の公開版となります。ツール名や基本的な操作の流れは初版と同じです。

基本的な使用方法

❶  「画像をドロップまたはCtrl+Vで貼り付け」に分割したい画像をアップロードする
❷ 「抽出アルゴリズム」を選択する
❸ 適宜「フレーミング設定」（オプション）を選択する
❹ 「抽出を開始する」ボタンをクリックする
❺ 「抽出完了」が表示されたら、個別にダウンロードもしくは「Download All」ボタンで全ダウンロードする

続けて、開発において特に注力した「こだわり」を紹介します。これを知ることで、本ツールの最適な使い方がわかると思います。

こだわり１：「Ctrl+V（貼り付け）」対応

初版は、ファイル選択およびドラッグ＆ドロップに対応していましたが、さらにコピペができるようにCtrl+V対応にしました。このあたりは基本的に、本シリーズで毎回対応している機能です。

こだわり２：用途に合わせた「3つの抽出アルゴリズム」

本アプリの核心は、検出された矩形領域に対して適用される3つの異なる処理ロジックにあります。

• オリジナル矩形（PNG/JPG出力を選択）
  AIが検出した範囲を、そのままの状態で切り出します。背景に手を加えたくない場合や、元の色味を完全に維持したい場合に最適です。

• 背景自動透過（PNG出力）
  イラストの周囲にある「白」または「透明」を背景とみなし、シードフィル（種まき塗りつぶし）アルゴリズムによって、イラストに隣接する背景のみを動的に透過処理します。これにより、背景が白い画像からでも、透過素材を作成できます。

• アルファチャンネル保護（PNG出力）
  すでに背景が透過されているPNG画像において、「白い縁取り（アウトライン）」を保護しながら切り出すための専用モードです。通常の透過処理では、イラストの「白い縁」と「白い背景」の区別がつかず、縁が消えてしまうことがありますが、このモードはピクセルの「不透明度（アルファ値）」のみを参照します。
  「透過PNGなのに、イラストを個別に切り出すと縁が欠けてしまう」という、多くのクリエイターが直面してきた悩みを解決します。
  注意：このモードは、アルファチャンネルが設定されている透過PNG画像専用です。アルファチャンネルないPNG画像や、アルファチャンネルがあっても判断に使用できない場合には、分割画像が生成されませんので、ご承知ください。

こだわり３：ニーズに応える「3つのオプション指定」

単純な切り出しに留まらず、そのまま「素材」として即戦力になるための細かな調整機能を搭載しました。

• 全パーツを同寸で揃える（Uniform Size）
  ゲーム制作（スプライトシート）やアニメーションスタンプの制作において、全コマのサイズが統一されていることは必須条件です。このオプションを有効にすると、検出されたすべてのパーツの中から「最大の幅・高さ」を自動計算し、すべてのキャンバスサイズをそのサイズに統一して出力します。配置位置は中央に自動整列されます。

• マージン（余白）の設定
  「切り出しがギリギリすぎて使いにくい」という不満を解消します。ピクセル単位で余白（Margin）を指定でき、イラストの周囲に均等なスペースを設けることができます。これにより、デザインツールへ配置した際の扱いやすさが格段に向上します。

• 境界接触物の除去（Debris Removal）
  密集したイラストシートを解析する際、切り出し範囲の端に「隣のイラストの端」がわずかに写り込んでしまうことがあります。本機能は、キャンバスの境界に接触している「孤立したピクセル塊」を自動的にスキャンして消去します。
  AIの検出範囲から一歩踏み込み、ピクセルレベルで「ゴミ」を掃除することで、手作業での修正が一切不要なクリーンな素材を提供します。
  
  注意：隣のイラストの端の一部が、キャンバスの境界に接触していない特殊なケースでは、除去しきれずに残ってしまうことがあります。

境界接触物の除去モードをオフ

境界接触物の除去モードをオン

自分で言うのもなんですが、すごくないですか？　この機能（笑）

誤認を防ぐための基本テクニック

本アプリはAIがイラストのまとまりを判断していますので、イラストの周りにちりばめた星マークや、汗マークのようなものがあると、それは別のイラストとして認識してしまうことがあります。

このような場合には、あらかじめイラストが離れないようにしておくことをお勧めします。

次はアルファチャンネルありのパンダのイラストですが、音符が離れてしまっています。誤認させないためには、パンダと音符を、たとえばこのようにつなげておくのが、AIに正しく認識してもらうための一つの方法です。

シェアURL

お試しください。

まとめ：限界突破

この複数イラストの切り出し問題は、ずっと「何かいい手はないものか」と思っていたテーマです。

いままでは、グリッド式で切り出すしかないと思い込んでいて、AIに、1枚画像に複数イラストを出力してもらう場合にも、グリッド式で切り出しやすくするために、縦横に整然と並んだ状態で出力してもらうことを考えていました。

しかし、本ツールができたことで、乱雑に並んだイラストの切り出しが、ほぼ自動化できるようになりました。そして、ただツールができただけでなく、1つの「限界突破」を成し遂げた感じがしています。

別のツールになりますが、先に進めることができそうです。

以上！

㊗️バージョンアップしました！

2026/01/02
本アプリをバージョンアップし、3つの新機能を追加しました。一番の目玉は、JPG素材に対して白枠をつけて切り出す機能の追加です。また、切り出すときのサイズ調整もできるようにしましたので、より精度の高い処理ができるようになっています。

新機能1：JPG画像の背景自動透過で白枠を追加

前バージョンでは、次の抽出アルゴリズムが選択できました。

• オリジナル矩形

• 背景自動透過

• アルファチャンネル保護

新バージョンでは、これに加えて、

• 背景自動透過＋白縁追加

が選択できるようになっています。これは「背景自動透過」の派生的な抽出アルゴリズムです。
具体的には、、アルファチャンネルのない白背景イラストから、白背景を透明化するところまでは同じですが、最後にイラストに対して白枠を追加します。

アンチエイリアスが施されているイラストの場合、背景自動透過だけでは、縁に白いジャギーが残ることがあり、イラストとしてあまり美しくありません。対応策として、白縁をつけるのが比較的一般的ではないかと思います。これを自動化したのが、本機能となります。

白縁の幅を「追加する白縁の幅」スライダで調整することができます。

新機能２：イラストを切り取る範囲の調整スライダ

本アプリでは、AIがイラストの塊を調査していますが、実際にイラストを切り出すときに、前バージョンでは、比較的広く切り出していました。しかし、あまり広く切り取ると隣のイラストが入りやすくなり、結果としてゴミとして残りやすいという問題がありました。

そこで新バージョンでは、「解析の余白（バッファ）」スライダで切り出すときの広さを調整できるようにしました。狭くすることで、隣のイラストが入りにくくなるため、正しくイラストを切り出せるようになります。

新機能３：設定値を記憶して次回起動時に継承する

切り出しを行ってみたところ、理想的な結果にならなかったときには、設定を変えて、やり直すことになります。前バージョンでは一度切り出すと、元イラストの読み込みからやり直す必要がありました。

これは面倒なので、新バージョンでは切り出しをしても、読み込みデータや設定ダイアログが消えないようにしました。

また、設定ダイアログについては、変更をブラウザに記録するようにしました。次回起動時に、前回の設定が読み込まれるので、同じ設定での切り出しが簡単にできるようになりました。

シェアURL（新バージョン）

お試しください。

以上！