Webサイトのデザインを修正したあと、どこがどう変わったのか見比べたい。資料の改訂版で、直した箇所を確かめたい。2枚の画像を並べて目で比べても、小さな違いは意外と見落としてしまうものです。
この記事では、FlowPocketのスクリーンショット比較を使って、2枚の画像の違う部分を赤くハイライトする方法を紹介します。画像はアップロードされず、ブラウザの中だけで比較されます。
サイトのCSSを直すたびに、変更前後のスクリーンショットを左右に並べて「間違い探し」をしていました。機械に任せれば一瞬で、見落としもなくなります。
ピクセル単位の画像比較とは
このツールは、2枚の画像の同じ位置にあるピクセルの色を1つずつ比べて、違う部分を赤く表示します。文字や図形の意味を理解しているわけではなく、純粋に色の違いを検出する仕組みです。
そのため、次のような違いも見つけられます。
- 文字の色や太さが少しだけ変わった
- 余白が数ピクセルだけずれた
- アイコンや画像が差し替わった
- 一文字だけ文言が変わった
このツールでできること
- 2枚の画像（変更前・変更後）の違う部分を、赤くハイライトする
- 違う部分の割合と、違うピクセル数を表示する
- 「検出の敏感さ」で、細かな違いまで拾うかを調整する
- サイズが違う画像は、自動でサイズを合わせて比較する
- 画像をサーバーに送らず、ブラウザの中だけで比較する
使い方
STEP1. 2枚の画像を選ぶ
スクリーンショット比較を開き、「画像A（変更前）」と「画像B（変更後）」にそれぞれ画像を選びます。
STEP2. 検出の敏感さを確認する
「検出の敏感さ」は、初期値の20%のままで大抵うまくいきます。細かすぎる違いまで出てしまうときは下げ、見落としがあるときは上げてください。
STEP3. 比較する
「比較する」を押すと、違う部分が赤くハイライトされた画像と、違う部分の割合・ピクセル数が表示されます。
変更のない部分は薄く表示されます
STEP4. 違いを確認する
赤い部分を見て、意図した変更か、意図しない変更かを確かめます。
スクリーンショットは、同じブラウザ・同じ画面の幅で撮るのがコツです。幅が違うと、レイアウト全体がずれて画面中が赤くなってしまいます。
活用シーン
- Webデザインの修正確認：CSSやテンプレートを変えたあと、どこが変わったかを確かめる
- 意図しない変更のチェック：一部の修正が、ほかの場所の見た目に影響していないか確かめる
- 資料・スライドの改訂：新旧の版を比べて、直した箇所を一目で把握する
- 画像の差し替え確認：同じに見える2枚の画像が、本当に同じかどうかを確かめる
よくある質問
文字が少しずれただけなのに、広い範囲が赤くなります
ピクセル単位で比べるため、要素が数ピクセルでもずれると、その周辺がすべて「違う」と判定されます。レイアウトのずれは無視して、中身の違いだけを見たい用途には向いていません。
JPEGの画像を比べると、変えていない部分まで赤くなります
JPEGは保存のたびに細かいノイズが入るため、見た目は同じでも色がわずかに違うことがあります。「検出の敏感さ」を下げるか、スクリーンショットはPNGで保存して比べてください。
見た目の自動テスト（ビジュアルリグレッションテスト）に使えますか？
手作業でのちょっとした確認には便利です。ページ数が多い場合や、毎回自動で比較したい場合は、開発用の専用ツールを使う方が向いています。
注意点
- 同じサイズで撮った画像同士がおすすめです：サイズが違うと画像Bが引き伸ばされ、正しく比較できないことがあります
- 意味の違いは判断しません：違いがあることは分かっても、それが正しい変更かどうかは自分で確認してください
- 余白が違うと比べにくい：画像の周りの余白の量が違う場合は、画像の余白自動除去で揃えてから比べると正確です
まとめ
2枚の画像の違いは、目で探すより機械に比べさせる方が早く、確実です。FlowPocketのスクリーンショット比較なら、違う部分が赤く表示され、画像をアップロードする必要もありません。
次にデザインを修正したときに、変更前後のスクリーンショットで試してみてください。
