こんにちは！
上毛印刷WEB制作担当のソーヤです。

WEB制作をなさっている皆さん、普段どういった方法でWEBサイトのチェックをしていますか？
この場合の「WEBサイトのチェック」とは、デザインナーが作成したデザインカンプをもとに、コーダーがデザインカンプに忠実にコーディングをしているかのチェックになります。

この問題は、長年コーダーやディレクターの方々を苦しめて来たのではないでしょうか。
ちなみに、これから紹介する「PerfectPixel」を見つける前までは、
デザインカンプの画像データをブラウザに貼り付けて、コーディングした後のWEBページと、透かしのようにタブを切り替えて、視覚的に差異がわかるようにしてました。
今考えると、忙しいときにこんなことをやっていると気が狂いそうになりますね。

PerfectPixel

はいでは、まず使用手順から解説していきます。

①ダウンロード
Chromeのアドオンなので、まずChromeを起動して下記URLに遷移してください。
◆URL
https://chromewebstore.google.com/?utm_source=ext_app_menu（外部リンク）
「PerfectPixel」と検索してください。
そうしたら、専用のページが出てくるので「Chromeに追加」をクリックして、お使いのChromeに機能を追加してください。
Chromeの右上部に、このようなアイコンが出たら成功です。

②デザインカンプを透かしに使う
デザインカンプを書き出します。
サイズはwidth：1920pxで書き出してください。
書き出したら、その画像データを下記の赤枠にドラッグ&ドロップしてください。

そうしたら、下記のように透かし画像が反映されます。

・①で透かし画像の表示非表示を制御します。
・②で透かし画像が動かないようロックできます。
・③で透かし画像をX軸・Y軸に移動させることができます。透かし画像をドラッグして移動させることもできます。
・④で透かし画像の拡大率を制御します。基本は0.5で大丈夫です。
・⑤で透かし画像の透過率を制御します。

これで完了です！

まとめ

PerfectPixelは本当に便利なツールなので、ぜひぜひ今すぐにでも日々の業務に役立てもらえると幸いです！
より正確なコーディング、チェックの効率化を目指していきましょう！