jpskill.com
🛠️ 開発・MCP コミュニティ

web-quality-audit

ウェブサイトのパフォーマンス、アクセシビリティ、SEOなどを総合的にチェックし、改善点やベストプラクティスを提案することで、ウェブサイトの品質向上を支援するSkill。

📜 元の英語説明(参考)

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".

🇯🇵 日本人クリエイター向け解説

一言でいうと

ウェブサイトのパフォーマンス、アクセシビリティ、SEOなどを総合的にチェックし、改善点やベストプラクティスを提案することで、ウェブサイトの品質向上を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o web-quality-audit.zip https://jpskill.com/download/9599.zip && unzip -o web-quality-audit.zip && rm web-quality-audit.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9599.zip -OutFile "$d\web-quality-audit.zip"; Expand-Archive "$d\web-quality-audit.zip" -DestinationPath $d -Force; ri "$d\web-quality-audit.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して web-quality-audit.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → web-quality-audit フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Web quality audit

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

How it works

  1. 提供されたコード/プロジェクトの品質に関する問題を分析します。
  2. 重大度 (Critical、High、Medium、Low) ごとに調査結果を分類します。
  3. 具体的な、実行可能な推奨事項を提供します。
  4. 修正のためのコード例を含めます。

Audit categories

Performance (典型的な問題の 40%)

Core Web Vitals — 良好なページエクスペリエンスのために合格する必要があります:

  • LCP (Largest Contentful Paint) < 2.5s. 最大の可視要素が迅速にレンダリングされる必要があります。画像、フォント、およびサーバーの応答時間を最適化します。
  • INP (Interaction to Next Paint) < 200ms. ユーザーインタラクションは瞬時に感じられる必要があります。JavaScript の実行時間を短縮し、長いタスクを分割します。
  • CLS (Cumulative Layout Shift) < 0.1. コンテンツが飛び回ってはいけません。画像、埋め込み、および広告に明示的な寸法を設定します。

Resource Optimization:

  • 画像を圧縮します。 フォールバック付きで WebP/AVIF を使用します。srcset 経由で適切なサイズの画像を提供します。
  • JavaScript を最小限に抑えます。 未使用のコードを削除します。コード分割を使用します。重要でないスクリプトを遅延させます。
  • CSS を最適化します。 重要な CSS を抽出します。未使用のスタイルを削除します。@import を避けます。
  • 効率的なフォント。 font-display: swap を使用します。重要なフォントをプリロードします。必要な文字にサブセット化します。

Loading Strategy:

  • オリジンにプリコネクトします。 サードパーティドメインに <link rel="preconnect"> を追加します。
  • 重要なアセットをプリロードします。 LCP 画像、フォント、およびファーストビューの CSS。
  • ファーストビュー以下のコンテンツを遅延ロードします。 画像、iframe、および重いコンポーネント。
  • 効果的にキャッシュします。 静的アセットに長いキャッシュ TTL。ハッシュ化されたファイルにイミュータブルキャッシュ。

Accessibility (典型的な問題の 30%)

Perceivable:

  • テキストによる代替。 すべての <img> に意味のある alt テキストがあります。装飾的な画像は alt="" を使用します。
  • 色のコントラスト。 通常のテキストの場合は最小 4.5:1、大きなテキストの場合は 3:1 (WCAG AA)。
  • 色だけに頼らないでください。 色の指標に加えて、アイコン、パターン、またはテキストを使用します。
  • キャプションとトランスクリプト。 ビデオにはキャプションがあります。オーディオにはトランスクリプトがあります。

Operable:

  • キーボードでアクセス可能。 すべての機能がキーボード経由で利用可能です。キーボードトラップはありません。
  • フォーカス表示。 すべてのインタラクティブな要素に明確なフォーカスインジケーターがあります。
  • スキップリンク。 キーボードユーザーのために「メインコンテンツにスキップ」を提供します。
  • 十分な時間。 ユーザーは制限時間を延長できます。コントロールなしで自動的に進むコンテンツはありません。

Understandable:

  • ページ言語。 <html> に lang 属性を設定します。
  • 一貫したナビゲーション。 ページ間で同じナビゲーション構造。
  • エラーの識別。 フォームエラーは明確に記述され、フィールドに関連付けられています。
  • ラベルと指示。 すべてのフォーム入力には関連付けられたラベルがあります。

