「複数のスクリーンショットを1枚につなげて共有したい」「ビフォーアフターを横に並べて見比べられる画像を作りたい」——画像を1枚ずつ送ると相手が開く手間が増えるため、つなげて1枚にまとめたい場面は多くあります。
この記事では、画像結合の基本的なやり方から、横並び・縦並びの使い分け、すき間や背景色の設定、失敗しないコツまでを、初心者向けに解説します。ブラウザだけで完結する無料ツールも紹介します。
画像結合とは？レイアウトの2つの基本
画像結合は、複数の画像を1枚のキャンバス上に並べて、1つの画像ファイルにする処理です。並べる方向には2つの基本があります。
| 方向 | できること | 向いている場面 |
|---|---|---|
| 横並び | 画像を左から右に並べる | ビフォーアフターの比較、横長の連続した内容 |
| 縦並び | 画像を上から下に積む | スクロール撮影の連結、手順の説明 |
寸法の決まり：横並びなら「幅は各画像の合計＋すき間、高さは最も高い画像に合わせる」、縦並びなら「幅は最も広い画像、高さは合計＋すき間」になります。たとえば幅100pxと200pxの画像を8pxのすき間で横に並べると、幅は100＋200＋8＝308pxです。
各画像は元のサイズのまま配置されるため、縮小や拡大による画質の劣化はありません。サイズが大きく異なる画像を並べると余白が目立ちやすいため、事前にトリミングやリサイズで整えておくと、仕上がりがきれいになります。
結合の順番は、追加した順に固定されます。順序を間違えた場合は、該当する画像を削除して追加し直すと、正しい順序で並べ替えられます。サムネイルには番号が表示されるため、並びの確認もスムーズです。
用途別のおすすめ設定
| 用途 | 方向 | すき間 | 出力形式 |
|---|---|---|---|
| スクロール撮影の連結 | 縦並び | 0px | PNG |
| ビフォーアフター比較 | 横並び | 8〜16px | PNG または JPEG |
| 手順書・説明資料 | 縦並び | 8〜16px | JPEG（容量を抑える） |
| 透過画像の連結 | どちらでも | 0〜16px | PNG |
| 用途 | サイズの目安 |
|---|---|
| スクロール撮影の連結 | 縦並び、すき間0px |
| ビフォーアフター比較 | 横並び、すき間8〜16px |
| 手順書・説明資料 | 縦並び、すき間8〜16px |
| 透過画像の連結 | どちらでも、出力はPNG |
たとえば幅100pxと200pxの画像を8pxのすき間で横に並べると、幅は100＋200＋8＝308pxになります。すき間0なら画像がぴったりくっつき、連結したように見えます。
実践：スクリーンショットを連結する手順
もっとも多い用途が、スクロール撮影したスクリーンショットの連結です。スマホのスクロール撮影は1画面ずつ保存されることが多いため、複数枚を縦に並べて1枚の長い画像にします。
- スクリーンショットを順番に保存する: ファイル名に番号を付けると、後の順序確認が楽になります。
- 結合ツールに2〜10枚追加する: ドラッグ&ドロップでまとめて追加できます。追加した順番が結合順になります。
- 方向とすき間を指定して結合: 縦に並べる場合は「縦並び」を選択します。すき間は0〜100pxで指定できます（0ならぴったりくっつきます）。
- プレビューで確認してダウンロード: 仕上がりを確認し、PNGまたはJPEGで保存します。
すき間の使い方：スクリーンショットの連結なら0pxでぴったりくっつけると自然につながります。比較画像なら8〜16pxのすき間を空けると、それぞれの画像の範囲が分かりやすくなります。
背景色と透過の注意点
PNGで出力する場合は背景を透過にできますが、JPEGは透過を保持できないため、透過部分は白で塗りつぶされます。すき間に白を挟みたい場合も、JPEGなら自動的に白背景になります。透過が必要な場合はPNGを選択してください。
対応形式と注意点
PNG・JPG・WebP・GIF・BMPに対応しています。一方で、iPhoneで撮影した写真のHEIC形式には対応していないため、その場合は形式変換ツールでJPEGに変換してから結合します。また、画像の形式によっては透過の有無や色の見え方が変わることがあるため、結合後にプレビューで確認すると安心です。
処理はブラウザ内のメモリ上で行われるため、一度読み込んだ画像はオフラインでも結合できます。通信環境が不安定な場所でも、ページさえ開いてしまえば作業は続行できます。
画像数が多いときの注意：各画像は元のサイズのまま結合されるため、大量の高解像度画像を組み合わせると、出力サイズが大きくなり、デバイスによってはメモリ上限で失敗することがあります。事前にリサイズツールで縮小してから結合すると安定します。
便利な使い方の例
- チャットのスクロール記録: トーク履歴のスクロール撮影を数枚に分けて保存し、縦に連結して1枚にまとめる
- 商品の比較表: 異なる商品の写真を横に並べ、見比べるための1枚にする
- 不具合報告: 発生画面と設定画面のキャプチャをまとめて、サポートへ1枚で送る
- 手順書の画像づくり: 操作手順のキャプチャを番号順に連結し、マニュアルの1ページにする
縦長のスクロール撮影は、途中で画面がずれると連結したときに内容が重なることがあります。ずれを防ぐには、撮影の開始位置と終了位置を少し重ねて撮っておき、結合前にトリミングで調整するのが確実です。
また、比較画像では「どちらがどちらか」が分からなくならないよう、すき間を空けるか、画像内にラベルを入れておくと親切です。すき間の色は出力形式によって変わる点にも注意してください。PNGは透過のまま出力でき、JPEGでは白で塗りつぶされます。
- 手順書の画像づくり: 操作手順のキャプチャを番号順に連結し、マニュアルの1ページにする
縦長のスクロール撮影は、途中で画面がずれると連結したときに内容が重なることがあります。ずれを防ぐには、撮影の開始位置と終了位置を少し重ねて撮っておき、結合前にトリミングで調整するのが確実です。
ツールで画像を結合する
Tools Hubの画像結合ツールは、画像のドラッグ&ドロップだけで結合できるツールです。2〜10枚に対応し、横並び・縦並びの切り替え、すき間の幅指定、PNG（透過対応）・JPEGの出力形式選択ができます。追加した画像はサムネイルで順番を確認でき、削除もワンクリックです。処理はすべてブラウザ内で完結し、画像がサーバーへ送信されることはありません。
使い方（3ステップ）
画像を2〜10枚追加
画像結合ツールを開き、結合したい画像をドラッグ&ドロップします。サムネイルの×ボタンで個別に削除もできます。
方向とすき間を指定
横並びか縦並びを選び、すき間の幅を指定します。出力形式もPNGとJPEGから選べます。
結合してダウンロード
プレビューで仕上がりを確認し、ダウンロードボタンで保存します。
この記事で紹介したツール
画像結合ツール
2〜10枚の画像を横・縦に結合。すき間や背景色も指定でき、ブラウザで完結・無料です。
結合する前に画像をトリミングしたいときは画像トリミングツール、サイズを揃えたいときは画像リサイズツール、容量を減らしたいときは画像圧縮ツールがそれぞれ役立ちます。
まとめ
- 画像結合は複数の画像を1枚につなげる処理。横並びと縦並びの2つの基本レイアウトがある
- 横並びは幅の合計×最大高さ、縦並びは最大幅×高さの合計になる
- すき間は0px（連結）から指定でき、出力はPNG（透過対応）かJPEGを選べる
- スクロール撮影の連結には縦並び＋0px、比較画像には横並び＋すき間がおすすめ
- Tools Hubの画像結合ツールなら、ドラッグ&ドロップだけでブラウザから無料で結合できる
まずは2枚のスクリーンショットで試して、仕上がりを確認してみてください。
よくある質問
結合できる画像の枚数に上限はありますか？
2枚から10枚までです。追加した順番に並ぶため、順序を変えたい場合は一度削除して追加し直してください。
サイズの異なる画像を結合するとどうなりますか？
各画像は元のサイズのまま配置されます。横並びでは高さに余白が生じるため、事前に高さを揃えておくと、すき間なくきれいに並びます。
結合すると画質は劣化しますか？
PNGで保存すれば劣化しません。JPEGは保存時の圧縮でわずかに劣化しますが、品質を高めに設定すれば実用上の差はほとんどありません。
画像はサーバーに送信されますか？
いいえ。結合はすべてブラウザ内で完結し、画像がアップロードされることはありません。業務書類や個人情報を含む画像でも安心して利用できます。
