複数の画像を1枚に結合

「横に並べる」は、画像を左から右へ1列に並べます。ビフォーアフターや2つのデザイン案の比較、SNSに2枚の写真を1枚で投稿したいときなど、形の近い写真2〜3枚に向いています。4枚以上になると横に長くなりすぎ、スマホの画面では1枚1枚がとても小さく見えます。

「縦に並べる」は、画像を上から下へ1列に積み重ねます。LINEのトーク画面のスクリーンショット、手順の説明、何回かに分けて撮った長いページなどをつなげるのにぴったりです。縦長の写真を縦に並べると極端に長くなるため、その場合は横並びかグリッドのほうが見やすくなります。

「グリッド」は、4枚以上の画像を行と列に並べます。列数が「自動」なら、3枚までは1行、4枚は2×2、9枚は3×3、20枚は5列×4行になります。2〜6列を自分で指定することもできます。最後の行が埋まらないときは、「最後の行」で左寄せ・中央・右寄せを選べます。

クイックスタートは、これらのレイアウトへの近道です。「2枚を横並び」と「3枚を横一列」は高さをそろえた横並び、「2×2グリッド」は同じ大きさのマスが2列、「前後比較」は2枚に「ビフォー」「アフター」のラベルを付けます。変わるのは並べ方だけで、背景・余白・ラベルの文言はそのまま残ります。

写真のサイズがそろっていることはまれで、4,000pxの写真と1,200pxのスクリーンショットを手作業で合わせるのは面倒です。横並びでは「高さをそろえる」ですべての画像を同じ高さにし、上下の端を一直線にそろえます。縦並びでは「幅をそろえる」で左右の端をそろえます。縦横比は常に保たれるので、画像が引き伸ばされることはありません。

「基準」では、どの画像の高さや幅に合わせるかを選びます。初期設定の「いちばん小さい画像」では、すべての画像がいちばん小さい写真に合わせて縮小されるので、拡大される画像はなく、どれもくっきりしたままです。「いちばん大きい画像」では小さい画像が拡大されるため、仕上がりは大きくなりますが、ぼやけて見えることがあります。

「元のサイズ」は、各画像をそのままのピクセル数で使います。小さい画像の横にできる空きは背景で埋まり、「配置」で横並びなら上・中央・下、縦並びなら左・中央・右を選べます。拡大縮小すると文字がにじむスクリーンショットには、この設定が最適です。

グリッドでは、すべてのマスが同じ形になります。「自動」は中央値にあたる画像の形を使うので、縦長の写真の中に横長のパノラマが1枚混ざっても、全体の形は変わりません。1:1・4:5・16:9を選べば、正方形・縦長・横長のマスに固定できます。「埋めて切り抜く」はマスいっぱいに画像を広げてはみ出した部分を切り落とし、「全体を収める」は画像を欠けさせずに収めて、形が合わない部分に背景を残します。「マスのサイズの基準」は「基準」と同じく、いちばん小さい画像かいちばん大きい画像に合わせます。

並べるのではなく重ねたいときは、モードを「重ねる」に切り替えます。仕上がりは背景画像と同じサイズになり、レイヤーが背景の外にはみ出した部分は切り取られます。

1. まず背景にする画像、次に上に重ねる画像を追加します。一覧の1枚目が背景、続く5枚がレイヤー1〜5になります。あとのレイヤーほど手前に表示されるので、どれを前面に出すかはサムネイルの順番で入れ替えます。

2. プレビュー上でレイヤーをドラッグして位置を決めます。背景の端や中央に近づくとスナップし、ガイド線が表示されます。Altキーを押しながらドラッグすれば自由に配置できます。タッチ画面では指で動かせます。

3. 「サイズ」で背景の幅に対する割合を1〜200%で指定し、「回転」で向きを、「不透明度」で透け具合を調整します。1pxだけ動かしたいときは、レイヤーを選択して矢印キーを押します。Shiftキーを押しながらなら1回で10px動きます。

4. 下の画像を隠すのではなく混ぜ合わせたい場合は描画モードを選び、ダウンロードします。「レイヤーをリセット」を押すと、選択中のレイヤーが最初の位置に戻ります。

不透明度は、レイヤーがどれだけ見えるかを決めます。100%なら背景を完全に覆い、50%なら2枚が半分ずつ混ざります。レイヤーを背景と同じ形にしてサイズを100%にし、不透明度を下げると、二重露光のように2枚の画像が溶け合います。透け具合はレイヤー全体で均一で、グラデーションで徐々に消えていくような効果はありません。

