Figma to Webflow vs Figma to Next.js: An Honest Agency Guide
Figma から Webflow vs Figma から Next.js: 誠実なエージェンシーガイド
エージェンシーが間違ったパイプラインにはまり込み、数週間――時には数ヶ月――を費やすのを見てきました。マーケティングチームが Next.js で丸ごとサイトを構築したのに、Webflow なら3分の1の時間で完成していたはずだったとか。SaaS 企業が Webflow で立ち上げたのに、6ヶ月間その制限と格闘してから、結局 React で一から作り直すとか。Figma からプロダクションへのパイプラインの選択は、好みの問題ではありません。これはビジネス上の決定であり、タイムラインに、予算に、チームの精神衛生に、そして実際に何が構築できるかに影響を与えます。
このガイドは両方のワークフローを正直に分解します。「Webflow は悪い、コードは良い」その逆でもなく。私は両方のパイプラインで数十のプロジェクトを完成させてきました。答えはいつも「状況による」――でも、「状況による」の部分を実際に役立つものにします。
目次
- 誰も上手く説明しない核となる違い
- Figma から Webflow へ: 実際に何が得られるか
- Figma から Next.js へ: 実際に何が得られるか
- 並列比較
- 決定フレームワーク: 7つの質問
- コスト内訳: 実数
- ハイブリッドアプローチ
- エージェンシーが犯す一般的な間違い
- FAQ
誰も上手く説明しない核となる違い
ほとんどの比較記事が見落とす点はこれです: Webflow と Next.js は同じカテゴリーで競争していません。Webflow はホスティングと CMS が組み込まれたビジュアル Web サイトビルダーです。Next.js は Web アプリケーション構築用の React フレームワークです。これを比較するのは、ピックアップトラックと大型トレーラーを比較するようなもの――どちらも A から B へものを移動させますが、根本的に異なる負荷のために設計されています。
「Figma から Webflow へ」と言う場合は、デザインを取得し、それを Webflow のクラスベーススタイリングシステムに視覚的に変換し、必要に応じて CMS を接続し、公開する。全体は Webflow のエコシステム内に存在します。
「Figma から Next.js へ」と言う場合は、デザインを取得し、React コンポーネントをコードで記述し、ヘッドレス CMS または API レイヤーに接続し、Vercel または別のホストにデプロイする。スタックのすべての部分を所有しています。
どちらも本質的に優れているわけではありません。でも、一つはほぼ確実に あなたの特定のプロジェクトにとって より良いものです。
Figma から Webflow へ: 実際に何が得られるか
ワークフロー
デザイナーが Figma で完成させます。Webflow デベロッパー (または Webflow を知っているデザイナー自身) が、Webflow のキャンバスでデザインを視覚的に再構築します。動的コンテンツの CMS コレクションを作成し、インタラクションとアニメーションをワイヤリングし、SEO 設定を構成し、公開します。
Figma-to-Webflow プラグインのようなツールは存在しますが、正直に言うと? 経験豊かな Webflow デベロッパーのほとんどはキャンバスで一から再構築しています。プラグインは汚いマークアップを生成します。生成されたコードをクリーンアップするより、きれいに構築する方が速いです。
Webflow が輝く場所
マーケティングサイトとランディングページ。 これは Webflow のスイートスポットです。5～20ページのマーケティングサイト、ブログ、いくつかのアニメーション、お問い合わせフォーム? Webflow はこれで朝飯前です。複雑さによりますが、Figma からライブまで 1～3 週間で行けます。
複雑なインタラクションを持つデザイン重視サイト。 Webflow のインタラクションシステムは本当に印象的です。スクロールトリガーアニメーション、ホバーエフェクト、ページトランジション――これらをすべて JavaScript を書かずに視覚的に構築できます。Awwwards を狙ったり、ブランドフォーカスの体験を構築したりするエージェンシーにとって、これは重要です。
クライアントが管理するコンテンツ。 Webflow の Editor モードでは、クライアントはテキスト、画像、CMS コンテンツを更新でき、デザインには触れられません。レイアウトを壊すことはできません。これは、コピー変更のたびにオンコール状態になりたくないエージェンシーにとって大きなことです。
市場への投入速度。 有能な Webflow デベロッパーは、数日でポーランド済みのマーケティングサイトを配布できます。週ではなく。日です。クライアントが来月のトレードショーの前に起動する必要がある場合、この速度は建築的な純粋性より重要です。
Webflow が限界に突き当たる場所
認証とユーザーアカウント。 Webflow は今 Memberships を持っていますが、それは限定的です。ロールベースアクセス、カスタムユーザーダッシュボード、または基本的なゲートコンテンツ以上のものが必要な場合、サードパーティツールを一緒にダクトテープで留めることになります。
複雑なデータ関係。 Webflow の CMS は参照フィールドと複数参照フィールドをサポートしていますが、Business プランで 10,000 CMS アイテムに上限があり、Enterprise では 100,000 です。50,000 のリスティングの各ディレクトリを構築していて、複数フィルタリング可能な属性を持つ場合、痛みを感じるでしょう。
カスタム機能。 価格計算機が必要ですか? 条件付きロジックを持つ複数ステップフォーム? 外部 API からのリアルタイムデータ? カスタムコードを埋め込むか、Memberstack、Jetboost、Finsweet attributes のようなツールを使用することになります。うまくいきますが、統合のフランケンシュタイン怪物を構築しています。
大規模国際化。 Webflow はローカライゼーションを追加しました。CMS プランで最大 5 つのセカンダリロケールをサポート (2026 年価格)。でも 15 言語が必要で、地域固有のコンテンツと RTL サポートが必要な場合、プラットフォームと格闘することになります。
Figma から Next.js へ: 実際に何が得られるか
ワークフロー
デザイナーが Figma で完成させます。フロントエンドデベロッパー (またはチーム) がデザインを React コンポーネントに変換します。通常 TypeScript と Tailwind CSS、CSS Modules、または styled-components のようなスタイリングソリューションを使用します。ルーティングを設定し、ヘッドレス CMS (Sanity、Contentful、Storyblok など) に接続し、必要に応じてサーバーサイドレンダリングまたは静的生成を実装し、Vercel、Netlify、または AWS にデプロイします。
これはコードファーストのワークフローです。ビジュアルキャンバスはありません。すべてのピクセルが記述されており、ドラッグされていません。
Next.js が輝く場所
動的機能を持つ Web アプリケーション。 ユーザーダッシュボード、カスタムロジック付きの e コマース、製品の API からリアルタイムデータをプルする必要がある SaaS マーケティングサイト――これは Next.js の領域です。ビジュアルビルダーの制約に限定されません。コード化できれば、構築できます。
大規模でのパフォーマンス。 Next.js はレンダリング戦略に対する細かい制御を与えます。マーケティングページの静的生成、動的コンテンツのサーバーサイドレンダリング、両方の長所を備えた増分静的再生成。Vercel 上に構築された well-built Next.js サイトは、Core Web Vitals で一貫して 95 以上のスコアを獲得します。Webflow サイトも同じことができますが、出力をより少なく制御できます。
ヘッドレス CMS の柔軟性。 headless CMS development ルートに行くとき、コンテンツをプレゼンテーションから完全に分離します。マーケティングチームはワークフローに適した CMS を使用します。デベロッパーは任意の方法でフロントエンドを構築します。コンテンツは Web サイト、モバイルアプリ、デジタルサイネージ――どこにでも流れることができます。
コンポーネント駆動アーキテクチャ。 UI のすべての部分は再利用可能なコンポーネント。Figma のデザインシステムは、コード内のコンポーネントライブラリに直接マップされます。これは大規模サイトまたは同じブランドシステムから複数のプロパティを構築している場合に大きなメリットをもたらします。
長期的な所有権。 コードを所有しています。誰の独占的なプラットフォームにもロックインされていません。Webflow が明日価格を 2 倍にしたら (彼らは以前に価格を上げています)、あなたは立ち往生します。Next.js を使用すれば、どこにでもデプロイできます。
Next.js が高くつく場所
開発者が必要です。 優秀な React デベロッパーは安くはありません。シニア Next.js developer はエージェンシーで $150-250/時間で請求します。Webflow デベロッパーは $75-150/時間で請求するかもしれません。コードファーストアプローチはより多くの専門的人材を必要とします。
コンテンツエディター体験には作業が必要です。 Webflow では、クライアントは既成のビジュアルエディターを取得します。Next.js では、ヘッドレス CMS をセットアップし、プレビューモードを構成し、コンテンツ編集体験を構築する必要があります。これはすべてのプロジェクトに時間とコストを追加します。
シンプルなサイトはより長くかかります。 Webflow で 2 週間かかる基本 10 ページマーケティングサイトは、CMS セットアップ、デプロイメント構成、QA を考慮すると、Next.js で 4～6 週間かかるかもしれません。単純なマーケティングサイトの場合、その余分な時間はしばしば正当化されません。
メンテナンスオーバーヘッド。 依存関係を更新する必要があります。セキュリティパッチを適用する必要があります。Next.js フレームワーク自体は、時には breaking changes を含む主要バージョンをシップします (App Router マイグレーション、誰か?)。Webflow はこれをすべて処理してくれます。
並列比較
| 要素 | Figma → Webflow | Figma → Next.js |
|---|---|---|
| 典型的なタイムライン (10 ページサイト) | 1～3 週間 | 4～8 週間 |
| 開発者コスト範囲 | $75-150/時間 | $150-250/時間 |
| ホスティングコスト (月額) | $39-235/月 (Webflow プラン) | $0-20/月 (Vercel) + CMS コスト |
| 含まれる CMS | はい、組み込み | いいえ――Sanity、Contentful など必須 ($0-300+/月) |
| クライアントがコンテンツを編集可能 | はい、ビジュアルエディター | はい、ヘッドレス CMS 経由 (セットアップ必須) |
| カスタム機能 | 限定的 (埋め込み/統合が必須) | 無制限 |
| アニメーション機能 | 優秀 (ビジュアルビルダー) | 優秀 (Framer Motion、GSAP――コード必須) |
| SEO 制御 | 良好 (メタタグ、OG、サイトマップ) | 完全制御 (構造化データ、動的サイトマップ、ヘッダー) |
| e コマース | 基本 (Webflow Ecommerce) | フル (Shopify Hydrogen、Saleor、カスタム) |
| 国際化 | 限定的 (CMS プランで 5 セカンダリロケール) | フル (next-intl、無制限ロケール) |
| パフォーマンスの上限 | 良好 (~85-95 Lighthouse) | 優秀 (~95-100 Lighthouse) |
| ベンダーロックイン | 高い | 低い |
| 最適 | マーケティングサイト、ポートフォリオ、ブログ | Web アプリ、e コマース、複雑なサイト |
決定フレームワーク: 7つの質問
機能リストは一分忘れてください。パイプラインを推奨する前に実際に尋ねる質問は以下のとおりです:
1. このサイトはものを「する」必要があるか、それとも「表示」するだけか?
サイトが主に情報を表示する場合――マーケティングコピー、ブログ投稿、ケーススタディ、チームバイオ――Webflow がおそらく答えです。する 必要がある場合――カスタムロジックで支払いを処理、パーソナライズされたコンテンツを表示、内部ツールと統合――Next.js がおそらく移動です。
2. これを維持するチームはどのくらい技術に精通していますか?
クライアントのマーケティングコーディネーターがサイトを更新する場合、Webflow のビジュアルエディターは比類なきものです。彼らは彼らが変更しているものを正確に見ることができます。ヘッドレス CMS も機能しますが、編集体験はより抽象的です――あなたはフィールドを編集していますが、ビジュアルページではありません。
3. 予算は――正直に?
エージェンシーで Webflow サイトは $10,000-30,000 かかるかもしれません。比較可能な Next.js サイトは $25,000-80,000 以上かかるかもしれません。これは Next.js デベロッパーが貪欲だからではなく、実際にもっと多くのエンジニアリング作業があるからです。予算が限定的で要件が単純な場合、Webflow はドルあたり より多くの価値を提供します。
4. このサイトは複雑さでスケールする必要があるか?
今日マーケティングサイトを構築しているが、12 ヶ月以内にユーザーアカウント、カスタマーポータル、または複雑な統合が必要になることを知っている場合は、Next.js で開始してください。Webflow から Next.js への再構築は、一から始めることを意味します。最初から正しく構築する方が安いです。
5. ページ速度と Core Web Vitals はどのくらい重要ですか?
どちらも高速サイトを作成できます。でも Next.js はより多くの制御を与えます。next/image で画像を最適化でき、ルートベースのコード分割を実装でき、React Server Components を使用してクライアント側 JavaScript を削減できます。50ms の LCP 改善が直接収益に影響するサイト (e コマース、SaaS サインアップフロー) の場合、その制御は重要です。
6. これは単一のサイトか、より大きなエコシステムの一部か?
1 つのマーケティングサイトを構築している場合、Webflow は良好です。マーケティングサイトをデザインシステムと Web アプリ、ドキュメンテーションサイト、カスタマーポータルで共有する場合、Next.js (または 静的部分用の Astro) より合理的です。複数のプロパティにわたる共有コンポーネントライブラリは、コードが得意とするものです。
7. チームはすでに何を知っているか?
これは実用的です。エージェンシーに 3 人の Webflow エキスパートがいて、React デベロッパーがいない場合、答えは次のプロジェクトに対して明白です (理論的に Next.js がより良いかもしれませんが)。強みを活かしてください。時間をかけてギャップに雇用してください。
コスト内訳: 実数
具体的にしましょう。ブログ、CMS、お問い合わせフォーム付きの典型的な 15 ページマーケティングサイトが 2025-2026 年の各パイプラインを通じて何を費用とするかは以下の通りです:
Figma から Webflow へ
| 項目 | コスト |
|---|---|
| デザイン (Figma) | $5,000-12,000 |
| Webflow 開発 | $6,000-18,000 |
| Webflow CMS ホスティング (年) | $468-1,668/年 |
| ドメイン | $12-50/年 |
| サードパーティ統合 (フォーム、分析) | $0-100/月 |
| 初年度合計 | $11,500-32,000 |
| 年間進行中 | $500-2,900 |
Figma から Next.js へ
| 項目 | コスト |
|---|---|
| デザイン (Figma) | $5,000-12,000 |
| Next.js 開発 | $15,000-45,000 |
| ヘッドレス CMS (Sanity、Contentful) | $0-300/月 |
| Vercel ホスティング (Pro) | $240/年 |
| ドメイン | $12-50/年 |
| 初年度合計 | $20,500-62,000 |
| 年間進行中 | $250-3,900 |
開発コストの違いは実際です。でも進行中のコストを見てください――特に Sanity の無料ティアまたは同等の寛大なプランを使用する場合、実際に比較可能です。問題は、より高い前払い投資がプロジェクトのニーズによって正当化されるかどうかです。
コンテキストのため、私たちの pricing page は両方のパイプラインに対するプロジェクトスコーピングへのアプローチを詳しく説明しています。
ハイブリッドアプローチ
ほとんどの記事が言わないことはここにあります: あなたはいつも 1 つを選ぶ必要はありません。
マーケティングサイトが Webflow 上で実行され (マーケティングチームが開発者の関与なしに高速にランディングページを配布する必要があるため)、製品/アプリが Next.js 上で実行されるプロジェクトを構築しました。2 つは Figma のデザインシステムを共有し、相互にリンクします。誰もそれらが異なるプラットフォーム上にあることに気づきません。
これは 2025-2026 年でますます一般的です:
- マーケティング用 Webflow ――ランディングページ、ブログ、ページについて、キャリア。マーケティングチームがそれを所有しています。
- 製品用 Next.js ――ダッシュボード、アプリ、カスタマーポータル、認証またはカスタムロジックを持つ anything。エンジニアリングチームがそれを所有しています。
- 共有 Figma デザインシステム ――両方のチームが同じ情報源で機能します。
重要なのは、ドメイン間のハンドオフが見えなくなることです。一貫したナビゲーション、同じ CDN から読み込まれた共有フォントと色、マッチングインタラクションパターン。ユーザーはプラットフォーム境界を越えたことを通知できるべきではありません。
私たちは headless CMS development 機能ページでこのアプローチについてもっと書きました――ヘッドレスアーキテクチャは自然にこの種のスプリットをサポートします。
エージェンシーが犯す一般的な間違い
間違い 1: 「より専門的だから」という理由で Next.js をブロシュアサイト用に選択
10 ページの企業サイトを Next.js で $60K 費やすエージェンシーを見ました。Webflow で $15K で費やし、半分の時間で配布していたはずだったのに。クライアントはサーバーサイドレンダリングを必要としませんでした。カスタム API ルートを必要としませんでした。彼らは高速できれいな Web サイトが必要で、彼ら自身で更新することができました。オーバーエンジニアリングしないでください。
間違い 2: Webflow が明確に成長する可能性があるサイトを選択
逆の間違い。スタートアップはマーケティングサイトを Webflow で構築してから、8 ヶ月後にカスタマーポータルを追加し、製品の API と統合し、12 ロケールをサポートする必要があります。現在、彼らは完全な再構築に支払っています。ロードマップが明確に複雑さを指している場合、最初から正しい基礎に投資してください。
間違い 3: コンテンツチームのワークフローを無視
世界最高のアーキテクチャは、毎日サイトを更新する人々がそれを嫌う場合、重要ではありません。パイプラインを選択する前にコンテンツエディターと話してください。彼らが機能するのを見てください。技術的な快適さのレベルを理解してください。ページセクションを視覚的に再配置できる Webflow エディターは、同じ人がフィールドエディターを凝視するより生産性が高いかもしれません。
間違い 4: Webflow の学習曲線を過小評価
Webflow は初心者向けのドラッグアンドドロップではありません。CSS ボックスモデル、flexbox、grid、レスポンシブデザイン原則の理解が必要なプロフェッショナルツール。CSS に触れたことのないデザイナーは、数週間は Webflow で生産性がありません。トレーニング時間を決定に含めてください。
間違い 5: CMS マイグレーションを考慮に入れない
Webflow で構築してから Next.js に移動する場合、CMS コンテンツマイグレーションは苦痛です。Webflow の CMS エクスポートは限定的です。計画してください。マイグレーションが 30% の確率であっても、最初からヘッドレス CMS を開始することを検討してください――Webflow API 経由で Webflow をフロントエンドとして使用する場合でも、または Webflow-to-headless ブリッジ。
特定のプロジェクトのために、どちらのアプローチが合理的かを評価するのに行き詰まっている場合、それは正確に私たちが initial consultations で持つ会話です。ピッチなし――ただ正直な評価。
FAQ
Webflow は Next.js と同じくらい e コマースを処理できますか?
正直に言うと、全然違います。Webflow Ecommerce は単純なストア――500 SKU 未満、直線的なチェックアウト、基本的なインベントリで機能します。でもカスタムチェックアウトフロー、サブスクリプション請求、動的価格設定、または ERP との統合が必要な場合、Shopify の Storefront API と組み合わせた Next.js または Saleor のようなプラットフォームが必要です。Webflow Ecommerce は取引手数料 (Basic プランで 2%) も請求し、大規模に追加されます。
Figma Sites は Webflow と Next.js の両方への実行可能な代替品ですか?
2026 年初現在、Figma Sites は 1 ページャー、イベントページ、高速にライブが必要なクイックプロトタイプに最適です。でも CMS がないし、SEO 制御が最小限だし、プロダクションサイト用の Webflow または Next.js の深さが不足しています。デザイナーの便利な機能と考えてください。プロダクションプラットフォームではありません。時間をかけて改善されますが、まだ真剣なエージェンシー作業の準備ができていません。
Webflow サイトを Next.js に移行するのにどのくらい時間がかかりますか?
元のビルド時間の 60～100% を計画してください。自動化されたマイグレーションパスはありません。本質的にフロントエンドを React で再構築しながら、Webflow の CMS からヘッドレス代替にコンテンツをマイグレーションしています。ブログ付きの典型的な 15～20 ページサイトの場合、4～8 週間の開発作業を期待します。デザインは同じままです (Figma にあるため)。でもすべてのレイアウト、インタラクション、CMS 接続をコードで再作成する必要があります。
Webflow と Next.js: どちらが SEO に優れていますか?
どちらも優秀な SEO 結果を産出できます。Webflow はメタタグ、自動生成サイトマップ、クリーンなセマンティック HTML、組み込みの 301 リダイレクトを提供します。Next.js はすべてこれを提供し、構造化データ、動的サイトマップ、サーバーサイドレンダリング、細かいヘッダー管理に対する完全な制御を提供します。ほとんどのマーケティングサイトでは、Webflow の SEO ツールは十分以上です。プログラム的 SEO では数千の動的生成ページを使用して、Next.js は優位を持ちます。
Webflow を知るデザイナーは Next.js を学べますか?
これは大きなジャンプです。Webflow は CSS の概念の理解が必要ですがコード記述は不要。Next.js は JavaScript、React、サーバー/クライアント レンダリング理解が必要。ほとんどの Webflow デザイナーは Next.js で生産性になるには 3～6 ヶ月の集中学習が必要です。より実用的なパス: Webflow 精通デザイナーを Next.js デベロッパーと組み合わせてください。デザイナーは Figma に留まり、デベロッパーが実装を処理します。
エージェンシープロジェクト用に Next.js で最高のヘッドレス CMS はどれですか?
Sanity と Contentful は 2025-2026 年で最も人気のある選択肢です。Sanity は寛大な無料ティア (最大 3 ユーザー、500K API リクエスト/月)、編集インターフェースの素晴らしいカスタマイズ、リアルタイム協力を提供します。Contentful はより構造化され企業対応ですが、速く高くなります (Team プランは $300/月から)。Storyblok も検討する価値があります――ビジュアルエディターはクライアントにヘッドレスアーキテクチャ内での Webflow のような編集体験を与えます。私たちはプロジェクトに応じて、すべての 3 つで機能します――headless CMS development page でもっと。
複数のクライアントサイトを管理するエージェンシーの場合、Webflow は高すぎますか?
そうするとできます。Webflow の per-site 価格は、コストが線形に拡大することを意味します。CMS プランは $23/月 per site、Business プランは $39/月。50 のクライアントサイトを管理している場合、$1,150-1,950/月 just in hosting――ワークスペース手数料の前に。対照的に、Vercel の Pro プラン ($20/月 per team member) の Next.js サイトはシアの、数十を多くホストでき、CMS コストは共有されるか個別にクライアントに渡されます。10 以上のサイトでは、数学は自己ホストまたはヘッドレスアプローチを有利にし始めます。
Webflow か Next.js の代わりに Astro をいつ使用すべきですか?
素晴らしい質問。Astro はコンテンツ重視で、多くのクライアント側インタラクティビティが不要なサイト――ドキュメンテーションサイト、ブログ、パフォーマンスが最優先のマーケティングサイトに最適。Astro はデフォルトで JavaScript をゼロシップし、信じられないほど高速な静的サイトを作成します。React のインタラクティビティや Webflow のビジュアル編集が必要ない場合、ヘッドレス CMS を持つ Astro は両世界の最適かもしれません: 開発者制御、爆速パフォーマンス、Next.js フル設定より低い複雑さ。