---
title: "TTIとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "TTI（Time to Interactive）を初めて知るデザイナーやディレクター向けに、AI生成HTMLのURL共有シーンで何が問題になるか、どう改善するかを具体的に解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-tti-html-share"
markdown: "https://giga-site.com/articles/what-is-tti-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# TTIとは？HTML共有・AI生成サイトでの意味をやさしく解説

ページが目に見えても、実際にクリックできるまでに数秒かかる経験をしたことはないでしょうか。その「見えているのに触れない」状態を計測するのがTTIです。AI生成サイトをURL共有する場面でTTIを意識することで、受け取った相手がストレスなく内容を確認できる品質を保てます。

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

## ひとことで言うと

TTI（Time to Interactive）とは、ページが完全に操作可能になるまでの時間を示す指標です。具体的には「メインスレッドが5秒以上のLong Taskなく安定し、ネットワークも落ち着いた最初の瞬間」をTTIと定義します。GoogleのLighthouseで測定でき、3.8秒以内が良好とされています。

見た目が表示されていてもJavaScriptの初期化が終わっていなければ、ボタンを押しても何も起きません。AIが生成したインタラクティブなランディングページでは、複数ライブラリの初期化が重なり、TTIが10秒を超えることもあります。

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

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

取引先にプレビューURLを送った場合、相手がスマートフォンで開くと画面は表示されているのにスクロールが固まったり、問い合わせボタンが無反応になったりするケースがあります。これはTTIが完了する前に操作しようとしているためです。

社内レビュー用HTMLに重いグラフライブラリや3Dアニメーションが含まれている場合も同様です。共有前にLighthouseのTTIスコアを確認し、5秒を超えているならスクリプトを`defer`または`async`に変更するか、グラフを画像に差し替えることを検討してください。

## よくある誤解

「TTIとFCP（First Contentful Paint）は同じ意味だ」という誤解があります。FCPは最初の文字や画像が描画された時点を指し、TTIはその後に操作可能になるまでの時間を指します。FCPが速くてもTTIが遅い場合、閲覧者は「表示されたのに動かない」という最悪の体験をします。

「ファイルサイズが小さければTTIも短い」も必ずしも正しくありません。ファイルサイズが数KBでも、JavaScriptのパース・実行が重ければTTIは長くなります。とりわけpolyfillや古いjQueryプラグインを含んでいるAI生成コードは要注意です。

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

HTML共有前のチェックリストとして、（1）使っていないJSライブラリのscriptタグを削除、（2）必要なスクリプトにはdefer属性を追加、（3）インラインの大きなbase64画像はファイル分離またはURL参照に変更、の3点を最低限実施してください。これだけでTTIを数秒短縮できることがほとんどです。

プレビューURLを送る前に、モバイル回線を模倣した状態（Chrome DevToolsの「Network」→「Slow 3G」）でページを開き、操作できるまでの感覚を確認しましょう。許容できない遅さなら、インタラクション部分を省いたHTML静止版を別途用意して共有する方法も有効です。

## よくある質問

### TTIとTBT（Total Blocking Time）はどう違いますか？

TTIは操作可能になった時点の絶対時間、TBTはFCPからTTIの間にメインスレッドをブロックした合計時間です。TBTはLighthouseのスコアに直接影響するため、Long Tasksを減らすことが両指標の改善につながります。

### AIツールが生成したHTMLのTTIを手軽に改善する方法はありますか？

scriptタグに`defer`を付けるだけでもTTIが大幅に改善するケースが多いです。また、CDNから読み込む外部ライブラリをリスト化し、実際に使っていないものをHTMLから削除するだけで数秒短縮できることがあります。

### TTIが長いまま共有してしまった場合、後から修正して同じURLで更新できますか？

ギガサイト便では修正済みの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": "TTIとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "TTI（Time to Interactive）を初めて知るデザイナーやディレクター向けに、AI生成HTMLのURL共有シーンで何が問題になるか、どう改善するかを具体的に解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-tti-html-share",
  "url": "https://giga-site.com/articles/what-is-tti-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": "TTIとTBT（Total Blocking Time）はどう違いますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "TTIは操作可能になった時点の絶対時間、TBTはFCPからTTIの間にメインスレッドをブロックした合計時間です。TBTはLighthouseのスコアに直接影響するため、Long Tasksを減らすことが両指標の改善につながります。"
      }
    },
    {
      "@type": "Question",
      "name": "AIツールが生成したHTMLのTTIを手軽に改善する方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "scriptタグに`defer`を付けるだけでもTTIが大幅に改善するケースが多いです。また、CDNから読み込む外部ライブラリをリスト化し、実際に使っていないものをHTMLから削除するだけで数秒短縮できることがあります。"
      }
    },
    {
      "@type": "Question",
      "name": "TTIが長いまま共有してしまった場合、後から修正して同じURLで更新できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便では修正済みのHTMLを再アップロードすることで同じプレビューURLを維持したまま中身を差し替えられます。閲覧者がリロードすれば最新ファイルが反映されるため、URLを再発行する手間がありません。"
      }
    }
  ]
}
```