[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"blog-tag-ja-merge":3},[4],{"id":5,"title":6,"author":7,"body":8,"category":238,"coverImage":239,"description":240,"draft":241,"extension":242,"locale":243,"meta":244,"navigation":245,"noindex":241,"path":246,"publishedAt":247,"seo":248,"slug":249,"stem":250,"tags":251,"updatedAt":247,"__hash__":255},"blog\u002Fblog\u002Fimage-merge-intro.md","複数画像を 1 枚にまとめる — \u002Ftools\u002Fimage-merge の思想と使い方","Zerosend Editorial",{"type":9,"value":10,"toc":227},"minimark",[11,15,23,27,35,38,41,68,71,100,103,107,127,135,138,164,167,178,184,193,199,205,208],[12,13,14],"p",{},"スマホのスクリーンショットを複数枚まとめて 1 枚の縦長画像にしたい。商品のビフォーアフター画像を横並びで 1 枚にしたい。操作マニュアルの手順画像を縦に並べて 1 ファイルにまとめたい。比較画像や before\u002Fafter の資料作りで、画像を並べたいシーンは日常的に発生します。",[12,16,17,22],{},[18,19,21],"a",{"href":20},"\u002Ftools\u002Fimage-merge","Zerosend の画像結合ツール"," は、こうした「複数画像を 1 枚にまとめる」需要をブラウザ内で完結させます。",[24,25,26],"h2",{"id":26},"なぜブラウザ内で結合するのか",[12,28,29,30,34],{},"結合対象の画像には、アプリの画面キャプチャ、社内ドキュメントのスクショ、顧客の LINE 履歴など機密性の高いものが混ざりがちです。",[31,32,33],"strong",{},"結合対象を全部まとめてサーバーに上げる","ということは、それだけの量の機密情報を一度に外に出すことと同じです。",[12,36,37],{},"Zerosend は結合処理そのものがローカルで動くため、何枚投入しても 1 枚のファイルも外に出ません。",[24,39,40],{"id":40},"使い方",[42,43,44,53,56,59,62,65],"ol",{},[45,46,47,52],"li",{},[18,48,49],{"href":20},[50,51,20],"code",{}," を開く",[45,54,55],{},"画像を複数枚ドラッグ&ドロップ",[45,57,58],{},"結合方向を選ぶ (縦に連結 \u002F 横に連結 \u002F グリッド)",[45,60,61],{},"順序が違う場合はドラッグで並べ替え",[45,63,64],{},"「結合を開始する」をクリック",[45,66,67],{},"1 枚の画像としてダウンロード",[24,69,70],{"id":70},"仕組み",[72,73,74,77,84,91,94],"ul",{},[45,75,76],{},"各入力画像の寸法を計測",[45,78,79,80,83],{},"結合後の ",[50,81,82],{},"\u003Ccanvas>"," サイズを計算 (縦連結なら幅は最大・高さは合計)",[45,85,86,87,90],{},"画像を順に ",[50,88,89],{},"drawImage"," で配置",[45,92,93],{},"幅\u002F高さが揃わない場合は縦横比を保って自動センタリング",[45,95,96,99],{},[50,97,98],{},"canvas.toBlob()"," で PNG \u002F JPEG として書き出し",[12,101,102],{},"全処理は Canvas API の組み合わせで完結します。100 枚程度の結合まで現実的です。",[24,104,106],{"id":105},"縦結合横結合の使い分け","縦結合・横結合の使い分け",[72,108,109,115,121],{},[45,110,111,114],{},[31,112,113],{},"縦に連結",": スマホのスクロールスクリーンショットをつなぐ、手順説明の連番画像をまとめる",[45,116,117,120],{},[31,118,119],{},"横に連結",": ビフォー\u002Fアフターを並べる、比較検討資料を 1 枚にする",[45,122,123,126],{},[31,124,125],{},"グリッド",": 複数カットを整然と並べて SNS 投稿やカタログ素材にする",[12,128,129,130,134],{},"サイズが異なる画像は、余白を自動で埋めて揃えます。事前に ",[18,131,133],{"href":132},"\u002Ftools\u002Fimage-resize","画像リサイズ"," で寸法を統一しておくと、余白なしにきれいに仕上がります。",[24,136,137],{"id":137},"使いどころ",[72,139,140,146,152,158],{},[45,141,142,145],{},[31,143,144],{},"スクショ集約",": アプリのフロー解説で、複数画面を 1 枚にまとめて Slack に貼る",[45,147,148,151],{},[31,149,150],{},"比較画像",": ビフォー\u002Fアフターを横並びで 1 枚に",[45,153,154,157],{},[31,155,156],{},"SNS 投稿",": Instagram の 1 枚投稿でも複数カットを見せる",[45,159,160,163],{},[31,161,162],{},"申請書類",": 表紙と本文を 1 画像にまとめて提出",[24,165,166],{"id":166},"よくある質問",[12,168,169,172,173,177],{},[31,170,171],{},"Q. 結合後のファイルサイズはどのくらいになりますか？","\nA. 入力枚数と解像度に比例して大きくなります。多数枚を結合した場合は ",[18,174,176],{"href":175},"\u002Ftools\u002Fimage-compress","画像圧縮"," で軽量化するのがおすすめです。",[12,179,180,183],{},[31,181,182],{},"Q. 何枚まで結合できますか？","\nA. ツールに上限は設けていませんが、ブラウザのメモリに依存します。100 枚程度までは現実的に動作します。",[12,185,186,189,190,192],{},[31,187,188],{},"Q. 画像サイズが違うものを結合するとどうなる？","\nA. 縦連結では幅を最大に合わせ、余白部分は透明 (PNG) または白 (JPEG) になります。事前に ",[18,191,133],{"href":132}," で揃えておくときれいに仕上がります。",[12,194,195,198],{},[31,196,197],{},"Q. 間に余白を入れられる？","\nA. はい。境界の色と幅を指定できます。",[12,200,201,204],{},[31,202,203],{},"Q. グリッドの行数・列数は指定できる？","\nA. はい。例えば 4 枚を 2×2 のグリッドに配置できます。",[24,206,207],{"id":207},"関連ツール",[72,209,210,215,220],{},[45,211,212,214],{},[18,213,133],{"href":132}," — 結合前にサイズを揃える",[45,216,217,219],{},[18,218,176],{"href":175}," — 結合後の巨大ファイルを軽くする",[45,221,222,226],{},[18,223,225],{"href":224},"\u002Ftools\u002Fimage-to-pdf","画像 → PDF"," — 結合の代わりに PDF 1 枚にまとめる選択肢も",{"title":228,"searchDepth":229,"depth":229,"links":230},"",2,[231,232,233,234,235,236,237],{"id":26,"depth":229,"text":26},{"id":40,"depth":229,"text":40},{"id":70,"depth":229,"text":70},{"id":105,"depth":229,"text":106},{"id":137,"depth":229,"text":137},{"id":166,"depth":229,"text":166},{"id":207,"depth":229,"text":207},"tech",null,"Zerosend の画像結合ツールは、複数の画像をサーバーに送らずブラウザ内で縦\u002F横に連結します。比較画像・ビフォーアフター・スマホのスクリーンショット集約に。Zerosend 編集部が解説。",false,"md","ja",{},true,"\u002Fblog\u002Fimage-merge-intro","2026-04-20",{"title":6,"description":240},"image-merge-intro","blog\u002Fimage-merge-intro",[252,253,254],"画像","結合","ツール","BdOzeJZQnsoFfwi5pz3V87puNcR5EgH2JaJgn9GjCok",1777617518578]