Before After Screenshot

Before/Afterのスクリーンショットは、同じ対象を変更の前と後に撮影した2枚1組の画像です。2枚を左右に並べるか、上下に重ねるか、スライダー付きのオーバーレイで表示すると、違いが一目で分かります。

公平な比較では、変更箇所以外の条件をすべて揃えます。2枚とも、撮影範囲、ビューポートのサイズ、ピクセル密度、スクロール位置、アプリの状態（同じサインインアカウントや同じテストデータなど）を揃える必要があります。2枚目の画像が数ピクセルでもずれると、変更のない部分もピクセル比較では異なって見えます。

Before/Afterが重要な理由

単一のスクリーンショットは状態を示します。2枚1組は変更を示します。レビュー担当者、顧客、管理者が判断する際に必要なのは、通常この変更の情報です。また、変更前の画面の状態も記録されます。変更後に同じ状態を再現するのは困難です。

Before/Afterのスクリーンショットの用途

• 画面を刷新したことを示すリリースノートや変更履歴。
• バグ報告と修正の確認。
• コントラスト修正などのデザインやアクセシビリティのレビュー。
• サイト更新のクライアント向けレポート。

効果的なBefore/Afterの撮影方法

1. 変更をリリースする前に、「Before」の画像を撮影します。
2. ウィンドウサイズ、範囲、ズーム倍率、テーマ、テストデータを記録します。
3. 同じ設定で「After」の画像を撮影します。
4. 両方を同じ形式で書き出し、同じラベルを付けて提示します。

Webページの場合は、同じURL、Device、Area の設定で Website Capture を2回実行します。デスクトップアプリの場合は、Auto Captureの Custom Area ソースを使います。ピッカーは保存された範囲で開くため、2回目の撮影も同じ範囲になります。

よくある間違い

• Retinaの撮影と1倍の撮影を比較する。ピクセルのサイズが異なるため、すべてのピクセルが違って見えます。
• 撮影の間にブラウザのズーム、テーマ、ウィンドウサイズを変更する。
• 変更が公開されてから「Before」を撮影しようとして、撮り忘れる。
• 2枚の画像を異なる範囲で切り抜く。

同じスクリーンショットを繰り返し撮りますか？

URLリストを Webサイトのスクリーンショット自動化 に保存しておき、リリースの前後に再実行してください。

よくある質問

比較用の2枚にはJPGとPNGのどちらを使うべきですか？

PNGを使ってください。非可逆圧縮では小さな差異が生じ、ピクセル比較でその差異が表示されてしまいます。

わずかな違いはどのように見つけますか？

2枚の画像を Compare Images に読み込むと、変更されたピクセルが強調表示されます。

出典

• Screenshot（Wikipedia）

関連リソース

• Website Captureのオプション: デバイス、範囲、待機の設定。
• キャプチャソース: 保存したCustom Areaの再利用。
• Stitch Screenshots: 2枚の画像を1つのファイルに結合します。