Performance・Accessibility・SEO など複数項目を 0〜100 点で評価します。Chrome の DevTools から即使え、CLI や CI にも組み込めます。
技術用語
380
Lighthouse
ライトハウス
体験区分：触った
推奨読者レベル：Level 2-4
何をしてくれるか
どこで出会うか
Chrome の DevTools の「Lighthouse」タブを押すと診断が始まります。AI で書いたコードの品質確認や、PR ごとの自動計測でも使われます。
イメージ
開発フローでの位置
手動計測
課題特定
AI へ依頼
CI で自動化
基準値の保持
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）
非エンジニアのつまずき
- 仕組みは分からないまま点数が出てきて、その数字が何を意味するか掴めません。
- 高い方が良いのは分かっても、どう定義されたスコアか説明がしづらいです。
- 改善ヒントが英語で書かれていて、どう直せばよいかさっぱり分かりません。
私のコメント
- 第一印象:F12 で開いて点数まで出る機能があると知って感動しました。
- 良い点:無料で自分のサイトを評価でき、他人のサイトの採点で遊べるのも楽しいです。
- ダメな点:計測に時間がかかり、ローカル環境やユーザー体験までは担保しきれません。
- 誰向けか:自分の Web サイトを作る人や、ベンチマーク遊びをしたい人に向きます。
関連用語
備考
LCP（Largest Contentful Paint）の基準値: 2.5 秒以下 Good / 2.5〜4 秒 Needs Improvement / 4 秒超 Poor。
F-110·term_tool
バイブコーディング図鑑