本文へ移動
つくれる外部CAIO
HOME / INSIGHT
JPW / Insights & activities

AIでWebサイトを作るならVercel?Cloudflare?その前に決めるべき2つの分岐【2026年版】

AIで作ったWebサイトのホスティングとデータベースを選ぶ3方向の分岐図

AIにコードを書かせれば、Webサイトは短時間で形になります。問題はその次です。

作ったものを、どこに置くか。

調べ始めると、だいたい「VercelかCloudflareか」という比較記事にたどり着きます。ただ、この比較を始める前に、実は判断すべき分岐が2つあります。そこを飛ばして比較に入ると、必要のない選択で悩み、後から運用で苦労します。

この記事では、その2つの分岐から順に整理します。記載内容は2026年9月時点の各社公式資料を基準にしています。

まず、よくある誤解から

「Cloudflareを使っている人は、Vercelを使っていない」

半分正しく、半分間違いです。原因は、Cloudflareに2つの役割があることを見落としている点にあります。

役割1:サイトの「前に置く層」

DNS、CDN、WAF。既にあるサイトの前に立って、配信を速くしたり攻撃を防いだりする役割です。この使い方なら、Vercelとは必ずしも競合しません。レイヤーが違います。

役割2:ホスティングそのもの

Cloudflare Workersは、静的ファイルだけでなくAPIやSSRを含むサイト・アプリの実体をCloudflare上で動かせます。こちらはVercelの比較対象になります。Cloudflareは現在、新規のフルスタック構成をWorkers中心に案内し、PagesからWorkersへの移行手順も公開しています(Cloudflare公式:Migrate from Pages to Workers)。

この記事で比べるのは、主にこの「ホスティングとしてのVercelとCloudflare」です。


分岐1:サーバー側の処理が必要か

VercelとCloudflareの比較が難しくなる最大の理由は、最初からNext.jsを使う前提で語られやすいことです。

Next.jsはVercelが開発を主導しているフレームワークで、Vercel上では標準構成のまま動かしやすいのが強みです。Cloudflare WorkersでもNext.js系のアプリを動かせますが、2026年9月時点ではCloudflareが推奨するvinextはベータで、既存のOpenNext構成にもアダプター固有の確認が必要です(Cloudflare公式:Next.js on Workers)。

ただし、多くのWebサイトは、そもそもNext.jsやサーバー側の動的処理を必要としていません。

判断軸

閲覧者や、その時点のデータによって、サーバーが返す内容を変える必要があるか。

ログインの有無は分かりやすい目安ですが、それだけではありません。決済、外部API、非公開のAPIキー、リアルタイムな在庫や価格なども判断材料です。

サーバー側の処理が必要になりやすいケース

  • 会員サイト、管理画面、SaaSなど、利用者ごとに内容が変わる
  • 決済、AI連携、外部データベースなど、秘密情報をブラウザに出せない
  • 在庫や価格など、頻繁に変わる情報を検索エンジンにも適切に見せたい
  • APIやサーバー処理を含む機能そのものがサービスの中心

静的な構成で足りるケース

  • コーポレートサイト
  • ランディングページ
  • 更新頻度が低いサービス紹介サイト
  • 静的生成できる記事メディア
  • すでにWordPressで無理なく運用できているサイト

社内で「アプリ」と呼ばれているか、「サイト」と呼ばれているかは便利なヒントです。ただし、名前ではなく必要な機能で決めてください。

ここを間違えると何が起きるか

コーポレートサイトを必要以上に複雑な構成で作ると、更新のたびにコードを扱える人が必要になります。

WordPressなら管理画面から文章を直せたのに、コード中心のサイトでは「お知らせを1本追加する」ためにビルドやデプロイが発生することがあります。AIで作る段階は速くても、運用する期間のほうが圧倒的に長いことを忘れないでください。

サーバー側の処理が要らないなら、比較はほぼ終わり

静的なサイトを置くだけなら、Vercel Proを選ぶ必然性は小さくなります。Cloudflare Workersの静的アセット配信は、静的ファイルへのリクエストが無料かつ無制限と案内されています(Cloudflare公式:Static Assetsの料金と制限)。

したがって、AIで新規に作るコーポレートサイトやLPをVercelとCloudflareの二択で考えるなら、Cloudflareは有力な第一候補です。ただし、すでにWordPressで安定運用できているサイトを、AIで作り直せるという理由だけで移行する必要はありません。


分岐2:開発時間と運用自由度のどちらを優先するか

サーバー側の処理やNext.jsが必要な場合に、初めてVercelとCloudflare Workersの比較が始まります。

できることの比較

VercelCloudflare Workers
静的サイトの配信◯◯
API・SSRなどのサーバー処理◯◯
Git連携による自動デプロイ◯◯
DNS・WAF・CDNの一元管理別サービスと組み合わせ◯
企業利用できる無料枠Hobbyは不可Freeプランあり(上限あり)
Next.js標準構成との相性◎◯(互換性確認が必要)

差が出るのは、実質2点

1つ目は、無料枠の利用条件です。

VercelのHobbyプランは、個人かつ非商用の利用に限定されています。企業サイトや有償業務で作ったサイトは、ProまたはEnterpriseが必要です(Vercel公式:Fair Use Guidelines)。

2026年9月時点のVercel Proは、月20ドルのプラットフォーム料金に、デプロイ可能な1席と月20ドル分の利用クレジットを含みます。追加のOwner/Member席は1席あたり月20ドルで、超過利用は別途課金されます(Vercel公式:Pro Plan)。

Cloudflare WorkersにはFreeプランがあり、静的アセット配信と動的なWorker処理で料金の考え方が分かれます。静的アセットは無料でも、Workerコード、D1、R2などには個別の上限や料金体系があります。

