PerfectPixelを使ってデザインカンプとコーディングの確認時間を短縮しよう

2019.06.21

WEB

Webデザイン

筆者はコーダーとして日々コーディング業務を行っていますが、HTML・CSSコーディングを行う上で一番重要で手間のかかる作業はデザインカンプとコーディングデータを比較する確認作業だと考えています。

今回はこの確認作業を効率よく行うことができるChromeのアドオン「PerfectPixel」をご紹介したいと思います。

INDEX

コーディングデータを確認する際の基本的なワークフロー

様々なwebブラウザや閲覧端末が普及し、レスポンシブデザインが主流となった昨今ではそこまで厳密にデザインカンプを再現する必要はなくなってきましたが、それでもできるだけデザインに忠実なコーディングを意識することは大切です。

弊社でコーディングデータを確認する際の基本的なワークフローは、

このようにしてコーディングデータの「間違い探し」を行っています。

基本的にはこの作業を繰り返し行いコーディングデータの精度を上げていくのですが、このやり方ではコーディングデータを調整するたびにスクリーンショットを撮ってPhotoshopに貼り付けるという手間が発生します。

冒頭でも述べた通り、コーディングの確認作業はとても大切ですが、非常に時間がかかる作業でもあります。

今回ご紹介するPerfextPixelは、Googleが提供するwebブラウザ「Chrome」のアドオン（拡張機能）の1つで、ブラウザ上に任意の画像を配置する機能を提供してくれます。

chrome ウェブストア

この機能を利用すればデザインカンプのデータとコーディングデータをブラウザ上で重ねて比較することができるようになります。

アドオンのインストールは簡単で、先ほど紹介したchrome ウェブストアのページにアクセスし、追加ボタンをクリックするだけで完了します。

インストールが完了すると、アドレスバーの右にアイコンが表示されるようになります。

インストールが完了したらコーディングデータを確認したいwebページにアクセスし、ブラウザ右上のアイコンをクリックして画像を選択するUIを表示します。

あらかじめjpg等の画像で書き出しておいたデザインカンプを選択する、もしくはUI上にドラッグ&ドロップすることで画像を登録できます。

画像が登録されたら位置や透明度を調整してコーディングデータとデザインカンプを比較します。カンプデザインに対してロゴ付近が少しずれているのがわかります。

この状態でもChromeのデベロッパーツールは通常通り利用できますので、デザインカンプに対してコーディングがずれているところを確認、調整し、コーディング作業を進めることが可能です。

カンプデザインの表示・非表示や透明度の調整はアドオンのUI上から簡単に変更可能です。難しい操作は特になく、各ボタンをクリックしたり数値を調整したりするだけです。

いかがでしたでしょうか？
コーディングの確認作業を効率化する手助けをしてくれるChromeのアドオン、PerfectPixelのご紹介でした。
PerfectPixelを活用することで、筆者はコーディングの確認にかかる（かける）時間を3割ほど削減することができるようになりました。（当社比）

みなさんもPerfectPixelを上手に利用して、快適なコーディングライフを満喫してください。

chrome ウェブストア

PerfectPixel by WellDoneCode (pixel perfect)

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。