デザインデータを受け取ってすぐコードを書き始めると、終盤で「この状態が決まっていない」と気づいて手戻りします。先に確認しておけば済む項目がいくつかあります。

着手前に確認する7項目

1. 対応ブラウザと端末（どこまで見た目を揃えるか）
2. スマホのデザインがあるか。無ければ誰が決めるか
3. ホバーやタップ時の見た目
4. テキストが長くなったときの折り返し
5. 一覧に項目が0件のときの表示
6. フォームのエラー表示
7. 画像を差し替えたときの比率

「0件のとき」と「文字が長いとき」は、デザインに描かれないのに必ず起きます。ここを先に決めておくと、公開直前の慌ただしい時期に崩れを見つけずに済みます。

進める順番

1. 共通部分から作る

ヘッダー・フッター・ボタン・見出しなど、複数ページに出るものを先に作ります。ページごとに作ってから共通化するより、最初に切り出すほうが早く、ばらつきも出ません。

2. 色・余白・文字サイズを変数にする

デザインで使われている値を洗い出して変数に置きます。あとから「全体的に余白を詰めたい」と言われたときに、1か所で変えられます。

3. 一番複雑なページから組む

トップから順に作ると、後半の複雑なページで共通部分の作りが足りないことに気づきます。難所を先に通しておくと、残りは流れ作業になります。

4. 実際の文章を入れて確認する

ダミーテキストのままだと、長さの問題が見えません。原稿がまだなら、想定より長い文字列を入れて崩れないか見ておきます。

受け取るデータの形

• XD / PSD / Figma のいずれか。書き出し済みの画像も一緒にいただけると早い
• フォントの指定（Webフォントか、画像にするか）
• PC のみの場合は、その旨を一言

当社はデザインデータからのコーディングを1ページ15,000円から承っています。スマホ用のデザインが無い場合も、こちらで並びと余白を決めて組みます。まずデータをお送りください。