2つ目は、詰まったときの解決しやすさです。

Next.jsの標準的な機能を短時間で動かしたいなら、Vercelのほうが説明しやすく、検証項目も少なくなります。Cloudflare Workersでは多くの機能を実現できますが、vinextの互換性やランタイム差分、キャッシュ構成を確認する工程が増えます。

コスト面の注意

Vercel Proは基本料金だけで終わるとは限らず、利用量に応じた課金があります。導入時にSpend Managementの通知と自動アクションを設定し、請求が増えたときの挙動を決めておくべきです。

一方、Cloudflareも「無料だから無制限」ではありません。Worker処理はFreeプランの上限を超えるとエラーになり得るため、静的配信と動的処理を分けて見積もります(Cloudflare公式:Workers Pricing)。


データベースは、ホスティングとは別に選ぶ

「VercelならSupabase、CloudflareならD1」と整理されることがありますが、組み合わせは固定されていません。Cloudflare WorkersからSupabaseを使うこともできます。ホスティングとデータベースは別々に選ぶものです。

SupabaseとD1は、製品の粒度が違う

SupabaseCloudflare D1
データベースPostgreSQLSQLite互換のサーバーレスSQL
認証Supabase Authを提供別途設計する
ファイル保管Storageを提供R2などを組み合わせる
リアルタイム更新Realtimeを提供要件に合わせて別途構成
主な強みバックエンド機能をまとめて選べるWorkersとの統合と運用の一元化

SupabaseはPostgresを中心に、Auth、Storage、Realtime、Edge Functionsなどを組み合わせられるバックエンド基盤です(Supabase公式:Database Overview)。D1は、SQLite互換のSQLを使えるCloudflareのマネージドデータベースです(Cloudflare公式:D1 Overview)。

実務上、どちらを選ぶか

認証を含むバックエンド一式が必要なら、Supabaseが分かりやすい。

会員登録、パスワード再設定、外部アカウント連携、メール確認は、自前で作ると時間がかかり、セキュリティ事故にもつながりやすい領域です。本人にしか見せられないデータを扱うなら、認証と権限設計まで含めて比較してください。

D1は、Workersと同じ運用基盤にまとめやすい。

Workerからバインディングで利用でき、請求や管理画面をCloudflareに寄せられます。ただし「アプリとデータベースが常に同じ場所で動くので遅延がほぼない」とは限りません。Cloudflare自身も、WorkerとD1の配置が性能に影響し得ると説明しています。

AIにコードを書かせる場合は、利用者・公式サンプル・ライブラリの多さも実務上の判断材料になります。ただし、情報量だけで決めず、認証、データモデル、バックアップ、移行性まで含めて選びます。

判断の目安

  • 認証・Storage・Realtimeまでまとめたい → Supabaseを有力候補にする
  • Workers中心で、比較的シンプルなSQLデータを扱う → D1を検討する
  • すでにどちらかで本番運用している → 明確な効果がない限り移行しない

「AIが調整してくれるなら、Cloudflareでいいのでは?」

AIの能力が上がれば、Cloudflare Workers上でアプリを動かすための作業は確かに減ります。ただし、AIによる効率化はVercel側にも同じように効きます。

AIによって技術的な障壁が下がった結果、判断の主役が「技術」から「開発時間と運用コスト」に移った。

月20ドルの基本料金を、環境差分の調査時間を減らす費用として妥当だと考えるならVercel。互換性を検証でき、Cloudflareへ運用をまとめたいならWorkers。単純な優劣ではなく、誰が保守するかで答えが変わります。

AIの守備範囲には境界がある

AIが得意なのは、コードを書くことです。苦手なのは、環境固有で再現しにくい挙動です。

  • ローカルでは動くのに、本番環境でだけ動かない
  • ビルドは成功するのに、特定のページだけ表示されない
  • 利用中のライブラリやNext.js機能が、対象ランタイムでは完全対応していない

この種の問題は、エラーが原因と別の場所に出ることがあります。AIが埋めやすいのは平常時の差であり、障害時の切り分けまで消えるわけではありません。


判断フロー

ログインした人ごとに違う画面を出すか?
 │
 ├─ No → Cloudflare
 │       (比較は不要。ここで終わり)
 │
 └─ Yes → Next.jsが必要
     │
     ├─ ホスティングを選ぶ
     │   ├─ 自力でトラブルを解決する体制がある
     │   │   → Cloudflare(コスト優位)
     │   └─ 詰まる時間を金額で回避したい
     │       → Vercel(有料プラン)
     │
     └─ データベースを選ぶ(ホスティングとは別に)
         ├─ ログイン機能が要る → Supabase
         └─ 読み書きのみ → D1で十分

まとめ

  • Cloudflareには「前に置く層」と「ホスティング」の2つの顔がある。Vercelと競合するのは後者だけ
  • 多くのサイトは、そもそもNext.jsを必要としない
  • Next.jsが不要なら、比較する必要もない。Cloudflareで完結する
  • Next.jsが必要な場合のみ、コストと解決力のトレードオフで判断する
  • データベースはホスティングとセットではない。組み合わせは自由に決められる

「VercelかCloudflareか」は、実は最後に来る問いです。

先に決めるべきは、自分が作ろうとしているのが「アプリ」なのか「サイト」なのか。ここさえ間違えなければ、後の判断は自動的に決まります。

関連記事

Your next step

その仕事、もっと良くできるかも。

AIで変えたい業務を、ひとつ教えてください。
初回30分のオンライン相談で、一緒に整理します。

自社のAI活用を相談する ↗