今回はWeb制作コーダーが納品（初稿の提出）前に確認するべきチェックリストをご紹介します。
一つずつの細かい使用方法ではなく、提出時に確認するべき項目を網羅的に記載しています。
全て最低限確認しておきたいことなのでぜひ確認してください！
かわてつ今回紹介するものを、Notionやスプレットシートにまとめておいて、
実際の案件で納品するコードと共に品質リストも送付するととても親切ですね！
HTML・CSSの構文
Nu Html Checker
URLを入力するだけで、構文が正しいかの確認ができます。
HTMLエラーチェッカー
タグの過不足を確認できるChromの拡張機能です。
The W3C CSS Validation Service
URLを入力するだけで、エラーの確認ができます。
リンクの範囲は適切か
aリンクのホバーやクリックの領域が正しいか確認しましょう。
例えばカードであれば、カード全体をクリック領域にして、カード全体にホバーしたら色が変更されるべきです。
ボタンも同様ですね。
ボタン全体ではなく、ボタン内の文字のみクリックしたらボタンが機能するなどがないようにしましょう！
画像
2倍での書き出しと圧縮
Retinaディスプレイに対応するために、画像は2倍で書き出しをして圧縮する必要があります。
gulpを使用していて、圧縮できている方はそれでも大丈夫です！
altの設定
JS（jQuery）
コンソールエラーチェック
検証ツールのコンソールにエラーがないか確認しましょう。
挙動確認
各挙動を手動で確認して問題がないかは見ておく必要があります。
確認した挙動を一つずつ記載すると親切です。
デザインの再現ができているか
ピクセルパーフェクト
ピクセルパーフェクトで重ねた画像をスクショして添付すると良いです。
フォントがカンプ通りか
フォントを確認できる拡張機能です。
デザインカンプのフォントと同じになっているか確認しましょう。
表示崩れチェック
どの横幅でも表示崩れがないか
スマホ、タブレットサイズの表示が正しくても、中途半端な横幅で表示崩れが起きているのは良くないです。
ユーザーがどのサイズで見ているかはわからないので、（スマホやタブレットを横画面で見る人もいるので。）
検証ツールで、320px〜1920px以上全ての表示が崩れていないかを見ます。
特にブレイクポイントの前後1pxは表示崩れが起きやすい箇所なので要チェックです！
各ブラウザでの表示崩れがないか
ブラウザごとに表示が変わったりすることもあるので、主なブラウザでの表示確認はしておきましょう。
主なブラウザは下記です。
- Chrome
- Safari
- Edge
- FireFox
また、確認したブラウザと端末（スマホやPC等）を記載しておくと親切です。
その他
報告するべきこと
発注者に報告するべきことが発生した際は些細なことでも報告するべきです。
- SPとPCでテキストが異なっている場合（どちらに合わせるか等）
- 保守性を考えてデザインと異なるコーディングをした時
などは必ず報告しましょう。
上記だけではなく、先方に確認してほしい箇所があれば都度報告する癖をつけましょう！
WordPress化を想定したコーディング
静的コーディングの後にWordPress化を実施する予定のものであれば、
動的対応を考慮したコーディングをすることも大切です。
- テキストの増減
- 画像の差し替え
- カードの枚数の追加
上記の場合で表示崩れが起きないコーディングができると、「できるコーダー」として評価していただけます！
まとめ
今回紹介した品質チェックは初稿提出時や納品の際に最低限実施しておきたいことです。
当たり前の品質管理を当たり前にすることはとても大切です！
コードだけではなく、品質チェックリストも併せて添付すると、発注者側は助かります！
ぜひ真似してみてください！
