AIに「お店のホームページを作って」と頼んだら、「静的サイト」「動的サイト」「Cloudflare」「Vercel」という言葉が出てきた。どれを選べばいいのか、迷いますよね。
まず、静的・動的は「ページや機能の作り方」、Cloudflare・Vercelは「公開と運用を支えるサービス」と分けて考えましょう。
| 比べていること | 選択肢 |
|---|---|
| ページをいつ用意し、どこで処理する？ | 静的・動的・その組み合わせ |
| どのサービスで公開・運用する？ | Cloudflare・Vercelなど |
「静的とVercel、どちらにする？」と並べると、料理の作り方とお店を同時に選んでいるような状態になります。2つの軸を整理すると、選びやすくなります。
1. 静的サイトは「先に用意した案内を渡す」
お店の営業時間やアクセスを載せた案内カードを想像してください。あらかじめ作っておけば、来た人にすぐ渡せます。
静的サイトも似ています。HTMLや画像などのファイルを先に用意し、アクセスした人へ届けます。HTMLは、ページの文章や構造を記したファイルです。直接書く場合もあれば、記事データからページをまとめて生成する場合もあります。この生成作業を「ビルド」と呼びます。
会社紹介、商品紹介、ブログ記事など、同じ内容を多くの人に届けるページで使いやすい方法です。表示のたびにサーバーで本文を組み立てる処理を減らせます。ただし、実際の表示速度は画像の重さなどにも左右されます。Next.js公式：Static Site Generation
「静的」でも更新できるし、画面も動く
営業時間が変われば、内容を直して再公開できます。CMSという記事管理の仕組みで文章を編集し、ページを作り直す運用もできます。
メニューを開く、写真を切り替える、入力した金額を計算する。こうした操作は、ブラウザ側のJavaScriptでも実現できます。アニメーションがあるかどうかで、静的・動的を判断するわけではありません。
2. 動的サイトは「注文に応じて処理する」
飲食店で注文を受けてから、内容に合わせて料理を用意する。こちらが動的な処理のイメージです。
サイトでは、アクセスや入力に応じてサーバーが処理し、ページやデータを返します。サーバーとは、ネットワーク越しに情報や処理結果を提供する側のコンピューターです。たとえば、「この日の予約枠は空いている？」「ログインした自分の注文はどうなっている？」という問い合わせに応えます。Vercel公式：Functions
予約状況、会員ページ、注文処理など、その時点のデータや利用者に応じた結果を扱う部分で役立ちます。その分、データの保存、ログインの管理、入力の確認なども設計する必要があります。
なお、動的でも処理結果を一時保存して再利用できます。これを「キャッシュ」と呼びます。毎回すべてをゼロから作るとは限りません。Vercel公式：CDN Cache
3. お店のサイトなら、組み合わせて作れる
袋井のお店のサイトを例にしてみましょう。
- お店の紹介・アクセス：同じ案内を届けたいので、静的なページを先に用意する。
- 写真の切り替え・料金計算：見ている人のブラウザで動かす。
- 空き状況・予約の確定：他の予約と照合する必要があるので、サーバーで処理する。
静的なページを表示した後に、ブラウザからサーバーへ空き状況を問い合わせることもできます。そのやり取りの窓口が「API」です。画面の土台が静的でも、予約機能には動的な処理を使えます。Next.js公式：Client-side Rendering
このように静的な配信と動的な処理を組み合わせる構成を、ハイブリッドと呼びます。サイト全体を一方の種類に決める必要はありません。Next.js公式：Rendering
4. CloudflareとVercelは、公開・運用のサービス
ここからは、サイトをどこで公開し、どう運用するかの話です。CloudflareもVercelも、静的な配信と動的な処理の両方に対応しています。
| 見るポイント | Cloudflare | Vercel |
|---|---|---|
| 特徴を理解する入口 | 配信・ネットワーク・保護から考える | アプリの開発・ビルド・公開から考える |
| 静的な配信 | Workers Static Assets、Pages | 静的ファイルや事前生成したページを配信 |
| 動的な処理 | Workers、Pages Functions | Vercel Functions |
| 開発とのつながり | WorkersでAPIやアプリを構築。各種フレームワークにも対応 | Next.jsなどとの連携、変更ごとのプレビュー |
Cloudflare：配信と保護から全体を考える
Cloudflareは世界各地のネットワークを使った配信やCDN、サイト・APIを保護するWAFなどを提供しています。CDNはコンテンツを複数の場所から届ける仕組み、WAFはWebへの通信をルールに基づいて検査する仕組みです。Cloudflare公式：Cache / CDN、WAF
さらにWorkersでは、サーバー側のコードを実行できます。Static Assetsと組み合わせれば、ページの配信とAPIの処理を一緒に扱えます。Cloudflare公式：Static Assets
2026年10月時点で、Cloudflare公式は新規プロジェクトにWorkersを推奨しています。Pagesも提供されており、Pages Functionsでサーバー側の処理を追加できます。新しく作るときは、Cloudflare内でも使う製品と対応範囲を確認しましょう。Cloudflare公式：Pages、Pages Functions
Vercel：開発から公開までの流れを考える
Vercelは、コードをビルドして公開し、変更をプレビューで確認する流れや、Next.jsなどのフレームワークとの連携が理解しやすい入口です。フレームワークは、アプリを作るための共通の仕組みや道具のセットです。Vercel公式：Frameworks
対応するフレームワークと連携して、事前生成したページやサーバーで生成するページを扱えます。Vercel FunctionsでAPIなどの処理も実行できます。Vercel公式：Functions
VercelにもCDNやセキュリティ機能があります。上の表は両社の特徴を理解するための入口で、機能が片方にしかないという分類ではありません。Vercel公式：CDN、Security
5. 選ぶ順番は「何をしたいか」から
初心者の方は、サービス名を先に決めるより、必要な機能を順に整理してみてください。
- 何を載せる？ お店の紹介やブログが中心なら、静的な配信を土台にできます。
- 何を処理する？ 予約・会員・注文が必要なら、動的な処理とデータ保存が必要な部分を決めます。
- 誰が更新する？ 自分でファイルを直すのか、管理画面で編集したいのかを決めます。
- どこで運用する？ 作成に使った仕組みとの相性、料金・制限、商用利用の条件、管理のしやすさを比べます。
Next.jsで作ったアプリなら、その機能が公開先でどう動くかを確認します。すでにドメインや配信の設定を運用しているなら、そこへつなぎやすいことも判断材料です。
料金や制限は、プラン・機能・利用量で変わります。無料枠の有無だけで決めず、必要な処理や利用条件まで確認しましょう。
まずは、お店の案内と予約を分けて考えよう
静的は、先に用意したものを届ける。
動的は、アクセスや入力に応じて処理する。
CloudflareとVercelは、それを公開・運用するサービス。どちらも静的・動的に対応します。
「お店の案内は先に用意。予約だけ、その時に処理する」。このくらい身近な言葉で必要なものを整理してから、公開先を選ぶと迷いにくくなります。
一次出典・確認先
以下は2026年10月2日に確認した公式資料です。製品の機能や条件は更新されます。