用語

スクリーンショットの結合

スクリーンショットの結合とは、1回では全体を撮れない内容を、重なりのある複数の画像から1枚の連続した画像へつなぐ処理です。

結合の仕組み

2枚以上のスクリーンショットに共通する範囲を設け、境目のない1枚の画像へまとめます。隣り合う画像から一致する画素領域を探し、正確に位置を合わせます。

手動で行う場合は、ページをスクロールしながら複数回撮り、前の画像と少なくとも20〜30%重なるようにします。ソフトウェアが重なった部分を調べ、文字の行、UIの境界、画像など、一致する特徴を探して縦または横にそろえます。重なった画素をなじませ、目に見える境目を減らします。

自動結合も原理は同じですが、手動操作を省きます。ツールがページを少しずつスクロールし、各位置で撮影し、位置合わせを実行します。結果は、内容全体を表す縦長または横長の1枚の画像になります。

仕上がりは、十分な重なり、同じビューポート寸法、変化しないページレイアウトの3点に左右されます。遅延読み込み、アニメーション、動的広告などによって撮影間に内容が動くと、一致する領域を見つけられないことがあります。

結合と標準のフルページ撮影の違い

ブラウザのDevToolsや専用ツールが備えるフルページ撮影は、ページ全体のDOMレイアウトを使い、利用者からは1回の操作で1枚の画像を作ります。複数画像の位置合わせを利用者が管理する必要はありません。

ただし、フルページ撮影が使えない、または対象によって安定しない場合があります。固定ヘッダー、追従ナビゲーション、フローティング要素は、ビューポートごとに撮ると毎回現れます。フルページ撮影機能ならページ全体の描画として処理できますが、手動結合では同じ要素が繰り返され、出力に重複することがあります。

フルページ撮影が問題なく使えるWebページなら、多くの場合はこちらが速く、位置合わせも不要です。結合は、デスクトップアプリ、モバイル画面、撮影APIへ連続したスクロール領域を渡せない独自環境など、標準のフルページ撮影を使えない場面で役立ちます。

Webサイトではまずフルページ撮影を検討し、アプリ、PDF、モバイル画面など、レンダラーが1枚の連続ページとして扱えない対象に結合を使うと、不要な位置ずれを減らせます。

結合が使われる場面

  • モバイルアプリのドキュメント: 画面をスクロールしながら複数回撮り、1枚へつないでドキュメントやアプリストア用の画像にします
  • 従来型アプリの撮影: DOMベースのフルページ撮影を使えないデスクトップアプリで、長い一覧、複数ページのフォーム、スクロールパネルを記録します
  • 横長の内容: ビューポートを越える表、ガントチャート、タイムラインを、左から右へ撮った画像からつなぎます
  • 比較レイアウト: 結合した2枚の画像を横に並べ、2つのページ全体を同じ画面で比べます。デザインレビューやリグレッション確認に使えます

よくある失敗

  • 重なりが足りない: 20%未満では、正確な位置合わせに使う情報が不足します。文字がずれ、境目が見え、結合自体が崩れることがあります。重なりには余裕を持たせます
  • ビューポート寸法が変わる: 撮影間にブラウザやアプリのウインドウを変えると、内容の配置も変わります。すべて同じビューポート幅と表示倍率で撮ります
  • 動的な内容を無視する: カルーセル、切り替わる広告、遅延読み込み画像が撮影間に変わると、ずれや重複が生じます。アニメーションを止め、内容の読み込みを待ってから撮ります
  • フルページ撮影が使えるのに結合する: 対応ツールで安定してフルページを描画できるなら、そちらを使います。結合は工程と品質上のリスクを増やすため、標準の方法を使えない環境に限るのが基本です

よくある質問

スクリーンショットの結合とスクロールスクリーンショットは同じですか?

同じではありません。スクロールスクリーンショットは、ページ全体を1回の自動処理で撮影します。結合は、多くの場合は手動で撮った複数の画像から重なる範囲を合わせ、1枚へつなぎます。

スクリーンショット同士が重なっていないとどうなりますか?

共通する内容がなければ、結合処理はどこでつなぐか判断できません。境目、位置ずれ、空白が残ることがあります。連続する画像には少なくとも20〜30%の重なりを設けます。

倍率が異なるスクリーンショットを結合できますか?

基本的にはできません。すべて同じ表示倍率、解像度、ビューポート幅で撮影する必要があります。倍率を混ぜると、位置合わせでは補正できない不一致が生じます。

横に長い内容も結合できますか?

はい。画像は縦、横、グリッド状に並べて位置合わせできます。横長の表、タイムライン、パノラマ表示は、縦長の内容を上から下へつなぐのと同じように、左から右へ撮った画像を結合できます。

出典

関連資料

スクリーンショットの結合とは | 用語集 | Shotomatic