【HTML・CSS】納品前に確認したいコーディングチェックポイント

弊社では制作物の品質の担保のために、コーダーの作業終了後からお客様に初校を提出する前に何度もチェックを挟んでいます。

1回目：コーダー（ユニットリーダー）チェック

誤字脱字、表示崩れ、リンク切れなどサイトの見た目から動作確認をおこないます。

2回目：担当デザイナーチェック

デザインの再現性、レスポンシブデザインなどを確認します。

3回目：担当ディレクターチェック

コーダーチェック、デザイナーチェックと同じ目線も持ちつつ、最終的な確認をします。

（前置きが長くなりましたが）今回は担当コーダー自身のセルフチェックの質を高めるために、各チェック担当者に提出する前に確認したいポイントを紹介します！

チェックポイント

①デザインの再現性

デザイン（PSD）データ上で距離を測り、その数値で余白を取っても実際のデザインからはズレることが多いです。

例えば、行間を指定するline-hightをかけているとブラウザ上ではテキストの上下に余白が生まれます。
しかし、デザインデータでは行間を指定すると文字の下にしか余白がつかないため、デザインデータ上で測った距離よりも余分な余白がつきます。

なのでデータ上では40pxの余白がついているところも35pxなど小さくする場合もあります。

コーディングしたページ全体のスクリーンショットを取り、デザインデータの上に不透明度を下げたスクショを重ねるとよりそのズレがわかりやすいです。
また、デザインのズレだけでなく誤字脱字の確認もできます。

弊社ではセルフチェックの段階で必ず実際の表示のキャプチャとデザインデータを重ね合わせています。
常に再現性の高いコーディングをこころがけています。

②フォームの入力欄のフォントファミリー

フォームの入力欄でよく使うinputやtextareaは、通常何もしないとデフォルトのフォントになってしまいます。（buttonやselectも同様です）
bodyやhtmlにfont-familyを指定していても引き継げません。

そこで少し手間ではありますが、各要素にフォントファミリーを継承するためのタグを書きます。

input,select,textarea,button{
font-family : inherit;
}

せっかくサイトのデザインに合わせたフォントを選んでいても、フォームだけデフォルトのフォントになってしまうと残念なのでしっかり確認しましょう。

③iOSのセーフエリア対策

これはiPhone対策になりますが、2017年に発売したiPhoneX以降はホームボタンがなくなり、画面内にホームバーが搭載されています。

なのでLPのようにページの下部に固定のコンバージョンボタンを設置したときはかならずセーフエリアの対策をする必要があります。

詳しくは以下の記事で紹介しています！

【HTML・CSS】納品前に確認したいコーディングチェックポイント

④数字、英語の全角を半角に統一する

クライアントから原稿をもらってコピペでテキストを流し込む際、数字や英語が全角になっていることがよくあります。

弊社ではデザイン、コーディング時に各担当者が意識して確認し、半角に訂正するようにしています。

ただテキストをコピペで流し込むのではなく、担当者自身も一度全文読んでみると全角・半角の表記の揺れだけでなく、言い回しとしておかしい部分や誤字脱字にも気が付くことができます。
コーダー自身が意識ができると修正が減ると思います！

⑤その他細かいチェック

上記で挙げたもの以外に、弊社ではさらに細かいチェック項目を設けています。

あくまでも一例ですが、

• 主要ブラウザチェック（Chrome/IE/Edge/Fire Fox/Safari）
• デバイスチェック（iPad/iPhone/Android）
• リンク切れ、ダミー画像やダミーテキストが入ったままになっていないか
• ©️(コピーライト)や&などの特殊文字はコードに置き換えてあるか
• FV（ファーストビュー）は必要な部分がきちんと見えているか
• 一目でユーザーがリンクと判断できるか（視認性）
• 各ページのmeta（title/discription/OGPなど…）
• 文書構造に沿ったマークアップができているか
• フォームの必須項目の入力がないときに警告が出るか

などなど…。

まとめ

今回はコーダー自身のセルフチェック力を高めるため、あるあるで見落としがちなチェックポイントを紹介いたしました！

是非細かいところまで気を配ったコーディングをして、質のいいサイトを作りましょう！