GitHub Pages / Cloudflare Pages / Netlify / Vercel - 静的サイト配信プラットフォーム比較 2026

静的サイト配信プラットフォームの選び方 2026

静的サイト生成器（Astro、Next.js、Nuxt、SvelteKit など）の成熟に伴い、配信プラットフォームの選択肢も拡大しています。2026 年現在、GitHub Pages、Cloudflare Pages、Netlify、Vercel の 4 大プラットフォームが市場を占めています。本記事では、それぞれの特性を最新の公式情報に基づいて比較し、用途別の選定基準を示します。

flowchart LR
    Git[Git Push] --> Platform{プラットフォーム}
    Platform --> Build[ビルド実行]
    Build --> Deploy[デプロイ]
    Deploy --> Edge[Edge Network 配信]
    Edge --> User[グローバルユーザー]

4 大プラットフォーム概観

GitHub Pages

GitHub リポジトリと統合された静的ホスティングサービス。Jekyll を公式サポートし、GitHub Actions との組み合わせで任意のフレームワークに対応できます。

主な特徴

• 無料枠: 100GB/月 の帯域、10 分のビルド時間上限
• カスタムドメイン: 対応（CNAME レコードで設定）
• HTTPS: Let’s Encrypt 証明書を自動プロビジョニング
• ビルド方法: GitHub Actions 経由で手動設定、または Jekyll 自動ビルド
• プレビュー環境: 別途 Actions ワークフローを組む必要あり

デプロイ設定例（Astro）

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

向いているケース

• 個人ブログ・ポートフォリオ（月間 PV 1 万程度）
• オープンソースプロジェクトのドキュメント
• GitHub エコシステム内で完結させたい場合

注意点

• 帯域超過でサイト停止のリスク
• ビルド時間 10 分制限（大規模サイトは厳しい）
• Edge Functions 非対応（完全に静的のみ）

Cloudflare Pages

Cloudflare の グローバル Edge Network を活用した静的ホスティング + Edge Functions プラットフォーム。330 都市以上のデータセンターで配信され、無制限帯域が最大の強みです。

主な特徴

• 無料枠: 帯域無制限、ビルド回数 500 回/月、同時ビルド 1 個
• Edge Functions: Cloudflare Workers 統合（無料枠 100,000 リクエスト/日）
• カスタムドメイン: 対応、Cloudflare DNS 推奨
• HTTPS: 自動 SSL、Universal SSL 含む
• プレビュー環境: PR ごとに自動生成（無制限）

デプロイ設定例（Next.js）

# Wrangler CLI でデプロイ
npx wrangler pages deploy ./out --project-name=my-site

# または Git 連携で自動デプロイ（推奨）
# Cloudflare ダッシュボードで GitHub リポジトリを接続

Edge Functions 例（A/B テスト）

// functions/api/experiment.ts
export async function onRequest(context: EventContext<Env, any, any>) {
  const variant = Math.random() < 0.5 ? 'A' : 'B';
  return new Response(JSON.stringify({ variant }), {
    headers: {
      'Content-Type': 'application/json',
      'Set-Cookie': `experiment_variant=${variant}; Path=/; HttpOnly; SameSite=Lax`,
    },
  });
}

向いているケース

• グローバル展開する B2C サービス
• 帯域予測が難しいバイラルコンテンツ
• Cloudflare のセキュリティ機能（WAF、DDoS 防御）と統合したい場合

注意点

• ビルド同時実行数 1（無料枠）のため、チームで同時プッシュすると待ちが発生
• Cloudflare Workers の制約（CPU 時間、メモリ）が Edge Functions に影響
• カスタムドメインは Cloudflare DNS に移管すると設定が楽（他 DNS でも可能）

Netlify

開発者体験（DX）に特化したプラットフォーム。強力なプレビュー環境、ビルドプラグイン、フォームハンドリング、A/B テスト機能を統合しています。

主な特徴

• 無料枠: 100GB/月 帯域、300 分/月 ビルド時間、同時ビルド 1 個
• プレビュー環境: PR ごとに自動生成、Deploy Preview
• フォーム: HTML フォームを自動で API 化（月 100 件まで無料）
• Edge Functions: Deno ベース、月 300 万リクエストまで無料
• カスタムドメイン: 対応、自動 HTTPS

デプロイ設定例（Astro）

# netlify.toml
[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[build.environment]
  NODE_VERSION = "20"

Edge Functions 例（認証ヘッダー付与）

// netlify/edge-functions/auth.ts
import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  const token = context.cookies.get("auth_token");
  if (!token) {
    return new Response("Unauthorized", { status: 401 });
  }

  const response = await context.next();
  return response;
};

export const config = { path: "/dashboard/*" };

向いているケース

• チーム開発でプレビュー環境を頻繁に使う場合
• フォーム・認証・A/B テストをプラットフォームレベルで統合したい
• ビルドプラグインで CI/CD を柔軟にカスタマイズしたい

注意点

• 無料枠のビルド時間 300 分/月 は大規模開発では不足しがち
• 帯域 100GB 超過後は従量課金（$0.55/GB）
• Edge Functions は Deno ランタイムのため、Node.js 専用ライブラリに非互換

Vercel

Next.js の開発元が提供するプラットフォーム。Next.js との深い統合と、フロントエンド最適化（ISR、Edge Middleware、Image Optimization）が強みです。

主な特徴

• 無料枠: 100GB/月 帯域、6,000 分/月 ビルド時間、同時ビルド 1 個
• Edge Functions: V8 Isolates、無料枠 100 時間 CPU 時間
• ISR (Incremental Static Regeneration): Next.js 専用、部分的再ビルド
• Image Optimization: 自動 WebP/AVIF 変換、リサイズ（無料枠 1,000 画像/月）
• プレビュー環境: PR ごとに自動生成、コメント連携

デプロイ設定例（Next.js）

// vercel.json
{
  "framework": "nextjs",
  "buildCommand": "next build",
  "devCommand": "next dev",
  "installCommand": "npm install",
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "/api/:path*"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "SAMEORIGIN"
        }
      ]
    }
  ],
  "env": {
    "DATABASE_URL": "@database-url"
  }
}

Edge Middleware 例（リージョンルーティング）

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';
  const url = request.nextUrl.clone();

  if (country === 'JP' && !url.pathname.startsWith('/ja')) {
    url.pathname = `/ja${url.pathname}`;
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/((?!_next|api|favicon.ico).*)',
};

向いているケース

• Next.js アプリケーション（ISR、App Router、Server Actions を使う場合）
• 画像最適化を自動で任せたい
• チーム開発でプレビュー + コメント連携を重視

注意点

• Pro プラン（月 $20）でも帯域上限 1TB
• Image Optimization は従量課金（無料枠 1,000 枚超過後 $5/1,000 枚）
• Next.js 以外のフレームワークでは一部機能が制限される

フレームワーク対応表

価格モデル比較

GitHub Pages

• 無料プラン: 100GB/月 帯域、10 分ビルド時間上限、パブリックリポジトリのみ
• GitHub Pro（月 $4）: プライベートリポジトリでも利用可能
• 従量課金: なし（帯域超過時はサイト停止）

Cloudflare Pages

• 無料プラン: 帯域無制限、500 ビルド/月、同時ビルド 1
• Pro プラン（月 $20）: 同時ビルド 5、5,000 ビルド/月、優先サポート
• 従量課金: ビルド超過時 $0.50/100 ビルド、Workers 実行時間超過時 $0.50/100 万リクエスト

Netlify

• 無料プラン: 100GB/月 帯域、300 分/月 ビルド時間
• Pro プラン（月 $19）: 400GB/月 帯域、25,000 分/月 ビルド時間、同時ビルド 3
• 従量課金: 帯域超過 $0.55/GB、ビルド時間超過 $7/500 分

Vercel

• 無料プラン（Hobby）: 100GB/月 帯域、6,000 分/月 ビルド時間
• Pro プラン（月 $20）: 1TB/月 帯域、100 時間/月 Edge Functions CPU 時間、優先サポート
• 従量課金: 帯域超過 $0.15/GB、Edge Functions 超過 $0.65/100 万リクエスト

価格まとめ表

Edge Network・CDN 比較

OIDC 認証・セキュリティ

GDPR・個人情報保護法対応

GDPR（EU 一般データ保護規則）

• Cloudflare Pages: EU データセンター選択可能、GDPR 準拠宣言あり
• Netlify: DPA（Data Processing Agreement）提供、EU リージョン対応
• Vercel: DPA 提供、EU リージョン選択可能（Enterprise プラン）
• GitHub Pages: Fastly CDN 経由、GitHub のプライバシーポリシーに準拠

