2枚の画像を比較して、違う部分を赤くハイライト表示します。デザイン変更の前後比較や、見た目のチェックに使えます。
画像はサーバーに送信されません（ブラウザ内で比較）
使い方
- 比較したい2枚の画像（変更前・変更後）を選びます。
- 「検出の敏感さ」を必要に応じて調整します（デフォルトのままでも大抵うまくいきます）。
- 「比較する」を押すと、違いのある部分が赤くハイライトされます。
ピクセル単位の機械的な比較です
このツールは、広く使われているオープンソースの画像比較ライブラリ（pixelmatch）を使い、2枚の画像の同じ位置にあるピクセルの色を1つずつ比較します。文字や図形の「意味」を理解しているわけではなく、あくまで色の違いを検出しているため、デザインのわずかな移動やフォントレンダリングの違いも検出対象になります。
2枚の画像のサイズが異なる場合は、画像Bを画像Aのサイズに合わせて自動的に拡大・縮小してから比較します。サイズが大きく異なる画像同士では、意味のある比較にならないことがあるため、同じ解像度で撮ったスクリーンショット同士の比較に向いています。
使い道の例
- Webサイトのデザイン変更前後で、見た目がどう変わったかを確認する
- コードの修正がUIに意図しない影響を与えていないか確認する（簡易的な見た目のリグレッションチェック）
- 資料やスライドの改訂版で、どこを直したか一目で把握する
よくある質問
画像がサーバーにアップロードされることはありますか？
ありません。比較処理はすべてブラウザ内で完結します。
「検出の敏感さ」は何を調整していますか？
色の違いをどの程度まで「同じ」とみなすかのしきい値です。敏感さを上げると、わずかな色の違い（アンチエイリアスやわずかな圧縮ノイズなど）まで検出しやすくなります。実際に意味のある変更だけを見たい場合は、敏感さを下げてお試しください。
文字の位置が少しずれただけなのに、広い範囲が差分として検出されます。
ピクセル単位の比較のため、要素が数ピクセルでもずれると、その周辺一帯が「違う」と判定されます。レイアウトのずれを許容して内容の違いだけを見たい場合には、この方式は不向きです。
2枚の画像のサイズが違っても比較できますか？
できますが、画像Bが画像Aのサイズに合わせて変形されるため、縦横比が大きく異なる場合は比較結果の意味が薄れます。同じ画面サイズで撮ったスクリーンショット同士でご利用ください。