PerfectPixel by WellDoneCode (pixel perfect)

デザインカンプをWebページに重ねて、コードとピクセル単位で比較できるブラウザ拡張機能です。

PerfectPixelは、デザインカンプを半透明のオーバーレイとしてWebページ上に重ねて表示する拡張機能です。ブラウザ上でコーディング結果とデザインを直接比較し、ピクセル単位のずれをすぐに確認できます。タブを切り替えたり、画面を並べて見比べる必要はもうありません。 使い方：拡張機能をインストールし、任意のページを開いて画像を追加します。ドラッグ＆ドロップ、URL貼り付け、クリップボードからの貼り付け、ファイル選択のいずれにも対応。オーバーレイの位置とサイズを調整し、透明度を変えながら比較します。 機能一覧： - PNG、JPG、SVGをあらゆるWebページにオーバーレイ表示 - 透明度をリアルタイムに調整して視覚的に比較 - 5つのブレンドモード — Normal、Difference、Invert、Multiply、Overlay — 種類の異なるずれを検出するのに有効 - オーバーレイをロックして、下にあるページ要素をクリック・操作可能 - ドメインごとの保存：レイヤーはサイトごとに保存され、ブラウザセッションをまたいで自動復元 - 1ドメインに複数レイヤーを配置可能 - 拡大縮小、位置調整、中央揃え - 主要操作のキーボードショートカット バージョン3.0の新機能： - 5つのブレンドモードによる高度な比較（Differenceモードでデザインと実装の差分を即座にハイライト） - 刷新されたモダンなUI、機能の発見しやすさを向上 - エージェンシーや開発チーム向けのTeams・Enterpriseプラン Pro機能： - ダークテーマ - 同時使用レイヤー数の制限なし（無料版は2レイヤーまで） - レイヤーの回転 - カスタムアイコン、アクセントカラー、カスタムCSS フロントエンド開発者、QAエンジニア、制作会社、開発チームなど、実装がデザイン通りかを正確に確認する必要があるプロフェッショナルのために作られました。 350,000人以上の開発者が利用。Chrome Web Storeで10年以上の実績。