画像結合ガイド：複数のスクリーンショットを1枚の長い画像に

結合が向いている場面

スマートフォンのスクロールスクリーンショットは、チャット履歴、長い Web ページ、商品詳細などで複数枚に分かれます。まとめて送ったり 1 つの記録として残したりするなら、縦に結合して戻すのが自然です。手順やチュートリアル、時系列の説明も、縦に並べたほうが流れを追いやすくなります。

横方向の結合は比較に向いています。部屋のビフォーアフター、2 つの商品の正面、同じ文章の異なる言語などです。EC の詳細ページでは、複数アングルの商品画像を縦に積むこともよくあります。内容を続けて読ませたい、または並べて比べたいときは、画像を分けたままより 1 枚にまとめたほうが便利です。

ずれと書き出し失敗を避ける方法

まず順序を決めます。多くのツールはファイル名ではなく、選択した順、ドロップした順に並べます。選ぶ前に 01、02 のように名前を付けておくと安全です。縦結合では、幅が違う画像は通常、共通の幅に等比縮小され、余った部分は背景色で埋まります。背景色を画像の端に近い色にすると、継ぎ目が目立ちにくくなります。

長い画像で問題になるのは canvas の高さです。枚数が増え、出力幅が大きくなるほど総ピクセル数が増え、ブラウザーの上限を超えると失敗したり、下半分が空白になったりします。出力幅を小さくする、1 回に結合する枚数を減らす、上下 2 つに分けて書き出す、といった対処で解決することが多いです。

• 選択前に 01、02 と改名しておく
• 幅を揃え、端に近い背景色を選ぶ
• 長すぎる場合は分割して書き出す

代替手段と、結合しないほうがよい場合

各画像に個別の見出し、枠、矢印、異なる余白を付けたいなら、結合ツールは向きません。多くの場合、設定できるのは全体の余白と背景色だけです。そうしたレイアウトにはデザインソフトや文書ツールを使ってください。各ページを独立させたい内容なら、1 枚の超長い JPG より PDF のほうが適しています。

結合では幅の違う画像が再サンプリングされ、透明部分が背景色で埋まることもあります。画質にこだわる素材では注意が必要です。Web サイトでも、1 枚の巨大な画像で複数画像を置き換えるのは、読み込みやアクセシビリティの面で不利です。長い画像は SNS 共有や保管向けで、正式なページレイアウトには向きません。