Webサイトの品質管理チェックリスト！チェックに役立つツール9選

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

Webサイトの品質管理を行ううえで、必要なチェック項目を紹介していきます。Webサイトの中で特にチェックが必要となる部分は、大きくわけて以下の6つです。

これらの各項目の詳しい内容について見ていきましょう。

1.meta要素

meta要素では主に以下の項目をチェックします。

・charsetの設定は適切か
・titleの設定はできているか
・descriptionの設定は適切か
・keywordの設定はできているか
・viewportの設定は適切か
・robotsの設定はできているか
・OGPの設定はできているか

meta要素は、Webサイトの情報を検索エンジンやブラウザに伝える役目がありますので、設定の確認はしておきましょう。

2.フォーム

フォームでは主に以下の項目をチェックします。

・入力項目が分かりにくくなっていないか
・必須項目の入力の確認・エラー表示が正しくされるか
・labelがあるか、正常かどうか
・パソコン・スマートフォンでのメール送信が正しくされるか
・SSL/TLS暗号化によって送信されるか

問い合わせフォームはユーザーの利便性、送受信の正確さが大切です。見落としがちですが、トラブルになる前に確認しておきましょう。

3.画像

画像では主に以下の項目をチェックします。

・altタグは正しく設定されているか
・画像のサイズ指定は適切か
・画像の容量がちゃんと圧縮されているか
・画像はRetina対応になっているか

画像はクローラーに認識されているか、各端末のサイズ表示は適格かを確認しましょう。
また、画像をそのままWebサイトにアップロードすると、容量が大きく、サイトの表示スピードが遅くなる原因となるため、圧縮サイトなどを使い、あらかじめ容量を圧縮した画像をアップするようにしましょう。

▼おすすめの画像圧縮サイトはこちら

ちょうどいい画像圧縮サイト

ちょうどいい画像圧縮サイト 表示速度向上に貢献する「ちょうどいい」画像圧縮サービス。フォルダ階層を保持しながら、JPG、PNG、WebP形式に対応。最大10MB、40ファイルまで一括圧縮可能。Web制作の効...

4.文章

文章では主に以下の項目をチェックします。

・誤字脱字はないか
・表記ゆれはないか
・表記統一ができているか
・見出しや小見出しのマークアップができているか

見出しの設定の正確さ、誤字脱字、表記ゆれなどを、ユーザー目線で確認します。

5.リンク

リンクでは主に以下の項目をチェックします。

・リンク切れしている箇所がないか
・リンク箇所はリンクであることが分かりやすいか
・リンクテキストに「hover」「visited」が設定されているか
・スマートフォン向け自動電話番号機能の設定はできているか

サイト内でリンク切れを起こしていないか、ユーザー目線で分かりやすいかなどのほかにも、リンクテキストにホバーが効いているかどうかや、訪問後にリンクテキストの色が変わるかの確認なども行います。

6.WordPress

WordPressでは以下の項目をチェックします。

・phpのバージョンは 最新バージョンを推奨
・管理画面のログイン情報を変更
・XMLRPC防御の適用
・パスワードは半角の英数字で長めに設定
・パーマリンクは数字ベースが基本
・「検索エンジンがサイトをインデックスしないようにする」のチェックを外す
・ヘッダーとフッターはテンプレートを分ける
・画像はレイアウトが崩れないようにサイズ設定
・ビジュアルエディターで投稿しても問題ないCSSにしておく

WordPressを利用しているサイトは上記の設定を詳しくチェックし、サイトの安全性を保てるようにしましょう。

Webサイトの品質チェックに役立つツール10選

紹介するのは、「速度計測」「レスポンシブ対応」「HTML」「CSS」に対するチェックを簡単にできるツールです。これらの中から、複数のツールを併用することがおすすめです。

役立つツールを9個厳選しましたので、ぜひ参考にしてください。

Webサイトの品質チェックに役立つツール	チェック項目	費用
Google PageSpeed Insights	サイトの速度を計測するツール	個人、法人どちらの利用も無料
WEBPAGETEST	サイトの速度を計測するツール	無料APIの使用は有料
GTmetrix	サイトの速度を計測するツール	無料、一部有料
Pingdom Website Speed Test	サイトの速度を計測するツール	無料
Resizer	レスポンシブデザインのテストツール	無料
Nu Html Checker	HTMLのチェックツール	無料
構造化データテストツール	構造化データのテストツール	無料
CSS Validator	CSSのチェックツール	無料
Screenfly	レスポンシブデザインのテストツール	無料