日本の個人情報保護法（APPI）

4 プラットフォームとも HTTPS 必須、Cookie 取得時の同意バナーは開発者の責任範囲です。Analytics や Edge Functions で個人情報を扱う場合はプライバシーポリシーの明示と同意取得が必須です。

移行戦略：Vercel → Cloudflare Pages ケーススタディ

Neon は 2024 年に Vercel から Cloudflare Pages へ移行しました（Neon のブログ記事 より）。移行理由は以下の通りです。

移行理由

• 帯域コスト: Vercel の従量課金（$0.15/GB）から Cloudflare の無制限帯域へ
• Edge Functions の柔軟性: Workers の CPU 時間制限が緩い
• グローバル配信: 330+ 都市のエッジノードで TTFB 改善

移行手順

1. Next.js の出力モードを export に変更し、完全静的化
2. Dynamic Routes を Cloudflare Workers で実装
3. DNS を Cloudflare に移管（CNAME フラットニング利用）
4. Vercel の Environment Variables を Cloudflare の Secrets に移行
5. ビルド設定を wrangler.toml に移植

# wrangler.toml
name = "neon-website"
compatibility_date = "2024-01-01"

[build]
command = "npm run build"

[build.upload]
format = "service-worker"

[[routes]]
pattern = "neon.tech/*"
zone_name = "neon.tech"

結果

• 月間コスト 60% 削減（帯域従量課金の削減）
• グローバル TTFB 25% 改善（Edge ノード増加）
• ビルド時間 15% 短縮（Cloudflare のビルド最適化）

どのプラットフォームを選ぶべきか

GitHub Pages を選ぶべき場合

• 個人ブログ・ポートフォリオ（月間 PV 1 万以下）
• オープンソースプロジェクトのドキュメント
• コストを最小化したい（無料で完結）

Cloudflare Pages を選ぶべき場合

• グローバル B2C サービス（帯域予測が難しい）
• 無制限帯域でコスト安定性を確保したい
• Cloudflare のセキュリティ機能（WAF、DDoS 防御）と統合したい

Netlify を選ぶべき場合

• チーム開発でプレビュー環境を頻繁に使う
• フォーム・認証・A/B テストをプラットフォームレベルで統合したい
• ビルドプラグインで CI/CD をカスタマイズしたい

Vercel を選ぶべき場合

• Next.js の App Router、ISR、Server Actions を使う
• 画像最適化を自動で任せたい
• チーム開発で GitHub コメント連携を重視

FAQ

Astro サイトはどのプラットフォームが最適ですか？

帯域予測が難しい場合は Cloudflare Pages、チーム開発でプレビュー環境を重視する場合は Netlify です。個人サイトなら GitHub Pages の無料枠で十分です。

Next.js の SSR は GitHub Pages で動きますか？

いいえ。GitHub Pages は完全静的ホスティングのみです。Next.js の SSR・ISR を使う場合は Vercel、Cloudflare Pages、Netlify を選んでください。

無料枠で商用利用できますか？

GitHub Pages はパブリックリポジトリのみ無料、Cloudflare Pages・Netlify・Vercel は無料枠でも商用利用可能です。ただし各プラットフォームの利用規約を確認してください。

まとめ

• GitHub Pages は個人サイト・OSS ドキュメントに最適、帯域 100GB/月 制限に注意
• Cloudflare Pages は無制限帯域と 330+ エッジノードで大規模サイト向き
• Netlify は強力なプレビュー環境とビルドプラグインでチーム開発に強い
• Vercel は Next.js 専用機能（ISR、Image Optimization）が最大の強み
• 移行事例（Neon）では Vercel → Cloudflare でコスト 60% 削減、TTFB 25% 改善

2026 年現在、フレームワークとプラットフォームの組み合わせで最適解が変わります。Astro・Nuxt・SvelteKit なら Cloudflare Pages、Next.js なら Vercel、チーム開発の DX 重視なら Netlify を第一候補に検討してください。

関連記事：Astro 5の新機能詳説 と Vercel AI SDK 5の実装ガイド も合わせてご参照ください。

参考リソース

• GitHub Pages 公式ドキュメント
• Cloudflare Pages 公式ドキュメント
• Netlify 公式ドキュメント
• Vercel 公式ドキュメント
• Neon の Cloudflare Pages 移行事例
• Cloudflare Network Map
• Web.dev: TTFB 最適化ガイド