---
title: "INP（操作の応答性）とは？クリックの反応が遅い指標の基礎"
description: "ボタンを押した後の微妙な引っかかりを数値化したINPは、2024年にCore Web Vitalsへ加わった最新の応答性指標です。FIDとの違い、200ms以内という基準値、Reactやイベントハンドラのどこに原因が潜むかを基礎から解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-inp"
markdown: "https://giga-site.com/articles/what-is-inp/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# INP（操作の応答性）とは？クリックの反応が遅い指標の基礎

ボタンを押したのに反応が一瞬遅れて不安になる。そんな操作の引っかかりを数値化したのがINPです。2024年にFIDの後継としてCore Web Vitalsに加わりました。本記事ではINPが何を測り、FIDと何が違い、基準値はいくつで、どう改善するかを操作レスポンスの観点から順に整理します。

> Source HTML: https://giga-site.com/articles/what-is-inp
> Article index: https://giga-site.com/articles/index.md

## INPとは何を測るのか

INPはInteraction to Next Paintの略で、ユーザーの操作（クリック、タップ、キー入力）に対して、次に画面が更新されるまでの応答時間を測る指標です。Core Web Vitalsの一つで、ページの操作性・応答性を表します。

ページ滞在中に発生したすべての操作の応答時間を観測し、その中でほぼ最も遅かった値が代表値として使われます。つまり「一番引っかかった瞬間」に近い値が評価されるため、一度でも重い処理があると数値に表れます。

操作してから画面が変わるまでに間があると、ユーザーは「効いていないのでは」と感じて二度押しするなど、体験を損ないます。INPはこの引っかかりを可視化します。

## FIDとの違い

INPは、以前使われていたFID（First Input Delay）の後継として2024年3月にCore Web Vitalsの正式な指標になりました。

FIDは「最初の操作に対する反応の遅れ」だけを、しかも処理が始まるまでの遅延に限って測っていました。これに対しINPは、最初の操作に限らずページ滞在中のあらゆる操作を対象とし、画面が更新されるまでの全体を測ります。より実際の体感に近い指標へと進化したと言えます。

## 実務ではどこで関係する？

INPは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

INP（操作の応答性）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## INPが悪化する原因

INPの遅れは、操作を処理する間にブラウザのメインスレッドが他の重い処理で詰まっていることが主な原因です。代表的な要因を押さえておきましょう。

- 長時間動き続けるJavaScript（ロングタスク）がメインスレッドを占有する
- 操作時に大量のDOM更新や複雑な再描画が走る
- サードパーティのスクリプトが重い処理を割り込ませる
- イベント処理の中で同期的に重い計算をしている
- 不要なレイアウト再計算（リフロー）が頻繁に発生する

## INPを改善する手順

INPの改善は、操作時にメインスレッドを空けることが鍵です。次の手順で見直してみてください。

1. 計測ツールで応答が遅い操作と、その時に動いている処理を特定する
2. 長いJavaScript処理を小さく分割し、合間にブラウザへ制御を返す
3. 操作直後の重い計算は遅延させ、まず画面を更新してから処理する
4. 不要なサードパーティスクリプトを減らす、または読み込みを遅らせる
5. DOM更新をまとめ、無駄な再描画やレイアウト再計算を避ける
6. 改善後に200ミリ秒以下に収まっているか再計測する

## INPの基準と共有ページでの考え方

INPは200ミリ秒以下なら「良好」、500ミリ秒を超えると「不良」とされます。500ミリ秒近い遅れは、はっきりと「もたつき」として体感されます。

操作の多いプロトタイプやインタラクティブなデモを共有する場面では、INPの良し悪しがそのまま操作感の評価につながります。動くものほど応答性が問われます。

ギガサイト便はCSSやJavaScriptを含むZIPもそのまま公開できるため、インタラクティブな試作の動作確認に向きます。同じURLで差し替えられるので、INPを改善したバージョンを送り直さずに再確認してもらえます。

## よくある質問

### INPとFIDはどちらを見ればよいですか？

FIDは2024年3月にCore Web Vitalsから外れ、INPに置き換わりました。現在はINPを見るのが基本です。INPの方が対象とする操作の範囲も測る区間も広く、実際の体感に近い指標です。

### INPの良好な目安はどのくらいですか？

200ミリ秒以下なら良好とされ、500ミリ秒を超えると不良です。その間は改善が必要な領域です。ページ滞在中で最も遅かった応答に近い値が使われるため、一回の重い処理にも注意が必要です。

### INPが悪い主な原因は何ですか？

操作を処理する間に、長く動くJavaScriptや大量のDOM更新などでメインスレッドが詰まっていることが主因です。重い処理を分割し、操作直後はまず画面を更新してから処理を行うと改善しやすくなります。

### INPはどんなページで特に重要ですか？

フォーム、フィルター、タブ切り替えなど操作が多いページや、JavaScriptで動的に動くアプリ的なページで重要になります。逆に静的な読み物ページでは操作自体が少ないため、影響は限定的です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [Core Web Vitalsとは？表示速度・体験の指標](https://giga-site.com/articles/what-is-core-web-vitals/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "INP（操作の応答性）とは？クリックの反応が遅い指標の基礎",
  "description": "ボタンを押した後の微妙な引っかかりを数値化したINPは、2024年にCore Web Vitalsへ加わった最新の応答性指標です。FIDとの違い、200ms以内という基準値、Reactやイベントハンドラのどこに原因が潜むかを基礎から解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-inp",
  "url": "https://giga-site.com/articles/what-is-inp",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "INPとFIDはどちらを見ればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "FIDは2024年3月にCore Web Vitalsから外れ、INPに置き換わりました。現在はINPを見るのが基本です。INPの方が対象とする操作の範囲も測る区間も広く、実際の体感に近い指標です。"
      }
    },
    {
      "@type": "Question",
      "name": "INPの良好な目安はどのくらいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "200ミリ秒以下なら良好とされ、500ミリ秒を超えると不良です。その間は改善が必要な領域です。ページ滞在中で最も遅かった応答に近い値が使われるため、一回の重い処理にも注意が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "INPが悪い主な原因は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "操作を処理する間に、長く動くJavaScriptや大量のDOM更新などでメインスレッドが詰まっていることが主因です。重い処理を分割し、操作直後はまず画面を更新してから処理を行うと改善しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "INPはどんなページで特に重要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォーム、フィルター、タブ切り替えなど操作が多いページや、JavaScriptで動的に動くアプリ的なページで重要になります。逆に静的な読み物ページでは操作自体が少ないため、影響は限定的です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```