lp-qa — ランディングページ品質保証

ランディングページの完全なQAを実行し、パフォーマンス、アクセシビリティ、レスポンシブ対応、アニメーション、SEOをカバーします。

ワークフロー

ステップ 1: ビルドチェック

pnpm build

エラーなしで成功する必要があります。失敗した場合は、続行する前に修正してください。

pnpm tsc --noEmit

TypeScriptエラーなしで成功する必要があります。

ステップ 2: パフォーマンス (Lighthouse)

MCP Lighthouseが利用可能な場合はそれを使用します。そうでない場合:

npx lighthouse http://localhost:5173 --output=json --output-path=./lighthouse-report.json --chrome-flags="--headless"

ターゲット値を確認します (references/landing-qa-checklist.md から):

• パフォーマンススコア > 90
• LCP < 2.5s
• CLS < 0.1
• TBT < 200ms

ステップ 3: アクセシビリティ

MCP A11yが利用可能な場合はそれを使用します。そうでない場合は手動で分析します:

• 見出し階層 (h1 → h2 → h3)
• すべての画像に代替テスト
• 色コントラスト (テキスト 4.5:1、大きいテキスト 3:1)
• インタラクティブ要素でのフォーカス表示
• テキストなしのアイコン/ボタンへのARIAラベル

ステップ 4: レスポンシブチェック

MCP Playwrightが利用可能な場合、3つのビューポートでスクリーンショットをキャプチャします:

• モバイル: 375x812
• タブレット: 768x1024
• デスクトップ: 1440x900

確認事項:

• 水平方向のオーバーフローがない
• すべてのビューポートでテキストが読みやすい
• CTAに到達可能 (タッチターゲット 44x44px)
• グリッドが適応的 (モバイルで列数が減少)

ステップ 5: アニメーションチェック

確認事項:

• prefers-reduced-motion がすべてのアニメーションコンポーネントで尊重されている
• アニメーションが transform と opacity のみを使用している
• アニメーションによるレイアウトシフトがない (CLS)
• GSAPが useGSAP フックを使用している (useEffect ではない)
• Motionが domAnimation を含む LazyMotion を使用している
• タイミングが一貫している (ページ全体で同じイージング)

ステップ 6: SEOチェック

確認事項:

• メタタイトルと説明が存在する
• OGタグ (title、description、image)
• ユニークな h1 見出し
• Schema.org JSON-LD (適用可能な場合)

ステップ 7: レポート

構造化されたレポートを生成します:

# QA レポート — [プロジェクト名]

## 結果

| 領域 | スコア | ステータス |
|------|--------|-----------|
| ビルド | 成功/失敗 | OK/FIX |
| パフォーマンス | XX/100 | OK/WARN/FIX |
| アクセシビリティ | XX/100 | OK/WARN/FIX |
| レスポンシブ | 3/3 ビューポート | OK/FIX |
| アニメーション | X/Y チェック | OK/FIX |
| SEO | X/Y チェック | OK/FIX |

## 修正アクション
1. [問題] → [解決策]
2. ...

出力

コンソール + qa-report.md ファイル (リクエストされた場合) にレポートを表示します