描画モードは、レイヤーと下の画像をどう混ぜるかを決めるもので、多くの画像編集ソフトにある同名のモードと同じ標準的な計算式を使っています。まず覚えておきたいのは「乗算」と「スクリーン」です。乗算は白を消すので、白い紙にスキャンしたサインやロゴを写真に乗せても白い四角が残りません。スクリーンは黒を消すので、黒い背景で撮った花火や光、星空が自然になじみます。6つのモードの違いは下の表で比較しています。

「ロゴ・透かし」は、選択中のレイヤーを四隅か中央に、背景の幅の5分の1・不透明度70%で、端から少し離して配置します。透かしを入れるときの定番の設定です。ロゴは背景が透明なPNGだと、マークだけが表示されてきれいに仕上がります。JPGのロゴには塗りつぶされた背景があり、PNGに変換しても消えません。先に背景を透過するか、白地に暗い色のロゴならレイヤーを「乗算」にしてください。

このツールで重ねられるのは画像で、文字は入れられません。写真に文字の透かしを入れるなら写真編集を、書類の全ページに透かしを入れるならPDFに透かしを追加を使ってください。

背景は、画像の間隔、枠、マスを埋めきらない画像の横にできる空きを塗りつぶします。白と黒はワンクリックで選べ、「色を指定」で好きな色に、「透明」でこれらの部分を透明にできます。プレビューの市松模様は透明なピクセルを表しています。

元の画像に含まれる透明部分もそのまま保たれます。PNGのロゴや切り抜いた素材は、どこに置いても透明のままです。背景を透明にして角を丸めると、角が本当に丸い画像になり、スライドやWebページに置いてもすっきり見えます。

PNGは劣化がなく透明部分も保てるので、スクリーンショットや図版、背景が透明な画像に向いています。JPGは写真をいちばん軽く保存できますが、透明を扱えないため、透明部分は白になります。WebPは透明部分を保てて、たいていPNGより軽くなります。仕上がりに透明部分がある場合や写真以外の画像が含まれる場合はPNG、すべて写真の場合はJPGが最初に選ばれますが、どちらも自由に変更できます。

アニメーションGIFは、仕上がりが静止画のため1フレーム目が使われます。iPhoneのHEIC写真やAVIFもほかの画像と同じように開け、結合した画像はPNG・JPG・WebPで保存できます。

プレビューは、設定を変えるたびにすぐ描き直せるよう縮小したコピーを使っています。ダウンロードするファイルは元の画像からフル解像度で作り直すため、プレビューの低い解像度がファイルに残ることはありません。

初期設定の「いちばん小さい画像」では写真は縮小されるだけなのでくっきりしたままで、「元のサイズ」ではそもそも拡大縮小しません。画質が落ちるのは、「いちばん大きい画像」や元のサイズより大きくしたレイヤーで拡大したときだけです。ブラウザは、ファイルにない細部を作り出すことはできません。

JPGとWebPは、変更しなければ画質92で保存されます。写真なら元画像とほとんど見分けがつかない画質で、スライダーで50〜100の間で調整できます。PNGは常に劣化しません。ファイルが重すぎる場合は、あとから画像圧縮にかけるか、サイトが指定するサイズに画像をリサイズしてください。

ブラウザのメモリ不足を防ぐため、非常に大きな仕上がりには上限があります。パソコンでは4,000万画素または一辺16,384px、スマホやタブレットでは約1,670万画素です。これを超えるレイアウトは全体が縮小され、その旨と本来のサイズが表示されます。写真はEXIFの向き情報に従って正しい向きに直され、ファイルは新しく作られるため、カメラの情報や位置情報（GPS）は引き継がれません。

結合する前に、画像の形をそろえておきましょう。4:3の写真どうしなら横にぴったり並びますが、4:3と9:16を並べると空きができるか、切り抜かれてしまいます。画像を切り抜くで、先に同じ縦横比にそろえておけます。

ビフォーアフター画像では、構図をまったく同じにして元の写真を先に置き、「高さをそろえる」とラベルを使います。白か黒で10〜20pxの間隔を入れると区切りがはっきりし、間隔がないと2枚が1枚の写真のように見えます。

間隔・枠・角の丸みは、仕上がり画像のピクセル単位です。同じ20pxでも、4,000pxの写真どうしの間では細く、小さなスクリーンショットどうしの間では太く見えるので、数値ではなくプレビューを見て判断してください。

人物や商品を別の背景に合成したいときは、背景透過で切り抜いてから、「重ねる」モードで新しい背景を1枚目、切り抜いた画像を2枚目に追加します。メルカリやSNSに投稿する前には、画像サイズ確認で縦横のピクセル数とファイルサイズを確かめておくと安心です。 単色の背景を使いたいときは、必要なサイズで白い画像や単色画像を作成し、1枚目に追加してください。