複数の写真をグリッド状に並べて、1枚の画像として書き出す。そういう作業、地味に困ることがありませんか。
取材写真を何枚かまとめてSNSに載せたいとき、ブログのアイキャッチを複数の写真で構成したいとき、料理の手順を4コマで見せたいとき。Canvaを開くほどでもないけど、そのままだと1枚ずつしか貼れない、という場面です。
僕がAIを活用して作った画像合成ツール「コマ組み」は、そういうときのためにブラウザだけで動く無料ツールです。インストール不要、ログイン不要、画像はサーバーに送信されません。
基本的な使い方
使い方はシンプルです。最初の1枚をドラッグ＆ドロップするか、画面をクリックしてファイルを選ぶと、グリッドが立ち上がります。
この最初の1枚が「基準セル」になり、縦横比がすべてのコマに適用されます。3:2の写真を最初に読み込んだら、グリッド全体のコマが3:2で統一される、という仕組みです。
あとは各コマに写真をドラッグ＆ドロップするか、クリックして選ぶだけ。コマは最大10×10（100コマ）まで設定できます。
コマごとに表示を調整できる
写真を置いたあと、コマごとに「どの部分を見せるか」を調整できます。コマにカーソルを合わせると「✏ 編集」ボタンが出るので、それをクリックすると編集モーダルが開きます。
モーダル内でできることは次の3つです。
- ズームスライダーで拡大・縮小（10〜500%）
- プレビュー内をドラッグして表示位置を移動
- スライダーで-180度から+180度の範囲で回転
「全体表示」「塗りつぶし」「100%」「200%」のプリセットボタンも用意されているので、だいたいのズームはワンクリックで決まります。回転すると画像の端に隙間が出ますが、背景色（後述）で埋まるので問題ありません。
並べ替えもできる
コマに写真を入れたあと、並び順を変えたくなることがあると思います。写真が入ったコマをドラッグして別のコマにドロップすると、2つのコマの画像が入れ替わります。上下左右どの方向でも対応しています。
境界線と背景色の設定
コマとコマの間の線、グリッド外周の枠線、背景色を設定できます。
境界線は太さ（1〜200px）と色をカラーピッカーで指定します。大外枠のON/OFFは独立して切り替えられるので、コマ間の線だけ残して外枠なし、という使い方もできます。
背景色は空のコマや、画像を回転させたときの隙間に使われます。デフォルトはグレーですが、白や黒など好きな色に変えられます。
出力サイズと保存形式
書き出しサイズは「横幅を指定」「高さを指定」「元サイズ」の3択です。
横幅を指定するとき、境界線がある場合は線の幅を自動的に差し引いて計算します。たとえば横1600px・2列・境界線20pxを指定すると、コマ幅は790pxになり、790×2＋20＝1600pxのファイルが書き出されます。指定したサイズがそのままファイルのサイズになる、ということです。
保存形式はJPEG・PNG・WebPの3種類。JPEGとWebPは画質（1〜100%）を指定できます。デフォルトは92%です。
こんな用途に向いています
このツールでは、基準となる1枚目の縦横比を意識して、格子状に画像を並べます。ただし、それぞれの枠内で拡大・縮小・回転を行うことで、個々の画像を最も活かせる形で表示できます。
こんな場面では使いやすいと思ってもらえるのではないでしょうか。
- ブログのアイキャッチを複数の写真で構成したい
- X（旧Twitter）やInstagramに複数枚をまとめた1枚を投稿したい
- 取材・イベントのレポートで写真コラージュを作りたい
- 料理・DIY・旅行など、手順や風景を並べて伝えたい
そもそものきっかけが、ブログや記事のアイキャッチ画像として組み合わせたい、画面遷移を分かりやすく伝えたいのが目的で作ったツールです。芸術性よりも説明感のある画像に向いているのではないかとは思います。
動作環境
PC環境のChrome / Edge / Firefox / Safari（最新版）で動作します。スマートフォンでも基本的な操作はできますが、コマ内のドラッグ操作はPCの方が快適です。
ツールはこちらからどうぞ。
👉 https://creator.odaiji.com/blog/komagumi.html
