Webサイトの品質をアップさせる99のチェック項目
わが社では、納品データの精度を上げるため、チェックシートを使った品質管理フローを実施しています。これらの適応ルールは品質マニュアルで細かく規定されているのですが、今回は、チェックシートに記載しているチェック項目を公開します。納品データの品質で苦しんでいる制作者の方は、是非参考にしてみてください。
Webサイトを作り始める前にチェックする項目
これらはコーディングに着手するまでに確認しておく項目です。明確な指定がない場合には、制作側で判断して最適な設定を行い、必要な個所の確認を行います。コーディングガイドラインを支給されることもありますが、その抜け漏れのチェックにも使います。
1. 対象とするOS、ブラウザは？
2. 対象とするスクリーンサイズは？
3. Googleプレイス登録の要否は？
4. link rel=”canonical”の指定は？
5. meta name=”robots”の指定は？
6. doctypeの指定は？
7. meta charsetの指定は？
8. meta copyrightの指定は？
9. PrintCSSの要否は？
10. JavaScriptのライブラリに関する指定は？
11. プラグインに関する指定は？
12. アクセス解析コードの指定は？
13. ダウンロードデータのトラッキングコードの指定は？
14. 外部リンクのトラッキングコードの指定は？
15. リンクパスの記述方法の指定は？
16. トップファイルに対するリンク方法の指定は？
17. スマホ、タブレットPCでの表示保証の要否は？
18. ソーシャルボタン設置の要否は？設置する場合の選択は？
19. サーバへの接続方法は？
20. https の有無は？
21. サーバには.htaccess の利用が可能か？
22. Webサーバの OS は？
23. 利用できるPHP のバージョンは？
24. 利用できる Perl のバージョンは？
25. 利用できる DBの種類とバージョンは？
26. フォームのmeta charset指定は？
27. フォームのメール送信先は？
28. フォームのメール件名の内容は？
29. フォームのメール本文の内容は？
30. ブログで管理するページはどれか？
31. ブログの管理画面で編集可にすべき項目は？
32. ブログのプラグイン使用に関する制約は？
ページ毎にチェックする項目
これらはページを作成するたびに確認する項目です。オーサリングソフトの検索機能などを使って一括チェックする項目もありますが、基本的には1個流しで、1ページ制作が終わるたびに全ての項目を確認していきます。なお、原稿未着で対応保留などが発生する場合には、単に未/済だけでないステータス管理も含めて行うのが良いでしょう。
33. link rel=”canonical”は適切に設定されているか？
34. meta name=”robots”は適切に設定されているか？
35. doctypeは指定されたバージョンか？
36. meta charsetは指定されたコードか？
37. meta copyrightは指定されたものが入力されているか？
38. meta OGP facebookイメージのリンクは設定されているか？
39. apple-touch-iconイメージのリンクは設定されているか？
40. link rssは設定されているか？
41. meta keywordsは正しく入力されているか？
42. meta descriptionは正しく入力されているか？
43. アクセス解析コードは指定されたものが設定されているか？
44. リンクのパス指定方法は指定された方法で設定されているか？
45. titleは正しく入力されているか？
46. ダウンロードデータにトラッキングコードが正しく設置されているか？
47. 外部リンクにトラッキングコードが正しく設置されているか？
48. リンク切れしている箇所はないか？
49. ページ内リンクは正常に動作しているか？
50. パンくずリストは正しく記述されているか？
51. トップファイルに対するリンク指定の記述は統一されているか？
52. ナビゲーションは正しくインジケートされているか？
53. 外部リンクにはアイコンが付与されているか？
54. PDFリンクにはアイコンが付与されているか？
55. h1は正しく入力されているか？
56. 原稿は正しいものが掲載されているか？
57. 画像は正しいものが表示されているか？
58. 仮、サンプル、ダミーのテキストは残っていないか？
59. 仮、サンプル、ダミーの画像は残っていないか？
60. 誤字脱字が含まれていないか？
61. 表記統一チェック：半角、全角、機種依存文字
62. 表記統一チェック：漢字の開き、閉じ
63. 表記統一チェック：日付の表記
64. 表記統一チェック：ローマ字表記
65. 社名や代表者名に誤字脱字や表記の不統一はないか？
66. オンマウスのギミックは正常に作動しているか？
67. noscriptは設定されているか？
68. 電話番号に対してclassとtitleが設定されているか？
69. 必要な CSS だけが読み込まれているか？
70. 必要な JavaScriptだけが読み込まれているか？
71. hxタグは順番通り設置されているか？
72. すべての画像にaltは正しく設定されているか？
73. すべての画像にサイズ指定がされているか？
74. 文字サイズを変更してレイアウトは崩れないか？（全ターゲットブラウザで）
75. 文字が多く入ると崩れるレイアウトではないか？（全ターゲットブラウザで）
76. 表示遅延や動きのガタつきは発生してないか？（全ターゲットブラウザで）
77. JavaScriptエラーは発生してないか？（全ターゲットブラウザで）
78. ソーシャルボタンは正常に動作しているか？（全ターゲットブラウザで）
79. フォームのlabelタグは正常にクリックできるか？（全ターゲットブラウザで）
80. 指定の用紙サイズで問題なく出力されるか？（全ターゲットブラウザで）
Webサイト全体でチェックする項目
モックアップが一通り完成した段階で行うWebサイト全体のチェック項目です。チェックのタイミングは、項目によってテスト公開時もしくは納品直前となります。要望対応などでテスト公開後の修正範囲が大きくなった場合などは、再度チェックをかけることもあります。
81. Googleプレイスの登録は完了しているか？
82. sitemap.xmlは設置されているか？
83. sitemap.xmlの登録は完了しているか？
84. faviconは設置されているか？
85. OGP facebookイメージを作成し、設置しているか？
86. apple-touch-iconイメージを作成し、設置しているか？
87. JavaScriptライブラリは指定のバージョンか？
88. JavaScriptライブラリは指定されたライブラリか？
89. ページ全体でリンク切れが発生していない？
90. 不要ファイルがデータに含まれていないか？
91. JavaScriptに不要なfunctionが残っていないか
92. JavaScriptに不適切なコメントが残っていないか？
93. CSSに不要なセレクタが残っていないか？
94. CSSに不適切なコメントが残ってないか？
95. リンクテキストにhover、visitedが設定されているか？
96. CSSバリデート内容に問題ないか？（ハック系は除く）
97. 404 エラー時の画面は用意されているか？
98. スマートフォン向け文字サイズ自動調整機能は制御されているか？
99. スマートフォン向け自動電話番号機能は制御されているか？
チェックシート運用にあたっての注意点
これらのチェック項目、プロジェクトによって要件が異なるため、実際には項目の追加や更新などを、プロジェクト毎に行っています。特にシステム色が強い案件では、これとは全く別のテストシナリオを作成することもあります。とはいえ当社の場合、開発といってもフォームやブログ程度のことが多いので、多くはこの基本項目を少しカスタマイズする程度です。
あと大事なのは、チェック方法もルール化することです。チェック方法自体が間違っていたり、人によってやり方が違っていては、効果が期待できません。利用ツールやプロセスなど、チェック方法はできる限り共通化するようにしています。
当然ながら、これらの項目だけでミスや不具合をゼロにすることはできません。しかし少なくとも、ミスを発生する確率をかなり下げることができます。さらに第三者によるダブルチェックをかけることで、より少なくすることもできます。
過剰なテストは価格競争力を失わせるため、程よい程度の見極めが必要なのですが、当社ではこのようにチェックシートやチェックプロセスをフォーマット化し、さらにダブルチェックする項目を限定することで、現実的な工数と品質のバランスが取れるようにしています。もちろん、よりベストなやり方はこれからも模索していこうと考えています。いい方法が見つかったら、またここで発表させていただきます。