【Google AI Studio】時短クッキング No.32：複数画像を1枚画像にいい感じで合成するツールGrid Image Composer

「時短クッキング No.30」では、1枚の画像から複数のイラストを切り出して保存するツールを公開しました。
そうなると、今度はその逆のことをしたくなります。
それが、複数のイラストをいい感じに合成する本ツールです。

使いやすさ重視の画像合成アプリ

お好みの画像を自由に並べて、1枚の大きな画像に合成するアプリ
「Grid Image Composer」を作りました。
シンプルながら、使いやすさを重視したUIを心がけています。

基本的な使い方は次の通りです。

❶ 画像を読み込む

画面上の点線枠エリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択してください。

• 複数の画像をまとめて追加できます

• 透過PNGにも対応しており、透明度を維持したまま合成可能です

❷ グリッド設定で列数を調整する

画面左側の設定パネルで、レイアウトを調整します。

• 列数：横に何枚並べるかを指定

• 「成り行き」にチェックを入れると、画像枚数に応じて行数を自動決定します

「成り行き」のチェックを外すと、行数も手動で指定できます。
この場合、画像が不足すると空白ができ、多い場合は余った画像が無視されます。

❸ 合成して保存する

設定が完了したら、右上の青色の「画像を合成」ボタンをクリックしてください。

• 画面下部に合成結果が表示されます。

• 問題なければ、右上の黒色の「合成画像を保存」ボタンをクリックすると、PNG形式でダウンロードできます。

複数画像を合成するだけのアプリは数多くありますが、本アプリにはひと工夫ある便利機能を用意しています。

以下で順に紹介します。

グリッドに対する設定

画像の並びを指定するため、最低限「列数」の設定が必要ですが、それ以外にも細かい調整項目を用意しています。

列数と行数

通常は「列数」を指定し、「成り行き」をオンにしておけば、行数は画像枚数から自動計算されます。

「成り行き」をオフにすると、行数も手動で指定できます。

セルのサイズ

「自動調整」では、登録された画像の中で最も大きいサイズを基準にセルサイズが決まります。

「手動設定」に切り替えることで、好みのセルサイズを指定できます。

余白 (px)

画像と画像の間のスペース（マージン）を調整できます。

フィットモード

サイズの異なる画像を並べたときの表示方法を選択します。通常はデフォルトの Contain で問題ありません。

• Contain：画像全体が収まるように配置（余白が出る場合あり）

• Cover：枠いっぱいに表示（端が切れる場合あり）

• Fill：枠に合わせて強制的に引き伸ばし

プルダウンから選択できます。

サムネールの2つの表示モード

読み込んだ画像は「配置する画像」の下にサムネール表示されます。
表示方法は次の2種類から選べます。

リスト表示

画像を成り行きで縦に並べる表示方法です。
画像が小さくならないため、内容の確認がしやすくなります。

グリッド配置（デフォルト）

設定した行数・列数に沿って並べる表示方法です。
列数が多いと画像は小さくなりますが、完成形のイメージがしやすくなります。

入れ替え自由なサムネール

サムネール表示された画像は、削除や並び替えが可能です。
特に「グリッド配置」にしておくと、全体を確認しながら調整できます。

• 入れ替え：画像左上のアイコンをドラッグ

• 削除：画像右上の「×」をクリック

「不足分を繰り返す」オプション

画像が足りないグリッドを自動で埋める機能です。

たとえば、画像2枚を読み込み、10列×10行のグリッドを指定し、「不足分を繰り返す」をオンにすると、2枚の画像を繰り返して全100マスを埋めます。

テクスチャー画像やパターン画像を作るときに便利です。
この場合は「リスト表示」がおすすめです。

シェアURL

お試しください。

まとめ：今回のこだわりについて

本ツールは、以前のツールでバラバラに分割した画像を、改めて並びを考えて再合成することを目的に作りました。

初版では画像の追加のみ可能でしたが、

• 列数を中心にレイアウトを決められるようにした

• 並び順を自由に入れ替えられるようにした

• サムネールのグリッド表示モードを追加した

ことで、使い勝手はかなり向上したと思います。

また、こうした細かなこだわりに、あっさり応えてくれるGoogle AI Studio には、感謝するしかありません。

以上！