web-quality-audit
Webサイトのパフォーマンス、アクセシビリティ、SEO、ベストプラクティスを網羅的に診断します。「サイトを監査して」「Web品質をレビューして」「Lighthouseで計測して」「ページ品質を確認して」「サイトを最適化して」といった依頼に応じて使用します。
description の原文を見る
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
SKILL.md 本文
Web quality audit
Google Lighthouse 監査に基づく包括的な品質レビュー。Performance、Accessibility、SEO、Best Practices にわたり 150+ のチェック項目をカバーします。
Lighthouse v13 に関する注記 (2025年10月以降)。 Lighthouse は Performance カテゴリーを個別の opportunity 監査から Performance Insight Audits に移行しました (アナウンス)。このスキルが過去に参照していた個別の監査名 — First Meaningful Paint、No Document Write、Uses Passive Event Listeners、Uses Rel Preload — は削除されたか統合されています。基盤となる アドバイス は変わらず、依然として適用されます。レポート形式が移行しただけです。CLS 関連の監査 ("layout shifts"、"non-composited animations"、"unsized images") は現在、単一の
cls-culprits-insightに統合されており、image 監査はimage-delivery-insightにマージされています。古い Lighthouse JSON 出力は矛盾ではなく、スーパーセットとして扱ってください。
仕組み
- 提供されたコード/プロジェクトを品質問題について分析
- 重大度別(Critical、High、Medium、Low)に検出事項を分類
- 具体的で実行可能な推奨事項を提供
- 修正のためのコード例を含める
監査カテゴリー
Performance (典型的な問題の 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を使用します。クリティカルフォントをプリロードします。必要な文字にサブセット化します。
ローディング戦略:
- オリジンへ preconnect する。 サードパーティドメインに
<link rel="preconnect">を追加します。 - 重要なアセットをプリロードする。 LCP 画像、フォント、above-fold CSS。
- below-fold コンテンツを遅延ロードする。 画像、iframe、重いコンポーネント。
- 効果的にキャッシュする。 静的アセットには長い cache TTL。ハッシュ化されたファイルには immutable キャッシング。
Accessibility (典型的な問題の 30%)
知覚可能:
- テキスト代替手段。 すべての
<img>は意味のあるaltテキストを持ちます。装飾的な画像はalt=""を使用します。 - 色対比。 通常テキストで最小 4.5:1、大きいテキストで 3:1 (WCAG AA)。
- 色だけに頼らない。 アイコン、パターン、またはテキストを色のインジケーターと組み合わせて使用します。
- キャプションとトランスクリプト。 ビデオはキャプション付き。オーディオはトランスクリプト付き。
操作可能:
- キーボードアクセシブル。 すべての機能がキーボードで利用可能。キーボードトラップなし。
- フォーカス表示。 すべてのインタラクティブ要素に明確なフォーカスインジケーター。
- スキップリンク。 キーボードユーザー向けに "Skip to main content" を提供します。
- 十分な時間。 ユーザーは時間制限を延長できます。コントロールなしの自動進行コンテンツなし。
理解可能:
- ページ言語。
<html>にlang属性を設定します。 - 一貫したナビゲーション。 ページ全体で同じナビゲーション構造。
- エラー識別。 フォームエラーが明確に説明され、フィールドと関連付けられています。
- ラベルと指示。 すべてのフォーム入力に関連付けられたラベルがあります。
堅牢性:
- 有効な HTML。 重複する ID がない。要素が適切にネストされています。
- ARIA が正しく使用されている。 ネイティブ要素を優先します。ARIA ロールは動作と一致します。
- 名前、ロール、値。 インタラクティブ要素には accessible 名と正しいロールがあります。
SEO (典型的な問題の 15%)
クローラビリティ:
- 有効な robots.txt。 重要なリソースをブロックしません。
- XML サイトマップ。 すべての重要なページをリストアップ。Search Console に送信済み。
- カノニカル URL。 重複コンテンツの問題を防ぎます。
- 重要なページへの noindex なし。 meta robots とヘッダーを確認します。
オンページ SEO:
- ユニークなタイトルタグ。 50-60 文字。主要キーワードを含める。
- メタディスクリプション。 150-160 文字。説得力があり、ユニーク。
- 見出しの階層構造。 単一の
<h1>。論理的な見出し構造。 - 説明的なリンクテキスト。 "click here" や "read more" ではなく。
技術的 SEO:
- モバイルフレンドリー。 レスポンシブデザイン。タップターゲット ≥ 48px。
- HTTPS。 セキュアな接続が必須。
- 高速ロード。 パフォーマンスはランキングに直接影響します。
- 構造化データ。 JSON-LD for rich snippets (Article、Product、FAQ など)。
Best practices (典型的な問題の 15%)
セキュリティ:
- HTTPS everywhere。 混合コンテンツなし。HSTS が有効。
- 脆弱なライブラリがない。 依存関係を最新に保ちます。
- CSP ヘッダー。 XSS を防ぐための Content Security Policy。
- ソースマップが公開されていない。 本番ビルド内で。
モダン標準:
- 非推奨 API がない。
document.write、同期 XHR などを置き換えます。 - 有効な doctype。
<!DOCTYPE html>を使用します。 - Charset が宣言されている。
<head>の最初の要素として<meta charset="UTF-8">。 - ブラウザエラーがない。 クリーンなコンソール。CORS 問題なし。
UX パターン:
- 押し付けがましいインタースティシャルなし。 特にモバイルで。
- 明確なパーミッションリクエスト。 必要な場合のみ、文脈付きで質問します。
- 誤解を招くボタンなし。 ボタンは表示内容を実行します。
重大度レベル
| レベル | 説明 | アクション |
|---|---|---|
| Critical | セキュリティ脆弱性、完全な故障 | 直ちに修正 |
| High | Core Web Vitals 失敗、重大な a11y 障壁 | 本番前に修正 |
| Medium | パフォーマンス改善機会、SEO 向上 | スプリント内に修正 |
| Low | マイナー最適化、コード品質 | 都合がつき次第修正 |
監査出力フォーマット
監査を実行するとき、検出事項を次のように構造化します:
## 監査結果
### Critical issues (X 件見つかった)
- **[Category]** 問題の説明。ファイル: `path/to/file.js:123`
- **Impact:** これが重要な理由
- **Fix:** 具体的なコード変更または推奨事項
### High priority (X 件見つかった)
...
### Summary
- Performance: X 件の問題 (Y 件の critical)
- Accessibility: X 件の問題 (Y 件の critical)
- SEO: X 件の問題
- Best Practices: X 件の問題
### 推奨される優先順位
1. これを最初に修正する理由...
2. 次に対処...
3. 最後に最適化...
クイックチェックリスト
デプロイ前のすべての時間
- Core Web Vitals が合格している
- アクセシビリティエラーがない (axe/Lighthouse)
- コンソールエラーがない
- HTTPS が機能している
- メタタグが存在する
週間レビュー
- Search Console で問題を確認
- Core Web Vitals トレンドを確認
- 依存関係を更新
- スクリーンリーダーでテスト
月間ディープダイブ
- 完全な Lighthouse 監査
- パフォーマンスプロファイリング
- 実際のユーザーでのアクセシビリティ監査
- SEO キーワードレビュー
参考資料
特定の分野に関する詳細なガイドラインについて:
Performance OptimizationCore Web VitalsAccessibilitySEOBest Practices
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- addyosmani
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/addyosmani/web-quality-skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。