【Web】コーダーに、このデザイナーはデキる！と思わせるための８つの気配り

Web制作において、デザイナーとコーダーの連携はととても大切。ここがうまくいっていないと、コーディングに無駄に時間がかかってしまったり、コーディングコストがかかりすぎるためにデザインを作り直す、という事態にもなりかねません。しかしポイントを抑えておけば、自由なデザインの中でも、効率的にコーディング作業をすすめることができ、コストを抑えられます。
そこで今回は、Webデザイナーが抑えておくべき、コーディングのための気配りポイントをご紹介します。

1.書き出しサイズにガイドを引く

ガイドが引いてあると、どこで書き出せばよいかが分かりやすく、切り抜きがとても楽です。ドロップシャドウをかけている場合は、シャドウ分も入れてガイドを引きましょう。

2.ピクセルのズレをなくす

ボタンにするところは１と同じですが、ボタンを押すと横からスライドで出てくるタイプです。
データを書き出す際、ピクセルのズレがあるとアンチエイリアスがかかってしまい、画像ににじみが出ます。コーダー側で修正してから書き出しする必要が出てきて手間がかかってしまいますので、最初からきちんとピクセルにフィットさせるようにしましょう。

3.同じ意味には同じあしらいを

余白、ボックスの幅、行間など、同じ意味を持つ要素には、同じあしらいを使いましょう。
部分的に余白のサイズが違ったり、ページによって行間が違っていたりすると、同じCSSを適用できなくなるため、コーディングの作業効率が悪くなってしまいます。

4.input系のデザインは本当に必要か

テキスト入力、セレクトボックス、ラジオボタンなどのフォーム要素は、コーディングで変更するには少し手間がかかります。それだけのコストをかけてでも表現しなければならないポイントなのか、よく考えましょう。

5.デバイスフォントの部分は余裕をもって

画像のテキストではなくデバイスフォントで表示する部分は、ユーザーの環境によって見え方が左右されます。それは、ユーザーがフォントサイズを変更していたり、各ブラウザでデフォルトのテキストの種類や文字間などが微妙に違うため。

一行分のスペースにギリギリの文字数を詰め込んでしまうと、ブラウザによっては２行にまたがってしまい、デザインが崩れてしまうことも。

幅に余裕をもたせるか、２行になっても対応できるフレキシブルなデザインにしましょう。

6.レイヤーをグループで分けよう

本人じゃないとどこにどのレイヤーがあるのか分からない。そんな散らかった状態では、書き出しも一苦労。誰が見てもどこに何があるのかが分かるようにレイヤーをまとめ、大きなまとまりには分かりやすい名前をつけておきましょう。

7.割り切れるサイズで並べる

メニューの数が多い場合などに良さそう。サンプルでは、ドロップダウンをタップするとLightbox風にメニューが表れます。
例えば980pxの横幅に６つのボタンを横並びにする場合、単純に980割る6のサイズでボタンを作って余白分短くする、という大雑把な計算では、コーディング時の計算で割り切れず、数ピクセルのズレのためにCSSで微調整しなければならなくなることがあります。
ボタンの横幅に加え、ボタンとボタンの間の合計５カ所に余白が生まれることを頭にいれ、きれいに割り切れる整数にしておくと、コーディングが非常に楽なのです。

8.長いページはファイルを分けて

ランディングページなどの画像を多用した縦長のページを１つのPSDファイルで作ってしまうと、ファイルが非常に重くなります。切り抜くだけでローディングバーが出てきてしばらく待つ、というのでは効率が悪すぎます。また、ちょっとした修正が入るたびにじりじりと切り抜き時間を待つことにもなります。長いページは数ファイルに分けるなどの配慮をしてあげると、書き出し作業もサクサクと進むはず。

少しの気配りでコーディングの効率はグンと上がり、コストは下がります。クライアントに見せてデザインがFixする前に、コーダーとも連携をとって確認し合うといいですね。Webデザインはデザイナーだけがするものではないのですから。