Robust:

  • 有効な HTML。 重複する ID はありません。適切にネストされた要素。
  • ARIA が正しく使用されています。 ネイティブ要素を優先します。ARIA ロールは動作と一致します。
  • 名前、役割、値。 インタラクティブな要素には、アクセス可能な名前と正しい役割があります。

SEO (典型的な問題の 15%)

Crawlability:

  • 有効な robots.txt。 重要なリソースをブロックしません。
  • XML サイトマップ。 すべての重要なページをリストします。Search Console に送信されます。
  • カノニカル URL。 重複コンテンツの問題を防ぎます。
  • 重要なページに noindex がないこと。 メタロボットとヘッダーを確認します。

On-Page SEO:

  • ユニークなタイトルタグ。 50〜60 文字。主要なキーワードが含まれています。
  • メタディスクリプション。 150〜160 文字。魅力的でユニーク。
  • 見出しの階層。 シングル <h1>。論理的な見出し構造。
  • 説明的なリンクテキスト。 「ここをクリック」または「続きを読む」ではありません。

Technical SEO:

  • モバイルフレンドリー。 レスポンシブデザイン。タップターゲット ≥ 48px。
  • HTTPS。 安全な接続が必要です。
  • 高速な読み込み。 パフォーマンスはランキングに直接影響します。
  • 構造化データ。 リッチスニペット用の JSON-LD (Article、Product、FAQ など)。

Best practices (典型的な問題の 15%)

Security:

  • HTTPS everywhere。 混合コンテンツはありません。HSTS が有効になっています。
  • 脆弱なライブラリはありません。 依存関係を最新の状態に保ちます。
  • CSP ヘッダー。 XSS を防ぐためのコンテンツセキュリティポリシー。
  • 公開されたソースマップはありません。 本番ビルドで。

Modern Standards:

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

UX Patterns:

  • 邪魔なインタースティシャルはありません。 特にモバイルで。
  • 明確な許可リクエスト。 必要な場合にのみ、コンテキストとともに尋ねます。
  • 誤解を招くボタンはありません。 ボタンは言うことを実行します。

Severity levels

Level Description Action
Critical セキュリティの脆弱性、完全な失敗 直ちに修正
High Core Web Vitals の失敗、主要な a11y バリア リリース前に修正
Medium パフォーマンスの機会、SEO の改善 スプリント内で修正
Low 軽微な最適化、コード品質 都合の良いときに修正

Audit output format

監査を実行するときは、調査結果を次のように構成します。

## 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...

Quick checklist

Before every deploy

  • [ ] Core Web Vitals passing
  • [ ] No accessibility errors (axe/Lighthouse)
  • [ ] No console errors
  • [ ] HTTPS working
  • [ ] Meta tags present

Weekly review

  • [ ] Check Search Console for issues
  • [ ] Review Core Web Vitals trends
  • [ ] Update dependencies
  • [ ] Test with screen reader

Monthly deep dive

  • [ ] Full Lighthouse audit
  • [ ] Performance profiling
  • [ ] Accessibility audit with real users
  • [ ] SEO keyword
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Web quality audit

Comprehensive quality review based on Google Lighthouse audits. Covers Performance, Accessibility, SEO, and Best Practices across 150+ checks.

How it works

  1. Analyze the provided code/project for quality issues
  2. Categorize findings by severity (Critical, High, Medium, Low)
  3. Provide specific, actionable recommendations
  4. Include code examples for fixes

Audit categories

Performance (40% of typical issues)

Core Web Vitals — Must pass for good page experience:

  • LCP (Largest Contentful Paint) < 2.5s. The largest visible element must render quickly. Optimize images, fonts, and server response time.
  • INP (Interaction to Next Paint) < 200ms. User interactions must feel instant. Reduce JavaScript execution time and break up long tasks.
  • CLS (Cumulative Layout Shift) < 0.1. Content must not jump around. Set explicit dimensions on images, embeds, and ads.

