Zerosend
·6 分

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

Zerosend の画像結合ツールは、複数の画像をサーバーに送らずブラウザ内で縦/横に連結します。比較画像・ビフォーアフター・スマホのスクリーンショット集約に。Zerosend 編集部が解説。

#画像 #結合 #ツール

スマホのスクリーンショットを複数枚まとめて 1 枚の縦長画像にしたい。商品のビフォーアフター画像を 1 枚で見せたい。SNS に 4 コマ風に並べて投稿したい。

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 枚にまとめて Slack に貼る
  • 比較画像: ビフォー/アフターを横並びで 1 枚に
  • SNS 投稿: Instagram の 1 枚投稿でも複数カットを見せる
  • 申請書類: 表紙と本文を 1 画像にまとめて提出

よくある質問

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

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

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

関連ツール

© Zerosend Editorial ← Blog Index

関連記事

·6 分

HEIC を JPG に変換する — /tools/heic-to-jpg の思想と使い方

iPhone で撮った HEIC 画像を Windows / Android や古いシステムで開けるよう JPG に変換するツール。サーバーに送らずブラウザ内で変換する仕組みと注意点を Zerosend 編集部が解説。

HEIC画像iPhoneツール
·7 分

画像形式変換をブラウザ内で — /tools/image-convert の思想と使い方

Zerosend の画像形式変換ツールは、JPEG / PNG / WebP / AVIF をサーバーに送らず相互変換します。用途別の形式選び、透過・圧縮率の違いを Zerosend 編集部が整理します。

画像変換WebPツール
·6 分

画像の切り抜き・回転・反転をブラウザ内で — /tools/image-edit の思想と使い方

Zerosend の画像編集ツールは、切り抜き・回転・反転をサーバーに送らず端末内で処理します。証明写真・SNS アイコン・商品画像のトリミングで使える基本操作を Zerosend 編集部が解説。

画像編集ツール