【納品前のチェックリスト】コーディング後の21のチェック項目【品質保証】
コーディングの品質を保証するためのチェック項目を21個およびオプションチェック項目を紹介します。
目次
共通チェックリスト21項目
こちらは、すべての案件に共通する品質チェック項目をまとめたものです。
| チェック項目 | チェックの方法 |
|---|
| 誤字脱字はないか | テキスト比較ツール |
| 改行位置は適切か | タブレット768px幅・スマートフォン320px幅 |
| フォントは指示書どおりか | WhatFont |
| 色は指示書どおりか | ColorPick Eyedropper（Chrome拡張） |
| レスポンシブ化はスムーズか | レスポンシブデザインモードで目視確認 |
| 320px、768px、PCカンプ幅の表示崩れ | レスポンシブデザインモードで目視確認 |
| 水平スクロールしないか | レスポンシブデザインモードで目視確認 |
| ホバー時（ボタン類）の挙動は設定されているか | 指示書確認・動作確認 |
| JavaScriptの挙動は正しいか | 指示書確認・動作確認 |
| alt属性が正しく設定されているか | 画像ALTチェッカー |
| 見出し構造は適切か | ブックマークレット |
| Title, Description, Keywordは設定されているか | ブックマークレット |
| 閉じタグチェック | HTMLエラーチェッカー（Chrome拡張） |
| W3Cチェック（HTML、CSS） | HTML, CSS |
| box-shadow、opacity類は指示書どおりか | 目視確認 |
| デザインカンプとWebサイトに表示ズレはないか | デザインカンプを画像で書き出して、PerfectPixelでチェック |
| 各種ブラウザ・デバイスで表示崩れはないか | 実機で確認（Mac, Windows, iPhone, Android） |
| リンク切れはないか | Frogで確認 |
| コンソールエラーが出てないか | デベロッパーツール |
| 画像が圧縮されているか | 圧縮サービス等を活用 → https://tinypng.com/ |
| 画像が同じか | 目視確認 |
オプションのチェック項目
こちらは、案件の内容に該当する項目があればチェックすべき項目です。
メールフォーム
| チェック項目 | 備考 |
|---|
| 送信後、管理者と問い合わせ者にメールが届くか | テストサーバーで実験 |
| タブ（キーボード操作）で移動できるか | |
| プレースホルダーは設定したか | |
| 必須項目は正しく機能するか | |
| 住所の自動入力は機能するか | |
| radio, checkbox, selectは機能するか | |
モーダル
| チェック項目 | 備考 |
|---|
| タブキーなどでキーボード操作できるか | |
| エスケープで解除できるか | |
WordPress関係
| チェック項目 | 備考 |
|---|
| 不要なプラグインは削除してあるか | |
| 不要なテーマは削除してあるか | |
| 不要なコード・コメントアウトは削除してあるか | |
| コメントアウトに不足はないか | セクション・要素等ごとに視認性良く表示 |
| セキュリティ対策は適切か | |
| サイト表示速度は適切か | |
| 管理者設定は適切か | |
| メディアライブラリに不要な画像はないか | |
| 404ページは準備したか | |
| 不要なページは削除してあるか | |
| ファビコンは用意してあるか | |
| OGP設定は適切か | Twitter等で実験してみる |
| Google Analytics・サーチコンソールは設定したか | |
| 操作マニュアルは用意してあるか | |
その他
| チェック項目 | 備考 |
|---|
| httpでアクセスした時httpsにリダイレクトされるか | |
この記事を書いた人
■清水WEB制作代表
■コーディング：WordPress（オリジナルテーマ制作等）・HTML・Sass・FLOCSS・JavaScript（jQuery）等
■集客力：YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成：博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術：Amazon Kindle出版で、写真集・撮影編集解説書を５冊好評発売中です
SIM
