コーダーなら押さえておきたいデザインデータのチェックポイント

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. コーダーなら押さえておきたいデザインデータのチェックポイント

コーダーなら押さえておきたいデザインデータのチェックポイント

コーダーなら押さえておきたいデザインデータのチェックポイント

こんにちは、コーダーの仁木です

Web制作ではディレクター、デザイナー、コーダーなど、専門分野ごとの分業体制で制作をするケースが多くあると思います。
コーダーは、デザイナーが作成したデザインデータを元にページをコーディングしますが、デザインデータに忠実な見た目のページを作ることはフロントエンドのコーダーに求められるスキルの1つだと思います。

今回はページやコンポーネントの作成時にポイントとなる、デザインデータの抑えておくべきチェック箇所を自分なりの考えを元に書いていきたいと思います。

フォント

フォント(文字)はサイト全体で共通したルールでデザインされているので、CSSを書く前に出来るだけ文字回りのデザインを把握しておきたいです。
フォントファミリーフォントサイズウェイト行間カーニング、など、本文、見出しのデザイン別にパターン化されていることが多いので、サイト全体の文字回りのトンマナを最初に把握しておくとCSSが書きやすくなります。

自分の場合だと、デザインデータのフォント回りの指定値をSassの変数に割り当ててしまいます。
変数化することで以下のようなメリットがあります。

  • 値に意味をもたせることが出来る。($pc-font-size: 16pxなど、16px = モニターで見るときのフォントサイズ)
  • 後々の変更がしやすくなる。

かといって何でもかんでも変数にしてしまうのも大変だし結局把握できなくなってしまうので、汎用的に使われている値を探し出して、必要最低限だけ変数にしてしまうのが良いと思います。

フォントファミリー

よくあるパターンとしては、1つのサイトで日本語用フォント、英語用フォントそれぞれ1種類ずつ使われているケースがあると思います。

余談ですが、デザイナーさんによって、フォントの指定は様々ですが、コーダー目線では主に以下の3パターンに分類出来ると思います。

OSのシステムフォント

Windowsだったらメイリオ、Macだったらヒラギノを指定しているパターンです。片方のOSのシステムフォントだけを指定しているともう片方のOSでフォントが適切に表示されないので、両方のシステムフォントを指定しておきます。

Google FontsなどWebフォント

Webフォントの場合、OSに依ることなく共通のフォントを表示できるので、最近はGoogle Fontsのフォントを指定されているケースが増えていると思います。

注意点したい点としては、使用されているWebフォントを自身のマシンにもインストールしてデザインデータのフォントが正しく表示されるようにしておきましょう。
フォントがインストールされていなくて代替フォントで表示されたまま、気づかずにコーディングしてしまうパターンがあります。

それ以外のフォント

システムフォントでもなく、Webフォントにもないようなフォントの場合です。
本文や見出しのテキストに使われている場合はデザイナーさんに相談して、システムフォントやWebフォントに変えてもらうことをオススメします。

フォントサイズ

本文で1〜2パターン、見出しで1〜3パターン程度のフォントサイズが指定されていることが多いです。
本文は14~16pxあたりが一般的に使われているフォントサイズですが、たまに18pxとかも見かけたりします。

ウェイト

ノーマルボールドの2種類が多いですが、Noto Sansが使われている場合だとたまにミディアムも使われているケースもあったり‥。
ノーマルとボールドだと指定が簡単ですが、それ以外のウェイトが使われている場合はfont-weightの値は数値で指定が必要になってくるので気を付けたいですね。

行間

本文で1〜2パターン、見出しで1パターン使われていることが多いです。

カーニング

サイト全体で統一されていることが多いですが、たまに2パターンくらいあります。

フォントと同じくらい重要な要素の色。
だいたいのサイトでは、メインカラー、アクセントカラー、ベースカラーと、テキストで使用される色の計4色が主に使われることが多いです。なので、これらの色を最初に把握します。

その他、この4色の濃淡違いの色が細かい箇所で使われていることがあります。
上記4色に加えて必要があればその他の色もSassの変数に入れておくと良いでしょう。

コンテンツの横幅(コンテナサイズ)

メインとなるコンテンツの最大横幅は全ページで共通になっていることがほとんどです。
デザインデータだとガイド線になっていることが多いでしょうか。

デザインによって2パターン用意されていることもあります。

余白

コンテンツのセクション間の余白、本文や見出しの前後の余白などもデザインのトンマナで統一されている場合が多いです。
50pxや100pxなどの固定値だったり、フォントサイズに比例した余白だったり、デザイナーさんによってルールは変わるので、不明瞭であれば一度相談してみると良いかもしれません。

デザインデータを視る力を養う、

最終的には完成したページとデザインデータを見比べて、違いがどこにあるか見つけてみましょう。
コーディングしたページとデザインデータを注意深く見比べてみて、違いが見つかればCSSを修正してカンプデザインに近づけるようにしましょう。

また、レスポンシブで様々なデバイスやモニターでみたときにデザインが崩れないよう、モニターの変化に対応できるCSSのスタイルを考えるのも重要です。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら