Vercel と Cloudflare Pages、結局どっち?個人開発者向け徹底比較
公開: / 著者: StackComp 編集部
JAMstack/フロントエンドのデプロイ先として、最初に名前が上がる2社が Vercel と Cloudflare Pages です。 どちらも「git push したら即デプロイ」「無料枠あり」「グローバルCDN」と謳っていますが、 実際に運用するとコスト・商用利用ルール・機能の重点が大きく違います。本記事では4軸で比較します。
結論を先に
- 商用サイト・収益化サイト → Cloudflare Pages(無料枠でも商用OK、帯域無制限)
- Next.js を完全な形で使いたい → Vercel Pro($20/月〜、Next.js の機能を最大限引き出せる)
- 個人の非商用ポートフォリオ → Vercel Hobby(完全無料、Next.js最適)
1. 料金の比較
無料枠の違い
| 項目 | Vercel Hobby | Cloudflare Pages 無料 |
|---|---|---|
| 月額 | $0 | $0 |
| 転送量 | 100GB | 無制限 |
| ビルド時間 | 6,000分/月 | 500ビルド/月 |
| Functions呼び出し | 100万回/月 | 10万回/日(Workers) |
| 同時接続シート | 1人(個人専用) | 無制限 |
| 商用利用 | 不可 | OK |
Vercel の Hobby プラン規約には Hobby is for personal, non-commercial usage
と明記されており、収益化しているサイト(アフィリエイト・AdSense等)で使うと TOS 違反です。
気づかずに違反していると、ある日アカウント停止される可能性があります。詳細は
Vercel Hobby は商用利用NG の罠 にまとめました。
有料プランの違い
Vercel Pro は $20/seat/月(シートごとに加算)、Cloudflare Pages Pro は $20/月(シート数無制限)。3人チームなら Vercel は $60、Cloudflare は $20 で、 同じ価格でできること がまるで違います。
実際の月額シミュレーションは クラウドホスティング月額シミュレーター で計算できます。月100GB の帯域・ビルド時間500分・チーム3人で試してみてください。
2. 速度・パフォーマンス
Cloudflare は世界 300+ 都市に Edge Network を持ち、レイテンシ・スループットでは Vercel(Vercel Edge Network)を上回ることが多いです。日本のユーザーに配信する場合、 Cloudflare は東京エッジから直接配信されるのに対し、Vercel は近隣リージョンから配信されるケースがあります。
ただし SSR・Functions のコールドスタート は Vercel Edge Functions のほうが洗練されており、 Next.js の Server Components や ISR を活用する場合は Vercel に軍配が上がります。
3. 開発者体験(DX)
Vercel の DX は業界最高峰です。プレビューデプロイ、ログ閲覧、環境変数管理、 プレビュー URL での Comments 機能など、Next.js 開発者にとっては「触ってて気持ちいい」プラットフォームです。
Cloudflare Pages も同等のプレビューデプロイ機能を持ちますが、ダッシュボード UI は Cloudflare 全体のツールに統合されているため、初見では分かりにくい部分があります。 一方で、Cloudflare Workers / KV / R2 / D1 と直接連携できるのは大きな利点で、 フルスタックを Cloudflare で完結したいなら強力です。
4. SSR / Functions の仕組み
Vercel は Next.js を発明した会社で、SSR・ISR・RSC・Edge Functions が完全にネイティブ統合されています。 Cloudflare Pages では同等の機能を Pages Functions または Workers で実現しますが、Next.js のフル機能(特に Image Optimization や Middleware)は Vercel ほどスムーズではありません。
SSR を多用する Next.js アプリ → Vercel。
静的サイト + API 数本程度 → Cloudflare Pages で十分。
5. ユースケース別の推奨
個人ブログ・ポートフォリオ(非商用)
Vercel Hobby。完全無料、Next.js の機能をフルに使える。Hobby は商用利用不可ですが、ブログがアフィリエイトリンクを貼っていなければ OK です。
収益化しているブログ・アフィサイト
Cloudflare Pages。無料枠で商用OK、帯域無制限なので、PV が伸びても請求が爆発しない。本サイト StackComp も Cloudflare Pages で動いています。
SaaS の MVP・LP
Next.js を本気で使うなら Vercel Pro。動的機能が薄く Static+API 中心なら Cloudflare Pages Pro。
チーム開発(3人以上)
Cloudflare Pages の方が圧倒的に安い。シート数で課金されないのが効きます。
まとめ
どちらも優秀ですが、個人開発者が長く付き合うなら Cloudflare Pages のコスト構造のほうが事故が少ないです。 特に「PVが伸びて急に請求が来た」という事故は Vercel の方が起きやすい(帯域従量で )。 一方で Next.js を最大限活かしたいプロジェクトは Vercel 一択です。
実際の料金感を体感するには 月額シミュレーター で自分のアプリの数値を入れて比較してみてください。