2020/03/19

デザインカンプとコーディング結果とのズレを確認できる”PerfectPixel”

ブラウザの拡張機能”PerfectPixel”の紹介

“PerfectPixel”は、chromeなどのウェブブラウザで利用できる拡張機能です。
デザインカンプを元にコーディングを行う際、デザインカンプとのズレを確認するために両者を比較したい場合があります。
そんな時に”PerfectPixel”を利用すると、デザインカンプとコーディング結果とを重ねて見て比較することができるのでデザインカンプとコーディング結果のズレなどをわかりやすく確認でき、修正に役立てることができます。
“PerfectPixel”は、下記のサイトで入手できます。

“PerfectPixel”のサイト
chromeの他、Safari,Firefox,Opera,IE,Edgeでも利用できるようです

“PerfectPixel”の利用方法

拡張機能”PerfectPixel”を追加したchromeの場合を例にして”PerfectPixel”の利用方法を紹介していきます。

ブラウザに”PerfectPixel”が追加されていると、アドレスバーの右側に他の拡張機能と一緒に”PerfectPixel”のアイコンが表示されていると思います。
コーディングしたページを開いた状態で、アドレスバーの右側にある”PerfectPixel”のアイコンをクリックすると下の図の左側にある操作画面が開きます。
デザインカンプの画像データを追加すると、開いているページの上にデザインカンプ画像が半透明で重ねれられて表示されます。
画像データがアップロードされた後は、操作画面が下の図の右側のようになり、ここでいろいろな調整ができます。
（※デザインカンプとコーディング結果とを比較する前に、ブラウザの幅がデザインカンプ画像の幅と同じになるように調整するか、もしくは下記Gの枠内にある倍率を調整してデザインカンプ画像の幅を合わせてから使用してください。）
さらにデザインとのズレを修正するときも、”PerfectPixel”はデザインカンプとコーディング結果とが重なって表示されたままの状態でデベロッパーツール（検証機能）を利用することができるので、ズレ具合を見ながら修正することができてとても便利です。

この操作画面はドラッグして好きな位置に移動することができます。
では、上の図のAからHの内容を説明します。
A: 始めにここをクリックするか、ドラッグアンドドロップまたはコピーアンドペーストでデザインカンプの画像データをアップロードします。
B: この操作画面が邪魔になる時はここをクリックすることで操作画面を最小化することができます。
C: 設定画面を開きます。
D: デザインカンプ画像の表示/非表示を切り替えます。
E: ページをスクロールしようとすると、デザインカンプ画像の透明度が変わってしまうのですが、ここをクリックすることでデザインカンプ画像の透明度をロックして、ページをスクロールすることができるようになります。
F: デザインカンプ画像の色合いを変更します。
G: ここではデザインカンプ画像のx方向の位置(X)、y方向の位置(Y)、倍率(↑)、透明度を調整することができます。
H: ここではデザインカンプ画像の追加や削除ができます。