image-compare

画像比較

2 枚の画像をピクセル単位で比較します。差分数と不一致率を返し、違いを赤で強調した差分画像を生成します。

使用する場面

• 実装のスクリーンショットを元のデザインと比較する
• ページの 2 つのバージョン間で視覚的なリグレッションを見つける
• UI が Figma のエクスポートと一致しているか確認する

仕組み

1. 両方の画像を読み込み、寸法が一致するようにリサイズします（2 枚のうち小さい方の寸法を使用します）
2. pixelmatch ですべてのピクセルを比較し、設定可能なしきい値を超える差異にフラグを付けます
3. 不一致の統計情報を返し、変更箇所を赤で示す差分画像を書き出します

使用方法

bash <skill-path>/scripts/image-compare.sh <image1> <image2> [diff-output.png] [threshold]

引数：

• image1 — 1 枚目の画像のパス（必須）
• image2 — 2 枚目の画像のパス（必須）
• diff-output.png — 差分画像の書き込み先のパス（任意。デフォルトは ./diff.png）
• threshold — ピクセル一致のしきい値（0～1）。値が小さいほど厳密です（任意。デフォルトは 0.1）

例：

# Compare a design against implementation
bash <skill-path>/scripts/image-compare.sh design.png screenshot.png

# Compare with custom threshold and output path
bash <skill-path>/scripts/image-compare.sh before.png after.png ./changes.png 0.05

出力

{
  "totalPixels": 921600,
  "differentPixels": 4523,
  "mismatchPercentage": 0.49,
  "dimensions": { "width": 1280, "height": 720 },
  "diffImage": "./diff.png",
  "threshold": 0.1
}

フィールド	型	説明
totalPixels	Number	比較したピクセルの総数
differentPixels	Number	異なるピクセル数
mismatchPercentage	Number	異なるピクセルの割合
dimensions	Object	比較に使用した幅と高さ
diffImage	String	生成された差分画像のパス
threshold	Number	使用した感度のしきい値

結果をユーザーに提示する

比較後、次のように概要を提示します。

Comparison: design.png vs screenshot.png

Mismatch: 0.49% (4,523 pixels out of 921,600)
Diff image saved to: ./diff.png

The images are nearly identical. Differences are highlighted in red in the diff image.

割合の解釈：

• < 0.1% — ほぼ同一です
• 0.1% - 1% — 軽微な差異です。アンチエイリアス処理やサブピクセルレンダリングが原因と考えられます
• 1% - 5% — 目立つ差異があるため、確認する価値があります
• > 5% — 視覚的に大きな変更があります

トラブルシューティング

画像のサイズが異なる場合 — スクリプトは両方の画像を小さい方の寸法に自動でリサイズします。最良の結果を得るには、同じサイズの画像を使用してください。

誤検出が多すぎる場合 — しきい値を上げてください（例：0.2）。ブラウザー間でアンチエイリアス処理に違いが生じることはよくあります。