---
title: "INPとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "WebのINP（Interaction to Next Paint）を初めて聞いたデザイナーや非エンジニアに向け、AI生成サイトのHTML共有シーンでの関連性と注意点をわかりやすく整理した解説記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-inp-html-share"
markdown: "https://giga-site.com/articles/what-is-inp-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 3
---
# INPとは？HTML共有・AI生成サイトでの意味をやさしく解説

Webページを触ったときのもたつき感を数値化した指標がINPです。AI生成サイトをプレビューURLで共有する場面では、クリックやタップへの応答速度が閲覧者の第一印象を左右します。この記事では、INPの仕組みと、HTMLを共有する際に何を意識すればよいかを実例とともに解説します。

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

## ひとことで言うと

INPとは「Interaction to Next Paint」の略で、ユーザーがボタンやリンクをクリックしてから画面が更新されるまでの時間を測定した指標です。200ミリ秒以内であれば良好、500ミリ秒を超えると「劣悪」と判定されます。

体感としては、ボタンを押した後に「一瞬止まる」と感じる現象がINP悪化のサインです。AI生成ツールが出力したHTMLに重たいJavaScriptが含まれている場合、モバイル端末ではこの遅延が特に顕著になります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## HTML共有で関係する場面

静的HTMLファイルをギガサイト便のようなプレビューサービスで共有する際、閲覧者が資料内のタブ切り替えやアコーディオンを操作したとき、INPが問題になります。特にAIが生成したインタラクション付きUIは、不要なイベントリスナーが多重登録されていることがあります。

共有前に Chrome DevTools の「Performance」パネルを開き、クリック操作を記録してみましょう。「Long Tasks」として赤くマークされる処理があれば、そのスクリプトブロックがINPを押し上げている原因です。不要なアニメーションライブラリを削除するだけで大幅に改善できます。

## よくある誤解

「INPはページの読み込み速度のことだ」と誤解されがちですが、読み込みはLCPやFCPで測定します。INPはあくまでも操作への応答性です。たとえ0.5秒で表示されても、クリックへの反応が遅ければINPスコアは低くなります。

「静的HTMLだからINPは関係ない」も誤りです。HTMLに埋め込まれたJavaScriptがメインスレッドをブロックする限り、静的ファイルでも反応の遅れは起こります。AI生成サイトは複数の外部スクリプトを読み込むケースが多く、特に注意が必要です。

## 安全に使うための注意点

共有用HTMLを書き出す前に、不要な外部JavaScriptライブラリを削除または`defer`属性付きで読み込むよう修正してください。とりわけCDN経由で読み込むアニメーションや可視化ライブラリは、閲覧者の環境によってはタイムアウトし、INPをさらに悪化させます。

プレビューURLを送る前に、スマートフォンの実機でインタラクティブ要素を一通り操作してみることを推奨します。PCでは快適でも、モバイルCPUではINPが3倍以上になることがあります。問題があれば操作不要なHTMLに差し替えるか、インタラクション部分を取り除いた静的版を用意しましょう。

## よくある質問

### INPのスコアはどこで確認できますか？

Chrome DevTools の「Lighthouse」タブで測定できます。「Performance」カテゴリを実行すると、INPを含むCore Web Vitalsのスコアが一覧表示されます。モバイル設定で計測するとより実態に近い値が得られます。

### AI生成HTMLのINPが悪い場合、どこから手をつければよいですか？

まず読み込んでいる外部スクリプトタグを確認し、使っていないライブラリを削除してください。次にChromeのPerformanceパネルでLong Tasksを特定し、その関数を無効化または遅延読み込みに変更するだけで改善するケースがほとんどです。

### プレビュー共有後にINPが悪いと指摘された場合、差し替えはできますか？

ギガサイト便では修正したHTMLをアップロードし直すことで同じURLのまま内容を更新できます。閲覧者がページをリロードすれば改善済みのファイルが表示されるため、URLを再送する必要はありません。

## 関連記事

- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)
- [CORSプリフライトとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-cors-preflight-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "INPとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "WebのINP（Interaction to Next Paint）を初めて聞いたデザイナーや非エンジニアに向け、AI生成サイトのHTML共有シーンでの関連性と注意点をわかりやすく整理した解説記事です。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-inp-html-share",
  "url": "https://giga-site.com/articles/what-is-inp-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "INPのスコアはどこで確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Chrome DevTools の「Lighthouse」タブで測定できます。「Performance」カテゴリを実行すると、INPを含むCore Web Vitalsのスコアが一覧表示されます。モバイル設定で計測するとより実態に近い値が得られます。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成HTMLのINPが悪い場合、どこから手をつければよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず読み込んでいる外部スクリプトタグを確認し、使っていないライブラリを削除してください。次にChromeのPerformanceパネルでLong Tasksを特定し、その関数を無効化または遅延読み込みに変更するだけで改善するケースがほとんどです。"
      }
    },
    {
      "@type": "Question",
      "name": "プレビュー共有後にINPが悪いと指摘された場合、差し替えはできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便では修正したHTMLをアップロードし直すことで同じURLのまま内容を更新できます。閲覧者がページをリロードすれば改善済みのファイルが表示されるため、URLを再送する必要はありません。"
      }
    }
  ]
}
```