- App Genとは
- App Genとは、WebflowでUIを作りAIにやりたいことをプロンプトで投げるだけで、データ構造・ロジック（処理フロー）・フロントエンド接続の3点を自動生成してくれるWebflowの新機能です。
Webflow App Genは、WebflowでUIを作り、やりたいことをプロンプトで伝えると、データ保存・認証・処理フローといったバックエンドをWebflowの画面内に自動生成する新機能です。実際に試した範囲では、「問い合わせフォーム→DB保存→管理画面で一覧表示→ステータス変更」程度の機能なら、日本語のプロンプト1つで動く形になりました。
こんにちは、マサトです。これまでWebflowといえば、世界最高峰の「Webサイト制作ツール」でした。コーポレートサイトやLPを作るなら最強ですが、「Webアプリ」を作るとなると、認証はMemberstack・DBはSupabase・API連携はWizedと、外部ツールを組み合わせる工夫が必要でした。2025年、Webflow Cloudと新機能「Webflow AI（App Gen）」の登場でこの前提が変わったので、実際に触って確かめました。
この記事では、実際に触って確認できたことと、まだ検証していないことを分けて書き、最後に「Webflowユーザーが今試すべきか」の判断基準をまとめます。
App Genとは：UIを作ってプロンプトを投げると、バックエンドが生成される
結論：App Gen（App Generation）を一言で表すなら、「デザイナーの意図をAIが読み取り、裏側の仕組みを組み立ててくれる機能」です。開発フローは3ステップです。
- WebflowでUIを作る
- AIにやりたいことをプロンプトで投げる
- バックエンドが自動生成される
「ユーザーが登録ボタンを押したら、DBに保存して」と伝えると、データ保存・認証・アクション（処理）といったバックエンドの基本セットが、Webflowの画面の中に自動生成されました。
実際に試したこと：日本語プロンプト1つで管理画面まで
実際に私が入力したのは、本当にこれくらいの指示です。
「問い合わせフォームから送信されたら、DBに保存して管理画面に一覧表示して。あとステータスも変更できるようにしたい」
この指示だけで、Webflow AIは以下の3点を一気に生成してくれました。
- CMS/データ構造（必要なフィールドを持つテーブル）
- ロジック/アクション（API的な処理フロー）
- フロントエンドの接続（フォームとDBの紐付け）
DBのカラム定義を先に固める代わりに、「こういう体験にしたい。このボタンでこう動いてほしい」と会話ベースでアプリを組み立てていく——いわゆる「バイブコーディング」と呼ばれるスタイルが、Webflow上でそのまま動く形です。人間は「何を作りたいか」に集中し、コードを書く実務はAIが担当します。
ゼロから全生成するAIツールとの違いは「役割分担」
テキストからWebアプリを丸ごと自動生成するAIツールも存在します。触り比べて感じたWebflowアプローチとの違いは、役割分担です。
- 人間/デザイナー：繊細なUIデザイン、クラス設計、DOM構造を作る（Webflowの得意領域）
- AI/App Gen：バックエンド、データ連携、ロジックを作る（AIの得意領域）
全てをAI任せにすると、デザインが崩れたり修正が困難になりがちです。Webflowなら、デザインとHTML構造は自分の管理下に置いたまま、裏側だけAIに任せられます。「動くけどダサいアプリ」ではなく、デザイン品質を保ったまま動くアプリを狙える構図です。
まだ検証していないこと（正直に書きます）
結論：今回の検証は「小さな機能がプロンプトで生成できるか」の初回確認までです。以下はまだ試せていないため、この記事では断定しません。
- 実案件・本番運用への投入（負荷がかかったときや障害時の挙動）
- 料金の実感（無料の範囲でどこまで作れるか・本番運用時のコスト感）
- 生成されたバックエンドの保守性（後から仕様変更したときにどこまで追従できるか）
- 運用中の既存サイトへの後付け（公式には可能とされていますが、僕の検証は新規作成のみ）
- 認証・権限まわりの細かい挙動（会員種別ごとの出し分けなど）
この辺りは実際に使う場面が来たら追記します。
視点：検索（SEO）からAIエージェント（AIO）へ
少し視点を広げると、これからは人間が検索するだけでなく、AIエージェント（ChatGPTやGeminiなど）がユーザーの代わりに情報を探し、予約し、決済する流れが進んでいます。触った範囲の印象では、App Genが生成する構造は素直で、明確なHTML構造・役割のはっきりしたデータ構造という「AIが理解しやすい形」に寄っていました。AI経由の流入・引用（AIO）を考えるうえでは追い風です。
AI×SEOの実測データは以下の記事にまとめています。
>>AIで作ったサイトはSEOに弱い？63記事のサイトで検証した実測データ
結論：Webflowユーザーは今日試すべきか
結論：小さく試す価値は十分あります。ただし、全員が今すぐ本番投入すべき段階ではありません。判断基準は次の通りです。
今試す価値がある人
- すでにWebflowでサイトを運用していて、「フォーム→保存→一覧」程度の小さな機能を足したい
- 動くプロトタイプを最速で形にして見せたい
- 認証・DB・API連携の外部ツールを組み合わせる管理から抜けたい
まだ待った方がいい人
- 決済・基幹業務など、失敗できない要件をいきなり載せたい
- 受託案件で、保守費用・ランニングコストの見積もりを先に固める必要がある
- Webflowの外に既に開発スタックがあり、乗り換える理由が特にない
これから始める人へのロードマップ
いきなり巨大なアプリを作る必要はありません。まずはここから始めてみてください。
- 既存サイトの一機能を選ぶ（例：予約フォーム、会員限定ページ）
- App Genでバックエンドをセットアップ
- 生成された機能が想定どおり動くかテストする
- 成功パターンをテンプレート化する
まとめ：App Genは「小さく試す」段階として十分実用的
Webflowは「Webサイト制作ツール」から、Webアプリまで作れるプラットフォームへ広がりつつあります。実際に触った範囲では、UIはWebflow・バックエンドはプロンプトという役割分担は現実に動いていました。一方で、本番運用・料金・保守性はこれからの検証項目です。
【2026年8月追記】僕の結論：App Genで作ったものは、結局使いませんでした
正直な追記です。この記事で作ったものを、その後実案件で使うことはありませんでした。
理由はシンプルで、Claude Codeなどのコーディングエージェントが期待どおりに動くようになったからです。今後App Genを使う予定はまったくありません。すべてVibe Codingで作ってしまえばいい、というのが今の僕の結論です（Vibe Codingの解説記事）。
ただしこれは「開発の主戦場をどこに置くか」の話です。Webflowでサイトを運用していて、その中に小さな機能を足したい——という前提なら、上のGO/WAITの判断基準は今も変わりません。Webflowの外に出られるなら、外で作る方が速くて柔軟です。
Web春では、Webflowを使ったサイト制作・アプリ化の技術支援と、AI時代を見据えたAIO（AI最適化）の実装を行っています。「App Genをうちのサイトでどう使えるか知りたい」という方は、お問い合わせからお気軽にご相談ください。
よくある質問
Webflow App Genとは何ですか？
WebflowでUIを作り、やりたいことをプロンプトで伝えると、データ構造・処理フロー・フロントエンド接続の3点をWebflowの画面内に自動生成する新機能です。2025年にWebflow Cloudとあわせて登場しました。
Webflow App Genはプログラミング知識ゼロでも使えますか？
使えます。今回の検証でも日本語のプロンプトだけで動作しました。ただ「データベースとは何か」といった基礎知識があるとAIへの指示がより的確になり、品質が上がります。
App Genでは何が自動生成されますか？
プロンプトを投げると、必要なフィールドを持つCMS/データ構造、API的な処理フローであるロジック/アクション、フォームとDBを紐付けるフロントエンドの接続の3点が一気に生成されます。
既存のWebflowサイトもWebアプリ化できますか？
公式には、運用中のサイトに会員機能やダッシュボードを後付けできるとされています。ただし僕の検証は新規作成のみで、既存サイトへの後付けはまだ試していません。
Webflow App Genは今すぐ使うべきですか？
「フォーム→保存→一覧」程度の小さな機能追加やプロトタイプなら、今試す価値があります。決済・基幹業務など失敗できない要件は、事例と検証が増えるまで待つのが無難です。
筆者は現在もApp Genを使っていますか？
いいえ。App Genで作ったものを実案件で使うことはなく、Claude Codeなどのコーディングエージェントが実用レベルになって以降、開発はすべてVibe Coding（AIによる直接開発）に移行しました。Webflow内で完結させたい場合の選択肢としては引き続き有効です。
