Performance・Accessibility・SEO など複数項目を 0〜100 点で評価します。Chrome の DevTools から即使え、CLI や CI にも組み込めます。
技術用語
380
Lighthouse
ライトハウス
体験区分：触った
推奨読者レベル：Level 2-4
何をしてくれるか
どこで出会うか
Chrome の DevTools の「Lighthouse」タブを押すと診断が始まります。AI で書いたコードの品質確認や、PR ごとの自動計測でも使われます。
構造図
2026.04·needs_review
「Lighthouse スコアを Claude に渡したら、画像の遅延読み込みまで提案してもらえました。」
Lighthouseの見方
381
この用語の見どころ
1
役割
Web ページの品質を 5 カテゴリ・100 点満点で数値化します。
2
うれしさ
AI 生成コードの品質を人の目に頼らず機械的に確認できます。
3
注意点
スコアはネットワーク環境や計測タイミングで変動することがあります。
4
どこで役立つか
CI に組み込むと PR ごとにスコア低下を自動検出できます。
5
はじめに
DevTools の Lighthouse タブと LCP 2.5 秒基準を押さえるのが第一歩です。
6
深掘り先
Core Web Vitals、a11y（F-111）、GitHub Actions（F-62）
非エンジニアのつまずき
- （著者記入欄・空）
私のコメント
- 第一印象:（著者記入欄・空）
- 良い点:（著者記入欄・空）
- ダメな点:（著者記入欄・空）
- 誰向けか:（著者記入欄・空）
開発フローでの位置
手動計測
課題特定
AI へ依頼
CI で自動化
基準値の保持
関連用語
F-110·term_tool
バイブコーディング図鑑