---
title: "Cloudflare Pagesとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "Cloudflare PagesがHTML配信・AI生成サイト共有でどう役立つかを解説。R2やWorkersとの使い分け、プレビューデプロイの活用法を知りたい担当者・開発者向け。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-pages-html-share"
markdown: "https://giga-site.com/articles/what-is-pages-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Cloudflare Pagesとは？HTML共有・AI生成サイトでの意味をやさしく解説

Cloudflare Pagesは、GitリポジトリとつないでフロントエンドアプリやHTMLサイトを自動ビルド・デプロイできるホスティングサービスです。AIで生成した静的HTMLをGitHub経由で公開する場合や、複数ページ構成のサイトをチームで管理したい場合に適しています。R2直接公開との違いを正しく理解することが重要です。

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

## ひとことで言うと

Cloudflare PagesはGitHubやGitLabのリポジトリと連携し、プッシュのたびに自動ビルド・デプロイが走るCICD統合型のホスティングプラットフォームです。静的HTMLをそのままデプロイするだけでなく、Next.js・Astro・SvelteKitなどのフレームワークに対応したビルド環境も提供します。

Pagesの特徴的な機能がプレビューデプロイです。プルリクエストやブランチへのプッシュごとにユニークなURLが自動生成され、本番環境とは独立した確認環境が即座に立ち上がります。デザインレビューや機能確認のURL共有という文脈では、このプレビューデプロイ機能が特に便利です。

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

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

AIが生成したHTMLを継続的に改善していくワークフローにPagesは適しています。修正のたびにGitにコミットしてプッシュすれば自動で最新版がデプロイされ、常に同じURLで最新のHTMLを確認できます。gitの差分でどこが変わったかも追えるため、チームレビューとの相性が抜群です。

一方でAIが出力した単一のHTMLファイルを「今すぐ数秒で共有したい」という用途にはPagesは少し重いです。Gitリポジトリへのコミットとプッシュという手順が必要なため、ギガサイト便のようにファイルをドラッグ＆ドロップするだけで即URL発行というスピードには及びません。「継続管理」か「即時共有」かで使い分けを判断してください。

## よくある誤解

「PagesはWorkersのコードも実行できない」という誤解があります。実際にはPages FunctionsというWorkersベースのサーバーサイド処理機能があり、`/functions/api/check.ts`のようにファイルを配置するだけでAPIエンドポイントを追加できます。静的HTMLと動的APIをひとつのPagesプロジェクトに共存させることが可能です。

「Pagesには独自ドメインを設定できない」と思い込む人もいますが、Pagesは独自ドメインのフル対応をしています。CloudflareでDNS管理しているドメインならワンクリックで紐付けられ、無料のSSL証明書も自動発行されます。Cloudflare外でDNSを管理している場合はCNAMEレコードの追加が必要です。

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

Pagesプロジェクトの設定でアクセス制限を有効にするにはCloudflare Accessとの連携が必要です。単純なパスワード認証はPagesだけでは実装できないため、Access Policyでメールアドレスや組織ドメインを条件にしたアクセス制御を設定してください。設定手順はCloudflareダッシュボードの「Access」→「Applications」から行います。

ビルドログには環境変数の値が意図せず出力されることがあります。`console.log(process.env)`のようなデバッグコードがビルドスクリプトに残っていないか、デプロイ前に確認してください。PagesのビルドログはCloudflareダッシュボードで閲覧でき、プロジェクトメンバー全員が見られる状態になっている点に注意が必要です。

## よくある質問

### Pagesの無料プランで独自ドメインのHTMLサイトを何個まで運用できますか？

無料プランでは1アカウントあたり最大100のPagesプロジェクトを作成でき、各プロジェクトに独自ドメインを1つ設定できます。ただし帯域やリクエスト数の上限は設定されていないため、ほとんどのケースでは無料プランで十分です。

### PagesとR2を組み合わせてHTMLを配信できますか？

はい。Pages FunctionsからR2バインディングを使ってファイルを取得し、レスポンスとして返す実装が可能です。Gitで管理しないアップロード系コンテンツをR2に置き、その取得ロジックだけPagesで管理するという構成が取れます。

### プレビューデプロイのURLを特定のメンバーだけに公開できますか？

はい、Cloudflare Accessと組み合わせることでプレビューURLへのアクセスをGoogleアカウントや組織メールドメインに限定できます。Pagesプロジェクトの設定画面からAccessポリシーを直接紐付けられます。

## 関連記事

- [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": "Cloudflare Pagesとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "Cloudflare PagesがHTML配信・AI生成サイト共有でどう役立つかを解説。R2やWorkersとの使い分け、プレビューデプロイの活用法を知りたい担当者・開発者向け。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-pages-html-share",
  "url": "https://giga-site.com/articles/what-is-pages-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": "Pagesの無料プランで独自ドメインのHTMLサイトを何個まで運用できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "無料プランでは1アカウントあたり最大100のPagesプロジェクトを作成でき、各プロジェクトに独自ドメインを1つ設定できます。ただし帯域やリクエスト数の上限は設定されていないため、ほとんどのケースでは無料プランで十分です。"
      }
    },
    {
      "@type": "Question",
      "name": "PagesとR2を組み合わせてHTMLを配信できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。Pages FunctionsからR2バインディングを使ってファイルを取得し、レスポンスとして返す実装が可能です。Gitで管理しないアップロード系コンテンツをR2に置き、その取得ロジックだけPagesで管理するという構成が取れます。"
      }
    },
    {
      "@type": "Question",
      "name": "プレビューデプロイのURLを特定のメンバーだけに公開できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい、Cloudflare Accessと組み合わせることでプレビューURLへのアクセスをGoogleアカウントや組織メールドメインに限定できます。Pagesプロジェクトの設定画面からAccessポリシーを直接紐付けられます。"
      }
    }
  ]
}
```