web-quality-audit

Web 品質監査

Google Lighthouse の監査に基づく包括的な品質レビューです。150 項目以上のチェックを通じて、パフォーマンス、アクセシビリティ、SEO、ベストプラクティスを確認します。

仕組み

1. 提供されたコード／プロジェクトを分析し、品質上の問題を特定します
2. 重大度（Critical、High、Medium、Low）に基づいて指摘事項を分類します
3. 具体的で実行可能な改善策を提示します
4. 修正のコード例を含めます

監査カテゴリ

パフォーマンス（一般的な問題の 40%）

Core Web Vitals — 良好なページエクスペリエンスには、次の指標を満たす必要があります。

• LCP（Largest Contentful Paint）< 2.5s。 最も大きく表示される要素をすばやく描画する必要があります。画像、フォント、サーバー応答時間を最適化します。
• INP（Interaction to Next Paint）< 200ms。 ユーザーの操作に瞬時に応答する必要があります。JavaScript の実行時間を短縮し、長いタスクを分割します。
• CLS（Cumulative Layout Shift）< 0.1。 コンテンツの表示位置がずれないようにします。画像、埋め込みコンテンツ、広告に明示的なサイズを指定します。

リソースの最適化：

• 画像を圧縮します。 フォールバックを用意して WebP／AVIF を使用します。srcset を使って、適切なサイズの画像を配信します。
• JavaScript を最小限にします。 未使用のコードを削除します。コード分割を使用します。重要度の低いスクリプトは遅延させます。
• CSS を最適化します。 クリティカル CSS を抽出します。未使用のスタイルを削除します。@import は避けます。
• フォントを効率よく使用します。 font-display: swap を使用します。重要なフォントをプリロードします。必要な文字だけにサブセット化します。

読み込み戦略：

• オリジンに事前接続します。 サードパーティのドメインに対して <link rel="preconnect"> を追加します。
• 重要なアセットをプリロードします。 LCP 画像、フォント、ファーストビューの CSS を対象にします。
• ファーストビューより下のコンテンツを遅延読み込みします。 画像、iframe、負荷の大きいコンポーネントが対象です。
• キャッシュを効果的に利用します。 静的アセットには長いキャッシュ TTL を設定します。ハッシュ化されたファイルには変更不可のキャッシュを設定します。

アクセシビリティ（一般的な問題の 30%）

知覚可能：

• テキストによる代替情報。 すべての <img> に意味のある alt テキストを設定します。装飾画像には alt="" を使用します。
• 色のコントラスト。 通常のテキストは最低 4.5:1、大きなテキストは 3:1 にします（WCAG AA）。
• 色だけに依存しないでください。 色による表示に加えて、アイコン、パターン、またはテキストを使用します。
• キャプションと文字起こし。 動画にはキャプションを、音声には文字起こしを用意します。

操作可能：

• キーボードで操作できます。 すべての機能をキーボードで使用できるようにします。キーボードトラップを設けないでください。
• フォーカスを視認できます。 すべてのインタラクティブ要素に明確なフォーカスインジケーターを設定します。
• スキップリンク。 キーボードユーザー向けに「メインコンテンツへスキップ」を用意します。
• 十分な時間を確保します。 ユーザーが時間制限を延長できるようにします。操作手段のない自動切り替えコンテンツは使用しないでください。

理解可能：

• ページの言語。 <html> に lang 属性を設定します。
• 一貫したナビゲーション。 すべてのページで同じナビゲーション構造を使用します。
• エラーの特定。 フォームのエラーを明確に説明し、該当するフィールドに関連付けます。
• ラベルと説明。 すべてのフォーム入力に対応するラベルを設定します。

堅牢：

• 有効な HTML。 ID の重複をなくし、要素を正しくネストします。
• ARIA を正しく使用します。 ネイティブ要素を優先します。ARIA ロールを要素の動作と一致させます。
• 名前、ロール、値。 インタラクティブ要素にアクセシブルな名前を付け、正しいロールを設定します。

