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

この記事は公開から2年以上経過しています。

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

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

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

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

• \\　目 次　//
• PerfectPixelの導入
• PerfectPixelの使い方
• あとがき

PerfectPixelの導入

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

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

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

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

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

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

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

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

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

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

PerfectPixelの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あとがき

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

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

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

• 前の記事へ

  三重の魅力、再発見の旅！志摩市の横山展望台

• 次の記事へ

  カメイサンのカフェのミックスフルーツサンド【三重県松阪市】