人手に頼らないWebサイトの戦略的品質管理指南

Webサイト品質管理のチェック項目リスト

新人スタッフに注意点として伝える、発注時に指示する具体的条件など、ぜひ活用してほしい。

23 94 1272

[欠陥だらけのWebサイトを劇的改善！]
人手に頼らない
Webサイトの戦略的品質管理指南

ここでは、これまでに述べたようなWebサイト品質管理を実現するためのチェックリストをお届けする。

新人スタッフに注意点として伝える、Webサイト制作会社に発注する際にクリアすべき品質の具体的条件として伝える、納品物のチェック時にリファレンスとするなど、使い方はさまざまだ。ぜひ活用してほしい。

凡例

重要度の表記	意味
★★★	致命的なエラーにつながる必須確認箇所。日頃から注意の必要な場所であるため、確認漏れがあってはならない。
★★	しばしば確認漏れが生じてトラブルにつながってしまう箇所。手間を惜しむとクレームにつながってしまうポイントだ。
★	問題が認識されないまま放置されてしまう箇所。確認フローを見直し、これらがアップされないようにしたい。

ページ制作時必須確認項目

項目	重要度	解説	種別
記載されたとおりのリンク先ページに移動するか？	★★★	ページ移動のリンク切れは特にユーザーに対する影響が大きく、離脱の大きな要因となるため、確認を徹底する必要がある。	リンク
リダイレクト先のリンクが切れていないか？	★★★	サイト内へのリダイレクトや外部サイトへのリダイレクトなどは設定状況を確認して万全を期したい。
アンカーリンクはすべて意図する箇所に移動されているか？	★★	アンカー（ページ内リンク）が正常に動作しないエラーは多くのサイトで見られる。リンク先の更新などによりアンカーが切れないように確認が必要だ。
各推奨ブラウザで変わりなくアンカーリンクが機能するか？	★	アンカーリンクの記述でIEでしか正しく動作しないケースも多く見られる。
画像が指示どおりに正しく表示されているか？	★★★	バナーや説明画像などが切れているケースは致命的だ。背景画像やスペーサーgifなど一見わかりにくいエラーも多い。	画像
画像のロールオーバーはON/OFFとも表示されるか？	★★	オンマウスにした際のエラーは、目視確認の際に見過ごしやすい。すべてのロールオーバーの動作確認を徹底したい。	画像
テキスト・フォントは指定どおりの表示がされているか？	★	テキストに関する指定漏れは目視確認の際に見過ごしやすい。文字校正と合わせて確認しておきたい。	CSS/ JavaScript
画像・リンクの指定が仮の文言のままになっていないか？	★	テンプレートを元にページを作成する場合、仮の指定がソース内に残ってしまっている場合がある。ユーザーに管理の甘さを指摘されるためこれらは撲滅しておこう。	表示
各ページのタイトルはルールに沿って記述されているか？	★★★	近年タイトルの設定は徹底されるようになっているが、それだけに漏れがあった場合にユーザーの印象を悪化させる要因となる。	HTML
各ページのMETA情報はルールに沿って記述されているか？	★★	意識の高いサイトでも漏れの多いポイントだ。またブラウザ上での目視確認だけではチェックできないため気を付けておきたい（特にmeta description）。	HTML
すべての推奨ブラウザで動作・表示に乱れがないか？	★★	各種主要ブラウザで表示が変わる場合があり、動作・表示の乱れが生じていると確実な離脱要因となってしまう。手間のかかる箇所だが重要度は高い。	ブラウザ
さまざまな解像度・ブラウザサイズで表示の乱れがないか？	★★	ブラウザだけでなく、ブラウザの表示範囲によってもレイアウトの崩れが発生する場合がある。ブラウザのウィンドウサイズを変えていくつかの表示範囲で目視確認することが重要だ。	ブラウザ
フォーム要素はすべて抜けがなく適切なサイズでの表示になっているか？	★★★	フォームはサイトのゴールとなる場合が多いが、この箇所のエラーは致命的な被害となる。デフォルトチェックの値など、すべて仕様どおりであるか確認したい。	フォーム

サイトメインテナンス用定期確認項目

項目	重要度	解説	種別
外部リンクが設定されているページで、リンク切れが発生していないか？	★	外部サイトはこちらの意図とは無関係に変化するため、外部リンクを設定するページに対しては定期的なメインテナンスを行いエラーを防ぎたい。	リンク
各ページのタイトルはコンテンツに合わせてそれぞれ設定されているか？	★	タイトルはページの内容に合わせて一意（他と重複しない）であることが望ましい。検索エンジンでの表示時によりユーザーに好印象を与えるため改善していきたい。	HTML
各ページのMETA情報はコンテンツに合わせてそれぞれ設定されているか？	★	タイトル同様ページの内容に合わせて一意な（他と重複しない）META情報を設定することが望ましい。また、更新により不要となった情報を削除するようメインテナンスを行いたい。	HTML
ALTは読み上げに無関係なものを含め、すべての画像に設定されているか？	★	音声読み上げブラウザからのアクセスのためにALT属性の設定は漏れなく行いたい。アイコンやイメージ画像など内容のない画像についてもALT属性を設定するよう推奨されている。	画像
階層が深すぎるディレクトリはないか？	★★★	階層の深すぎるディレクトリはSEOの観点からもメインテナンス性も良くない。これらの存在を確認し、適切な振り分けを行おう。	サイト構造
読み込みが極端に低速なページは存在しないか？	★★	読み込みに時間のかかるページはユーザーの離脱要因として大きい。低速なページを把握しておき、以後の改善につなげていきたい。	サイト構造

ベンダーに要確認！詳細確認項目

項目	重要度	解説	種別
HTMLファイル内に不要な要素が残っていないか？	★	HTMLソース内にはブラウザ上では表示されない不要なタグやコメントが残されている。サイトの品質を高く保つため、これらのメインテナンスも欠かさず行いたい。	HTML
高さ/幅がすべての画像に設定されているか？	★	画像の高さ/幅指定はページの読み込み時の画面描画や画像がエラーになった際のレイアウトに影響するため、すべての画像に高さ/幅を指定しておきたい。	画像
スペーサーgifなど使わずに済む画像を配置していないか？	★★★	CSSレイアウトが標準的になる今、スペーサーgifを使う必然性は減っている。ページ確認の要素としても無駄が多いため、不要な要素は削除していこう。
スペーサーgifなど目視できない画像のリンク切れがないか？	★	スペーサーgifは目に見えない要素であるため、リンク切れや意図しない設置が確認しにくい。メインテナンスを行う場合はこれらの確認を指示したい。
CSSやJavaScript内で指定されたリンクが切れていないか？	★	外部ファイルのリンク切れは多く発生するが、確認の難しさから対応が後手になりやすい。定期的なチェックを行いたい。	CSS/ JavaScript
コンテンツの削除に合わせてCSSの該当箇所も整理されているか？	★	コンテンツを削除した場合、共通のCSSに削除したページにのみ使用した設定項目が残る場合がある。これらは以後のメインテナンスの弊害となるため、確実に削除を行いたい。
ページ内のJavaScript要素が無効な場合でもページの機能に問題がないか？	★★★	JavaScriptが無効な状態で機能しないサイトでは確実に離脱されてしまう。JavaScriptが無効な状態でも情報が得られるか、確認しておきたい。
フォームはSSLなどにより情報を暗号化して送信できているか？	★★★	情報の漏洩は企業にとって大きな損害となる。情報の暗号化などセキュリティの確保が行われているか確認が必要だ。	フォーム