ビフォーアフターのスクリーンショット

ビフォーアフターのスクリーンショットは、同じ表示を異なる時点または状態で撮った2枚の画像です。変更、改善、意図しない後退を見つけるために使います。

Related workflow terms: スクリーンショット比較.

変更前後の比較が役立つ理由

前の状態がなければ、変更を評価するのは困難です。現在のページを撮った1枚だけでは、今の見た目は分かっても、何が変わったかは分かりません。現在と以前の状態を並べれば、見る人が前の画面を覚えていなくても違いを確認できます。

この分かりやすさから、ビフォーアフター画像は見た目の変化を伝える方法としてよく使われます。左から右、または上から下へ見るだけで、違いを把握できます。文章だけで変更点を説明するより、実際の変化を直接示せます。

ただし、比較の価値は撮影条件がそろっているかどうかで決まります。画像の寸法、ズーム率、スクロール位置が異なると、意図した変更と偶然の差を区別できません。表示幅、ブラウザ、コンテンツの状態を同じにし、確認したい変更だけを変える必要があります。

ビフォーアフター画像を使う場面

• デザインレビュー： 改修前後のページを並べ、関係者が直接比較できるようにします
• バグ修正の確認： 壊れた状態と修正後をチケットへ添付し、問題を再現しなくても解消を確認できるようにします
• リリースノート： バージョン間の新機能やUI改善を、見た目の変化として示します
• A/Bテストの記録： 各ユーザー群へ表示した2つの案を保存します
• Webサイト監視： 一定間隔の自動撮影で時系列を作り、任意の2時点を比較して、いつ何が変わったか確認します
• クライアント向け成果物： 問題や以前のデザインと改善後を並べ、作業の結果を具体的に示します

比較しやすい画像を撮る方法

目的は変更点だけを分離することです。確認する項目以外は、両方の画像で同じにします。

• 表示幅を固定する。 幅と高さを数値で指定し、両方に同じ値を使います。数ピクセル違うだけでもレイアウトが動き、比較を邪魔します。
• スクロール位置を合わせる。 同じ要素までスクロールするか、アンカーを使って同じ部分を表示します。
• 同じブラウザとデバイスを使う。 ブラウザが異なると、フォント、間隔、色の描画もわずかに変わります。その差が誤った変更に見えます。
• 必要に応じて同じ時間帯に撮る。 ライブ情報、時刻で変わるバナー、個別表示などは撮影時刻によって変化します。
• PNGを使う。 可逆圧縮なら正確なピクセル情報が残ります。JPGの圧縮による乱れは、実際にはない変化に見える場合があります。

自動撮影では、同じURL、表示幅、設定を毎回適用できます。手動で細かく調整しなくても、直接比較できる画像を作れます。

実際のリリース記録やWebサイト監視では、URL、表示幅、撮影日と一緒に画像を保管します。周辺情報があれば、あとで確認する人にも信頼できる記録になります。

よくある失敗

• 構図が一致していない。 変更前後で表示幅が異なると、比較の意味がなくなります。表示幅によるレイアウトのずれが、実際の変更より目立ちます。
• 変更前を撮り忘れる。 変更を公開したあとでは、以前の状態が失われます。作業後ではなく作業前に基準画像を撮ってください。継続的な監視では、基準画像の撮影を自動化します。
• 動的な内容を無視する。 広告、カルーセル、時刻、個別表示は、デザインを変えていなくても画像ごとに異なります。動的な領域を隠すか比較から除外します。
• ラベルなしで並べる。 2枚を並べただけでは、どちらが変更前か判断できません。「変更前」「変更後」と明記するか、日付やバージョン番号を付けます。