複数画像を 1 枚にまとめる — /tools/image-merge の思想と使い方

スマホのスクリーンショットを複数枚まとめて 1 枚の縦長画像にしたい。商品のビフォーアフター画像を横並びで 1 枚にしたい。操作マニュアルの手順画像を縦に並べて 1 ファイルにまとめたい。比較画像や before/after の資料作りで、画像を並べたいシーンは日常的に発生します。

Zerosend の画像結合ツール は、こうした「複数画像を 1 枚にまとめる」需要をブラウザ内で完結させます。

なぜブラウザ内で結合するのか

結合対象の画像には、アプリの画面キャプチャ、社内ドキュメントのスクショ、顧客の LINE 履歴など機密性の高いものが混ざりがちです。結合対象を全部まとめてサーバーに上げるということは、それだけの量の機密情報を一度に外に出すことと同じです。

Zerosend は結合処理そのものがローカルで動くため、何枚投入しても 1 枚のファイルも外に出ません。

使い方

1. /tools/image-merge を開く
2. 画像を複数枚ドラッグ&ドロップ
3. 結合方向を選ぶ (縦に連結 / 横に連結 / グリッド)
4. 順序が違う場合はドラッグで並べ替え
5. 「結合を開始する」をクリック
6. 1 枚の画像としてダウンロード

仕組み

• 各入力画像の寸法を計測
• 結合後の <canvas> サイズを計算 (縦連結なら幅は最大・高さは合計)
• 画像を順に drawImage で配置
• 幅/高さが揃わない場合は縦横比を保って自動センタリング
• canvas.toBlob() で PNG / JPEG として書き出し

全処理は Canvas API の組み合わせで完結します。100 枚程度の結合まで現実的です。

縦結合・横結合の使い分け

• 縦に連結: スマホのスクロールスクリーンショットをつなぐ、手順説明の連番画像をまとめる
• 横に連結: ビフォー/アフターを並べる、比較検討資料を 1 枚にする
• グリッド: 複数カットを整然と並べて SNS 投稿やカタログ素材にする

サイズが異なる画像は、余白を自動で埋めて揃えます。事前に 画像リサイズ で寸法を統一しておくと、余白なしにきれいに仕上がります。

使いどころ

• スクショ集約: アプリのフロー解説で、複数画面を 1 枚にまとめて Slack に貼る
• 比較画像: ビフォー/アフターを横並びで 1 枚に
• SNS 投稿: Instagram の 1 枚投稿でも複数カットを見せる
• 申請書類: 表紙と本文を 1 画像にまとめて提出

よくある質問

Q. 結合後のファイルサイズはどのくらいになりますか？ A. 入力枚数と解像度に比例して大きくなります。多数枚を結合した場合は 画像圧縮 で軽量化するのがおすすめです。

Q. 何枚まで結合できますか？ A. ツールに上限は設けていませんが、ブラウザのメモリに依存します。100 枚程度までは現実的に動作します。

Q. 画像サイズが違うものを結合するとどうなる？ A. 縦連結では幅を最大に合わせ、余白部分は透明 (PNG) または白 (JPEG) になります。事前に 画像リサイズ で揃えておくときれいに仕上がります。

Q. 間に余白を入れられる？ A. はい。境界の色と幅を指定できます。

Q. グリッドの行数・列数は指定できる？ A. はい。例えば 4 枚を 2×2 のグリッドに配置できます。

関連ツール

• 画像リサイズ — 結合前にサイズを揃える
• 画像圧縮 — 結合後の巨大ファイルを軽くする
• 画像 → PDF — 結合の代わりに PDF 1 枚にまとめる選択肢も