実際のコスト: 2025年のWebflow vs Next.js + Supabase + Vercel
ウェブサイト構築：Webflow vs Next.js + Supabase + Vercel（2025年版）
私はこの塀の両側でプロジェクトを構築してきた経験があります。クライアントが「昨日までに公開したい」という需要のあるWebflowのマーケティングサイト、そしてリアルタイムデータ、認証、ビジュアルビルダーでは実現不可能な柔軟性が必要なNext.js + Supabase + Vercelの複雑なアプリ。最も頻繁に聞かれる質問は「どちらが優れているのか？」ではなく、「実際のところ、次の12ヶ月間でどちらが費用がかからないのか？」です。その答えは、どんな料金ページよりもはるかに複雑です。
実際の数字を掘り下げてみましょう。「から始まる」というマーケティング用語ではなく、チームの席数、帯域幅の超過料金、サードパーティ統合、そして誰も語らない開発者の時間を考慮したときの実際の支払額です。
目次
- この比較が今重要な理由
- Webflow料金：実際の支払額
- Next.js + Supabase + Vercel：スタック料金の内訳
- シナリオ別のコスト比較
- 料金ページに掲載されていない隠れたコスト
- 対話型コストフレームワーク：自分で見積もりを作成する
- Webflowが財政的に有利な場合
- Next.jsスタックがコストで有利な場合
- ハイブリッドアプローチ：両方のメリット
- FAQ
この比較が今重要な理由
Webflowは着実に価格を引き上げています。彼らのワークスペースプランは2024年後半に再構成され、既に不透明だったエンタープライズ料金は、CTOを眉をひそめさせるレベルまで上昇しています。一方、Vercelの1座席あたりの価格モデル（Pro $20/開発者/月）と使用量ベースの超過料金の組み合わせは、ブログ投稿がバイラルになると複数のチームを驚かせています。
緊張関係は実際です：Webflowはコードなしで市場投入までの時間を短縮することを約束しています。Next.js + Supabase + Vercelスタックは無限の柔軟性と潜在的により低いインフラストラクチャコストを約束しています。しかし、「潜在的に」はその文に多くの重みを持っています。
Webflowから切り替えることで80%を節約したチームを見ています。また、Webflowで$20Kの開発者時間を費やして、Webflowで2日で完了したはずのことを構築したチームも見てきました。コンテキストがすべてです。
Webflow料金：実際の支払額
Webflowの料金は階層化されており、ここから混乱が始まります。「プラン」の料金を支払うだけではありません。サイトプラン、ワークスペースプラン、および潜在的にeコマース料金をすべて別々に支払います。
サイトプラン（サイトあたり、月額請求）
| プラン | 月額料金 | CMSアイテム | 帯域幅 | カスタムコード |
|---|---|---|---|---|
| Free | $0 | 50 | 1GB | 限定 |
| Basic | $18 | — | 50GB | はい |
| CMS | $29 | 2,000 | 200GB | はい |
| Business | $49 | 10,000 | 400GB | はい |
| Enterprise | カスタム | カスタム | カスタム | はい |
ワークスペースプラン（チームあたり）
| プラン | 月額料金 | 座席数 | ホストサイト |
|---|---|---|---|
| Starter | $0 | 1 | 2 |
| Core | $19/座席 | 3+ | 10 |
| Growth | $35/座席 | 3+ | 無制限 |
| Enterprise | カスタム | カスタム | カスタム |
では、実際には何が起こるのでしょうか。CMSプランで3人の小規模なマーケティングチームが5つのサイトを実行する場合、以下の通りです：
ワークスペース: $19/座席 × 3 = $57/月
サイトプラン: $29 × 5 = $145/月
合計: $202/月（$2,424/年）
これは悪くありません。しかし、すぐに加算されます。Growthプランで6人のチームが10サイトを運営する場合にスケーリングします：
ワークスペース: $35/座席 × 6 = $210/月
サイトプラン: $29 × 10 = $290/月
合計: $500/月（$6,000/年）
そして、これはeコマースプラン（サイトあたり$29～$212/月）に達する前、またはロールベースの公開、SSO、SLA保証などのエンタープライズ機能が必要な前です。
エンタープライズのブラックボックス
Webflowはエンタープライズ料金を公開していません。販売プロセスを経たクライアントとの会話に基づいて、以下を期待してください：
- 基本的なエンタープライズ機能の場合、月額$500～$800から開始
- SLA保証を備えた高トラフィックサイトの場合、月額$1,000～$3,000
- 複数サイトとカスタム要件を備えた大規模組織の場合、月額$5,000～$10,000以上
年間割引（最大22%）が役立ちますが、ロックインされています。そして、機能ゲートは実在します。一部のチームは、エンタープライズが必要なものが標準であるべきだと感じることが、プロジェクトの途中で判明します。
Next.js + Supabase + Vercel：スタック料金の内訳
このスタックには3つのコストコンポーネントがあり、それぞれが異なる方法でスケーリングします。
Vercel料金（2025年）
| プラン | 基本料金 | 座席数 | 帯域幅 | サーバーレス呼び出し | ビルド |
|---|---|---|---|---|---|
| Hobby | $0 | 1 | 100GB | 1M/月 | 6,000分 |
| Pro | $20/月 | $20/座席 | 1TB | 1M含む | 24,000分 |
| Enterprise | カスタム | カスタム | カスタム | カスタム | カスタム |
月額$20のProプランは、開発者の座席を追加するまで安く見えます。5人の開発者？1ページを提供する前に月額$100です。10人の開発者？月額$200です。
しかし、本当のサプライズは超過料金から来ます：
- 帯域幅超過料金：1TBを超えた場合、100GBあたり$40
- サーバーレス関数の期間：含まれる場合を超えた場合、GB時間あたり$0.18
- エッジ関数呼び出し：含まれた場合を超えた場合、100万あたり$2
Supabase料金（2025年）
| プラン | 月額料金 | データベース | ストレージ | Auth MAU | エッジ関数 |
|---|---|---|---|---|---|
| Free | $0 | 500MB | 1GB | 50,000 | 500K呼び出し |
| Pro | $25/月 | 8GB | 100GB | 100,000 | 2M呼び出し |
| Team | $599/月 | 8GB以上 | 100GB以上 | 100,000以上 | カスタム |
| Enterprise | カスタム | カスタム | カスタム | カスタム | カスタム |
Supabaseの無料層は小規模なプロジェクトに対して本当に気前が良いです。月額$25のProへのジャンプは、ほとんどの本番アプリケーションに十分です。コンピュート追加機能（月額$10～$20以上でパフォーマンスに敏感なアプリケーション用の専用インスタンス）は、コストが忍び寄る場所です。
スタックコストの例
// ソロ開発者、趣味のプロジェクト
Vercel Hobby: $0
Supabase Free: $0
合計: $0/月
// スタートアップ、3人の開発者、中程度のトラフィック
Vercel Pro: $20 + ($20 × 3座席) = $80/月
Supabase Pro: $25/月
合計: $105/月
// 成長中の企業、8人の開発者、月間500K以上のアクセス
Vercel Pro: $20 + ($20 × 8座席) = $180/月
Supabase Pro + コンピュート: $45/月
帯域幅バッファ: 約$40/月
合計: 約$265/月
シナリオ別のコスト比較
ここからが興味深いです。実際のシナリオを比較してみましょう：
| シナリオ | Webflow月額費用 | Next.jsスタック月額費用 | スタックでの年間節約額 |
|---|---|---|---|
| ソロポートフォリオ/ブログ | $18～$29 | $0（無料層） | $216～$348 |
| スタートアップマーケティングサイト（3人） | $145～$200 | $105 | $480～$1,140 |
| 中堅企業（6人、5サイト） | $400～$600 | $170～$265 | $1,620～$4,020 |
| エンタープライズ（10人以上、高トラフィック） | $1,500～$5,000以上 | $300～$600 | $10,800～$52,800 |
| eコマース（トランザクション） | $500～$1,500以上 | $200～$400 | $1,200～$13,200 |
これらの数字は規模での明確なストーリーを物語っています：カスタムスタックはインフラストラクチャではドラマチックに安いです。しかし、ここに大きな注意書きがあります。それは開発者の時間と呼ばれています。
料金ページに掲載されていない隠れたコスト
これは、ほとんどの比較記事がスキップするセクションです。スキップしないでください。
Next.jsスタック向けの開発者費用
Webflowサイトは1～3週間でデザイナーが構築できます。同等のNext.js + Supabase + Vercelプロジェクトには、複雑さに応じて4～12週間の開発者が必要です。
数学をしてみましょう：
Webflowビルド：時給$80のデザイナー × 60時間 = $4,800
Next.jsビルド：時給$120の開発者 × 200時間 = $24,000
初期構築だけで$19,200のギャップがあります。このスタックに特化したSocial Animalのようなエージェンシーを雇って効率的に仕事をしても、よく構築されたNext.jsアプリケーション向けに$8,000～$15,000対Webflowサイト向けに$3,000～$7,000の間で見ています。
継続的なメンテナンス
Webflowはホスティング、セキュリティパッチ、CDN構成を処理します。カスタムスタックでは、あなたまたはあなたのチームは以下が必要です：
- Vercelのデプロイメントとビルド分を監視する
- Supabaseデータベースマイグレーションを管理する
- Next.jsバージョンを更新する（大体年に1回の主要リリースを出荷）
- 依存関係の脆弱性を処理する
- CI/CDパイプラインを構成して維持する
月額5～10時間の開発者の時間を予算化してください。時給$120で、月額$600～$1,200です。これはどんな料金ページにも表示されません。
Vercel「税」の問題
私がこれについて話す必要があります。私はそれがチームを難しい目に合わせるのを見たからです。私たちの1人のクライアントは、Redditの投稿がバイラルになった後、1ヶ月間で$2,800の請求を見ました。彼らは月額$200を払うことを期待していました。
修正は良く文書化されていますが、規律が必要です：
// 可能な限りSSRの代わりにISRを使用
export async function generateStaticParams() {
const posts = await getPosts()
return posts.map((post) => ({ slug: post.slug }))
}
// 関数呼び出しを減らすために検証を設定
export const revalidate = 3600 // 1時間ごとに再検証
その他のコスト削減戦略：
next/imageを適切なサイズで使用して帯域幅を削減- ナビゲーションでの積極的なリンクプリフェッチを無効にする
- 静的生成（SSG）をサーバーサイドレンダリング（SSR）よりもコンテンツが要求ごとに変わらない場所で使用
- 適切なキャッシュヘッダーを設定
- リアクティビティを必要としないコンテンツが多いページにAstroを検討
サードパーティ統合
Webflowは、ネイティブにサポートされていない機能が必要な場合、コストがかかります：
- Auth：Memberstack（月額$25～$200以上）またはOutseta
- 基本を超えたフォーム：Zapier（月額$19.99～$69.99以上）またはMake
- 検索：Algolia（小規模では月額$0～$1、急速にスケールアップ）
- eコマースの複雑さ：多くの場合、Webflowのネイティブ機能を超えて成長
Next.jsスタックでは、Supabaseは認証、リアルタイムサブスクリプション、ストレージ、エッジ関数をバンドルで提供します。それでも支払い処理（Stripe）、メール（Resend、月額$0～$20）、および潜在的にheadless CMSが必要になります。しかし、基本的な機能はより広いです。
対話型コストフレームワーク：自分で見積もりを作成する
静的計算機がすべてのシナリオをカバーできないため、独自のコストを見積もるために使用できるフレームワークを以下に示します。スプレッドシートを取得して、これらの変数を入力してください：
// === あなたの入力 ===
team_size = ? // アクセスが必要な人数
monthly_visitors = ? // 予想される月間ユニークビジター数
num_sites = ? // 別々のサイト/アプリの数
needs_auth = ? // true/false
needs_database = ? // true/false
needs_ecommerce = ? // true/false
has_developers = ? // true/false（社内開発チーム？）
// === WEBFLOW見積もり ===
workspace = team_size <= 1 ? 0 : team_size * 19 // Coreプラン
site_plans = num_sites * 29 // CMSプラン平均
integrations = (needs_auth ? 50 : 0) + (needs_ecommerce ? 100 : 0)
webflow_total = workspace + site_plans + integrations
// === NEXT.JSスタック見積もり ===
vercel = has_developers ? (20 + (team_size * 20)) : 20
supabase = needs_database ? 25 : 0
bandwidth_buffer = monthly_visitors > 500000 ? 40 : 0
dev_maintenance = has_developers ? 0 : 800 // アウトソース月額
stack_total = vercel + supabase + bandwidth_buffer + dev_maintenance
// === 初期構築費用 ===
webflow_build = num_sites * 5000 // 大体の平均
stack_build = num_sites * 15000 // 大体の平均
スタックが初期構築コストを考慮してもより安くなるターンキーポイント（クロスオーバーポイント）は、通常、チームサイズと複雑さに応じて8～18ヶ月間に発生します。社内開発者を持つチームの場合、月4まで早く発生する可能性があります。
あなたの特定の状況について数字を実行してもらいたいですか？無料のコスト分析のために連絡してください。
Webflowが財政的に有利な場合
Webflowはすべての人にとって過度に高い価格ではありません。次のような場合、それは本当に正しい選択です：
**開発者がいない。**これが大きなものです。チームがデザイナーとマーケターである場合、Next.jsスタック向けに開発者を雇うコストは、Webflowのサブスクリプションをすべてを上回ります。Webflowの顧客は、カスタム構築の代替案と比較して67%少ない開発チケットと56%高いフォーム変換率を報告しています。
**市場投入までの時間が長期的なコストより重要。**2週間以内にマーケティングサイトを公開する必要がありますか？Webflow。同じ設計の美しさを備えたNext.jsビルドには、最低6～10週間かかります。
**サイトはほとんどコンテンツです。**ブログ、ポートフォリオ、エージェンシーサイト、ランディングページ。これらはWebflowの甘いスポットです。ビジュアルCMSは非技術的なコンテンツチームに優れています。
**5サイト未満で小さなチームが必要です。**このスケールでは、Webflowの総コスト（月額$100～$300）はメンテナンス時間を考慮したときにスタックと競争力があります。
Next.jsスタックがコストで有利な場合
カスタムスタックは、これらのシナリオで決定的に先を行きます：
**社内に開発者がいます。**既に開発者の給与を支払っている場合、スタックの限界コストはインフラストラクチャだけです：月額$100～$300対月額$500～$5,000以上のWebflow。
**アプリケーションロジックが必要です。**ユーザーダッシュボード、リアルタイム機能、複雑なフォーム、API統合、ロールベースアクセス。これのいずれかが必要な瞬間、Webflowのアドオンコストは爆発しますが、Supabaseはそのほとんどをネイティブに処理します。
**5サイト以上または月間500K以上のビジターをスケーリングしています。**Next.js + Vercelのインフラストラクチャコスト曲線は、Webflowのサイトあたりの価格モデルと比較して劇的に平坦化します。
**規模でパフォーマンスが必要です。**TurbopackとプロパーなISR/SSG構成を備えたNext.jsは、一貫して100msTTFB未満を提供します。Webflowのパフォーマンスは、マーケティングサイトではまともですが、スケーラビリティについては低く評価されています（TrustRadiusのスケーラビリティメトリクスで1.0/10）。
8つのマーケティングサイトとメンバーポータルをWebflowで実行していたクライアントからの実際の例を以下に示します：
前（Webflow）：
Workspace Growth: $210/月（6座席）
8 CMSサイト: $232/月
Memberstack: $75/月
Zapier: $49/月
合計: $566/月（$6,792/年）
後（Next.js + Supabase + Vercel）：
Vercel Pro: $140/月（6開発者座席）
Supabase Pro: $25/月
Resend（メール）: $20/月
合計: $185/月（$2,220/年）
年間節約: $4,572
移行費用: $18,000
損益分岐点: 約4ヶ月
損益分岐点は、彼らがスタッフに開発者を持っていたため速く来ました。移行とその後のメンテナンスのためにエージェンシーを雇う必要があった場合、タイムラインは12～14ヶ月に拡張されます。彼らにとってはまだ価値があります。しかし、すべてのチームの計算が変わります。
ハイブリッドアプローチ：両方のメリット
2025年に賢いチームが実際にしていることはここにあります：両方を使用することです。
- マーケティングページ用のWebflow：ランディングページ、キャンペーンマイクロサイト、マーケティングチームが管理するブログコンテンツ
- アプリケーション用のNext.js + Supabase：ダッシュボード、認証済みの体験、APIが大量な機能
これが機能するのは、Webflowが清潔なHTML/CSSをエクスポートでき、iframesを使用してWebflowで構築されたセクションをNext.jsアプリに埋め込むか、エクスポートされたコードを変換することができるからです。一部のチームはWebflowをサブドメイン（www.example.com）で実行し、アプリを別のサブドメイン（app.example.com）で実行します。
コストプロフィールは次のようなものです：
Webflow CMS（1サイト）: $29/月
Vercel Proアプリ: $80/月（3開発者座席）
Supabase Pro: $25/月
合計: $134/月
両方の長所が得られます：マーケティングチームの自律性と開発者の柔軟性。headless CMS開発サービスを通じて、このパターンを複数のクライアントに実装しており、一貫して最高のROIを提供しています。
Vercel以外に検討する価値のある代替案
Vercelの価格が懸念事項である場合、Next.jsをホストするためのオプションがあります：
| プラットフォーム | 開始価格 | Next.jsサポート | 最適 |
|---|---|---|---|
| Vercel | $20/月 + $20/座席 | ネイティブ（彼らがそれを構築した） | 完全な機能サポート |
| Netlify | $19/座席/月 | 良好（いくつかのギャップ） | よりシンプルなデプロイメント |
| Cloudflare Pages | Free～$5/月 | 改善中 | コスト意識の高いチーム |
| Railway | $5/月+使用量 | 自己管理 | 予算のデプロイメント |
| AWS Amplify | 使用量に応じて支払い | 完全SSRサポート | AWSネイティブチーム |
| 自己ホスト（Docker） | $5～$50/月 | 完全制御 | DevOps対応チーム |
Deployraおよび同様のサービスは、成長中のチーム向けにVerfelより93%の節約を主張しています。トレードオフは常に同じです：より多くの構成、少ない魔法、ただしドラマチックに低い請求。
FAQ
Webflowは2025年に高すぎますか？ それはあなたのユースケースに完全に依存します。開発者のいない小規模なマーケティングチームの場合、月額$100～$300のWebflowは、開発者を雇うことと比較して、議論の余地なく安いです。しかし、カスタム機能を必要とするチーム、数サイトを超えてスケーリングするチーム、またはエンタープライズ機能を必要とするチームの場合、はい。それは速く高くなります。月額$1,000～$10,000以上のエンタープライズクォートは一般的であり、サイトあたりの価格モデルはあなたのポートフォリオでコストが直線的に成長することを意味します。
Webflow Enterpriseは実際にはいくら費用がかかりますか？ Webflowはエンタープライズ料金を公開していません。業界レポートとクライアント体験に基づいて、基本的なエンタープライズ機能向けの開始点として月額$500～$800を期待してください。これは高トラフィック、複数のサイト、SLA要件、SSO、月額$3,000～$10,000以上の大規模な組織にスケーリングします。年間契約は通常15～22%の割引が付いています。
Next.jsアプリを本当に無料でホストできますか？ はい、注意点があります。Vercelのホビープラン（$0）は、月額100GBの帯域幅と1M個のサーバーレス関数呼び出しを提供します。Supabaseの無料層には500MBのデータベースストレージと50,000の認証ユーザーが含まれます。個人的なプロジェクトまたはトラフィックが少ない初期段階のスタートアップの場合、これは本当に無料です。チーム協業が必要であるか、制限を超えた場合、月額約$45～$105にジャンプします。
Vercelの隠れたコストは何ですか？ 主なサプライズは帯域幅超過（Pro月額$40/100GB対Pro月額1TB）、サーバーレス関数期間の料金、チームサイズでスケーリングする座席あたりの価格、およびビルド分の制限です。チームはまた、頻繁なISR検証や重いミドルウェアなどの特定のNext.js機能が関数呼び出し数を増やす可能性があることを報告しています。最初の数ヶ月の間、週単位であなたの使用ダッシュボードを監視してください。
Supabaseは本当にFirebaseの良い代替案ですか？ ほとんどの用途では、はい。Supabaseはあなたに完全なPostgresデータベース（ドキュメントストアではない）、ビルトイン認証、リアルタイムサブスクリプション、エッジ関数、ファイルストレージを提供します。Firebaseに対する主な利点は、それが標準SQLであるということです。ベンダーのロックイン、データベースを任意のPostgresホストに移行できます。無料層は競争力があり、月額$25のProプランはほとんどの本番ワークロードをカバーしています。
Next.js + Supabaseサイトの構築にはWebflowとどのくらいの時間がかかりますか？ Webflowのマーケティングサイトは、熟練したデザイナーで1～3週間かかります。Next.jsの同じサイトは、開発者で4～8週間かかります。認証、ダッシュボード、動的コンテンツを備えた複雑なアプリケーションの場合、Webflowは2～4週間とプラス統合時間がかかる可能性がありますが、Next.js + Supabaseは6～12週間かかりますが、より保守可能な結果を提供します。初期時間投資はカスタムスタック内でメンテナンス削減と後の反復速度に支払われます。
Webflowから次.jsに移行すべきですか？ 移行する場合：チームに開発者がいる場合、Webflow請求書が月額$400を超える場合、プラットフォーム制限（カスタムロジック、パフォーマンス、CMSアイテム制限）にヒットしている場合、またはWebflowがネイティブに提供できない機能が必要な場合。移行しない場合：チームが非技術的である場合、サイトが主にシンプルなインタラクションを含むコンテンツ駆動型である場合、または現在のWebflowコストが月額$200未満である場合。移行自体の費用は複雑さに応じて$8,000～$25,000なので、損益分岐点タイムラインがあなたの予算のために機能することを確認してください。
2025年のスタートアップに最適なスタックは何ですか？ ほとんどのスタートアップについては、ハイブリッドアプローチをお勧めします：初期マーケティングサイト用のWebflow（高速で市場に出す）、その後、製品アプリケーション用のNext.js + Supabase + Vercel。これはマーケティングコストを低く保ちながら、開発チームに製品体験を完全に制御できます。スケーリングするときは、マーケティングサイトをNext.jsに移行するか、Webflowに保つことができます。両方が機能します。エージェンシーサポートでこれがどのように見えるかについては、料金ページをチェックしてください。