無料Chrome、Firefox 向け拡張機能

デザインとピクセル単位で一致させる

Pixel Perfect Pro は、制作中のページにデザイン画像を重ねて表示します。位置を合わせれば、デザインと異なる箇所がすべてわかります。アカウントは不要で、デザインはブラウザ内に保存されます。

Chrome に追加 Firefox に追加

Firefox に追加 Chrome に追加

公式サイトへ

スクリーンショット

使い方

制作中のページを開いて Pixel Perfect Pro のアイコンをクリックします。ページにフレームがある場合は、オーバーレイを表示する場所を選びます。
デザインを画像として追加します。ドラッグ＆ドロップ、ファイルの選択、クリップボードからの貼り付け、URL での追加に対応しています。
デザインをドラッグして位置を合わせるか、キーボードで 1 ピクセルずつ微調整します。
不透明度を下げるか、ブレンドを「Difference」にすると、ずれている箇所がすべて浮かび上がります。ページを修正して、もう一度確認しましょう。

主な機能

ブレンドモード
ブレンドを「Difference」にすると、デザインと一致しないピクセルがすべて浮かび上がります。「Multiply」「Overlay」「Screen」「Exclusion」も使えます。
フェード、反転、ワイプ
デザインを半透明にして両方のレイヤーを同時に確認したり、ダークなページでは色を反転したり、スライダーでデザインとページを切り替えて比較したりできます。
正確な配置
位置、回転、拡大率、幅を数値で指定し、縦横どちらの軸でも中央揃えにできます。デザインをロックすれば、クリックはページに届きます。
カラムグリッド
Bootstrap、Tailwind、Material のプリセットのほか、列数、ガター、幅、オフセット、色、不透明度を自由に設定でき、ベースライングリッドも表示できます。デザインがなくても使えます。
ルーラーとガイド
距離を測ったり、ページ上にガイド線をドラッグしたりできます。
サイトごとに複数のデザイン
デザインはウェブサイトごとに保存されます。タグで整理し、前へ・次へで切り替え、ブレークポイントに紐づければウィンドウがその幅にリサイズされます。
ホットキーと色を自由に
各操作に最大 2 つのキーの組み合わせを割り当て、ライトとダークのテーマごとにツールバーの色を選べます。
再読み込みしても元どおり
ページを再読み込みしても、同じデザインが同じ位置に再表示されます。iframe の中でも動作し、Chrome ではローカルの HTML ファイルにも対応しています。