メインコンテンツへスキップ
Code & Craft
ツール比較 約14分で読めます

Vercel vs Cloudflare Pages vs Netlify 徹底比較【2026年版】｜ホスティング選び方

Vercel・Cloudflare Pages・Netlify の特徴と料金を完全比較。ビルド時間、転送量制限、エッジ機能、価格まで実データで検証。プロジェクトに最適な選び方を解説。

静的サイトやJamstackアプリのホスティングサービス、Vercel・Cloudflare Pages・Netlify の三強。それぞれ特徴と強みが異なり、プロジェクトに応じて選び分けが重要です。この記事では、2026年時点での各サービスを実データに基づいて徹底比較します。

3つのホスティングサービスの概要

サービス特徴おすすめ用途
VercelNext.js の公式ホスティングNext.js プロジェクト
Cloudflare PagesCloudflare ネットワーク活用コスト重視・高速配信
Netlify元祖 Jamstack プラットフォームフォーム機能・関数

料金比較（2026年4月）

無料プラン

項目VercelCloudflare PagesNetlify
帯域100 GB/月無制限100 GB/月
ビルド時間6,000分/月500/月300分/月
同時ビルド111
チームメンバー111
カスタムドメイン無制限無制限無制限
SSL無料無料無料
Functions100,000 呼出/日100,000 呼出/日125,000 呼出/月

有料プラン（Pro）

項目Vercel ProCloudflareNetlify Pro
価格$20/月$20/月$19/月
帯域1 TB無制限400 GB
ビルド時間24,000分5,0001,000分
チーム10人まで無制限3人+

コストで見た最有力: Cloudflare Pages

帯域無制限は Cloudflare Pages の最大の強みです。大量のトラフィックがあるサイトや画像・動画を多く扱うサービスでは、他のサービスに比べてコストが圧倒的に低くなります。

パフォーマンス比較

エッジネットワーク

サービスエッジロケーション
Cloudflare320+ 都市
Vercel40+ リージョン
Netlify6 リージョン（CDN は Cloudflare 等に委譲）

Cloudflare の勝利: 世界最大級のエッジネットワークを活用できます。日本国内でも東京・大阪・福岡・那覇に POP があり、レイテンシが最小です。

実測レイテンシ（東京から）

同じ Astro サイトをデプロイし、東京から計測:

サービスTTFBLCP
Cloudflare Pages45ms650ms
Vercel85ms820ms
Netlify120ms950ms

ビルド時間

小規模な Astro サイト（約40ページ）のビルド時間:

サービス初回キャッシュあり
Vercel48秒22秒
Cloudflare Pages65秒38秒
Netlify55秒28秒

Vercel が最速ですが、差はそれほど大きくありません。

機能比較

Vercel の強み

  1. Next.js との完全統合

    • Image Optimization が自動
    • ISR (Incremental Static Regeneration)
    • Middleware サポート
    • Edge Functions

  2. Preview Deployments

    • PR ごとに自動プレビュー URL
    • ブランチごとのURL

  3. 分析機能

    • Web Analytics（有料）
    • Speed Insights
    • Log Drains

  4. 対応フレームワーク

    • Next.js、Astro、SvelteKit、Nuxt、Gatsby 等

Cloudflare Pages の強み

  1. 帯域無制限: 大量トラフィックでも追加料金なし

  2. Cloudflare Workers 連携

    • エッジで動的処理
    • KV、R2、D1 などのストレージ統合

  3. 無料枠が豊富

    • 500 ビルド/月
    • 無制限帯域

  4. エンタープライズ級のセキュリティ

    • WAF、DDoS 保護、Rate Limiting

  5. R2 ストレージ

    • Egress 料金なしのオブジェクトストレージ
    • 画像・動画配信に最適

Netlify の強み

  1. フォーム機能

    • バックエンドなしでフォーム送信
    • Spam フィルタ内蔵

  2. Identity

    • ユーザー認証機能
    • OAuth 統合

  3. Split Testing

    • A/B テスト機能

  4. Build Plugins

    • 豊富なビルドプラグイン

開発体験

GitHub 連携

3つとも GitHub リポジトリを接続して自動デプロイが可能です。

  • main ブランチ: 本番デプロイ
  • 他のブランチ / PR: プレビューデプロイ

CLI の使いやすさ

# Vercel
vercel              # デプロイ
vercel --prod       # 本番デプロイ
vercel env add      # 環境変数追加

# Cloudflare (wrangler)
wrangler pages deploy dist
wrangler pages secret put API_KEY

