imgglide

複数の画像を1枚にまとめる

ビフォーアフターを並べる、スクリーンショットを縦長の1枚につなぐ、商品写真をグリッドに並べる。画像をドラッグして順番を決めれば、設定を変えるたびにプレビューが描き直されます。

画像を 2〜50 枚入れてください。JPG・PNG・WebP・HEIC などに対応しています。

またはここにファイルをドロップ

ファイルはお使いの端末の中で処理され、アップロードされることはありません。

使い方

  1. 2〜50枚の画像をページにドロップするか、「ファイルを選ぶ」を押します。
  2. 「並べ方」で、横一列なら「横に並べる」、縦一列なら「縦に並べる」、コラージュなら「グリッド」を選びます。グリッドでは、「列の数」を2〜6から選び、「マスへの収め方」も決めます。
  3. 順番が合うまで、行のつまみをドラッグするか、「上へ」「下へ」を押して入れ替えます。横一列は左から右へ、縦一列は上から下へ、グリッドは1行ずつ順に並びます。
  4. 「画像の間隔(px)」「外側の余白(px)」「角の丸み(px)」を決めたら、「背景」を選びます。
  5. 「保存形式」を決めたら、「画像を結合」ボタンで1枚に仕上げ、「ダウンロード」で受け取ります。

主な機能

  • 横一列・縦一列・グリッド

    横一列では、すべての画像が最も低い1枚の高さにそろえられ、縦一列では、最も幅の狭い1枚の幅にそろえられます。どちらも拡大はしないので、小さな画像が1枚あると、全体のサイズがそれに決まります。グリッドの列数は2〜6です。

  • グリッドのマス:埋めるか、収めるか

    マスの形は、画像の多くに共通する形に合わせて決まるので、横長の写真が中心なら横長のマスになります。初期設定の「マスを埋める」は、マスをいっぱいに覆い、はみ出した部分を中央から切り落とします。「全体を表示」はピクセルを1つも切らず、形の違う画像のまわりには背景が見えます。

  • 間隔と余白、角の丸み

    画像の間隔は0から100pxの範囲、外側の余白と角の丸みは200pxまで指定できます。角は1枚ずつ丸められるので、コラージュは別々のカードを並べたような見た目になります。3つとも、単位は仕上がり画像のピクセルです。

  • 背景は自由に選べる

    クリーム、薄いグレー、黒、白の色見本があり、それ以外の色はカラーピッカーで指定できます。背景のあるページに載せる画像には「透明」が使えます。透明はPNGとWebPでは保たれ、JPGでは白に変わります。

  • 一覧で並べ替え・削除

    各行には、ドラッグ用のつまみ、「上へ」「下へ」ボタン、「外す」ボタンが付いています。少しだけ動かしたいときは「上へ」「下へ」が便利で、つまみは矢印キーでも動かせます。「ファイルを追加」を押すと末尾に画像が加わり、50枚が上限です。

  • 仕上がりサイズがわかるプレビュー

    プレビューは縮小したコピーから描かれるので、スライダーをドラッグしてもついてきます。その下には仕上がりのピクセルサイズが1行で表示され、画像のセットがブラウザの扱える大きさを超えるときは「上限に合わせて縮小」と添えられます。「ダウンロード」ボタンには、ファイルサイズが出ます。

知っておくと便利なこと

横一列は、ビフォーアフターや、同じ商品を別の角度から撮った2枚に向いています。縦一列は、長いチャットやバグ報告のスクリーンショットをつなぐのにいちばん手早い方法で、幅がそろっていれば拡大も縮小もせずにつながります。グリッドは、出品用の写真、写真の一覧表、コラージュ向きで、形の違う画像でも「マスを埋める」ならマスの大きさがそろいます。

4000 × 3000の写真12枚を横一列にすると、幅は約48,000pxになりますが、ブラウザのキャンバスは、全体で16.7メガピクセル、1辺で16,383pxが上限です。これを超えると画像がまとめて縮小され、間隔・余白・角の丸みは指定したピクセル値のまま残ります。縮小したときは、プレビュー下の行でお知らせします。

ファイルを軽くしたいときは、JPGかWebPを選んで「画質」を下げます(初期値は90)。PNGは劣化のない形式で、画質のスライダーはなく、スクリーンショットや透明を残したい画像に向いています。保存されるファイルの名前は、形式に応じてmerged-image.jpg、merged-image.png、merged-image.webpのいずれかで、EXIFやGPSの情報は含まれません。描画はすべてブラウザの中で行われ、アップロードはありません。

よくある質問

2枚の写真を横に並べるには?

2枚を追加して「画像を結合」を押すだけです。最初の並べ方は「横に並べる」で、元の大きさが違っても同じ高さに調整されるので、上下の端がきれいにそろいます。

複数の写真をコラージュにするには?

「グリッド」を選んで「列の数」を決めます。数ピクセルの間隔を空け、角を少し丸めて、写真に合う背景を選びましょう。写真の形がまちまちなら、「マスへの収め方」は「マスを埋める」のままにしておきます。

スクリーンショットを縦に長い1枚につなげるには?

「縦に並べる」を選び、一覧でスクリーンショットを読む順に並べます。「画像の間隔(px)」を0にすると継ぎ目なく接し、端をきれいに出したいなら余白も0のままにします。

背景を透明にして保存できますか?

できます。「背景」で「透明」を選び、保存形式にはPNGかWebPを選んでください。透明な部分は、プレビューでは市松模様に見えます。JPGは透明を持てないので、背景が白に変わります。

結果が元の画像より小さくなるのはなぜですか?

多くの場合は、横一列でいちばん低い画像、縦一列でいちばん幅の狭い画像が全体のサイズを決めるためです。拡大はしません。さらにブラウザの上限にかかると、プレビュー下の行に「上限に合わせて縮小」と出ます。

HEICの写真も使えますか? 一度に何枚まで入れられますか?

スマホのHEIC写真も、ほかのファイルと同じように使えます。最初のHEICを追加したときに、小さな変換プログラム(約3MB)が1回だけ読み込まれます。1つのセットに入れられるのは50枚までで、それを超えて追加すると最初の50枚だけが残り、メッセージでお知らせします。