---
title: "Core Web Vitalsとは｜LCP・CLS・INPの意味と改善方法"
description: "GoogleのCore Web Vitals（LCP・CLS・INP）の意味と計測方法を解説します。検索順位への影響・測定ツール・改善の優先順位など、ページ速度・操作性を改善するための基本をまとめました。"
date: 2026-07-06
category: Web制作
tags: [Core Web Vitals]
related_tools: [serp-preview, img-resize]
draft: false
---

**Core Web Vitals** は、Googleがページ体験の指標として定めた3つのパフォーマンス指標です。2021年からランキング要因に組み込まれており、スコアが低いページは検索順位に悪影響が出る可能性があります。

## 3つの指標

### LCP（Largest Contentful Paint）

ページ内の**最大のコンテンツ要素が表示されるまでの時間**です。

| スコア | 評価 |
|---|---|
| 2.5秒以下 | 良好 |
| 2.5〜4.0秒 | 改善が必要 |
| 4.0秒以上 | 不良 |

LCPの対象になる要素：画像（`<img>`・`<picture>`）・背景画像・テキストブロック・動画のサムネイル。

**主な改善策：**
- ファーストビューの画像を最適化・圧縮する
- `<img>` に `fetchpriority="high"` を追加してヒーロー画像を優先読み込みする
- 画像にWebP形式を使用する
- サーバーの応答時間（TTFB）を短縮する
- Cloudflare CDNなどでコンテンツをエッジ配信する

### CLS（Cumulative Layout Shift）

ページ読み込み中に**レイアウトが意図せずズレる量**を示すスコアです。ボタンをクリックしようとしたら広告が出てきてタップ位置がずれる、といった現象が高いCLSの原因になります。

| スコア | 評価 |
|---|---|
| 0.1以下 | 良好 |
| 0.1〜0.25 | 改善が必要 |
| 0.25以上 | 不良 |

**主な原因と改善策：**
- **画像に `width` / `height` 属性がない** → HTMLに明示的なサイズを記述する
- **広告・埋め込みコンテンツのサイズが不確定** → 広告枠に最小高さを確保する
- **Webフォントの遅延読み込みによる文字ズレ** → `font-display: swap` を使う
- **動的に挿入されるコンテンツ** → 先に領域を確保してから挿入する

### INP（Interaction to Next Paint）

ユーザーの**操作（クリック・タップ・キー入力）に対してページが反応するまでの時間**です。2024年3月にFID（First Input Delay）から置き換えられました。

| スコア | 評価 |
|---|---|
| 200ミリ秒以下 | 良好 |
| 200〜500ミリ秒 | 改善が必要 |
| 500ミリ秒以上 | 不良 |

**主な改善策：**
- JavaScriptの重い処理をメインスレッドから分離する
- 不要なJavaScriptを削除・遅延読み込みにする
- イベントハンドラ内の処理を軽量化する

## なぜCore Web Vitalsが重要か

Googleは「ページ体験シグナル」として、Core Web Vitals・HTTPS・モバイル対応・煩わしいインタースティシャルなしを評価します。Core Web Vitalsは特にモバイル検索で重要度が高いとされています。

ただし、コンテンツの質が最重要です。Core Web Vitalsが悪くても、コンテンツが優れていれば上位表示されることがあります。Core Web Vitalsの改善は「底上げ」として機能します。

## 測定ツール

### フィールドデータ（実ユーザーのデータ）

- **Google Search Console** → 「コアウェブバイタル」レポート
- **Chrome UX Report（CrUX）** → 実際のChromeユーザーの計測値

### ラボデータ（シミュレーション）

```bash
# Chrome DevTools
1. F12（デベロッパーツール）を開く
2. 「Lighthouse」タブ → 「パフォーマンス」を選択して分析

# PageSpeed Insights（PSI）
https://pagespeed.web.dev/
URLを入力するとモバイル・デスクトップ別にスコアを確認できる
```

**フィールドデータとラボデータの違い：**
ラボデータはシミュレーションのため実際のスコアと異なることがあります。Google Search ConsoleはフィールドデータであるCrUXデータを使用しているため、検索順位への影響はフィールドデータで判断します。

## 優先順位の付け方

Core Web Vitals改善で費用対効果が高い施策の順：

1. **画像の最適化**（LCP・CLSに直結）
   - 画像圧縮・WebP変換
   - `width`・`height` 属性の追加
   - ファーストビュー画像の優先読み込み

2. **不要なJavaScriptの削除**（INP・LCPに影響）
   - Google Tag Managerの不要タグを整理する
   - サードパーティスクリプトの遅延読み込み

3. **サーバー応答速度の改善**（LCPに影響）
   - CDNの活用
   - キャッシュ設定の最適化

4. **広告・埋め込みコンテンツの領域確保**（CLS対策）

Google Search Consoleの「コアウェブバイタル」レポートで「不良」「改善が必要」のページから優先的に対応します。