Contents
Bubble AI機能の活用でノーコード開発を加速する理由
ノーコード開発を始めたばかりの人にとって、UIデザインやアプリケーション構築は時間と試行錯誤が必要な作業です。BubbleのAI機能（Build Guides/AI Page Designer）は、こうしたプロセスを劇的に簡素化し、初心者でも直感的に使えるツールとして注目されています。特に「AI生成機能」をクリックするだけで、プロンプト入力からデザイン生成までが自動化される点が魅力です。本記事では、AI機能の使い方をステップバイステップで解説し、実務での活用シーンを具体化します。
Build Guidesの機能概要と活用シーン
Build Guidesは、既存アプリケーションの検索・参照機能を通じて、アイデア構築やテンプレート選定を効率化するツールです。 新規事業企画者なら誰もが直面する「何から始めれば良いか分からない」という悩みに、具体的なソリューションを提供します。
ガイド検索の手順
Build Guidesには検索バーがあり、キーワード（例：「サブスク型サービス」「ニュースフィード」）を入力することで、目的に合ったアプリケーションやUI構成が一覧表示されます。
テンプレート比較と選定方法
検索結果から用途に応じたテンプレートを選定できます。
| カテゴリ | テンプレートA（ニュースフィード型） | テンプレートB（サブスク管理型） |
|---|---|---|
| 対象ユーザー | 一般ユーザー | 管理者・会員 |
| 機能の特徴 | 高頻度の更新UI | 支払い処理・期限管理 |
| デザインスタイル | シンプルなカードレイアウト | 複数タブによるセグメント化 |
AI Page Designerでプロンプト入力からデザイン生成まで
AI Page Designerは「自然言語」でUI設計を指示し、一気にデザインを生成する機能です。 例えば、「ホーム画面にログインボタンとニュースフィードを並べてほしい」と入力するだけで、AIがレイアウト提案します。
UI設計の指示方法
- 明確な目的の提示：「サブスク型サービスのホーム画面で、ユーザーの登録状況を可視化したい」
- 要素の指定：「左側にプロフィール画像と名前、右側に有料プランの特典一覧を表示させて」
追加事例: ECサイトのカート表示を設計する際には、「商品画像・価格・数量変更ボタンを縦並びで配置し、チェックアウトリンクを下部に設置してください」と指示可能です。
生成後の要素配置修正手順
AIが生成したデザインは、ドラッグ＆ドロップで微調整可能です。例として、「ニュースフィードのカード間隔を広げる」「ログインボタンを中央寄せに変更する」など、UIをカスタマイズしながら最適な状態に近づけます。
- 生成されたコンポーネントを選択
- 「ドラッグ＆ドロップ」で位置調整
- 必要に応じてスタイルパネルから色・フォント変更
生成結果のカスタマイズ編集フロー
AI Page Designerで生成したデザインはノーコードで自由に編集可能です。 ドラッグ＆ドロップによる要素移動や、カラーやフォントの微調整が簡単に行えます。
編集操作の手順
- 要素をクリックし、好きな位置へドラッグ
- スクロールバーで表示領域の再配置も可能
カラーやフォントの変更方法
- 「色」ツールからカラーパレット選択（RGB値入力可）
- 「スタイル」パネルでフォントサイズ・太さを変更
注意点：AI生成されたコンポーネントによっては、編集可能な範囲に制限がある場合があります。事前に「エディタモード」で確認しましょう。
実務シーンでの2つのAI機能の連携活用
Build GuidesとAI Page Designerを組み合わせることで、事業企画から開発に至るまでのワークフローがスムーズになります。
ワークフローのステップ
- コンセプト設計段階: Build Guidesで類似アプリのテンプレートを検索・確認（例: Bubble公式ドキュメント）
- テンプレート選定後: AI Page Designerに「この構成をもとにデザイン生成してください」と指示
- カスタマイズ段階: 生成したUIをノーコードで調整し、プロトタイプへ
事例: ノーコード開発者コミュニティ（例: No-Code Slack Community）では、Build GuidesとAI Page Designerの連携活用が広く共有されています。
実装前後の使い分け戦略
- 初期設計（Build Guides）: 既存の構造やUI要素を参考にアイデアを固める
- 実装前デザイン（AI Page Designer）: 具体的な画面レイアウトの作成と調整を行う
AI生成機能の使い方と動画での確認方法
最後に、BubbleのAI生成機能を実際に体験するための動画をご覧ください。 今回は「プロンプト入力からデザイン生成までの流れ」を視覚的に解説します。動画では以下の内容を確認できます：
- Build Guidesでのテンプレート検索方法
- AI Page Designerによるプロンプト入力とデザイン提案
- 生成後のUI調整手順（ドラッグ＆ドロップ・カラーチェンジ）
ぜひこの機会に、AI生成機能をクリックして、ノーコード開発の可能性を感じてみてください。