frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【コーディング】デザイン再現性のチェック項目5つ

スポンサードリンク

コーディングした後にデザインを再現できているか確認していることと思います。
PSDと見比べてチェックするべき項目を5つほど挙げてみました・

マージン

マージンは完全にピッタリ同じにすることは行間、前後の要素に依存するため難しい場合もありますが、
どのくらいずれているかは知っておきたいものです。

perfectpixel

perfectpixelはchrome,firefoxのアドオンでブラウザに画像を重ね合わせることができます。
しかも開発ツールも同時に使用できるため、そのまま開発ツールで調整してマージン等のサイズを合わせることができます。
firefox
PerfectPixel :: Add-ons for Firefox

chrome
PerfectPixel by WellDoneCode - Chrome ウェブストア

定規ツール

全体ではなくブラウザ上の一部のサイズを図りたい時は、定規ツールで十分です。
fireifox
MeasureIt :: Add-ons for Firefox
chrome
Edge: The Web Ruler - Chrome ウェブストア

カラーチェック

カラーのチェックは、大事ですね。テキストカラーなど微妙に#333など変化してる場合もあります。

  • ホバー、機能(クリッカブル領域など)

デザインからはパッと見、マウスオーバーになっていなくても、レイヤーが隠れているかもしれません。

しっかり探しましょう。どこからどこまでがクリッカブルなのか確認することが必要です。

  • 要素の増減時のチェック

テキスト量、カラムなど要素の量が増えたことを見越してコーディングする必要があります。

デザインではそれが考慮されてないこともありますが、コーディングでそれを賄うとよいでしょう。

  • リサイズ時

レスポンシブデザイン案件では、全てのwindowサイズが対象となるためどのサイズでも崩れがあってはなりません。
また、不必要な横スクロールバーは出ないように気をつけましょう。

まとめ

コーディングが終わった後のデザイン再現性のチェック項目を5つ書きました。
完璧にデザイン通りにすることは難しいですが、できるだけ再現性を上げることでデザイナーさんが喜んでくれるでしょう笑