1.Google PageSpeed Insights

「Google PageSpeed Insights」は、Webサイトの速度を測定するツールです。測定するサイトのURLを入力することで、現時点のサイト全体をスコアとして表示し、改善点を教えてくれます。

PC版はもちろん、モバイル版も確認できるツールです。Googleが提供していることでも有名なツールとして知られています。

参考：PageSpeed Insights

2.WEBPAGETEST

「WEBPAGETEST」も、Webサイトの速度を測定するツールです。WEBPAGETESTは世界に実在するブラウザから実際に接続をおこない、結果を表示してくれます。

測定方法は、初めて表示するパターンとキャッシュが残っているパターンで再度表示した時の速度の結果をそれぞれ表示可能です。

測定する端末にも幅があり、ブラウザであればChrome、IEの各バージョンなどが測定可能で、モバイルはiPhone 6、Nexus 7などの測定もできます。

参考：WebPageTest

3.GTmetrix

「GTmetrix」も、Webサイトの速度を測定するツールです。GTmetrixは、サイトが持つ各パラメーターの値を一覧表示し、ページのコードの各部分にかかる時間を教えてくれます。

すべての問題に関するすべてのガイドラインが用意されているため、Webサイトの最適化が可能です。

参考：GTmetrix

4.Pingdom Website Speed Test

「Pingdom Website Speed Test」も、Webサイトの速度を測定するツールです。

Pingdom Website Speed Testは合計の読み込み時間から「Pingdom Website Speed Test」で速度測定をしたほかのサイトと比較し、スコアを表示してくれます。ほかにもアセットの合計サイズとリクエスト数のデータの確認も可能です。

参考：Pingdom Website Speed Test

5.Resizer

「Resizer」はレスポンシブデザインのテストができるGoogle公式のテストツールです。Google公式のガイドラインで設計されたブレークポイントを確認できます。URL入力だけで、さまざまな角度のブレークポイントを見ることが可能です。

参考：Viewport Resizer – Responsive Testing Tool

6.Nu Html Checker

「Nu Html Checker」は、HTMLバリデーションツールです。現在は、WHATWGが管理していますが、以前はW3Cが提供していた「W3C Markup Validation Service」がWHATWGに管理が移り、「Nu Html Checker」として提供しています。

HTMLコーディングの入力ミスを確認するために役立つツールです。

参考：Nu Html Checker

7.構造化データテストツール

「構造化データのテストツール」はGoogleが提供しているテストツールです。クローラーが正しく構造化データを認識できているか確認し、警告やエラーがあれば表示してくれます。

表示内容に従って、マークアップしましょう。クローラーにサイトの品質を正しく理解してもらうために役立つツールです。

参考：構造化データ マークアップをテストする | Google 検索セントラル

8.CSS Validator

「CSS Validator」は、W3Cが提供しているCSS専用のチェックツールです。CSSの有効性のチェックは、主にセレクタやプロパティなどのスペルミス、使い方の間違いなどをチェックしてくれます。

同じくW3Cが提供している「Nu Html Checke」と併用すればより有効で役立つツールとなるでしょう。

参考：CSS Validator

9.Screenfly

「Screenfly」は、レスポンシブデザインのテストツールです。「デスクトップPC」「タブレット」「モバイル」「テレビ」のほか、手動で設定した画面サイズでの表示イメージをチェックできるツールです。

具体的には、Google Nexus 7、iPad、iPhone 7などのデバイスを選択し、そのデバイスの画面サイズでサイトの表示を確認できます。

参考：Screenfly

まとめ

Webサイトの運営は、品質を維持することが大切です。チェックリストの作成には大きくわけて、「meta要素」「フォーム」「画像」「文章」「リンク」「WordPress」が挙げられます。

また、紹介した品質管理のチェックツールを利用することで、時間も手間も大幅に削減でき、Webサイトの最適化にも大きく活用できるでしょう。品質管理をツールでおこなう場合は、複数のツールを組み合わせて使用することがおすすめです。ぜひ活用してください。