🖼 画像の連結（縦・横に結合）

画像の連結は、複数の画像を縦または横につなげて1枚の画像にまとめるツールです。ビフォーアフターの比較画像づくり、複数のスクリーンショットを1枚にまとめる、商品写真を並べた一覧画像を作る、といった場面で役立ちます。読み込んだ画像はサムネイル付きの一覧で表示され、上下移動と削除で自由に並べ替えられます。処理はすべてお使いのブラウザ内（Canvas）で行われ、選んだ画像がサーバーに送信されることはありません。

連結方向は「縦（上から下へ）」と「横（左から右へ）」の2通りです。縦連結は、縦長のスクリーンショットや工程の流れを上から順に見せたいとき、Before/Afterを上下に並べたいときに向いています。横連結は、複数のカットを横一列に並べて比較したいときや、パノラマ風に横へつなげたいときに便利です。作りたい見せ方に合わせて方向を選んでください。

きれいに連結する鍵が「サイズの揃え方」です。幅も高さもバラバラな画像をそのままつなぐと段差が出て不格好になります。本ツールは、縦連結なら各画像の幅を、横連結なら各画像の高さを、最小・最大・指定値のいずれかにそろえてから連結します。サイズをそろえる際は縦横比を保ったまま拡大・縮小するため、画像がゆがむことはありません。基準を「最大」にすると小さい画像が引き伸ばされて粗くなることがあるので、粗さが気になるときは「最小」を選んでください。

すき間と背景色で仕上がりの印象を調整できます。すき間(px)を0にすると画像どうしがぴったり密着し、値を大きくするほど画像の間に余白があきます。背景色は、そのすき間や余白部分に入る色で、白・黒・透過・カスタム(HEX)から選べます。透過を選ぶと余白部分が透明になり、他の背景に重ねやすい素材になります。ただし透過に対応しない JPEG では透過部分が白または黒に置き換わるため、透過を残したい場合は PNG か WebP を選んでください。

連結する枚数やサイズが多いと、生成後の画像がとても大きくなることがあります。極端に大きな画像はブラウザで描き出せなかったり、表示・共有がしづらくなったりするため、本ツールでは連結後のサイズが上限を超える場合に注意を表示します。その際は、サイズの揃え方を「最小」にする、揃える値を小さく指定する、枚数を減らす、といった方法でサイズを抑えてください。出力形式は、透過を残すなら PNG／WebP、写真中心で軽くしたいなら JPEG／WebP が目安です。

本ツールはブラウザだけで完結する点が特長です。画像の読み込み・連結・書き出しはすべて端末内で処理され、ネットワークに画像データが出ていきません。プライバシーが気になる写真や社内資料のスクリーンショットでも安心して使え、オフラインでも動作します。ファイル名などの入力はそのまま文字として表示するだけで、ページの動作に影響しないよう扱っています。