A
localhost:3000トップページ | Acme Corp リニューアル
適用中X
中央
Y
px
倍率
×
不透明度
%
計測7 件の違い
差分表示
- 合わない要素 2
- ≠.gnav > li:nth-child(4) a照合できず
- ≠.hero__badge img照合できず
- 位置のずれ 7
- 1.hero__title↓3px
- 2.gnav > li:nth-child(3) a→2px
- 3.card-list .card__imgw+4
- 4.section--news h2?↓2px
- 5.btn--primaryh−2
- 6.footer__copy?↓1px
- 7.breadcrumb li←1px
- 色の違い 3
- ◐.btn--primary#1F6FEB → #2563EB→
- ◐.hero__lead#4B5563 → #374151→
- ◐.news-list .tag#F3F4F6 → #EEF2FF→
- 信頼度が低く伏せたずれ 3 件
? は信頼度が低いずれ（0.6 未満）
←↑↓→ カンプを1px移動 · Shift 10px · H 表示切替
A
localhost:3000トップページ | Acme Corp リニューアル
適用中X
中央
Y
px
倍率
×
不透明度
%
倍率
合成
不透明度
全カンプ共通
重ね方
←↑↓→ カンプを1px移動 · Shift 10px · H 表示切替
使い方
カンプをドロップするだけ。すぐに差分確認が行なえます。
- 01
アイコンを押すと、パネルが別ウィンドウで開きます。
- 02
カンプ画像をドロップすると、ページに重なります。
- 03
▲▼ や矢印キーで、X・Y を 1px ずつ動かせます。
- 04
Difference にすると、ずれだけが光ります。
- 05
位置・大きさ・色のずれが px で出ます。
- 06
指示文を貼ると、AI が測って直します。
開くアイコンを押すと、パネルが別ウィンドウで開きます。
※ AI エージェントの画面と修正の流れはイメージです。実際の表示や結果は、使う AI エージェントによって異なります。
パネル
すべての操作が、1 枚のパネルに。
ページの外の別ウィンドウに開くので、ページの幅は変わりません。
- 01何十枚でも、‹ › と検索つきの一覧で。
- 02X・Y・倍率・不透明度を、1px 単位で。矢印キーでも動かせます。
- 03要素ごとに、位置と大きさのずれを px で。色の違いも。
- 04指示文をコピーして AI に貼るだけ。AI が測って報告します。
A
localhost:3000トップページ | Acme Corp リニューアル
適用中X
中央
Y
px
倍率
×
不透明度
%
倍率
合成
不透明度
全カンプ共通
重ね方
←↑↓→ カンプを1px移動 · Shift 10px · H 表示切替
19/19
↑↓ Enter
比べる
重ねるだけで、終わらせない。
一般的な重ね合わせの拡張機能との違い。
| PixelPont | 一般的な重ね合わせ拡張 | |
|---|---|---|
| カンプを重ねる | ✓ | ✓ |
| 合成（Invert · Difference） | ✓ | ✓ |
| ずれを要素ごとに px で測る | ✓ | — |
| AI エージェントから使える | ✓ | — |
| ページの幅を変えない別ウィンドウ | ✓ | △ |
| 何十枚のカンプをサイトごとに保存 | ✓ | △ |
| カンプ画像を端末の外に送らない | ✓ | △ |
| 料金 | 無料 | 無料〜有料 |
△ は製品によって異なるもの。
できること
毎日使う道具として。
- Invert · Difference重ね方を変えて、ずれだけを浮かび上がらせる
- ∞カンプは何十枚でも。サイトごとに保存
- 1px矢印キーで 1px、Shift で 10px
- ⇄PC と SP のカンプを、‹ › ですぐ切り替え
- AI指示文を貼るだけで、AI が測る
- 0カンプ画像は端末の外に送らない