ノーコードツールBubbleにAI機能が追加!使い方を実演付きで徹底解説!

日本時間 2024年6月14日午前3時頃にBubbleのAI機能の詳細が発表されました。
本記事ではBubbleに追加された2種類のAI機能の紹介から、実演付きで使い方まで徹底解説していきます。

この記事を読むだけで、BubbleのAIアップデート情報をキャッチアップできますので、ぜひ最後までご覧ください。


本記事の内容は下記のYouTube動画でも解説しています。ぜひ併せてご覧ください。


執筆者:山口 鳳汰
 

執筆者:山口 鳳汰
ノーコード開発専門メディア「Walkersメディア」編集長。
ノーコードの電子書籍を3冊出版し、1冊はAmazonベストセラーを獲得。

その他、受託開発や教育など多数のノーコード事業に参画している。

運営会社:株式会社Walkers

運営会社:株式会社Walkers
ノーコード専門の開発会社。
300件以上の開発/制作実績、200件以上の企業様を支援。
マーケティングやUI/UXと掛け合わせたサービス開発を得意としている。

執筆者:山口 鳳汰

執筆者:山口 鳳汰
「Walkersメディア」編集長。
ノーコードの電子書籍を3冊出版し、1冊はAmazonベストセラーを獲得。

運営会社:株式会社Walkers

運営会社:株式会社Walkers
ノーコード専門の開発会社。
これまでに300件以上の開発/制作実績、200件以上の企業様を支援。

クリックできる目次

Bubbleに追加された2種類のAI機能

①AIによるWebサイト制作機能

AIによるWebサイト制作機能の実演動画

BubbleではAIによって、Webサイトのデザインを自動で構築できるようになりました。

つまり、「AIによってフロントエンド構築を自動化できるようになった」というイメージです。

また、以下のAIモデルが使用されています。

  • 文章生成:GPT-4o
  • 画像生成:DALL-E、Stable Diffusion

AIによるWebサイト制作機能の使い方

STEP
Bubbleで新しいアプリを作成or既存ページの「Add new page with AI」をクリック
Bubbleの開発画面
開発画面
STEP
作成したいページの種類を選択

8種類から選択することができます。

Bubble AIの種類の選択画面
種類の選択画面
STEP
作りたいページを文章で指示

ここでは「Stylish cafe landing page(おしゃれなカフェのランディングページ)」と入力しています。

Bubble AIのページ詳細の入力画面
ページ詳細の入力画面
STEP
数十秒ほどでデザインが出力される
Bubble AIによってデザインが完成
AIによってデザインが完成

②AIによる開発ガイド作成機能

AIによる開発ガイド作成機能の実演動画

BubbleはAIによって、ステップバイステップの開発ガイドを作成できるようになりました。

この機能によって、たとえ初心者でもより迷わずBubble開発に取り組むことが可能になります。

AIによる開発ガイド作成機能の使い方

STEP
Bubbleのホーム画面から「Build Guides」をクリック
Bubbleのホーム画面
ホーム画面
STEP
作りたいアプリの種類を入力し「Generate my Build Guides」をクリック

ここでは「SNS application like Instagram(InstagramのようなSNSアプリ)」と入力しています。

Bubble AIガイドのアプリの種類の入力画面
アプリの種類の入力画面
STEP
表示されたガイドの「Follow 〇〇」をクリック
Bubble AIにより生成されたアプリ開発ガイド
AIにより生成されたアプリ開発ガイド
STEP
数十秒ほどでステップバイステップでガイドが表示される
Bubble AIにより生成されたステップバイステップの開発ガイド
AIにより生成されたステップバイステップの開発ガイド

Bubble AIの今後の方針

Bubbleは、今後AIに注力し「APIの接続」や「ワークフローの構築」まで自動で行えるよう改善していくと明言しています。

最近のBubbleではアップデートが多く開発の効率化が大きく進んでいるため、AI導入によって開発期間はさらに短縮され、より高速に開発が進む未来がそこに迫っていると感じます。


BubbleのAIアップデートの紹介は以上になります。この情報がお役に立てていれば嬉しく思います。

Walkersでは成果が実証されたノウハウをもとに、事業を成功に導くためのBubble開発支援を行っています。新規事業・システム開発でお悩みがある方はお気軽にご相談下さい。

Bubble開発支援サービスの概要はこちら>>

Walkersに無料で相談する>>

クリックできる目次