💬 コミュニケーションコミュニティ

web-performance-seo

PageSpeed InsightsやLighthouseで検出される、文字色のコントラストに関するアクセシビリティエラーを、CSSフィルターや透明度、グラデーションなどを調整して修正し、SEOとウェブサイトのパフォーマンスを改善するSkill。

📜 元の英語説明(参考)

Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.

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

一言でいうと

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

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

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

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o web-performance-seo.zip https://jpskill.com/download/21284.zip && unzip -o web-performance-seo.zip && rm web-performance-seo.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/21284.zip -OutFile "$d\web-performance-seo.zip"; Expand-Archive "$d\web-performance-seo.zip" -DestinationPath $d -Force; ri "$d\web-performance-seo.zip"

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して web-performance-seo.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → web-performance-seo フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
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 Performance SEO: アクセシビリティコントラストエラーの修正

使用する状況

PSI/Lighthouse のアクセシビリティスコアが数値ではなく「!」またはエラーを表示している場合
color-contrast 監査でエラーが発生している、または getImageData の失敗がある場合
SEO に影響するアクセシビリティシグナルを改善する必要がある場合

ワークフロー

再現
- Lighthouse または PSI を実行し、失敗している監査名を特定します。
一般的なトリガーとなるコードをスキャン
- CSS の filters/backdrop blur、mix-blend-mode
- OKLCH/OKLAB カラー
- 低い不透明度の背景（0.4 未満）
- color: transparent を持つグラデーションテキスト
- 不透明なオーバーレイがない画像上のテキスト
優先順位に従って修正
- filters/blend modes を削除します。
- OKLCH/OKLAB を HSL/RGB に変換します。
- 不透明度のしきい値を上げます。
- グラデーションテキストに単色のフォールバックを追加します。
- 画像上のテキストの背後にオーバーレイを追加します。
Lighthouse/axe を使用してローカルで検証します。
デプロイ後に PSI で検証します。

高速スキャンコマンド

rg -n "backdrop-blur|filter:|mix-blend-mode" .
rg -n "oklch|oklab" .
rg -n "/10|/20|/30|opacity-25|opacity-0" .
rg -n "background-clip.*text|color.*transparent" .

修正パターン

フィルターの削除（重要）

// Before
<div className="bg-card/50 backdrop-blur-sm">...</div>
// After
<div className="bg-card/80">...</div>

OKLCH/OKLAB を HSL/RGB に変換

/* Before */
:root { --primary: oklch(0.55 0.22 264); }
/* After */
:root { --primary: hsl(250, 60%, 50%); }

不透明度のしきい値を上げる

背景は 0.4 以上（0.6 以上を推奨）
/10 を /40 に、/20 を /40 に、/30 を /60 に置き換えます。

グラデーションテキストのフォールバック

.title { color: #111111; }
@media (prefers-contrast: no-preference) {
  .title.with-gradient {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .title.with-gradient { background: none; color: CanvasText; }
}

画像上のテキストのオーバーレイ

<div className="relative">
  <img src="/hero.jpg" alt="Hero" />
  <div className="absolute inset-0 bg-black/60"></div>
  <h1 className="relative text-white">Title</h1>
</div>

受け入れ基準

アクセシビリティスコアが数値であること（「!」ではないこと）
color-contrast 監査が合格するか、実行可能な項目をリストアップすること
通常のテキストでコントラスト比が 4.5:1 以上、大きなテキストで 3:1 以上であること

注意事項

「!」は監査の失敗を示し、低いスコアではありません。
PSI の更新を待つ前に、必ずローカルでテストしてください。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Web Performance SEO: Accessibility Contrast Error Fix

When to use

PSI/Lighthouse accessibility shows "!" or error instead of a numeric score
color-contrast audit errors or getImageData failures
Need to improve accessibility signals that impact SEO

Workflow

Reproduce
- Run Lighthouse or PSI; capture failing audit names.
Scan code for common triggers
- CSS filters/backdrop blur, mix-blend-mode
- OKLCH/OKLAB colors
- Low opacity backgrounds (< 0.4)
- Gradient text with color: transparent
- Text over images without opaque overlays
Fix in priority order
- Remove filters/blend modes
- Convert OKLCH/OKLAB to HSL/RGB
- Raise opacity thresholds
- Add solid-color fallback for gradient text
- Add overlay behind text on images
Verify locally with Lighthouse/axe
Verify in PSI after deployment

Fast scan commands

rg -n "backdrop-blur|filter:|mix-blend-mode" .
rg -n "oklch|oklab" .
rg -n "/10|/20|/30|opacity-25|opacity-0" .
rg -n "background-clip.*text|color.*transparent" .

Fix patterns

Remove filters (critical)

// Before
<div className="bg-card/50 backdrop-blur-sm">...</div>
// After
<div className="bg-card/80">...</div>

Convert OKLCH/OKLAB to HSL/RGB

/* Before */
:root { --primary: oklch(0.55 0.22 264); }
/* After */
:root { --primary: hsl(250, 60%, 50%); }

Raise opacity thresholds

Backgrounds >= 0.4 (prefer >= 0.6)
Replace /10 -> /40, /20 -> /40, /30 -> /60

Gradient text fallback

.title { color: #111111; }
@media (prefers-contrast: no-preference) {
  .title.with-gradient {
    background: linear-gradient(90deg, #0ea5e9, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .title.with-gradient { background: none; color: CanvasText; }
}

Overlay for text on images

<div className="relative">
  <img src="/hero.jpg" alt="Hero" />
  <div className="absolute inset-0 bg-black/60"></div>
  <h1 className="relative text-white">Title</h1>
</div>

Acceptance criteria

Accessibility score is numeric (not "!")
color-contrast audit passes or lists actionable items
Contrast ratios >= 4.5:1 for normal text, >= 3:1 for large text

Notes

"!" indicates audit failure, not a low score.
Always test locally before waiting for PSI updates.