こんにちは、コーダーの仁木です
Web制作ではディレクター、デザイナー、コーダーなど、専門分野ごとの分業体制で制作をするケースが多くあると思います。
コーダーは、デザイナーが作成したデザインデータを元にページをコーディングしますが、デザインデータに忠実な見た目のページを作ることはフロントエンドのコーダーに求められるスキルの１つだと思います。
今回はページやコンポーネントの作成時にポイントとなる、デザインデータの抑えておくべきチェック箇所を自分なりの考えを元に書いていきたいと思います。
フォント（文字）はサイト全体で共通したルールでデザインされているので、CSSを書く前に出来るだけ文字回りのデザインを把握しておきたいです。
フォントファミリー、フォントサイズ、ウェイト、行間、カーニング、など、本文、見出しのデザイン別にパターン化されていることが多いので、サイト全体の文字回りのトンマナを最初に把握しておくとCSSが書きやすくなります。
自分の場合だと、デザインデータのフォント回りの指定値をSassの変数に割り当ててしまいます。
変数化することで以下のようなメリットがあります。
かといって何でもかんでも変数にしてしまうのも大変だし結局把握できなくなってしまうので、汎用的に使われている値を探し出して、必要最低限だけ変数にしてしまうのが良いと思います。
よくあるパターンとしては、１つのサイトで日本語用フォント、英語用フォントそれぞれ１種類ずつ使われているケースがあると思います。
余談ですが、デザイナーさんによって、フォントの指定は様々ですが、コーダー目線では主に以下の３パターンに分類出来ると思います。
Windowsだったらメイリオ、Macだったらヒラギノを指定しているパターンです。片方のOSのシステムフォントだけを指定しているともう片方のOSでフォントが適切に表示されないので、両方のシステムフォントを指定しておきます。
|
1 2 |
/* デザインデータがヒラギノだったら */ font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; |
Webフォントの場合、OSに依ることなく共通のフォントを表示できるので、最近はGoogle Fontsのフォントを指定されているケースが増えていると思います。
注意点したい点としては、使用されているWebフォントを自身のマシンにもインストールしてデザインデータのフォントが正しく表示されるようにしておきましょう。
フォントがインストールされていなくて代替フォントで表示されたまま、気づかずにコーディングしてしまうパターンがあります。
システムフォントでもなく、Webフォントにもないようなフォントの場合です。
本文や見出しのテキストに使われている場合はデザイナーさんに相談して、システムフォントやWebフォントに変えてもらうことをオススメします。
本文で１〜２パターン、見出しで１〜３パターン程度のフォントサイズが指定されていることが多いです。
本文は14~16pxあたりが一般的に使われているフォントサイズですが、たまに18pxとかも見かけたりします。
ノーマルとボールドの２種類が多いですが、Noto Sansが使われている場合だとたまにミディアムも使われているケースもあったり‥。
ノーマルとボールドだと指定が簡単ですが、それ以外のウェイトが使われている場合はfont-weightの値は数値で指定が必要になってくるので気を付けたいですね。
本文で１〜２パターン、見出しで１パターン使われていることが多いです。
サイト全体で統一されていることが多いですが、たまに２パターンくらいあります。
フォントと同じくらい重要な要素の色。
だいたいのサイトでは、メインカラー、アクセントカラー、ベースカラーと、テキストで使用される色の計４色が主に使われることが多いです。なので、これらの色を最初に把握します。
その他、この４色の濃淡違いの色が細かい箇所で使われていることがあります。
上記４色に加えて必要があればその他の色もSassの変数に入れておくと良いでしょう。
メインとなるコンテンツの最大横幅は全ページで共通になっていることがほとんどです。
デザインデータだとガイド線になっていることが多いでしょうか。
デザインによって２パターン用意されていることもあります。
コンテンツのセクション間の余白、本文や見出しの前後の余白などもデザインのトンマナで統一されている場合が多いです。
50pxや100pxなどの固定値だったり、フォントサイズに比例した余白だったり、デザイナーさんによってルールは変わるので、不明瞭であれば一度相談してみると良いかもしれません。
最終的には完成したページとデザインデータを見比べて、違いがどこにあるか見つけてみましょう。
コーディングしたページとデザインデータを注意深く見比べてみて、違いが見つかればCSSを修正してカンプデザインに近づけるようにしましょう。
また、レスポンシブで様々なデバイスやモニターでみたときにデザインが崩れないよう、モニターの変化に対応できるCSSのスタイルを考えるのも重要です。
