ホームページの品質検査に使えるツール10選

schedule2016年9月5日update2026年1月29日

folder_openWeb制作

プロが教えるワンランク上のホームページ制作講座。

今回はホームページの品質検査・品質テストに使えるツールをご紹介します。

 

ホームページの品質検査って何？

例えば自動車だったら、工場出荷前にエンジンのテストや、走行テスト、安全装備の
テストなどを行います。

「お客様の元に届ける前に、不具合がないかチェックする」

これは製造業では当たり前の事ですね。

 

ホームページも同じです。

公開前にレイアウトや文字の校正を行う他に、セキュリティや
ページの表示速度、HTMLやCSSの文法チェックを行ってからリリースしましょう。

 

意外と大手の制作会社でもきちんとした検査証明を出している所は多くありません。

ひどい場合はエラーがある状態で公開されているものもあります。

そうならないように早速テストしていきましょう。

 

セキュリティチェック

ホームページを公開するのなら何はともあれセキュリティチェックは欠かせません。

まずはこちらのサイトから。

 

Observatory by Mozilla

Mozillaが提供するセキュリティチェックサイトです。

enter domein name here　にテストしたいサイトのURLを入力して

「Scan Me」を押すとサイトのセキュリティ評価結果が表示されます。

評価＋Aが最高で　評価Fが最低ランクです。

テスト後どこがダメだったか教えてもらえるので、きちんと対応しましょう。

ちなみにiT-STUDIOサイトは評価Bでした。

Aランクにするにはセキュリティポリシーを適用すれば良いだけなのですが、
これはちょっと大変＆利便性が著しく落ちるのでやらない方向で。

実は大手のサイトをみてみると評価Fの所が多いのは内緒です。。

セキュリティ対策についてはサーバー側の設定も必要になりますので、
また別の機会に紹介します。

 

サイトの表示スピード評価

SEOの観点からもサイトの表示スピードを正しく評価して改善していきましょう。

ここではおすすめの3サイトをご紹介

 

GTmetrix

定番のサイト表示速度テストツールです。

Googleのサイト速度計測サービスの「Page Speed」 のサイト評価と

Yahooのサイト速度計測サービスの「YSlow」 のサイト評価を同時に計測できます。

 

こちらもテストしたいサイトのURLを貼り付けて Analyze を押すとテスト開始です。

うちの運営会社であるスタジオマカナの結果は

PageSpeed 「B」

YSlow 「C」でした。

予約システムが２つ入っているのでまずまずの結果。

 

つづいては

Google PageSpeed Insights

Googleが提供するスピード評価ツールです。

PCサイトとスマホサイトの両方を一度に計測できるので便利です。

 

ちなみにITスタジオのPCサイトは80点でした。

 

 

Mobile Website Speed Testing Tool

こちらはGoogleのPageSpeedのモバイル専用版といったところ。

・モバイルフレンドリー

・スマートフォンでの表示速度

・PCでの表示速度

スタジオマカナの評価はご覧の通り

中身はPageSpeed Insightsと同じですが、インターフェイスが洗練されて見やすくなってますね。

 

モバイルフレンドリー評価

現在のGoogleのWeb検索では、スマホ対応しているサイトを優遇し検索結果一覧の表示順位を決めるランク付けに有利な評価をしています。

早速スマホ対応しているかどうか判定しましょう。

「いまホームページのスマホ対応を始めるべき理由」

 

Google Mobile-Friendly Test

検査項目としては

1. フォントサイズが小さすぎないか

2. タップ要素同士が近すぎないか

3. ピンチやズームなどの操作をしなくても快適に閲覧できるか

などがあるようです。

 

このサイトではURLを入力後

Awesome! This Page is mobile-friendly.　と表示されれば

スマホ対応です。

このITスタジオサイトももちろんモバイルフレンドリーサイトです。

 

メールのスパム度判定

こちらは独自ドメインのメールのスパム度判定サイトです。

メールアドレスにSPFレコードが追加されていなかったり、サーバーの設定が適切でないと折角送ったメールがスパム扱いされてしまいます。

早速テストしてみましょう。

 

 

HTML/CSSの構文チェック

HTMLのマークアップ確認サイトです。

The W3C Markup Validation Service

 

こちらはCSSの構文チェックサイトです。

W3C CSS Validation Service

試しにiTスタジオサイトを検査すると webkit関係の構文エラーが！

これはAppleのブラウザ（webkit）向けの記述が正式に認証された物ではないのでエラーとなります。

が、特に問題ないですね。

 

SEOチェック

こちらは老舗のSEOチェックツールです。

SEOチェキ！

簡単操作で分かりやすい日本語のサイトです。

検索順位やキーワード出現頻度のチェックもできます。自分の狙ったキーワードが入っているか確認しましょう。

 

さらにもうひとつ。こちらでは検索順位のチェックができます。

検索エンジン一括順位チェッカー

試しにスタジオマカナをチェックしてみます。

ご覧の通りの結果に。分かりやすいですね。

 

Chromeによるエラーチェック

最後に紹介するのはブラウザの機能を使ったエラーチェックです。

Google Chromeに標準搭載されている「デベロッパーツール」を使用します。

【使い方】

1. まずテストしたいサイトをChromeで開きます。
2.  画面上でマウスを右クリックして「検証」を選択します。
   異常がなければこのように表示されます。
3. リンク切れやスクリプトの異常があるとご覧の通り
   

赤枠で囲った部分にエラーメッセージが表示されます。
（写真はスクリプトをわざとエラー状態にしたもの）

Chromeを使うと簡単な手順でデバック出来るので是非やってみてくださいね。

やばいホームページ制作会社だとこのような最低限のテストもされずにエラー出っぱなしで公開されているサイトも結構あります。

気をつけたいものですね。

 

最後に

セキュリティでガチガチにして、一つの構文間違いもなく、一瞬で表示されるサイトというのは理想ですが、それでは動画や高画質画像などリッチなコンテンツの無いちょっと味気ないサイトになってしまいます。

要はバランスが大事です。あと中身もね。

その辺を踏まえてサイト制作に生かしてください。

 

以上　ホームページを制作する際に利用出来る「品質評価ツール10選」でした。

Share Me!

前の投稿

Visual Composer ROWとColumnの構造説明

次の投稿

ホームページのアクセスが5万PVを超えました

関連記事

2026年1月26日

オンラインレッスンを会員制・サブスクで実現｜WordPress×WooCommerceによる動画配信サイト制作実績

2026年1月14日

Cloudflare無料プランで十分？不十分？｜ホームページ制作の現場から解説

2022年7月5日

MAMP PRO でPHPエラー表示を有効化する

2018年3月29日

Woocommerce 特定カテゴリの支払い方法を変更する

2019年4月20日

SEOに強くなる！WORDPRESSホームページのブログ作成5つの技

2026年1月13日

仙台のホームページ制作事務所が解説｜WordPressセキュリティ対策と保守の重要性