Webサイトの品質を上げるための確認項目と方法

どうも、Webサイトの品質を上げるために毎回品質のチェックをしているチェックザワです。
Webサイトの内容を確認する項目とアドオンなどのWebサービスを使った確認方法を自身の覚書としてまとめてみました。

Webサイトの良し悪しとは？

Webサイトの良し悪しを判断する方法はデザインやJavaScript等によるギミックに目が行ってしまいます。
しかし、Webサイトのクオリティを支えている根幹的なものはページタイトルやテキストに誤字脱字が無いか？代替テキストの不備は無いか？という人的ミスが無いということです。

人間なので必ずミスは生じます。
人的ミスを防ぐためWebサイトの細かい部分までサイトを確認する必要があります。

Webサイトの内容を確認する項目とブラウザGoogle Chromeの拡張機能を中心にWebサービスを使った確認方法を覚書としてまとめたので紹介します。

ページタイトル

• title要素は原稿通りか？

ページタイトルの確認方法

• ページのソースを開いて、ページ内検索（[Ctrl]+[F]）を使いソースのタイトルが該当するか確認する。

メタ情報

• description、keywords、OGP情報は原稿通りか？

メタ情報の確認方法

• Chromeの拡張機能「Alt & Meta viewer」の「Title Meta 表示」をクリックして確認する。

• Alt & Meta viewer – Chrome ウェブストア

テキスト

• 原稿通りか？
• 文頭、文末にコピペミスがないか？
• 半角スペース等、余分なものが入っていないか？

テキストの確認方法

• ページ上でページ内検索（[Ctrl]+[F]）を使いソースのタイトルが該当するか確認する。
• テキスト大量にある場合「difff《ﾃﾞｭﾌﾌ》」https://difff.jp/を使い原稿とページの差分を確認する。

代替テキスト

• 画像にaltは正しいテキストが入っているか？
• altが不要な画像の場合も空設定（ alt=”” ）にしているか？

代替テキスト内に不要なスペースや改行が入っていないか

代替テキストの確認方法

• Chromeの拡張機能「Alt & Meta viewer」の「画像の Alt 表示」をクリックして確認する。

• Alt & Meta viewer – Chrome ウェブストア

画像の加工、図版の作成

• 画像内のテキストは正しいか？
• 画像のサイズ指定が適正か？

リンク

• リンク切れやダミーリンクは残っていないか？
• ページ内リンクは正常に動作しているか？
• target属性は適正か？

リンクの確認方法

• Chromeの拡張機能「Check My Links」をクリックして確認する。

• Check My Links – Chrome ウェブストア

HTMLの文法

• バリデータでエラー・警告はないか？
• タグの不備はあるか？

HTMLの文法の確認方法

• Chromeの拡張機能「HTML Validator」を使う。（[Ctrl]+[Shit]+[I]からDeveloper toolを表示させて「HTML Validator」からエラーを確認する。）

• HTML Validator – Chrome ウェブストア

ブラウザでの表示

• 表示崩れがあるか？
• カラム落ちはしてないか？
• 適正な余白か？

ブラウザでの表示の確認方法

• 全体に関わるCSSを触った際に本番とテストアップしたページを見比べて確認する場合、Chromeの拡張機能「Tile Tabs WE」を使うと1クリックで左右対象のブラウザで確認できます。

• Tile Tabs WE – Chrome ウェブストア

JavaScript

• 機能（ギミック）が要件定義に沿っているか？
• エラーは発生していないか？

JavaScriptの確認方法

• Google Chromeで「デベロッパーツール（[Ctrl]+[F]）」を表示させて赤字表示（エラー）が発生していないか確認する。

まとめ.自分の目を疑う

ミスが無いと自信があっても、必ずミスが出てきます。
そこには大丈夫だろうという根拠のない安心感であり、人は物事を、自分が見たいように見るという性質からくるものです。

常に自分の目を疑ってテキストの誤字脱字、HTMLの記述不足など品質を上げるための確認をしたい。そのサポートとしてWebサービスやブラウザのアドオン機能を使うことを推奨します。

関連記事

おすすめ記事