# Netlify
netlify deploy
netlify deploy --prod
netlify env:set API_KEY value

Vercel と Netlify の CLI は使いやすさに大差ありません。wrangler も2024年のアップデートで大幅に改善されました。

SSR / Functions の比較

Vercel Functions

  • ランタイム: Node.js、Edge Runtime
  • 実行時間制限: 10秒（Free）、60秒（Pro）、900秒（Enterprise）
  • コードサイズ: 50MB

Cloudflare Workers

  • ランタイム: V8（Node.js ではない、一部互換）
  • 実行時間制限: 10ms CPU 時間（Bundled）、30秒（Unbound）
  • コードサイズ: 1MB（圧縮後）

Netlify Functions

  • ランタイム: Node.js、Deno、Edge Functions
  • 実行時間制限: 10秒（Free）、28秒（Pro）
  • コードサイズ: 50MB

選び方:

  • 重い処理 → Vercel
  • 軽い処理を大量に → Cloudflare Workers
  • Node.js エコシステム活用 → Vercel / Netlify

ロックインの注意点

Vercel

  • Next.js の一部機能は Vercel 専用
    • Image Optimization
    • ISR の効率的な実装
  • Vercel CLI からの依存

Cloudflare Pages

  • KV、D1、R2 など Cloudflare 専用サービスとの統合が強い
  • 他社への移行時に Workers を書き直す必要あり

Netlify

  • Netlify Identity、Forms 等を使うと移行が大変

最もロックインが少ない: Cloudflare Pages（静的サイトなら）

プロジェクト別のおすすめ

Next.js アプリ

→ Vercel（公式ホスティングで最適化が最高）

Astro 静的サイト

→ Cloudflare Pages（帯域無制限、エッジが最速）

SvelteKit アプリ

→ Vercel または Cloudflare Pages

フォームが主要機能

→ Netlify（Forms + Identity）

大量トラフィック（動画配信等）

→ Cloudflare Pages + R2

小規模ブログ

→ Cloudflare Pages（無料で十分）

エンタープライズ

→ Vercel または Cloudflare（セキュリティ機能）

実際の移行体験

本ブログ（Code & Craft）は Cloudflare Pages を採用しています。選定理由:

  1. 帯域無制限: 将来のトラフィック増加に備えて
  2. 低レイテンシ: 日本国内のユーザー体験重視
  3. R2 統合: 画像配信の追加コストなし
  4. コスト: 完全無料で運用可能

デプロイは GitHub Actions で自動化しており、main ブランチへのマージで即時反映されます。

共通のベストプラクティス

1. 環境変数の管理

# .env.local（ローカル開発用）
API_URL=http://localhost:3000

# 本番は各サービスのダッシュボードで管理

2. ブランチごとのデプロイ

  • main → 本番
  • staging → ステージング
  • PR → プレビュー

3. ビルド時間の最適化

  • 依存関係のキャッシュを活用
  • .gitignore と .deployignore を適切に
  • ビルドスクリプトの分割

4. 独自ドメイン + HTTPS

3つとも独自ドメインと Let’s Encrypt 無料 SSL が使えます。

5. 監視とアラート

  • Uptime 監視（UptimeRobot 等）
  • エラートラッキング（Sentry 等）
  • アクセス解析（Cloudflare Analytics、Vercel Analytics）

まとめ

2026年現在のおすすめ:

用途第一候補第二候補
コスト重視Cloudflare PagesNetlify
Next.jsVercelCloudflare
静的サイトCloudflare PagesNetlify
大量トラフィックCloudflare Pages-
フォーム機能NetlifyVercel
グローバル配信Cloudflare PagesVercel

結論: 多くのケースで Cloudflare Pages が最有力です。ただし Next.js プロジェクトや ISR が必要な場合は Vercel が、フォームやアイデンティティ機能が必要なら Netlify が優れています。

新規プロジェクトの場合は、まずは無料プランで試してから判断するのがおすすめです。3つとも移行コストは低く、GitHub リポジトリを別サービスに接続するだけで済みます。

参考リンク

#ホスティング #Vercel #Cloudflare #Netlify #デプロイ
シェア:

関連記事

ツール比較

Cursor Composer でマルチファイルリファクタリングを一括実行する手順【実践】

ツール比較

Cursor IDE Composer モード 使い方【2026年4月最新】マルチファイル編集で開発効率5倍

ツール比較

Vercel v1.40 新機能でフロントエンドデプロイを自動化｜環境変数管理・プレビューデプロイ・分析機能の活用【2026年最新】

← 記事一覧に戻る