Netlify vs Vercel 2026 ── Claude Codeアプリのデプロイはどっちが正解？フリーランスエンジニアが費用・速度・体験で比較
NeflifyとVercelの違いをフリーランスエンジニア視点で比較。Claude Codeプロジェクトのデプロイに最適なプラットフォームを、料金・CLI・Preview機能・Next.js最適化の4軸で判断する完全ガイド。
エンジニアのゆとです。
Claude Code でサイドプロジェクトを量産するようになってから、「デプロイ先どうするか」という問いに毎回直面する。
AstroでPoCを作る、Next.jsでダッシュボードを作る、静的HTMLにAPIをくっつけたものを納品する——作るものがバラけていると、自然と「VercelかNetlifyか」を毎回考えることになる。
ネットの比較記事を読んでも「どっちも一長一短ですね」で終わるものが多い。そうじゃなくて、フリーランスが商用プロジェクトを持ち込んだとき、Claude Codeで作ったアプリをデプロイするとき、チームを増やしていくとき——そういう具体的な文脈での判断軸が欲しかった。
なので自分で書く。
Netlify と Vercel——何が違うのか
結論からいうと「ほぼ同じ。選ぶ理由は細部にある」
2026年時点で言うと、VercelとNetlifyの主要機能は8割方重なっている。
グローバルCDN、Gitリポジトリとの連携による自動デプロイ、PRごとのプレビューURL（Deploy Preview）、サーバーレス関数、環境変数管理——どちらも一通り揃っている。「どっちが速い」「どっちが安定している」という比較をしたい気持ちはわかるが、個人開発・フリーランス案件の規模感では体感できる差は正直あまりない。
差が出るのは「料金体系」「特定フレームワークとの相性」「チームサイズへの対応」の3点だ。
フレームワーク対応・機能比較（2026年版）
| 項目 | Netlify | Vercel |
|---|---|---|
| 無料プランの商用利用 | ○ | × (Hobby = 個人・趣味のみ) |
| Proプラン料金 | $20/月（人数問わず） | $20/人/月 |
| Next.js最適化 | 標準対応 | 公式最適化（自社製品） |
| Astro / Hugo / 静的サイト | 優秀 | 標準対応 |
| Deploy Preview | PR連携で自動生成 | PR連携で自動生成 |
| Claude Code公式連携 | netlify.ai / MCP対応 | Vercel CLIで対応 |
| Edge Functions | ○ | ○ |
| 組み込みPostgres | ○ | ○ |
| フォーム機能 | ○（組み込み） | × |
大きいのは「商用利用の可否」と「Proの料金体系」だ。この2点は後で詳しく書く。
料金: フリーランスが実際にかかるコスト
Freeプランで何ができるか（2026年版）
Netlifyは2026年4月に料金体系を「クレジット制」に全面移行した。
Netlify Free: 300クレジット/月
クレジットの消費レートはこうなっている。
- プロダクションデプロイ: 15クレジット/回（月20回まで目安）
- 帯域幅: 20クレジット/GB（月15GBまで目安）
- Webリクエスト: 2クレジット/1万件
- Functions タイムアウト: 10秒
300クレジットがハードリミットで、超えたらその月の残り期間はサイトが一時停止する。超過分をまとめて翌月に持ち越すような仕組みはない。あと、Netlifyの無料プランは商用利用が可能というのが地味に大きい。
Vercel Hobby（無料）
- 帯域幅: 100GB/月
- Function呼び出し: 月100万回
- 商用利用: × （規約でPersonal/Hobbyプロジェクト限定と明記）
Vercelの利用規約を確認すると、Hobbyプランは商用プロジェクトに使えないと書かれている。フリーランスとして「クライアントのサイトをVercel無料プランで動かす」という使い方は規約違反になる。この点はちゃんと意識しておく必要がある。
Pro以上が必要になるケース
Netlify Proは**$20/月・メンバー人数無制限**（2026年4月〜のクレジット制移行に伴う変更）。
以前はシート制だったものがフラット課金になった。個人開発者やフリーランスにとっては素直にうれしい変更で、3,000クレジット/月、プライベートリポジトリ対応、30日間のアナリティクスが含まれる。
Vercel Proは**$20/人/月 + 従量課金**。ソロで使う分には同じだが、2人が触る案件は$40、3人は$60と上がっていく。クライアントのアカウントに招待してもらう形の案件だとシート数が問題になってくる。
5人チームの場合: Netlify Pro = $20、Vercel Pro = $100。この差は大きい。
Claude Codeアプリのトラフィック量と費用感
Claude Codeで作ったアプリがどのくらいのトラフィックになるかはプロジェクト次第だが、個人開発・フリーランス案件のリアルな規模感でいうと——月間PVが1万〜3万程度の小〜中規模サイトであれば、どちらのプラットフォームも無料〜$20/月の範囲に収まることが多い。
ひとつ注意が必要なのは「Functions のタイムアウト」だ。
Claude Code系のアプリでAPIプロキシ層を持っている場合、Netlifyの無料プランはFunctionのタイムアウトが10秒という制約がある。AIのストリーミングレスポンスを受け取る構成では詰まりやすい。その場合はPersonalプラン（$9/月）以上にする必要がある。
Claude CodeプロジェクトにNetlifyを使った実体験
netlify-cli × claude codeのワークフロー
NetlifyにはClaude Code向けの公式統合がある。
netlify.ai にClaude Codeを向けると、自然言語でサイトの作成・設定・デプロイができる。Netlify MCP サーバー経由でClaude Desktopに繋ぐ方法もある。MCPを使うと「環境変数 MY_API_KEY を作成して hello_world に設定して」という指示をClaude Desktopから直接実行できる。
CLIベースのワークフローだとこうなる。
# インストール
npm i -g netlify-cli
# 認証
netlify login
# プロジェクト初期化・Netlifyとの紐付け
netlify init
# プレビューデプロイ（確認用）
netlify deploy
# 本番デプロイ
netlify deploy --prodnetlify init を実行すると既存プロジェクトとの紐付けか新規作成かを聞いてくる。package.jsonからフレームワークを検出してビルドコマンドを提案してくれるので、Astroなら npm run build と dist/ を自動認識する。
CLAUDE.mdにこう書いておくと、Claude Codeがデプロイまわりを自律的にこなしてくれる。
## Deploy
- Preview確認: netlify deploy
- 本番反映: netlify deploy --prod（必ず確認を取ること）
- ビルドコマンド: npm run build
- 出力ディレクトリ: dist/プレビューURL自動生成 → PR連携が最高
Netlifyで特に気に入っているのが「Deploy Previews」の使い心地だ。
GitHubのPRを出すたびに https://deploy-preview-{番号}--{サイト名}.netlify.app というURLが自動で発行される。PRのコメント欄に自動でURLが投稿されるので、クライアントへの確認依頼もこのURLを送るだけでいい。本番を壊すリスクゼロで「こういう変更です」を見せられる。
Vercelも同様の機能はあるが、NetlifyはPRコメントへの自動投稿やSlack連携の完成度が高い印象がある。フリーランスとして複数クライアントを抱えながら動かしているとき、「このURLが今日のデプロイ確認用です」という一言でフィードバックをもらえる体験は地味に大事だと思っている。
ハマったこと（ビルドキャッシュ・環境変数）
正直に書いておく。
ビルドキャッシュの問題
Netlifyはデフォルトでnodeモジュールをキャッシュするが、依存関係の更新がキャッシュに残って古いモジュールが使われることがある。ビルドが通らないとき、まず netlify build --skip-functions-cache を試す。
環境変数のスコープ設定
Netlifyの環境変数は「Production」「Preview」「Branch Deploy」の3スコープに分かれている。全環境に同じ値を使いたいなら3つ全部にチェックが必要で、Productionだけ設定してPreview環境で動かなくてはまる。最初に気づかなくて30分溶かした。
Vercelの強みとClaudeとの相性
claude-code-vercel-deploy-automationとの比較
Vercel × Claude Code の連携については以前詳しく書いた。
VercelはCLI操作のシンプルさとGitHubとの連携の堅牢さが光る。vercel deploy 一発でプレビューURLが返ってくる体験は洗練されている。プロジェクトの初期設定もほぼ質問に答えるだけで完了する。
Edge FunctionsとNext.js最適化の恩恵
VercelはNext.jsを作っている会社なので、App Router・Server Components・Streaming SSRをいちばん深いレイヤーで最適化している。
特にEdge Runtimeを使うパターンや、React Server Componentsのキャッシュ戦略まわりはVercel上でないと挙動が変わることがある。Claude Codeで作ったアプリがNext.jsベースで、SSRやEdge Functionを積極的に使う場合——その場合に限って言えば、Vercelを選ぶ理由は明確だ。
どっちを選ぶべきか：判断フレームワーク
Next.js / Nuxt / SvelteKit → Vercel有利
フレームワーク起点で整理するとこうなる。
- Next.js: Vercelが自社製品として最適化しているため、App RouterのSSR/ISR/Edge Functionを最大限活かすならVercel
- Nuxt: Vercel公式サポートあり、Netlifyも問題なく動く
- SvelteKit: どちらも対応、体験はVercelがやや上という印象
Claude Codeで「Next.jsで作ってください」とやるなら迷わずVercelでいい。
それ以外（Astro / Hugo / 静的サイト）→ Netlify有利
- Astro: NetlifyはAstroの公式パートナー。AstroのContent CollectionsやSSRアダプターのサポートが厚い
- Hugo / Jekyll / 11ty: Netlifyは静的サイトジェネレーターのデプロイ実績が長い
- シンプルなSPA・静的ページ: Netlifyのフォーム機能やIdentity（認証）が内蔵されているので、バックエンドを別で立てなくて済むケースが多い
チームサイズ・プロジェクト規模で変わるポイント
| 状況 | 推奨 | 理由 |
|---|---|---|
| 個人・ソロフリーランス（商用あり） | Netlify | 無料プランで商用OK、Pro$20フラット |
| チーム2人以上の案件 | Netlify | $20フラット vs Vercel $40〜（人数分） |
| Next.js App Router・SSR多用 | Vercel | 公式最適化の恩恵が出る |
| 複数クライアント案件を1アカウントで | Netlify | プロジェクト管理UIが使いやすい |
| 個人趣味・OSS（商用なし） | Vercel | Hobbyプランのスペックが高い |
| Functionsのタイムアウトが10秒超 | Vercel or Netlify Personal以上 | 無料プランの10秒制限を超える場合 |
結論とゆとの選択
僕のプロジェクトを振り返ると、Claude Codeで作るものの半分くらいはNext.jsじゃない。AstroのブログサイトやシンプルなAPIラッパー、静的ページにちょっとしたフォームをつけたもの——そういう案件が多い。
その文脈だと、商用利用OKな無料プラン・チームフラットの$20 Pro・公式Claude Code統合という組み合わせで、今はNetlifyを使う機会が増えている。
フリーランスとして複数クライアントの案件を持っているなら、月$20で人数を気にせずチームを招待できるのはかなり助かる。Vercelだと同じ規模感で$60〜かかるケースがある。
Next.jsを使うプロジェクトだけはVercelに入れている。理由は「同じ会社が作ってるんだから最適化されてるはず」という素朴な判断で、それ以外の深い理由はない。
Claude Codeにプロジェクトを作らせるとき、「Next.jsで作る場合はVercel、それ以外はNetlify」とざっくり決めてしまうと判断コストが減る。フレームワーク選定とデプロイ先をセットにしてしまうのが、毎回悩まないための一番楽な運用だと思っている。
