ビジネスとIT活用に役立つブログBlog


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

この記事をシェアする:

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

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

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

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

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


  1. Photoshopでデザインカンプを開く
  2. webブラウザで表示したコーディングのスクリーンショットを撮る
  3. スクリーンショットをデザインカンプの上に貼り付ける
  4. スクリーンショットの透明度を50%程度に変更しデザインカンプとのずれを探す
  5. ずれていた部分を調整してコーディングデータに反映する
  6. 2~5の作業を繰り返す

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

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

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

PerfectPixelとは?

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

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

PerfectPixelの導入と使い方

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


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


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


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


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

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

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

さいごに

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

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

chrome ウェブストア
PerfectPixel by WellDoneCode (pixel perfect)
The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!