wildhawk
Lighthouseでサイト改善！
初心者でもGoogle公式ツールで
SEO・速度・UXのまとめ診断手順
初心者でもGoogle公式ツールで
SEO・速度・UXのまとめ診断手順
作って終わりではない！
Webサイトは“継続的改善”が鍵
ホームページを良いデザインでSEOも対策し、公開しても「ページが重い」「SEOに効いていない」「アクセシビリティが低い」など、懸念を持ったことはありませんか？
そんなときに役立つのが、Googleが提供するWebページの品質診断ツール「Lighthouse（ライトハウス）」です。
Lighthouseは、ページのパフォーマンス・SEO・アクセシビリティなどを数値化し、改善点を具体的に教えてくれる無料ツールです。
今回は、Lighthouseの概要から使い方、結果の見方、改善への活かし方までをわかりやすく解説します。
こんな人にオススメ
ホームページの問題点を具体的に把握したい
何を調査すれば良いか分からず、改善策がわからない
Lighthouseeの使い方を初心者から学びたい
ホームページは作ったけど、アクセスが少ない理由はGoogleに評価されていない可能性があります。もちろん、ここの評価が直接SEOに関連するわけではありませんが、指摘点を改善すれば、アクセスが増える可能性が高まります。
Lighthouseは、Google が開発した無料のWebページ品質診断ツールです。
表示速度・SEO対策・モバイル対応・セキュリティなど多角的に評価し、ユーザーにとって快適なWebサイトかを数値で可視化します。
Lighthouseで測定される主な項目は次の4つです。
- Performance（パフォーマンス）：ページ読み込み速度、体感速度
- Accessibility（ユーザー補助）：誰でも使いやすいか
- Best Practices（おすすめの方法）：最新技術・安全基盤の活用
- SEO：検索エンジンに正しく認識されるか
これらをスコア（0〜100点）で示してくれるため、課題の「見える化」が簡単に行えます。
【chrome for developers】Lighthouse
Lighthouseは以下の4通りから利用することが可能です。
最も手軽なのは、Google Chromeの開発ツールから使う方法です。
以下の手順でスコアと改善提案が表示されます。
- 診断したいWebページをChromeで開く
- 右クリック →「検証」または
Ctrl + Shift + I - 上部タブから「Lighthouse」を選択 ※左キャプチャの赤丸部分
- チェックしたい項目（Performance、SEOなど）を選び「Analyze」
パソコン版Google Chromeで、ChromeウェブストアからLighthouse Chrome 拡張機能をインストールします。
【chromeウェブストア】Lighthouse
技術的な操作が苦手な方は、Google PageSpeed Insightsがオススメです。
URLを入力するだけで、Lighthouseと同様の診断結果が得られます。
Google PageSpeed Insights
開発者の場合は、Node.jsを使ってコマンドラインからLighthouseを実行することも可能です。
CI（自動テスト）環境に組み込むことで、継続的な品質チェックが可能となります。
私はブラウザで実行するGoogle PageSpeed Insightsをオススメします。理由は、結果表示がわかりやすく、お客様と共有して改善が実感できるからです。
Lighthouseでは各診断項目を0〜100点で評価し、赤（要改善）、黄（改善余地あり）、緑（良好）の3段階表示で視覚的にわかりやすく示されます。
ページの読み込み速度を5つの指標で評価します。
- First Contentful Paint（FCP）
ユーザーがページに移動した後、ブラウザが最初のDOMコンテンツをレンダリングするまでに要する時間を測定します。ページ上の画像、白色以外の<canvas>要素、SVGはDOMコンテンツと見なされます。iframe内のものは含まれません。 - Largest Contentful Paint（LCP）
主要コンテンツが表示されるまでの時間で、2.5秒以下を目標に収めましょう。 - Total Blocking Time
マウスクリック、画面タップ、キーボード入力などのユーザー入力にページが応答できない時間が合計でどのくらいかを示します。 - Cumulative Layout Shift（CLS）
ページのライフサイクル全体で発生した予期しないレイアウトシフトのレイアウト移動スコアの最大バーストを測定する指標です。 - Speed Index
ページの読み込み中にコンテンツが視覚的に表示される速さを測定します。
数値が低い場合は、画像圧縮やキャッシュ活用、コードの最適化で改善可能です。
高齢者や障がいのある方を含め、誰でも使いやすいサイトかをチェックします。
「代替テキストが設定されているか」「文字色のコントラストが十分か」などを確認します。
セキュリティや最新技術の利用状況を評価します。
HTTPS対応、JavaScriptエラー、画像サイズなどが主なチェックポイントです。
検索エンジンがページを正しく理解できる構造になっているかを評価します。
メタタグ・構造化データ・見出しタグの正しい使用が重要です。
Lighthouseで低スコアが出ても、落ち込む必要はありません。改善できるポイントが明確になるのが、このツールの最大の利点です。具体的な確認内容や、改善アクション例を説明します。
| 目的 | ページの読み込み速度を改善 |
|---|---|
| 確認内容（チェック項目） | 画像サイズが必要以上に大きくないか PNGやJPEGをWebPに変換しているか 遅延読み込み（lazy-load）を設定しているか |
| 改善アクション例 | ・画像をWebP/AVIF形式に変換 ・サムネイルを圧縮（tinypng等） ・ loading="lazy"属性を追加 |
| 目的 | ページの描画を早くする |
|---|---|
| 確認内容（チェック項目） | 使っていないJavaScript/CSSが残っていないか 同じJavaScript/CSSを複数読み込んでいないか 外部スクリプトを必要最小限にしているか CSSがインラインで肥大化していないか |
| 改善アクション例 | ・未使用コードを削除（Chrome DevToolsのCoverage確認） ・ deferやasync属性で非同期読み込み・外部ライブラリを必要最低限に整理 |
| 目的 | 再訪問時や遠隔ユーザーの速度改善 |
|---|---|
| 確認内容（チェック項目） | ブラウザキャッシュが設定されているか サーバーやCDNのキャッシュが有効か 画像・JS・CSSにキャッシュヘッダがあるか |
| 改善アクション例 | ・.htaccessやサーバー設定でキャッシュ制御・CloudflareなどのCDNを導入 ・静的ファイルをキャッシュする運用ルールを作成 |
| 目的 | 検索エンジン理解とSEO評価向上 |
|---|---|
| 確認内容（チェック項目） | titleやdescriptionが適切に設定されているか 見出し（h1〜h3）にキーワードがあるか 構造化データ（Article, Breadcrumbなど）があるか |
| 改善アクション例 | ・descriptionを最適化（160字前後） ・見出し（h1〜h3）にキーワードを含める ・Search Consoleで構造化データを検証 ・JSON-LD形式でパンくずリストなどを実装 |
| 目的 | ユーザー体験を最適化しSEOに反映 |
|---|---|
| 確認内容（チェック項目） | モバイル表示で文字やボタンが見やすいか タップ領域が適切な大きさか CLS（レイアウトのズレ）が発生していないか |
| 改善アクション例 | ・レスポンシブデザインを実機で確認 ・フォントサイズ／ボタン間隔を調整 ・画像や広告でレイアウトが動かないようサイズを指定して表示を固定 |
最大のメリットは、定期的に診断しスコアの推移をチェックすることが出来ることです。常にサイトを改善し効果を実感できることができます。
Web制作会社では、Lighthouseを以下のように活用できると考えています。
- 納品前チェック
パフォーマンス・SEO・アクセシビリティの最終確認 - 運用保守（定期レポート）
定期レポートで改善状況を可視化 - 提案資料としての使用
リニューアルや改善提案の根拠データとして活用 - 社内品質基準設定
最低スコアの目標を設定して制作品質を統一
納品物としての品質を「感覚」ではなく「数値」で語れるようになるのが、Lighthouseを使う最大のメリットだと考えています。
Lighthouseは品質を数値で表せるので非常に助かるツールですが、納品物にすると100%を求められるので正直しんどいです。もちろん100%にしたからSEOに優れているとも言えないので、難しいところです。
今回はLighthouseを解説しました。
Lighthouseは、Webサイトの健康診断ツールとも言える存在です。SEO・速度・アクセシビリティなど、サイト運用に欠かせない要素を自動で可視化してくれます。
特別な知識がなくても使えるため、Web担当者や制作初心者にもおすすめです。自社サイトをLighthouseで診断し、どの項目に改善余地があるかをチェックしてみましょう。
原因と解決方法の提案もあるので、実際に対応できる内容は実施し、サーバー関係など技術的な内容は関係箇所に相談し改善することで、ユーザーにとって快適なWebサイトづくりの第一歩になれば幸いです。
もちろん、対応が難しいと感じたら、是非wildhawkにご相談ください。
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください