Lighthouseって何？Googleが提供する無料のWebサイト品質チェックツールを完全攻略！

「サイトの表示が遅い気がする…」「SEO対策してるつもりだけど、順位が上がらない」「スマホで見づらいって言われた」

こんな悩み、抱えていませんか？

実は、これらの問題を数値で見える化してくれる便利なツールがあるんです。それが、Googleが無料で提供している「Lighthouse（ライトハウス）」。

今回は、Lighthouseの基本的な使い方から、スコアを改善する具体的な方法まで、初心者にも分かりやすく解説していきます。この記事を読み終わる頃には、あなたのサイトをグッと良くする方法が見つかるはずですよ！

Lighthouseとは？灯台のように道を照らすツール
1. Googleが作った無料の診断ツール
今すぐ使える！3つの実行方法
スコアの見方：何点なら合格？
1. 点数の目安
2. 重要度の違い
Performance（パフォーマンス）を深掘り：速度改善のカギ
1. 6つの重要指標（Core Web Vitals含む）
2. よくある問題と改善方法
実践的な改善テクニック：スコアを上げる具体策
1. すぐできる！簡単な改善方法
2. 中級者向けの改善方法
Accessibility（アクセシビリティ）：全ての人に優しいサイトへ
1. よくある指摘と改善方法
SEO対策：検索エンジンに好かれるサイトに
1. Lighthouseが教えてくれるSEOの基本
よくある質問と注意点
競合サイトの分析にも使える！
1. ライバルサイトをチェック
2. 定期的な測定の重要性
まとめ：Lighthouseを味方につけて、最高のWebサイトを作ろう！

Lighthouseとは？灯台のように道を照らすツール

Googleが作った無料の診断ツール

Lighthouseは、Webページの品質を自動的に測定して、改善点を教えてくれるツールです。

名前の由来は「灯台（Lighthouse）」。暗い海で船を導く灯台のように、Web制作者に正しい方向を示してくれるという意味が込められています。

測定できる5つの指標：

Performance（パフォーマンス）
- ページの読み込み速度
- 表示されるまでの時間
Accessibility（アクセシビリティ）
- 障がいのある人でも使いやすいか
- 文字の読みやすさ、色のコントラスト
Best Practices（ベストプラクティス）
- セキュリティ面の安全性
- 最新のWeb標準に準拠しているか
SEO（検索エンジン最適化）
- 検索結果に表示されやすい構造か
- メタタグの設定状況
PWA（Progressive Web App）
- アプリのような機能があるか
- オフラインでも動作するか

各項目は0〜100点で採点され、一目で改善が必要な箇所が分かります。

今すぐ使える！3つの実行方法

方法1：Chrome拡張機能（一番簡単！）

ステップ1：拡張機能をインストール

Chromeウェブストアで「Lighthouse」を検索してインストール。

ステップ2：測定したいページを開く

チェックしたいWebサイトにアクセスします。

ステップ3：アイコンをクリック

ブラウザ右上のLighthouseアイコンをクリック → 「Generate report」をクリック。

たったこれだけ！30秒ほどで結果が表示されます。

方法2：Chrome DevTools（開発者ツール）

F12キーで開発者ツールを開く

Windowsなら「F12」、Macなら「Command + Option + I」。

「Lighthouse」タブを選択

上部のタブから「Lighthouse」を選びます（見当たらない場合は「>>」をクリック）。

「Analyze page load」をクリック

測定が始まり、詳細なレポートが生成されます。

方法3：PageSpeed Insights（オンライン版）

Webサイトにアクセス

PageSpeed Insightsにアクセス。

URLを入力

測定したいページのURLを入力して「分析」ボタンをクリック。

メリット：

インストール不要
モバイルとデスクトップ両方の結果が見られる
他人のサイトも簡単にチェック可能

スコアの見方：何点なら合格？

点数の目安

スコア	評価	色表示	意味
90-100	Good	🟢 緑	優秀！そのまま維持しましょう
50-89	Needs Improvement	🟠 オレンジ	改善の余地あり
0-49	Poor	🔴 赤	早急な改善が必要

重要度の違い

すべての指標が同じ重要さではありません。

優先順位：

Performance – 最重要！ユーザー体験に直結
SEO – 検索順位に影響
Accessibility – 法的要件の場合もある
Best Practices – セキュリティは重要
PWA – 必須ではないが、あると良い

Performance（パフォーマンス）を深掘り：速度改善のカギ

6つの重要指標（Core Web Vitals含む）

1. FCP（First Contentful Paint）

最初のコンテンツが表示されるまでの時間。

良好：1.8秒以下
要改善：3.0秒以下
不良：3.0秒超

2. LCP（Largest Contentful Paint） ⭐Core Web Vitals

メインコンテンツが表示されるまでの時間。

良好：2.5秒以下
要改善：4.0秒以下
不良：4.0秒超

3. TBT（Total Blocking Time）

ユーザー操作がブロックされる合計時間。

良好：200ミリ秒以下
要改善：600ミリ秒以下
不良：600ミリ秒超

