デザインと比較するには?
コーディングしたページが、どのくらいデザインを再現できているのかを確認しましょう。
デザインカンプと見比べての確認だけでは、正確に比較することは難しいです。 そのため、カンプとコーディングしたページを重ねることで、差を明確化する方法が取られています。
もっともオーソドックスな方法は以下のやり方です。
- 作成したWebページのスクリーンショットを撮る
- Illustratorなどのソフトを使って、カンプと重ねる
しかし、この方法では、CSSを調整するために何度もスクリーンショットを取り直す手間が生じます。
何度もスクリーンショットを撮るのは大変ですので、講座ではブラウザでカンプと重ねつつ、検証ツールで調整していく方法を使います。
PerfectPixelを使う
コーディングお役立ちツールでも紹介した「PerfectPixel by WellDoneCode」というChromeの拡張機能を使うと、デザインカンプとの比較がより簡単にできます。
PerfectPixel by WellDoneCode - Chrome ウェブストア
1.インストール
Chromeウェブストアを開き、「Chromeに追加」をクリックします。
2.ローカル環境でも使えるようにする
アドレスバーの横に、PerfectPixelのアイコンが表示されます。
アイコンを右クリックすると、設定メニューが開きます。 表示されるメニューから「拡張機能を管理」をクリック。
拡張機能の設定画面が開きます。 下にスクロールしていくと「ファイルのURLへのアクセスを許可する」という項目があるので、スイッチ部分をクリックしてONにしてください。
これで環境準備は完了です。
3.画像と重ねる
では、PerfectPixelを使って見ましょう。
開発ツールのスマホモードを使うと、PerfectPixelのパネルが出てこないことがあります。その場合は下記のように、検証ツールのパネルを使って幅375pxに合わせると良いです。
アドレスバーの横にある、PerfectPixelのアイコンをクリック。 ページを表示させているところに、PerfectPixelのパネルが出現します。
+マークをクリックすると、デザインカンプを追加する場所があります。 top_sp.jpgをドラッグして、追加してみましょう。
画像の追加が完了すると、下図のようにページと画像が重なって表示されます。
-マークをクリックすると、PerfectPixelのパネルが最小化して見やすくなります。
どちらがデザインカンプか分かりにくい時は、右端のアイコンをクリックするとデザインカンプの色が反転しますよ。
4.余白や画像サイズを調整する
重ねて表示したデザインカンプと合うように、余白等の値を調整していきましょう。
PerfectPixelを使う利点は、Chromeの画面上で見られること。 つまり、検証ツールで 1.重なっている画像にピッタリ合うCSSプロパティの値を探す 2.その値をstyle.cssに反映させる
という順番で作業できるので、調整が一度で済むのです。
例えば、h1のトップコピーはデザインだと字間が広いですよね。
下図のようにletter-spacingの値を打ち替えて、デザインに近づけていきます。
自分の制作環境とデザイナーの環境により、フォントに違いが生じると、ピッタリ合致はしないこともあります。win⇔macだと多少の差異は仕方ありません。
できるだけデザインに近い値を見つけて、style.cssに貼り付けます。
このように、各パーツの位置をデザインカンプに合わせていきます。
「.top_stepbox」の部分は、位置を合わせるために「align-items: flex-end;」を適用するための共通クラスを作りました。 「今すぐテストを受ける」ボタンはレイアウトのためにdivで囲いました。
そのほかmarginなどを細々と調整して下図までデザインに寄せました。
このくらい揃えられれば、大抵の案件では大丈夫です。 （完璧なピクセルパーフェクトを求められる場合はNG）
●PerfectPixelの使用について
今回は使い方の解説も兼ねて、大まかにレイアウトを組んでからPerfectPixelで調整しました。
今回のように最後にまとめて調整しても構いませんし、PerfectPixelでカンプを重ねつつCSSを組んでいっても構いません。
やりやすい順番で作成してください。
スマホ幅ナビゲーションを調整
最後にナビゲーションを開いたときの表示を調整します。 ここはデザインが指定されていませんので、サイトの雰囲気と合うように少し手を加えれば良いでしょう。
現在の表示とCSSは、codepenからコピーしてきたままです。
固定は不要とのことですので、position: fixed;をabsoluteに変更。 色を合わせて、見慣れた位置に文字位置を変更してみました。
ここまでで【課題01】の範囲は終了です。
解説で作成したファイルを素材にアップロードしています。
確認用にご利用ください。
なお、アップロードファイルはHTMLとCSSのみとなっています。
~ここからの先のレッスンについて~でダウンロードできるimagesフォルダと同階層に入れて使用してください。
