ウェブサイトQAチェックリスト（無料・ダウンロード可）

ウェブサイト QA チェックリストとは

ウェブサイト QA チェックリストは、ウェブサイトが公開前に正しく機能することを保証する、体系的なチェック項目のリストです。壊れたリンクやブラウザ互換性から、パフォーマンス、アクセシビリティ、コンテンツの正確性まで、あらゆるものをカバーします。

これを「完成（done）」と「公開（live）」の間の最終品質ゲートと捉えてください。優れたウェブサイト QA チェックリストは、個々の開発者やデザイナーが見逃す問題を検出します。彼らは何週間も同じページを見続けていたため、問題に気づかなくなっているからです。

この記事では、カテゴリ別に整理した無料のダウンロード可能なウェブサイト QA チェックリストを提供します。そのまま使用することも、プロジェクトに合わせて調整することもできます。

ウェブサイト QA チェックリスト（無料・ダウンロード可能）

1. 機能テスト（Functionality Testing）

• すべての内部リンクが機能する（壊れたリンクがない）
• すべての外部リンクが正しく開く（target="_blank" の動作を確認）
• すべてのフォームが正しく送信される（問い合わせフォーム、サインアップ、検索）
• フォーム検証が機能する（必須項目、メール形式、パスワードルール）
• フォームのエラーメッセージが役立つもので、表示される
• コールトゥアクション（CTA）ボタンが正しいページにリンクしている
• 検索機能が関連する結果を返す
• ページネーションが正しく機能する（前へ/次へ、ページ番号）
• ファイルダウンロードが正しくトリガーされる（PDF、画像、ドキュメント）
• ビデオとオーディオプレーヤーが読み込まれ再生される
• ライトボックス / モーダルウィンドウが正しく開閉する
• 404 ページが正しく表示される（デフォルトのサーバーページではない）
• 500 エラーページがスタイル付けされ、ユーザーに親しみやすい
• ログアウト機能がセッションを正しくクリアする
• セッションタイムアウト処理が期待どおりに機能する

2. クロスブラウザ・クロスデバイステスト

• Chrome（最新2バージョン）
• Firefox（最新2バージョン）
• Safari（最新2バージョン、macOS と iOS を含む）
• Edge（最新2バージョン）
• モバイル Safari（iPhone、iPad — 複数の画面サイズ）
• Android 用 Chrome（複数の画面サイズ）
• Samsung Internet（使用率の高いリージョンの場合）
• 320px、768px、1024px、1440px、1920px でのレスポンシブレイアウト
• 一般的な幅で水平スクロールバーが表示されない
• タッチターゲットが少なくとも48x48px ある（モバイルの使いやすさ）
• フォントサイズが小さい画面でも読みやすい
• 画像が正しくスケーリングされ、はみ出さない

3. パフォーマンステスト

• ページ読み込み時間が3秒未満（または目標しきい値）
• Lighthouse パフォーマンススコア ≥ 80（モバイル）
• 画像が最適化されている（圧縮、正しい形式、遅延読み込み）
• CSS と JavaScript がミニファイされている
• レンダリングブロッキングリソースが最小化されている
• Core Web Vitals に合格（LCP < 2.5s、FID < 100ms、CLS < 0.1）
• サーバーレスポンス時間（TTFB）が600ms 未満
• キャッシュヘッダーが正しく設定されている
• CDN が設定されている（該当する場合）
• 長時間実行ページ（SPA）でメモリリークがない

4. SEO & メタデータテスト

• ページタイトル（title タグ）が設定され、ページごとに一意
• メタディスクリプションが設定され、魅力的
• Open Graph タグ（og:title、og:description、og:image）が存在する
• Twitter Card タグが存在する
• 正規 URL（canonical URL）が正しく設定されている
• h1 タグが存在し、プライマリキーワードを含む
• 見出し階層が論理的（h1 → h2 → h3）
• すべての画像に alt テキストが追加されている
• XML サイトマップが検索エンジンに送信されている
• Robots.txt が正しく設定されている
• Noindex タグがステージング/開発ページに適用されている
• 構造化データ / スキーママークアップが有効（Google Rich Results でテスト）
• URL がクリーンで読みやすい（アンダースコアやパラメータのノイズがない）
• 変更された URL に 301 リダイレクトが設定されている
• 旧 URL からの 404 が関連ページにリダイレクトされる

5. アクセシビリティテスト

• キーボードナビゲーションが機能する（Tab、Enter、Escape、矢印キー）
• フォーカスインジケータが表示される（outline: none で削除されていない）
• 「コンテンツへ移動（skip-to-content）」リンクが存在し、機能する
• 色のコントラストが WCAG AA を満たす（通常テキストで4.5:1、大きいテキストで3:1）
• スクリーンリーダーが論理的にページをナビゲートできる
• 必要に応じて ARIA ラベルが使用されている（動的コンテンツ、カスタムコントロール）
• フォームフィールドに対応するラベルがある
• エラーメッセージがスクリーンリーダーによって読み上げられる
• ビデオコンテンツにキャプションまたはトランスクリプトがある
• インタラクティブ要素がキーボードでアクセス可能
• 200% までのページズームでレイアウトが崩れない
• モーション軽減設定が尊重される（prefers-reduced-motion）

6. コンテンツ & デザインテスト

• スペルミスや文法エラーがない
• ブランドボイスが全ページで一貫している
• ロゴがホームページにリンクしている（静的な画像だけではない）
• 連絡先情報が正確（メール、電話、住所）
• 法的ページが最新（プライバシーポリシー、利用規約）
• フッターの著作権年が現在のもの
• 画像がピクセル化または引き伸ばされていない
• フォントレンダリングがブラウザ間で一貫している
• スペーシングと配置が一貫している（視覚的な不具合がない）
• アニメーションがスムーズ（60fps）で、乗り物酔いを引き起こさない
• 印刷用スタイルシートが機能する（またはコンテンツがきれいに印刷される）

7. セキュリティテスト

• HTTPS が強制されている（HTTP から HTTPS へリダイレクト）
• SSL 証明書が有効（期限切れではない）
• フォーム送信が POST を使用している（GET ではない）
• 入力検証が XSS と SQL インジェクションを防ぐ
• 認証ページが HTTPS のみを使用している
• セッションクッキーがセキュアで、HttpOnly である
• ソースコードに機密データがない（API キー、パスワード、トークン）
• セキュリティヘッダー（CSP、HSTS、X-Frame-Options）が設定されている
• 管理 URL が一般にアクセス可能でない
• ファイルアップロードが制限（タイプ、サイズ）され、スキャンされる

ウェブサイト QA テスト: チェックリストの実行方法

ステップ1: ツールを選ぶ

• 手動テスト — チェックリストをページごとに走査する
• 自動化ツール — Lighthouse、axe DevTools、WAVE、Screaming Frog
• 視覚的フィードバックツール — ページ上に直接問題を注釈する BugCapturer

ステップ2: ページごとに進める

ステップ3: 見つけたらすぐに問題を記録する

• 問題を指す矢印とテキスト付きの注釈スクリーンショットを撮る
• URL、ブラウザ、OS、画面解像度を自動取得する
• バグがアニメーションやインタラクションを伴う場合は短い動画を録画する
• コンソールエラーとネットワーク障害を自動的に取得する

ステップ4: 修正して再テストする

ウェブ品質保証チェックリスト: プロ向けのヒント