SEO（一般的な問題の 15%）

クロール可能性：

• 有効な robots.txt。 重要なリソースをブロックしないようにします。
• XML サイトマップ。 重要なページをすべて掲載します。Search Console に送信します。
• 正規 URL。 重複コンテンツの問題を防ぎます。
• 重要なページに noindex を設定しないでください。 meta robots とヘッダーを確認します。

ページ内 SEO：

• 一意のタイトルタグ。 50～60 文字にし、主要なキーワードを含めます。
• メタディスクリプション。 150～160 文字にし、魅力的で独自の内容にします。
• 見出しの階層。 <h1> は 1 つにし、論理的な見出し構造にします。
• 内容がわかるリンクテキスト。 「ここをクリック」や「続きを読む」は使わないでください。

テクニカル SEO：

• モバイルフレンドリー。 レスポンシブデザインにし、タップ対象を 48px 以上にします。
• HTTPS。 セキュアな接続が必要です。
• 高速な読み込み。 パフォーマンスはランキングに直接影響します。
• 構造化データ。 リッチスニペット用に JSON-LD を使用します（Article、Product、FAQ など）。

ベストプラクティス（一般的な問題の15％）

セキュリティ：

• すべての通信で HTTPS を使用します。 混在コンテンツをなくします。HSTS を有効にします。
• 脆弱性のあるライブラリを使用しません。 依存関係を最新の状態に保ちます。
• CSP ヘッダーを設定します。 XSS を防ぐため、Content Security Policy を使用します。
• ソースマップを公開しません。 本番ビルドで公開しないようにします。

モダンな標準：

• 非推奨の API を使用しません。 document.write や同期 XHR などを置き換えます。
• 有効な doctype を指定します。 <!DOCTYPE html> を使用します。
• 文字セットを宣言します。 <head> の最初の要素として <meta charset="UTF-8"> を指定します。
• ブラウザーエラーをなくします。 コンソールをクリーンな状態に保ち、CORS の問題をなくします。

UX のパターン：

• 邪魔なインタースティシャルを表示しません。 特にモバイルでは表示しないようにします。
• 権限のリクエストを明確にします。 必要な場合にのみ、状況を説明したうえでリクエストします。
• 誤解を招くボタンを設置しません。 ボタンの表示どおりに動作させます。

重大度レベル

レベル	説明	対応
Critical	セキュリティの脆弱性、完全な障害	直ちに修正します
High	Core Web Vitals の不合格、重大な a11y の障壁	リリース前に修正します
Medium	パフォーマンス改善の機会、SEO の改善	スプリント内に修正します
Low	軽微な最適化、コード品質	可能なときに修正します

監査の出力形式

監査を実施する際は、次の形式で指摘事項をまとめます。

## Audit results

### Critical issues (X found)

- **[Category]** Issue description. File: `path/to/file.js:123`
  - **Impact:** Why this matters
  - **Fix:** Specific code change or recommendation

### High priority (X found)

...

### Summary

- Performance: X issues (Y critical)
- Accessibility: X issues (Y critical)
- SEO: X issues
- Best Practices: X issues

### Recommended priority

1. First fix this because...
2. Then address...
3. Finally optimize...

クイックチェックリスト

デプロイの前に毎回確認

• Core Web Vitals に合格している
• アクセシビリティエラーがない（axe/Lighthouse）
• コンソールエラーがない
• HTTPS が機能している
• メタタグが設定されている

毎週のレビュー

• Search Console で問題を確認する
• Core Web Vitals の傾向を確認する
• 依存関係を更新する
• スクリーンリーダーでテストする

毎月の詳細な確認

• Lighthouse の完全な監査
• パフォーマンスのプロファイリング
• 実際のユーザーによるアクセシビリティ監査
• SEO キーワードのレビュー

参考資料

各分野の詳細なガイドラインについては、次を参照してください。

• パフォーマンス最適化
• Core Web Vitals
• アクセシビリティ
• SEO
• ベストプラクティス