Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

Google関連サービスの豆知識

こんにちは、WebデザイナーのAYAです。

私は主に、デザイナーの方が制作したデザインカンプからのコーディングを行なっております。
コーダーの役目は、まず第一に、デザインを忠実に再現することだと思っています。

そして、そのデザインを再現するために私が愛用しているおすすめの機能があります。
それが、Chromeの拡張機能『PerfectPixelです。

今回のGoogle豆知識では『Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現』と題して、このPerfectPixelの導入と使い方をご紹介します。

PerfectPixelの導入

早速、PerfectPixelの導入から始めていきましょう!

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

まずは、下記URLよりPerfectPixelの追加をします。

chrome ウェブストア
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

Chromeに追加]ボタンをクリック後、表示される確認ウインドウにて[拡張機能を追加]ボタンをクリックします。

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

次に、アドレスバーの右にアイコンを表示するため、上記画像の通りに順に行います。

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

次に拡張機能の設定を行います。

青枠をクリックしてから[拡張機能の管理]をクリックします。

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

そして、サイトへのアクセスという項目で『すべてのサイト』としておきます。

設定しておく理由は、私自身がローカルでコーディングしたサイトでPerfectPixelが使えない時が時々あったからです。

以上で導入はできたので、実際にコーディングしたサイトに重ねてみましょう。
 

PerfectPixelの使い方

次は、PerfectPixelの使い方についてご説明していきます!

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

まず、コーディングしたローカルサイトのデベロッパーツールで、サイズをデザインカンプと同じ幅にします

今回は横幅1440pxで保存したのでデベロッパーツールも同じく1440pxにします。

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

右上の青枠部分をクリックすると、赤枠部分が表示されます。

表示されたら、②をクリックし、画像を選びます。ドラッグ&ドロップでももちろんOKです!

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

画像を選ぶと、このように表示されます。

ところが、画像が小さいですよね!!この場合、赤枠部分で調節ができます。
私はPerfectPixelを開くといつも決まって「0.5」で表示されてしまうので、この部分を「1.0」にします

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

すると、きちんと表示することができました。

赤枠部分を見ると、自分のコーディングしたものが実際のデザインカンプと若干ズレていることが分かります。

デザインカンプの透明度は、青枠部分で調節ができます
私はいつも大体50%くらいにしています!

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

ではズレているところを調節していきましょう。

①デベロッパーツールで選択するために一旦、PerfectPixel機能をOFFにします。
(目のマークをクリックします。)

②青枠部分をクリックして、要素を選択します。

Google Chromeの拡張機能PerfectPixelでデザインカンプを完全再現

①要素を選択した状態で、PerfectPixel機能をONにします。
(目のマークをクリックします。)

②あとはデザインカンプとのズレを見ながら、デベロッパーツール上で調節していくだけです!

あとがき

いかがでしたか?
上記が私のコーディングチェック方法でした。

デザインカンプ通りにコーディング をしても、画像を重ねて見ると思っているよりズレている場合があります。

その他にも、コーディングしていく中で出てくる不明点や疑問点等は自分一人で判断せずに、必ずデザイナーの方に相談し、一人歩きしないのも大切ですね。
 

Webの豆知識」の関連記事

インフォコネクトに
相談してみませんか?

経営コンサルティングやITサービス活用支援、ホームページ制作などに関するご依頼や、ご質問・ご相談など、なんでもお気軽にお問い合わせください。