4. CLS（Cumulative Layout Shift） ⭐Core Web Vitals

ページのガタつき度合い。

良好：0.1以下
要改善：0.25以下
不良：0.25超

5. Speed Index

コンテンツが視覚的に表示される速さ。

良好：3.4秒以下
要改善：5.8秒以下
不良：5.8秒超

6. TTI（Time to Interactive）

完全に操作可能になるまでの時間。

良好：3.8秒以下
要改善：7.3秒以下
不良：7.3秒超

よくある問題と改善方法

問題：画像が重すぎる → 解決：WebP形式に変換、遅延読み込み（lazy loading）を実装

問題：JavaScriptが多すぎる → 解決：不要なライブラリを削除、コード分割（Code Splitting）

問題：サーバーの応答が遅い → 解決：CDNを利用、キャッシュの最適化

実践的な改善テクニック：スコアを上げる具体策

すぐできる！簡単な改善方法

1. 画像の最適化

<!-- Before -->
<img src="photo.jpg" />

<!-- After -->
<img src="photo.webp" loading="lazy" alt="説明文" />

JPEG/PNGをWebPに変換（30-50%軽量化）
loading=”lazy”で遅延読み込み
適切なサイズにリサイズ

2. フォントの最適化

/* フォント表示の最適化 */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* すぐに文字を表示 */
}

3. 不要なCSSの削除

使われていないCSSを削除するだけで、大幅に軽量化できます。 Chrome DevToolsの「Coverage」タブで未使用コードを確認できます。

中級者向けの改善方法

1. Critical CSSの実装

ファーストビューに必要なCSSだけを先に読み込む：

<style>
  /* ファーストビューのCSS */
  .header { ... }
  .hero { ... }
</style>

<!-- 残りのCSSは後から -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

2. リソースヒントの活用

<!-- DNS先読み -->
<link rel="dns-prefetch" href="//example.com">

<!-- 接続の事前確立 -->
<link rel="preconnect" href="//example.com">

<!-- リソースの先読み -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

Accessibility（アクセシビリティ）：全ての人に優しいサイトへ

よくある指摘と改善方法

問題1：画像にalt属性がない

<!-- NG -->
<img src="product.jpg">

<!-- OK -->
<img src="product.jpg" alt="青いTシャツの商品画像">

問題2：色のコントラスト不足

文字と背景の色の差が小さいと読みづらい：

通常テキスト：コントラスト比 4.5:1 以上
大きなテキスト：コントラスト比 3:1 以上

問題3：フォームラベルの不足

<!-- NG -->
<input type="email">

<!-- OK -->
<label for="email">メールアドレス</label>
<input type="email" id="email">

SEO対策：検索エンジンに好かれるサイトに

Lighthouseが教えてくれるSEOの基本

チェック項目

✅ メタディスクリプションがあるか

<meta name="description" content="ページの説明文">

✅ title要素が適切か

<title>ページタイトル | サイト名</title>

✅ 見出しタグの階層構造

<h1>メインタイトル</h1>
  <h2>大見出し</h2>
    <h3>小見出し</h3>

✅ モバイルフレンドリー

<meta name="viewport" content="width=device-width, initial-scale=1">

よくある質問と注意点

Q：スコアが日によって変わるのはなぜ？

A：測定時の条件により変動します：

ネットワーク速度
サーバーの混雑状況
広告の読み込み
キャッシュの状態

対策： 複数回測定して平均値を見る

Q：100点を目指すべき？

A：必ずしも100点である必要はありません。

90点以上なら十分優秀
機能性とのバランスが大切
ビジネス目標を優先

Q：どの項目から改善すべき？

A：影響が大きく、簡単なものから：

画像の最適化（簡単で効果大）
不要なJavaScript削除
キャッシュ設定
フォント最適化

競合サイトの分析にも使える！

ライバルサイトをチェック

PageSpeed Insightsなら、URLを入力するだけで他社サイトも測定できます。

活用方法：

業界平均を把握
上位サイトの特徴を分析
自社サイトとの比較
改善のヒントを得る

定期的な測定の重要性

月1回は測定して、推移を記録しましょう：

アップデート後の影響確認
季節変動の把握
改善効果の検証

まとめ：Lighthouseを味方につけて、最高のWebサイトを作ろう！

Lighthouseについて、基本から実践まで解説してきました。

押さえておきたいポイント：

✅ 無料で使える5つの指標測定ツール
✅ Performanceスコアが最重要（特にCore Web Vitals）
✅ 90点以上が「良好」の目安
✅ 画像最適化が最も簡単で効果的
✅ 定期的な測定で継続的改善

Lighthouseは単なる採点ツールではありません。 より良いWebサイトを作るための羅針盤です。

完璧を目指す必要はありませんが、ユーザーのために少しずつ改善していくことが大切。

今すぐLighthouseを実行して、あなたのサイトの「今」を知ることから始めましょう。きっと、思わぬ発見と改善のヒントが見つかるはずです。

良いスコアが出たら、ぜひチームで共有して喜びを分かち合ってくださいね！