---
title: "FCP（最初の描画）とは？真っ白な画面が消えるまでの時間"
description: "ページを開いて最初のコンテンツが現れるまでの時間がFCPです。「読み込みが始まった」とユーザーが感じる最初の合図であり、LCPとはどう違うのか、1.8秒という目標値と改善のアプローチを基礎から整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-fcp"
markdown: "https://giga-site.com/articles/what-is-fcp/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# FCP（最初の描画）とは？真っ白な画面が消えるまでの時間

ページを開いた直後の真っ白な画面。そこに最初の文字や画像が現れる瞬間までの時間がFCPです。ユーザーが「読み込みが始まった」と感じる最初の合図であり、初動の速さを左右します。本記事ではFCPの意味と、よく混同されるLCPとの違い、基準値、そして速くするための手順までを整理します。

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

## FCPとは何か

FCPはFirst Contentful Paintの略で、ページの読み込みが始まってから、最初のテキストや画像など「中身のある何か」が画面に描画されるまでの時間を測る指標です。日本語では「最初の描画」「コンテンツの初回描画」などと呼ばれます。

ここで言う「中身のあるもの」には、文字、画像、SVG、背景画像などが含まれます。ただの背景色だけが変わった状態はFCPには数えません。

FCPは、ユーザーが「真っ白な画面ではなくなった」「読み込みが進んでいる」と最初に感じる瞬間です。ここが速いと、待たされている不安が和らぎます。

## FCPとLCPの違い

FCPとLCPは似ていますが、測る対象が違います。FCPは「最初に何かが見え始めた時刻」、LCPは「最も大きな主要コンテンツが見えた時刻」です。

たとえば、最初に小さな見出しが出てFCPが記録され、その後に大きなヒーロー画像が出てLCPが確定する、という流れになります。FCPはあくまで初動、LCPは主役の登場と覚えると分かりやすいでしょう。

両方を見ることで、初動が遅いのか（FCPが大きい）、初動は速いが主要コンテンツが遅いのか（FCPは小さいがLCPが大きい）を切り分けられます。

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

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

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

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

## FCPの基準値

FCPは1.8秒以内なら「良好」、3.0秒を超えると「不良」とされます。その間は改善が必要な領域です。

FCPはレンダリングを妨げるリソースの影響を強く受けます。最初の描画の前に重いCSSやJavaScriptを読み込んでいると、その分だけ白い画面が長引きます。

## FCPを速くする手順

FCPの改善は、最初の描画を妨げるものを取り除くことが中心です。次の手順を目安にしてください。

1. サーバー応答（TTFB）を確認し、初動が遅れていないか見る
2. 最初の描画に必要な分だけCSSを先に届け、残りは後回しにする
3. レンダリングを妨げるJavaScriptは遅延読み込みや非同期にする
4. 重要なリソースは先読み（preload）で早めに取得させる
5. CDNのエッジ配信で初動のリソースを近い拠点から届ける
6. 改善後に1.8秒以内に収まっているか再計測する

## 確認用ページでの初動の速さ

デザインや原稿を相手に見てもらうとき、開いた直後に真っ白な時間が続くと、それだけで体感が悪くなります。FCPが速いと「すぐ表示された」という第一印象につながります。

とくに短時間だけ確認してもらう一時共有では、最初の数百ミリ秒の差が印象を分けます。初動が遅いと中身を見る前に不安を感じさせてしまいます。

ギガサイト便はCDNのエッジ配信で配信が速く、HTTPSも自動で付くため、HTMLやZIPをドロップして発行した確認用URLでも、最初の描画を待たせにくくなります。

## よくある質問

### FCPとLCPはどう使い分ければよいですか？

FCPは初動（最初に何かが見えた時刻）、LCPは主役（最大コンテンツが見えた時刻）を表します。両方を見れば、初動が遅いのか、初動は速いが主要コンテンツが遅いのかを切り分けられます。

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

1.8秒以内なら良好とされ、3.0秒を超えると不良です。最初の描画はレンダリングを妨げるCSSやJavaScriptの影響を強く受けるため、それらの読み込み方を見直すと改善しやすくなります。

### FCPを悪化させる最大の要因は何ですか？

最初の描画の前に読み込まれる、レンダリングを妨げるCSSやJavaScriptが代表的です。加えてサーバー応答（TTFB）が遅いと、そもそも描画開始が遅れます。まずこの2点を確認するとよいでしょう。

### 背景色を変えるだけではFCPになりませんか？

なりません。FCPはテキストや画像など「中身のあるコンテンツ」が描画された時点を測ります。背景色だけが変わった状態は対象外で、最初の文字や画像が出て初めてFCPが記録されます。

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

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

## 関連記事

- [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)
- [403 Forbiddenとは？アクセスが拒否される意味](https://giga-site.com/articles/what-is-403/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "FCP（最初の描画）とは？真っ白な画面が消えるまでの時間",
  "description": "ページを開いて最初のコンテンツが現れるまでの時間がFCPです。「読み込みが始まった」とユーザーが感じる最初の合図であり、LCPとはどう違うのか、1.8秒という目標値と改善のアプローチを基礎から整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-fcp",
  "url": "https://giga-site.com/articles/what-is-fcp",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "FCPとLCPはどう使い分ければよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "FCPは初動（最初に何かが見えた時刻）、LCPは主役（最大コンテンツが見えた時刻）を表します。両方を見れば、初動が遅いのか、初動は速いが主要コンテンツが遅いのかを切り分けられます。"
      }
    },
    {
      "@type": "Question",
      "name": "FCPの良好な目安はどのくらいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "1.8秒以内なら良好とされ、3.0秒を超えると不良です。最初の描画はレンダリングを妨げるCSSやJavaScriptの影響を強く受けるため、それらの読み込み方を見直すと改善しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "FCPを悪化させる最大の要因は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "最初の描画の前に読み込まれる、レンダリングを妨げるCSSやJavaScriptが代表的です。加えてサーバー応答（TTFB）が遅いと、そもそも描画開始が遅れます。まずこの2点を確認するとよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "背景色を変えるだけではFCPになりませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "なりません。FCPはテキストや画像など「中身のあるコンテンツ」が描画された時点を測ります。背景色だけが変わった状態は対象外で、最初の文字や画像が出て初めてFCPが記録されます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```