スクショ結合｜重なりを自動で見つけて縦に1枚へつなぐ
スクロールしながら撮った複数のスクリーンショットを、重なっている部分を探して取り除きながら1枚につなげます。継ぎ目ごとに何px重なっていたかが出て、px単位で打ち直せます。追従するヘッダーやフッターも別に検出します。
クリックまたはドラッグ＆ドロップで画像を選択（複数可）
JPEG / PNG / WebP・2枚以上 / 20枚まで / 合計200MBまで
つなげたい画像を2枚以上えらんでください
スクロールしながら撮ったスクショなら、重なりを探して除きます
このツールについて
使い方・特徴・補足情報
スクショ結合とは
スクショ結合は、何枚かの画像を縦か横に1列に並べて1枚にするツールです。
スクロールしながら撮った画面では、同じ行が2枚にまたがって写ります。このツールは重なっている部分を探し、あとの1枚から取り除きます。
取り除いた量は継ぎ目ごとにpxで出ます。数が合わないときは、その場で打ち直してください。
追従するヘッダーやフッターも別に探します。画像の枚数だけ同じ帯が並ぶのを防ぐためです。
決め手がないときは決めつけません。同じくらい一致する位置が他にあれば、その位置も画面に出します。
こんな人におすすめ
手順を画像で説明する人
楽になること
スクショを1枚にまとめる作業
避けたい手間
同じ行が2回出てしまうこと
解決できる困りごと
- つないだ画像に同じ行が2回出て、読む人が同じ場所を2度読む手間がなくなる
- 画像編集ソフトで重なりを目測しながら切り取る作業と、切りすぎて行が消える失敗が減る
- アプリの固定ヘッダーが枚数ぶん繰り返されて、手順の説明が読みにくくなるのを防げる
- つなぎ目がずれたまま配ってしまうことがなくなる。切った量が継ぎ目ごとに数で出るため
- 長い画面を1枚に収めるためだけにアプリを入れて、写真への権限を渡す必要がなくなる
使い方
- 画像をドラッグするか、ファイルを選びます。2枚以上をまとめて選べます。
- 並べる向きを縦か横から選びます。既定は縦です。
- 重なりの検出が終わるのを待ちます。継ぎ目ごとに重なりのpxが出ます。
- 「決め手がありません」と出た継ぎ目は、数値欄で打ち直します。
- 追従する帯が見つかったら、切るかどうかを選びます。
- プレビューで継ぎ目を確かめ、形式を選んで保存します。
使用例
スクロールして撮った3枚をつなぐ
iPhoneのスクショ3枚を縦に並べた例です。取り除いた量と出来上がりの寸法に注目してください。
入力
画像: 1,170 × 2,532 px × 3 枚
並べる向き: 縦 / 重なりを自動で除く: 使う
検出された重なり: 532 px（1↔2）・532 px（2↔3）
出力
元の合計: 7,596 px
除いた重なり: 1,064 px
出来上がり: 1,170 × 6,532 px（縮小なし）
くり返す模様で決め手がなくなる
同じ行が周期的に並ぶ画面の例です。採った値と、同じだけ一致した別の位置が両方出ます。
入力
20 行ごとに同じ模様がくり返す画像 2 枚
（実際に続いているのは 40 行ぶん）
出力
重なり: 20 px（ぴったり一致 / 平均の差 0.0）
決め手がありません: 40 px にも同じくらい一致する位置があります
20枚つなぐと長辺の上限で縮む
上限どうしがぶつかる例です。エラーにせず縮め、縮めたことと倍率を出します。
入力
画像: 1,170 × 2,532 px × 20 枚 / 重なりなし
出力の長辺の上限: 16,384 px
出力
出来上がり: 379 × 16,384 px
長辺が上限を超えるので 32.4% に縮めました
活用シーン
操作手順のスクショを1枚にまとめる
アプリの画面を数回に分けて撮り、縦につなげます。重なった行が消えるので、手順が続けて読めます。
長いWebページを1枚の画像で渡す
画面を送りながら撮った数枚をつなぎます。相手は1枚の画像を上から下まで見るだけで済みます。
チャットのやりとりを1枚にする
吹き出しがくり返す画面では、決め手がないと断ります。継ぎ目のpxを打ち直して合わせてください。
問い合わせに添付する画面をまとめる
複数の画面を1枚にすると、添付が1つで済みます。並び順は読んでほしい順に入れ替えられます。
ビフォーアフターを横に並べる
向きを横にすると、2枚が左右に並びます。高さがそろうので、比べたい位置が上下にずれません。
マンガのコマや図解を縦につなぐ
幅をそろえてから縦に並べます。重なりの検出を切れば、コマを詰めずにそのまま積み上げられます。
技術的な解説
補足: 仕組み
画像はcreateImageBitmapで読み、細長いcanvasへ描き直します。縦なら幅、横なら高さを96pxに縮めます。
見本は相対位置から取るので、幅が違う画像でも同じ場所を比べられます。
重なりはgetImageDataで読んだ明るさを1行ずつずらし、1本刻みで4,096本まで比べます。
届かないと分かった候補は途中で捨てます。2,532行でも10ミリ秒ほどです。
採るのはいちばん一致した位置で、同点なら小さいほうです。明るさは赤と緑を同じ値にするので、その1件だけ色つきで測り直します。
もっと詳しく
重なりが見つからないときに起きていること
重なりの判定は画素の明るさの比較です。同じ行でも、画素がそろっていなければ一致しません。
よくある原因は3つです。撮影中に画面が動いた、JPEGで保存し直して画素が変わった、影や追従バーが継ぎ目に掛かっている。
見つからない継ぎ目は、黙って続けて並べます。そのうえで「つながりが見つかりませんでした」と名指しします。
手で直すときは、2枚目の先頭の行を1枚目から探し、その行までの距離をpxで入れてください。
追従する帯と重なりを別々に扱う理由
画面の上下に固定されたバーは、スクロールしても動きません。つまり全部の画像に同じ帯が写ります。
重なりだけを探すと、この帯が邪魔をします。帯は必ず一致するので、本文が続いていない場所でも一致したように見えるからです。
このツールは先に帯を探し、落としてから重なりを探します。順番を逆にすると、重なりが実際より大きく出ます。
帯の長さは隣り合う2枚ずつで数え、全ペアの最小を採ります。1枚だけ帯が短いときに切りすぎないためです。
同じ模様がくり返す画面で決め手がなくなる理由
一覧の行や吹き出しが等間隔で並ぶ画面では、周期のぶんずらしても絵が一致します。
20行ごとにくり返す画面なら、20px・40px・60pxのどこで重ねても差が0になります。画素だけを見ている以上、この区別はつきません。
そこで、同じくらい一致する位置が他にあれば「決め手がありません」と出し、その位置も添えます。
採るのは小さいほうです。消しすぎて本文が消えるより、消し残して同じ行が2回出るほうが気づけるからです。
よくある質問
何枚まで一度につなげますか？
20枚までです。ただし出来上がりの長辺には上限があり、既定は16,384pxです。
1,170×2,532pxのスクショを20枚並べると50,640pxになるので、この上限で必ず縮みます。縮めたときは倍率を画面に出します。
重なりを消したくないときはどうしますか？
「重なりを自動で除く」を外すと、全部の継ぎ目が0pxになります。
ただし追従する帯は別の設定です。1画素も削りたくないときは「追従する帯」のチェックも外してください。
一部の継ぎ目だけ戻したいときは、その継ぎ目の数値欄に0を入れます。
つないだあと、継ぎ目がずれていました。
その継ぎ目の一致度を見てください。「一致しませんでした」なら自動では見つかっていないので、pxを手で入れます。
「決め手がありません」と出ているときは、添えてある別の位置を試すと合うことがあります。
画像はどこかへ送られますか？
選んだ画像はブラウザの中だけで処理され、サーバーへは送られません。結合もプレビューも端末の中で完結します。
なお、サイト自体はアクセス解析と広告を使っています。詳しくはプライバシーポリシーをご覧ください。
幅が違う画像を混ぜても大丈夫ですか？
大丈夫です。「大きさのそろえ方」で先頭・最大・最小のどれかに合わせると、幅がそろってから並びます。
そろえずに並べることもできます。そのときは足りない幅が背景色で埋まり、寄せ方を選べます。
横に並べるときも重なりを探しますか？
探します。向きを横にすると、左右の端どうしで同じ計算をします。
そろえる対象も高さに切り替わるので、設定を入れ直す必要はありません。
保存できる形式は何ですか？
PNG・JPEG・WebPの3つです。JPEGとWebPは品質を1〜100で指定できます。
文字が多いスクショはPNGが読みやすく、写真が多いならJPEGのほうが軽くなります。
関連記事
このツールの使い方や活用例をブログでも紹介しています。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。