【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;
}

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

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

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

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

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

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

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

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

あくまでも一例ですが、

などなど…。

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

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

この記事をシェアする

【jQuery】text()メソッドでHTML要素内のテキストを操作する

【勝手にWEBサイトレビュー#23】臨場感あふれる！マウンテンバイクの映像作品を…