AIに「スニーカーブランドのサイト作って」と一言頼んだら、Home・About・Products・Blog・Contactの5ページにスクロールアニメーションまで付いて出てきました。

同じプロンプトをv0やLovableに入れると、結果は少し違うんです。というのも、この2つのツールはそもそも違うものを作っているからなんですね。

3秒まとめ
一発プロンプト → マルチページサイト → デザインシステム → アニメーション同梱 → ビジュアル編集で続きを

これって何の話なんですか?

Webflowが2026年2月5日にAI Site Builderを再リリースしました。2025年初頭の最初のベータは正直、ちょっと地味だったんです。シングルページで静的なデザイン、それで終わり。

今回のアップデートで変わったのは4つ。要は「一発のプロンプトで本物のサイトを作ってくれる」という話です。

  1. マルチページ生成
    初回生成で最大5ページの完全なサイト構造が出てきます。ホーム・About・Products・Blog・Contactという定番IAが一括で。
  2. アニメーション同梱
    スクロールインタラクションやホバーエフェクトが生成段階で一緒に付いてきます。あとはWebflow側で微調整。
  3. 生成フローの再設計
    以前はテーマ → 色・フォント → ページ追加が分かれていたのが、ひとつの流れに統合されました。
  4. エンタープライズ対応
    大規模チームでも使えるよう、権限やアクセシビリティが拡張されています。

でも個人的に面白いのは別のところで、同じカテゴリのツール同士で出力物がまったく違うという点なんです。ここがこの記事の本題です。

似たようなツールが多すぎませんか?

v0・Lovable・Bolt・Framer AI・Webflow…全部「プロンプトでサイト作る」と言っていますが、実際に触ると出力物の質感が違いますし、合う人も違うんですね。

大きく2つに分かれます。片方はコードを吐く側(v0・Lovable・Bolt)、もう片方は「編集可能なサイト」を吐く側(Webflow・Framer)です。この差がどこから来て、なぜ重要なのかを次のセクションで解きます。

v0と何が違うんですか?

一番大きな分かれ道は「AIが作った結果物を、これから誰が触り続けるか」です。

コード生成型 (v0・Lovable・Bolt) システム生成型 (Webflow・Framer)
出力物 React/Next.jsのコード エディタで編集可能なサイト
編集方法 IDEまたはチャットでコード修正 ビジュアルキャンバスでドラッグ
運用する人 エンジニア デザイナー・マーケター
バージョン管理 GitHub直結 自前の履歴
CMS・SEO 自分で繋ぐ 最初から同梱

v0はコードがGitHubに同期され、他のReactプロジェクトと統合できます。エンジニアのワークフローに入るのが強みです。Lovableも似た路線で「iterate on your creation with simple feedback」と非エンジニアにも訴求していますね。Boltはさらに踏み込んで、バックエンドや認証、DBまでフルスタックで構築すると言っています。

一方Webflowの出力物はWebflowサイトそのもの。AIが作った結果を、同じ会社のビジュアルエディタでデザイナーが触り続けられる構造です。CMSコレクション、デザインシステム(カラートークン・タイポ・スペーシング)、ホスティングまで一塊で付いてきます。Product Huntのレビューで一番褒められているのが「pixel-perfect control over responsive design」なんですが、その制御権がAI生成のあとも残るという意味なんです。

Framer AIも同じ陣営ですね。Wireframerでレイアウト、AI Translateで多言語、結果はFramerキャンバスで編集を続けられます。両者の違いは、WebflowがCMSや複雑なサイト構造に強く、Framerはより軽量なポートフォリオ・ランディングページが得意という棲み分けです。

5ページ
一発のプロンプトで生成
4.8/5
Product Hunt評価 (141件)
無料
Starterプランから利用可能

Webflowにはもうひとつ巧妙な手があります。AI Site Builderとは別にAI Code Componentsを出しているんです。サイト内で「料金計算機作って」「検索フィルター追加して」みたいなインタラクティブなコンポーネントを自然言語で生成できます。さらにClaude/CursorのMCP連携も対応していて、IDEから「このサイトのSEOメタデータ全部直して」みたいな指示も飛ばせるんです。AIを一箇所ではなくワークフローのあちこちに散りばめる戦略ですね。

これから始める方法

Webflow AI Site Builderはベータから正式に出ていて、Enterprise Workspace以外のすべての顧客がアクセスできます。Starter無料プランで作ってみてからホスティングが必要になったら有料プランへ、というのが一般的な流れです。

  1. WebflowダッシュボードでNew Siteをクリック
    AI Site Builderのオプションが最初の画面に出ます。既存のWebflowアカウントがあれば同じワークスペースでそのまま始められます。
  2. プロンプトは具体的に長く
    「スニーカーブランドのサイト」より「日本市場ターゲットのランニングシューズブランド、ミニマルなトーン、About・Products・Blog・Contactページが必要」のように長く書くほど結果が良くなります。トーン・ターゲット・ページ構造の3つは最低限。
  3. デザインシステムからチェック
    生成が終わったら、カラートークン・タイポスケール・スペーシングが一貫しているか先に確認。ここがブレるとページを修正するほど崩れていきます。
  4. アニメーションはオンのまま始める
    最初から切らないでください。AIが付けたスクロールインタラクションを見て、過剰な部分を削る方が速いです。
  5. CMSとSEOはそのあと
    Blogページが生成されていればCMSコレクションを接続。SEOメタデータはClaude MCPコネクタで一括監査するという手もあります。

気をつけたいこと

日本語プロンプトも可能ですが、出力物のテキストは英語中心になる可能性が高いです。日本語コピーは後編集がほぼ必須。Product Huntのレビューで「learning curve steep for beginners」という指摘がよく出ますが、AI Site Builderはその入り口を低くしてくれます。とはいえ本格的なカスタマイズはWebflowの学習曲線を乗り越える必要があります。

もっと深く知るには

Webflow 2026年2月のアップデート発表 マルチページ・アニメーション・生成フロー変更の公式説明 webflow.com

AI Code Componentsガイド 料金計算機・クイズ・検索フィルターを自然言語で作るコンポーネントビルダー webflow.com

Webflow × Claude MCP SEO監査・CMSバックフィル・デザイン整合性チェックを自動化する5つの活用 webflow.com

v0 by Vercel コード生成陣営の代表 — GitHub連携とライブデプロイ v0.app

Lovable 「describe → working prototype → deploy」3ステップのコード生成ビルダー lovable.dev

Framer AI Wireframer・Workshop・AI Translateをひとつのキャンバスに束ねた同陣営のライバル framer.com