web-quality-audit

Web品質監査

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

仕組み

1. 提供されたコード/プロジェクトを分析し、品質上の問題を特定します
2. 検出事項を重大度（Critical、High、Medium、Low）別に分類します
3. 具体的で実行可能な推奨事項を提示します
4. 修正のためのコード例を含めます

監査カテゴリ

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

Core Web Vitals: 優れたページ体験のために必ず満たす必要があります。

• LCP（Largest Contentful Paint）< 2.5秒。 最も大きく表示される要素を素早く描画する必要があります。画像、フォント、サーバーの応答時間を最適化してください。
• 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:

• 一意のtitleタグ。 50〜60文字にしてください。主要キーワードを含めてください。
• metaのdescription。 150〜160文字にしてください。魅力的で一意の内容にしてください。
• 見出しの階層。 <h1>は1つだけにしてください。論理的な見出し構造にしてください。
• わかりやすいリンクテキスト。 「こちらをクリック」や「続きを読む」のような表現は避けてください。

テクニカルSEO:

• モバイル対応。 レスポンシブデザインにしてください。タップターゲットは48px以上にしてください。
• HTTPS。 安全な接続が必須です。
• 高速な読み込み。 パフォーマンスは順位に直接影響します。
• 構造化データ。 リッチスニペット用にJSON-LD（Article、Product、FAQなど）を使用してください。

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

セキュリティ:

• すべてHTTPSで提供。 混在コンテンツを含めないこと。HSTSを有効にすること。
• 脆弱なライブラリを使用しない。 依存関係を最新の状態に保つこと。
• CSPヘッダー。 XSSを防ぐためのコンテンツセキュリティポリシーを設定すること。
• ソースマップを公開しない。 本番ビルドにおいて対象です。

最新の標準:

• 非推奨のAPIを使用しない。 document.writeや同期XHRなどを置き換えてください。
• 有効なdoctype。 <!DOCTYPE html>を使用してください。
• 文字セットの宣言。 <head>の最初の要素として<meta charset="UTF-8">を配置してください。
• ブラウザエラーがないこと。 コンソールにエラーがなく、CORSの問題もないようにしてください。

UXパターン:

• 邪魔なインタースティシャルを表示しない。 特にモバイルでは避けてください。
• 明確な権限リクエスト。 必要なときのみ、文脈を添えて許可を求めてください。
• 誤解を招くボタンを使用しない。 ボタンは表示どおりの動作をする必要があります。

重大度レベル

レベル	説明	対応
Critical	セキュリティ上の脆弱性、完全な機能不全	直ちに修正
High	Core Web Vitalsの不合格、重大なアクセシビリティの障壁	公開前に修正
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
• ベストプラクティス