DAY3:「PerfectPixel」を使ってチェック & 修正

DAY2までに作ったサイトを「PerfectPixel」を使ってズレがないかチェックしてみましょう!

まずは以下の画像を右クリック → 名前を付けて画像を保存 で手元のPCにダウンロードしてください。

「PerfectPixel」使い方は以下にまとめているので、こちらを参考に使ってみてください。「重ねる画像を取得する」の箇所の画像は上記の画像を使う感じになります。

PerfectPixelを使えばデザインカンプを完全再現したコーディングができる!

デベロッパーツールと先ほどの画像を使って、実際のコーディングの上に重ね合わせる感じでチェックしていきます。

どこまで厳密にチェックするかは現場や案件によるかと思いますが、少なくともズレすぎている箇所は直すべきです。コーダーの仕事はデザインを再現することなので。。

ズレが見つかった箇所は実際に修正して、ほぼほぼズレがないところまで持っていきましょう!

わたしもやってみました。結構ズレてますね。。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事