30DAYSトライアル2ndのまとめ【DAY11】

2ndのDAY11の課題は「PerfectPixel」を使ってチェック＆修正」になります。

DAY9、DAY10で作成したレイアウトがデザインカンプからズレていないかのチェックを行い、ズレている箇所を修正という内容ですね。

デザインカンプのレイアウトを1mmのズレもなく完璧に再現することを「ピクセルパーフェクト」というそです。PC用のレイアウトのみを作成すれば良かった時代とは違い、今はスマホやタブレット向けにレスポンシブ対応も行うので、「ピクセルパーフェクト」であることは今では厳密に求められることは少なくなってきているのが現状らしいですが、Webコーダーを名乗る以上はデザインカンプをもらっているレイアウトに関しては「ピクセルパーフェクト」を目指す必要があります。

今回はそんな「ピクセルパーフェクト」をツール「PerfectPixel」を使用して目指していきます。

PerfectPixelとは？
- PerfectPixelのインストール
- 使い方
PerfectPixelを使ってみた
ズレの修正
感想・まとめ

PerfectPixelとは？

「ピクセルパーフェクト」を目指すにあたっての必須ツールが今回紹介されている「PerfectPixel」になります。

デザインカンプと自分が作成したページをただ単に横に並べるだけではズレがあるかどうかわかりませんよね？「PerfectPixel」を使えばデザインカンプと自分が作成したページを重ねてチェックできるので、ズレが一目瞭然でわかるという優れものです。

「PerfectPixel」はブラウザの拡張機能になり、2019年10月現在は「Chrome」「Firefox」「Opera」に対応しているようです(ダウンロードページには「Safari」とか「IE」とかもありますがクリックすると「Coming soon!」って言われます)。

PerfectPixelのインストール

自分が使ってるブラウザはChromeになるので、PerfectPixelのダウンロードページにある、「Chrome web store」のボタンをクリックして、Chrome web storeに移動してインストールするだけ。

とっても簡単です。

使い方

はにわまんさんの記事PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！を参照ください。

PerfectPixelを使ってみた

本来はデザインカンプからPhotoshopなどで比較するデザインを画像として取得する必要があるのですが、30DAYSトライアル2ndではAdobe XDの共有URLを使用しているのでデザインを画像として取得することができません(Webコーダーを生業にするんだったらマジでPhotoshopとかいるなこりゃ)。

「え？これ無理じゃね？？」

ってAdobe XDの共有URLのページを画像として保存したりとか色々やってましたが、落ち着いてDAY3課題の記事をみたら、ちゃんとダウンロード用の画像が貼ってありました・・・。

みなさん課題の記事は落ち着いて最後まで読みましょう。

早速画像をダウンロードしてPerfectPixelを使えばデザインカンプを完全再現したコーディングができる！を参考にPerfectPixelでデザインを比較してみます。

結構ズレてますねぇ。

ズレの修正

PerfectPixelを使えばデザインカンプを完全再現したコーディングができる！ではデベロッパーツールを使用してCSSの値を変更してズレを修正していましたが、自分はVSCodeのLive Serverを使ってWebページを起動してズレを比較したので、VSCodeで直接修正したほうがやりやすかったです。

デベロッパーツールだと値変更してEnterを押してしまって、新たなにスタイルを指定する行が出てきたりと操作しにくかったですね。

そして、ズレを修正した画面がこちら。

良い感じにズレを修正できたと思います。ズレの大きい要因は「line-height」でした。

自分は初期値としてbody全体に「line-height: 1.6;」を指定していたんですが、それを「line-height: 1.2;」に修正したら結構良い感じになりました(Card内のテキストだけはline-height: 1.5;」が丁度よかったです)。そこからmarginとpaddingの微調整したらOK。

デザインカンプから「line-height」の値を読み解くことってできないんですかねぇ。それが読み解けないとちょっとつらい気がします。