DAY35.デザインカンプからコーディング編 PerfectPixelを使ったチェック＆修正

01.PerfectPixelのダウンロード・活用方法

PerfectPixel
・実際のサイトの上に透過した画像を重ねる
・ブラウザ上でコーディングのズレを確認できる拡張機能
・修正もデベロッパーツールで簡単に出来る

必ずしもピクセルパーフェクトで納品が求められるわけでは無い

プロとして再現度の高いコーディングができる実力は身につけておくべき

02.PerfectPixelの使い方

1.重ねる画像を取得する

2.サイトに重ねてみる

①デベロッパーを幅をカンプと合わせる

②カンプの画像を読み込む
・X → 0
・Y → 0
・Scale → 1
・Lock → 選択

3.「答え」を見ながら微調整

デザインカンプはコーダーからすると1つの答え

PerfectPixelのいいところは、答えを見ながら調整していける

デベロッパーツールを使って微調整しながら正解を導き出すことができる