pixel perfect（ピクセルパーフェクト）とは
PerfectPixel by WellDoneCode (pixel perfect)は、Chrome拡張機能として利用できる「デザイン通りに正確なコーディングができているか」を比較するためのツールです。
デザインカンプ（JPG・PNG など）をブラウザ上に 半透明のレイヤーとして重ねて表示 し、アニメーションや動きを邪魔せずに位置・余白・サイズなどを細かく確認できます。
コーダーがよく使う「ピクセルパーフェクト検証」をシンプルかつ直感的に行えるツールとして非常に人気があります。
主な機能・特徴
| 画像をブラウザ上に重ねて精度を確認 | デザインどおりの配置になっているか視覚的に確認できます |
| 透明度（Opacity）の調整 | 半透明にし比較しやすくできます |
| ブレンドモード対応 | Multiply（乗算）など、より見やすい合成モードが選べるためズレ確認がしやすいです |
| 複数レイヤー管理 | 1ページに対して複数のカンプを切り替えて確認できます |
| 画像の移動・スケール調整 | 細かい位置合わせも自由にできます |
| 軽量 | Chromeの上に重ねるだけなので操作が軽量で、ページの動作を邪魔しません |
活用例
- コーディングしたページがデザイン通りになっているかチェック
- 制作会社での品質管理
- フロントエンド案件の納品前チェック
- 複雑なUIデザインの実装精度確認
- フォントサイズ・余白・幅の誤差確認
- 初心者のコーディング練習にも活用可能
特に、細かい余白や位置ズレを見つけるのにとても便利です。
使い方
1.インストール（Chrome）
1.Chrome ウェブストアのページへアクセス
2.「Chrome に追加」をクリック
3.「拡張機能を追加」ボタンを押す
2.調べたいサイト上で拡張機能アイコンをクリック
3.カンプ画像を追加
パネル内の「Add new layer」をクリック → カンプ画像（JPG, PNG）をアップロード
4.透明度（Opacity）で見やすく調整
スライダーを動かすと透明度を調整できます。20〜50%くらいが見やすいです。
5.位置・サイズを微調整
・キーボードの矢印キーで1pxずつ位置調整
・Shift + 矢印キーで10px移動
・Scale（拡大縮小）でズレ修正
・ブレンドモード変更で見やすい表示に変更（Multiplyがおすすめ）
拡張機能について
画像はローカルで処理されるため、外部に送信されない仕様となっています。
その他、利用規約として特別な制限はほとんどありません。
| 料金形態 | 無料 |
| 登録・ログイン | 不要 |
| 利用規約 | Chromeウェブストアの拡張機能規約および、拡張機能作者のプライバシーポリシーに従うこと |
| 公式サイト | 作者のプライバシーポリシー及びダウンロード |
※掲載内容は変更される場合があります。必ず【公式サイト】で確認後、自己責任でご利用ください。
注意点
※ カンプ画像のサイズが異なるとズレが発生
元データと画像サイズが異なると比較が正確にできません。
必ずデザイナーから「実寸サイズのカンプ画像」をもらいましょう。
※ ブラウザズームは100％にすること
ズームしていると比較が正しくできません。
※ ページ内の動く要素とは重ねにくい
アニメーションが激しいUIは比較しづらい場合があります。
※ デザインと完全一致にこだわりすぎないこと
PerfectPixelは便利ですが、レスポンシブ環境では「完全一致」が難しいこともあります。
目的は「見やすく整ったUI」なので過度に神経質にならないことが大切です。
related site