Resource Optimization:

  • Compress images. Use WebP/AVIF with fallbacks. Serve correctly sized images via srcset.
  • Minimize JavaScript. Remove unused code. Use code splitting. Defer non-critical scripts.
  • Optimize CSS. Extract critical CSS. Remove unused styles. Avoid @import.
  • Efficient fonts. Use font-display: swap. Preload critical fonts. Subset to needed characters.

Loading Strategy:

  • Preconnect to origins. Add <link rel="preconnect"> for third-party domains.
  • Preload critical assets. LCP images, fonts, and above-fold CSS.
  • Lazy load below-fold content. Images, iframes, and heavy components.
  • Cache effectively. Long cache TTLs for static assets. Immutable caching for hashed files.

Accessibility (30% of typical issues)

Perceivable:

  • Text alternatives. Every <img> has meaningful alt text. Decorative images use alt="".
  • Color contrast. Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA).
  • Don't rely on color alone. Use icons, patterns, or text alongside color indicators.
  • Captions and transcripts. Video has captions. Audio has transcripts.

Operable:

  • Keyboard accessible. All functionality available via keyboard. No keyboard traps.
  • Focus visible. Clear focus indicators on all interactive elements.
  • Skip links. Provide "Skip to main content" for keyboard users.
  • Sufficient time. Users can extend time limits. No auto-advancing content without controls.

Understandable:

  • Page language. Set lang attribute on <html>.
  • Consistent navigation. Same navigation structure across pages.
  • Error identification. Form errors clearly described and associated with fields.
  • Labels and instructions. All form inputs have associated labels.

Robust:

  • Valid HTML. No duplicate IDs. Properly nested elements.
  • ARIA used correctly. Prefer native elements. ARIA roles match behavior.
  • Name, role, value. Interactive elements have accessible names and correct roles.

SEO (15% of typical issues)

Crawlability:

  • Valid robots.txt. Doesn't block important resources.
  • XML sitemap. Lists all important pages. Submitted to Search Console.
  • Canonical URLs. Prevent duplicate content issues.
  • No noindex on important pages. Check meta robots and headers.

On-Page SEO:

  • Unique title tags. 50-60 characters. Primary keyword included.
  • Meta descriptions. 150-160 characters. Compelling and unique.
  • Heading hierarchy. Single <h1>. Logical heading structure.
  • Descriptive link text. Not "click here" or "read more".

Technical SEO:

  • Mobile-friendly. Responsive design. Tap targets ≥ 48px.
  • HTTPS. Secure connection required.
  • Fast loading. Performance directly impacts ranking.
  • Structured data. JSON-LD for rich snippets (Article, Product, FAQ, etc.).

Best practices (15% of typical issues)

Security:

  • HTTPS everywhere. No mixed content. HSTS enabled.
  • No vulnerable libraries. Keep dependencies updated.
  • CSP headers. Content Security Policy to prevent XSS.
  • No exposed source maps. In production builds.

Modern Standards:

  • No deprecated APIs. Replace document.write, synchronous XHR, etc.
  • Valid doctype. Use <!DOCTYPE html>.
  • Charset declared. <meta charset="UTF-8"> as first element in <head>.
  • No browser errors. Clean console. No CORS issues.

UX Patterns:

  • No intrusive interstitials. Especially on mobile.
  • Clear permission requests. Only ask when needed, with context.
  • No misleading buttons. Buttons do what they say.

Severity levels

Level Description Action
Critical Security vulnerabilities, complete failures Fix immediately
High Core Web Vitals failures, major a11y barriers Fix before launch
Medium Performance opportunities, SEO improvements Fix within sprint
Low Minor optimizations, code quality Fix when convenient

Audit output format

When performing an audit, structure findings as:

## 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...

Quick checklist

Before every deploy

  • [ ] Core Web Vitals passing
  • [ ] No accessibility errors (axe/Lighthouse)
  • [ ] No console errors
  • [ ] HTTPS working
  • [ ] Meta tags present

Weekly review

  • [ ] Check Search Console for issues
  • [ ] Review Core Web Vitals trends
  • [ ] Update dependencies
  • [ ] Test with screen reader

Monthly deep dive

  • [ ] Full Lighthouse audit
  • [ ] Performance profiling
  • [ ] Accessibility audit with real users
  • [ ] SEO keyword review

References

For detailed guidelines on specific areas: