納品前に助かった！今Web制作している人必見の品質・納品チェックシート
テスト環境、本番と同じ環境にサイトを置いたときに確認しておきたいことってなんだろう。公開後のクレームやトラブルを防いだり、サイト公開・納品前にサイトの品質を上げるためにチェックしておきたいことをまとめました。大切だけど意外とチェックし忘れそうな内容を知りたいとき、過去の失敗をもとに作成したシートを公開します。
エンジニア速報は Twitter の@commteで配信しています。
Sponsored Link
もくじ
品質管理チェック項目
機能
要件定義をもとに指定の機能が実装済か確認します。
コーディング
| 項目 |
解説 |
| バリデーション |
マークアップは正しいか、文字コードはUTF-8 になっているか
The W3C Markup Validation Service
|
| ビューポート設定 |
スマートフォンOSブラウザーが採用している仮想ウィンドウの「viewport」を設定します。user-scalable=noと指定すればピンチイン／ピンチアウト（拡大・縮小）を無効化できます。 |
| レタリング |
文字・書体は指定どおりにデザインされているか、他環境PCでも、フォントにズレがないか |
| 表示速度 |
パフォーマンス・チューニングテストを行う。表示速度に問題はないか |
| 不要なソース |
ファイル内にサイトの絶対パスが残っていないか、ソース内の不要なコメントは除去しているか |
ドメイン
| 項目 |
解説 |
| co.jpの新規取得 |
会社情報や登記簿謄本が必要な旨を先方に伝えたか※ co.jpの新規取得の場合時間がかかります。 |
| ドメイン本登録の確認 |
※ 「有限会社」は、2006/05/01 以降は新規設立をすることができない組織として上位登録機関(JPRS)により、制限されています。 |
| google apps 用にDNSを設定 |
メールをGoogleAppsで利用させる場合、サーバでAレコード情報（CNAMEレコード情報）を設定します。 ※反映に大体数時間～3日かかります。 |
UX
| 項目 |
解説 |
| スクロール |
快適にスクロールできるか、スクロール量に問題ないか |
| 不要なエフェクト |
ローディングエフェクトなど、指定以外のデザインを多様していないか |
| インタラクション |
ユーザーの入力に応じて適切な応答や画面遷移ができているか |
| テーブル |
スマホ時のtable の見え方に問題ないか、縦長に伸びていないか。
レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
|
| 解像度と画像 |
様々なパターンによる解像度でグリッド崩れや画像周辺の崩れが起こっていないか |
| ファインダビリティ |
スムーズに情報へのアクセスができるか、必要な情報を探しやすく配置しているか。ナビやパンくず、メニューなど。 |
表記とレイアウト
| 項目 |
解説 |
| 表記 |
企業指定の表記規定のゆれ、文章のスペルミス、改行の位置、行間、ジャンプ率の見直し |
| ダミー画像 |
画像切れはないか、画像なしの場合ダミー画像は表示されるか |
| アンカーリンク |
リンク切れはないか、ページ内リンクは正常に動作するか |
| 階層 |
ディレクトリの階層が深くなっていないか |
| プログレッシブ・エンハンスメント |
プログレッシブ・エンハンスメントの考え方を先方に話したか。どの環境でも最低限の情報を提供し、高水準の端末や環境が整っているブラウザではリッチな見せ方でコンテンツを提供しましょうという考え方です。 |
| スマートフォン |
スマートフォンでの表示崩れはないか、実機でチェックしたか |
| 404ページ |
404ページの設置と画面を先方に確認 |
ブログ
WP管理画面
| 項目 |
解説 |
| 問い合わせリンク |
管理画面内に自社への問い合わせリンクを設置したか、ダッシュボードに注意書き、使い方などの文言を追加 |
| モデレーション |
読者が投稿したコメント等をチェック可能か、メールで先方へ通知できるようになっているか |
| 設定 |
テーマ、プラグイン、バージョンアップ通知OFF、管理画面内のデフォルト設定・プラグインを非表示、自社の設定画面を設置したか、稼働するか |
| 権限 |
管理画面内のユーザー権限の設定、通知メール先の設定を行ったか |
| 画像アップロード調整 |
記事投稿時、画像アップロード時に制限をかけているか、大きな写真ファイルでテストしたか |
| 固定ページ |
管理画面内で、固定ページのコンテンツ内を簡単に編集できるようにしてあるか、テンプレートを適用しているか |
管理マニュアル
| 項目 |
解説 |
| 表記 |
ログインのIDとパスを記載したか、管理画面と管理マニュアルの内容（メニューのスクショ等）は一致しているか |
| URL |
参考URLのアドレスは打ち込みやすいように短く記載してあるか、またはQRコードを貼ってあるか |
| 使い方 |
画像とリンク挿入の解説は分かりやすいか、PDFファイルの挿入を記載しているか、コメントの扱いを明確に解説してあるか |
| SNS運用 |
SNSの簡易的な運用方法を記載したか（現担当者が変わる場合があるので） |
Google Analytics
| 項目 |
解説 |
| 埋め込み |
Google Analytics の埋め込み、複数のサイトを一元管理できるように設定したか |
| コンバージョンの設定 |
Google Analytics コンバージョンの設定（問い合わせ／資料請求／予約／メルマガ登録／発注） |
SEO
| 項目 |
解説 |
| メタ設定 |
タイトル・ディスクリプション・キーワードの設定 ※クライアントのメタ入力労力を省く場合、ブログ記事のメタは自動出力（本文からの抜粋）にする |
| マイクロフォーマット |
マイクロフォーマット（文章をクローラーに正しく伝える） リッチスニペット設定。
microdata について - ウェブマスター
|
| ウェブマスター設定 |
Webmaster の設定、GAとの連携は済んだか |
| クローラー対策 |
OGP 、サイトマップ、パンくず設定 |
以上、納品前にサイトをチェックする時に使えるシートでした。
Leave a Comment