こんにちは！今回は、Bubbleの最新AI機能「AI App Generator」と、そこから見えるBubbleのAI開発の今後の展望についてご紹介します。
「AI App Generator」は、2025年3月末に公開されたPublic β版のAI機能で、UIだけでなくデータ構造やWorkflowまで自動生成できるのが特徴です。Bubbleの先行AI機能には「Build Guides」と「AI Page Designer」がありました（2024年6月発表）。AI Page Designerではページデザインしか生成できませんでしたが、AI App GeneratorではついにDataやWorkflowまで生成対象が拡大されました。
本記事では、AI App Generatorの使い方や生成されたアプリのレビューに加えて、BubbleにおけるAI機能開発の現在地と可能性を探っていきます。ノーコーダーの方や、短期間でのMVP開発を検討中の方はぜひご参考ください！
※この記事は2025年4月時点の機能・情報をもとに作成しています。AI App GeneratorはPublic β版のため、今後のアップデートで内容が変更される場合があります。
1. 概要
1.1. 機能概要
「AI App Generator」は、入力されたアプリの概要に基づきページデザイン、Data typeとサンプルデータ、Workflowを備えた「すぐに動く」アプリを数分で生成する機能です。2025年3月末にPublic β版機能として発表されました。
【主な特徴まとめ】
- プロンプトからUI、Data type、サンプルデータ、Workflowを生成。
- 日本語プロンプトに対応。ただし生成されるUIは英語表記。
- レスポンシブデザイン対応。
- 1ヶ月につき10アプリまで生成可能。
1.2. 料金
2025年4月時点では、AI App Generatorは全てのBubbleユーザーが無料で利用できます。
2. 使い方・生成結果レビュー
それでは、早速AI App Generatorの使い方と生成結果をご紹介していきます。
2.1. 使い方
AI App Generatorは下記のURLか、Bubbleのホーム画面（アプリ一覧）から利用できます。
プロンプト入力画面が表示されるので、生成したいアプリの内容を入力し、「Generate」をクリックします。
プロンプトは1～2文程度、最大でも500字程度（英語の場合）でまとめます。プロンプトには、アプリの名前やテーマカラー、スタイルなどの情報を含めると、よりイメージに合ったアプリが生成されやすくなります。ただし、ページのレイアウト詳細やAPIの呼び出し、プラグイン連携等には対応していないためそれらはプロンプトには含めないでください。
今回は下記の内容を入力しました。
ユーザーが仕事を掲載・検索できる仕事マッチングアプリ。企業や個人が募集内容を登録し、応募者は仕事内容・報酬・スキル条件などで検索・応募できる。ブルーを基調とした信頼感のあるシンプルなデザイン。
プロンプトの確認画面が表示されるので、「Generate blueprint」をクリックします。
次にBlueprint画面が表示されます。Blueprintはアプリのユーザーエクスペリエンスと主要機能の概要で、プロンプトの内容から「User stories」と「Key features」が生成されます。
- User stories…このアプリをエンドユーザーがどのように使用するかがまとめられます。
- Key features…このアプリのコアとなるタスクを達成するための主要な機能が羅列されます。
生成されたBlueprintを見ると、お仕事マッチングアプリの基本的な機能はカバーされています。
Blueprintを修正したい場合は、画面左上の「Refine your app Blueprint」に追加情報を入力することで「User stories」や「Key features」を追加することができます。今回は下記の内容を入力して送信します。
応募者が自分のプロフィールの登録・確認や応募した求人のリストを確認できるマイページを追加。
Blueprintが再生成されます。今回は、入力した内容に関するUser storiesとKey featuresが追加されました。
この内容で問題なければ、画面右上の「Generate」をクリックします。生成には5～7分かかると表示されています。今回は約5分で生成が完了しました。
生成が完了するとアプリのエディターが表示されます。
2.2. 生成結果
生成されたアプリを確認して、生成内容の正確性や生成範囲を評価していきます。
2.2.1. UI
まずは生成されたアプリのUIと基本的な挙動をDesignタブとPreviewで確認していきます。今回生成されたページは、404、パスワードリセットページを除くと5ページです。
| URL | ページ名 | ページ概要 |
|---|---|---|
| index | Job Search | トップの求人検索・応募画面 |
| applicant_dashboard | My Applications | 求職者向け応募状況確認画面 |
| employer_dashboard | Employer Dashboard | 企業向け応募状況確認画面 |
| job_postings | Job Postings | 企業向け求人情報確認・修正画面 |
| profile_management | Profile | プロフィール・アカウント設定画面 |
上記のページはナビゲーションから移動することができます。Previewを開いて各ページを確認していきます。
2.2.1.1. Job Search
まず、求人検索ページである「Job Search」が表示されます。上からヘッダーにナビゲーション、ヒーローセクション、求人検索欄、求人一覧、フッターが表示されています。ヘッダーとフッターは全ページで共通の要素です。
検索欄はKeywordとJob type、Locationの3項目から求人を絞り込めるようになっています。Search Buttonの検索は、merged withを使ってtitleまたはdescriptionにKeywordを含む求人を表示するように設定されていました。
各求人の「Apply Now」をクリックすると最低限の項目が含まれる応募ポップアップが表示しますが、レイアウトは崩れています。これは、プロフィール画像表示するImage要素のMax widthが100%になっていたためです。このレイアウトについては修正が必要ですね。
2.2.1.2. Job Postings
ナビゲーションの「Job Postings」をクリックすると、作成した求人に関する企業向けページが表示されます。上から新規求人作成ボタン、応募状況サマリ、自分が作成した求人一覧が表示されています。各求人の編集・削除・応募者の確認を行うことができます。
「Create New Job Listing」をクリックして新規求人を作成すると正常に作成され一覧に追加されました。
求人一覧では各求人のサンプルデータは表示されていますが、「Edit」をクリックして表示されるポップアップではプレースホルダーが空欄になっています。
自分が作成した求人一覧では、「Application」をクリックするとポップアップで応募者一覧が表示されるはずですが、Repeating GroupのData source設定に不備があるため表示されませんでした。
2.2.1.3. My Applications
ナビゲーションの「My Applications」をクリックすると、求職者向けダッシュボードページが表示されます。自分の応募状況のサマリ、簡易プロフィール、応募した求人の一覧が表示されます。
「Edit Profile」をクリックするとプロフィール編集ポップアップが表示されます。名前、ロール、プロフィール文の入力欄があり、それぞれプレースホルダーは空欄になっていますが登録情報の更新はできました。ロールが選択式ではなく自由入力になっている点が気になります。
応募した求人一覧ではクリックして求人の詳細を確認することができます。ステータスでの絞り込み機能も実装されていますが、ChoicesはStaticで設定されています。
2.2.1.4. Employer Dashboard
ナビゲーションの「Employer Dashboard」をクリックすると企業向けダッシュボードページが表示されます。求人の応募状況サマリー、応募状況のリストが表示されています。
応募状況のリストではImage要素のレイアウト設定不備のため空白の応募者のプロフィール画像がページ幅いっぱいに表示されています。スクロールして確認すると、求職情報の下部に応募者の名前と詳細確認等のアクションボタンが表示されています。また、リストのRepeating GroupのData sourceの設定が不完全でした。
2.2.1.5. Profile
ナビゲーションの「Profile」をクリックすると、ユーザーのプロフィール画面が表示されます。この画面では「My Applications」の「My Profile」欄と同じプロフィールと、アカウント設定欄が表示されます。
「Edit Profile」をクリックするとプレースホルダーが空欄の編集ポップアップが表示されます。これは「My Applications」のプロフィール編集ポップアップと同じですが、「Role」欄は先のページとは異なりJob SeekerかEmployerを選択できるようになっています。この登録方式は統一した方がよさそうです。
また、「Privacy Settings」のラジオボタンにはクリックWorkflowが設定されていませんでした。
2.2.1.6. 共通
ここまでご覧の通り、各ページの概要と機能の全体が初見でも分かるようにデザインされていました。レスポンシブデザインや、ユーザーのログイン状態に合わせたLog in Button等の表示切替Conditional設定も実装されていました。
できていなかった点としては、一部のRepeating Groupの適切なData source設定、一部のImage要素の適切なレイアウト設定、Signin・Signup等の同一Popupやヘッダー・フッターのReusable化が挙げられます。
2.2.2. 機能
ページ全体のレビューを踏まえて、実装されている機能を確認します。下記の表でBlueprintのKey featureの内容から対応する機能が生成できているかを確認します。
| Key feature | 機能概要 | 生成有無（ページ名） |
|---|---|---|
| Job Posting and Management | 職種、給与、必要なスキルなどの詳細を含めた求人情報を作成・更新・削除できる機能。 | 〇：該当機能あり（Job Postings） |
| Job Search | 職種・勤務地・給与範囲・必要スキルなどの条件で求人を検索できる機能。 | △：雇用形態、勤務地は検索条件として設定可、その他はKeywordとして検索可（Job Search） |
| Apply for Job | 応募情報の入力から送信までを効率的に行える求人応募機能。 | 〇：応募時の一言と履歴書のアップロードのみで簡単に応募可（Job Search） |
| Application Review | 求人の応募内容を閲覧・管理できる機能。 | 〇：該当機能あり（Employer Dashboad） |
| User Registration and Profile Management | 求職者としての希望や企業の情報を含めたユーザー登録・プロフィール更新機能。 | ✕：求職者としての希望を登録する機能はなし（Profile） |
| Applicant Dashboard | 求職者がプロフィールの確認・更新や、これまでの応募履歴の確認ができるダッシュボード機能。 | 〇：該当機能あり（My Applications） |
上記を踏まえると、プロンプトの企業や個人が募集内容を登録し、応募者は仕事内容・報酬・スキル条件などで検索・応募できるから推測できるような求人の検索・応募・応募状況の確認、求人情報の作成・管理といった基本的な機能は実装されていました。さらに、Key featureの80%の内容は実装できていると言えます。
2.2.3. Workflow
全PageのWorkflowを確認したうえで、Workflowの完成度を評価します。
Blueprintの内容に基づきPage遷移、Popup表示、データの作成・更新・検索といった基本的なWorkflowを作成できていました。
問題点を挙げるとすると、ButtonクリックでPopupを表示するWorkflowでDisplay data Actionがないものがいくつかあった点です。例えば「My Applications」の「Edit Profile」Buttonや、「Profile」の「Edit Profile」Buttonクリック時です。この2つはデータの更新用Popup表示のWorkflowなので、現在のデータをPopupに表示できないのは致命的ですね。
また、ユーザーのログイン状況に応じたリダイレクト設定や要素の表示切替設定もされていませんでした（ヘッダーのLog in・Log out Buttonの表示切替は実装済み）。
修正すべき箇所はいくつかありましたが、生成されたWorkflowをベースにActionを追加して機能を拡充すると考えると拡張性も十分です。
2.2.4. Data
AI App Generatorではサンプルデータも生成されます。Data typeとサンプルデータ、Privacy ruleを確認します。
AI Page Designerでは、Pageのリストに表示されるサンプルテキストは静的テキストでした。AI App Generatorでは、生成してData typeに保存されたサンプルデータを表示します。今回生成されたData typeはApplications（求人への応募）、JobListings（求人）で、両Data typeとデフォルトのUsersについてサンプルデータが生成されています。
Data typeとField、サンプルデータの内容は最低限に絞られていますが適切です。UsersにはPageで使用されているプロフィール画像Fieldがありませんが、それ以外は基本的に必要なFieldが備わっています。
ただし、AI App GeneratorではOption setは生成されません。今回の例では、Usersのroleやlocation、JobListingsのjob_typeはOption setを作成した方がドロップダウンの設定やページの非表示設定にも便利なので、生成後に手動でOption setを作成して差し替えるのがおすすめです。
ちなみに、ドロップダウンのChoicesにはStatic textが設定されています。
なお、Privacy ruleについては、Usersの「User’s own data」が更新されており、emailなど一部のFieldが「Everyone else」に対して非表示に設定されていました。それ以外は生成されていませんでした。
3. Bubble AI今後の展望
2024年6月に公開されたAI Page Designerと最新のAI App Generatorを比較すると、UIレイアウトだけでなくData typeとサンプルデータ、Workflowが生成されるようになったのは大きな進歩です。ただ、複数回使用される同一の要素がReusable化されてない点や、Privacy ruleやリダイレクト等のセキュリティが不完全である点、自然言語による再編集・一部編集は未対応でアプリの新規作成が前提である点等の課題は残ります。
2025年4月に開催された「Bubble創業者によるAIビジョンAMA」では、Bubbleの強みは非エンジニアでも扱える「本物のビジュアル開発言語」にあるとし、Bolt.newやCursor等のコードを前提とするAIツールとの差別化を図っていく方針が示されました。これらのツールは自然言語による生成が可能とはいえ、コードの読解や記述が前提となっているため非エンジニアにとっては依然としてハードルが高いという指摘です。一方で、Bubbleは視覚的な開発環境をベースにしていることが非エンジニアによる継続的なアプリ運用・改善において有利であると強調しました。
ここではAI分野に関する具体的なロードマップの発表はありませんでしたが、今後もAI機能のアップデートに注力していく姿勢が示されました。
なお、直近のアップデートとしては自然言語による反復的な開発（機能追加、バグ修正、デザイン改善）機能の実装が予定されており、2025年中の提供を目標に開発が進められています。Bubbleの公式ブログではBubbleが目指すAI開発の未来像は「自然言語の直感性」と「ビジュアル開発の透明性・制御性」の両立であるとし、この反復的な開発機能においても「何が・どのように変わったか」がユーザーに明確に見える仕組みを重視しているとしています。
4. まとめ
今回は、BubbleのAI機能AI App Generatorについてご紹介しました。AI App Generatorは自然言語からUI・Workflow・データ構造およびサンプルデータを一括生成する強力なAI機能で、非エンジニアによるプロトタイプ作成の敷居を大きく下げることにつながりました。レイアウトやWorkflowの設定、再利用性のある構造や機能の対応が不十分であるといった懸念点はありますが、手動での修正を加えながらであれば十分活用できる完成度でした。
今後は自然言語による再編集機能やセキュリティ対応の強化が期待されています。実運用に向けた進化を楽しみに待ちましょう！
