ノーコードツールBubbleの使い方を徹底解説

「プログラミングはできないけど、自分のアイデアを形にしたい」

そんな願いを叶える最強のツールが、ノーコードプラットフォーム「Bubble（バブル）」です。

Bubbleは直感的なドラッグ＆ドロップ操作だけで、InstagramのようなSNSや、Airbnbのようなマッチングサイトまで作れてしまう、非常に拡張性の高いツールです。

この記事では、Bubbleのアカウント作成から、開発画面の詳しい見方、そして実際にアプリを作る際の手順までを徹底解説します。

Bubbleとは？何ができるツールなのか

Bubbleは、コードを書かずにWebアプリケーションを開発できるノーコードツールです。

単なるWebサイト制作だけでなく、以下のような高度な機能を持ったアプリを作ることができます。

• ユーザー登録・ログイン機能
• データベースの構築・管理
• データの検索・絞り込み
• 外部サービス（Stripe決済やGoogle Mapsなど）との連携

プログラミング知識がなくても、ビジネスレベルのWebサービスを構築できるのが最大の特徴です。

【Step 1】アカウント作成と初期設定

まずはBubbleのアカウントを作成しましょう。無料で始められます。

1. Bubble公式サイトにアクセスし、「Get started」をクリックします。
   
2. メールアドレスとパスワードを入力、またはGoogleアカウントで登録します。
   Webサイトにアクセスしたら、「Get started for free」ボタンをクリックします。
3. アンケート（利用目的など）に回答します。
4. 登録メールアドレスに届く認証メールを確認し、リンクをクリックして完了です。
   認証メールを開き、「Click here to confirm your email address」をクリックします。

アカウントができたら「Create an app」から新しいアプリを作成し、エディタ画面を開きましょう。

【Step 2】開発画面（エディタ）の7つのタブを理解する

Bubbleでの開発は、画面左側にある7つのタブを切り替えながら行います。

それぞれの役割をしっかり理解することが、脱初心者の第一歩です。

タブ名	役割	具体例
Design	画面の見た目を作る	ボタンやテキストの配置、色の設定
Workflow	動き（処理）を作る	「ボタンを押したらページ移動する」設定
Data	データを管理する	ユーザー情報や商品データの保存・編集
Styles	デザインを統一する	フォントやボタンの共通スタイル管理
Plugins	機能を拡張する	決済機能やAPI連携の追加
Settings	アプリ全体の設定	料金プラン変更、独自ドメイン設定
Logs	稼働状況の確認	アクセス数やエラーログの確認

1. Design（デザイン）タブ

アプリの見た目を作る場所です。「UI Builder」でエレメント（部品）を配置し、「Responsive」でスマホ対応などのレイアウト調整を行います。

Design（デザイン）タブでは、アプリケーションの外観とユーザーインターフェース（UI）を設計できます。

ページのレイアウト、テキスト、ボタン、画像などのエレメントを編集し、アプリケーションの見た目をカスタマイズできます。

例えば、ボタンの色やサイズを変更したり、テキストを編集したりすることができます。

UI Builderの画面

各エレメント幅や高さを設定する。（設定）
エレメントのテキストを修正する場合、エレメントをダブルクリックすることでテキストを編集できます。

• Elements tree：どのエレメントの中に含まれているのか確認する。
• Visual elements：テキスト、ボタンなど視覚的なエレメントの選択をする。
• Containers：各エレメントをまとめる（グループ）。
  繰り返し表示する「リピーティンググループ」「ポップアップ表示」を作成できる。
• Input forms：テキストの入力フォーム、チェックボックスなどを作成できる。
• Reusabule elements：再度使用するエレメントを登録できる。
• Element templete：「タブが配置されているエレメント」などのテンプレートが用意されている。

Responsiveの画面

レスポンシブデザインとは、スマホやPC、タブレット端末など、画面幅が変わるときでもページのレイアウトを崩すことなくきれいに表示するための技術です。PCだけでなく、スマホやタブレットなど様々な端末からページを見るようになった現在では、必須の技術と言えるでしょう！

Responsive画面では、デバイスごとの表示画面の確認・画面サイズを変更できます。

携帯タブレットパソコンの画面の幅の違いによってエレメントの表示（幅、高さ、配置）を確認できる。（確認）

また、エレメント別にレスポンシブ設定することもできます。

レスポンシブデザインの実装方法は複雑なので以下の記事で詳細を説明します。

2. Workflow（ワークフロー）タブ

Workflow（ワークフロー）タブでは、アプリケーションの機能を定義し、制御することができます。

特定のルールを設定することで、アクションの自動化ができます。

「もし（When）～したら、～する（Do）」という形式で、アプリの動作を設定します。

例：「送信ボタンが押されたら（When）」→「メールを送る（Do）」

以下の記事で「Workflowタブ」の具体的な使い方を解説しています。

3. Data（データ）タブ

アプリの裏側にあるデータベースです。「Data types」でデータの箱（テーブル）を作り、「App data」で実際の中身を確認・編集できます。

Data（データ）タブでは、アプリケーションのデータベースを設定/管理できます。

データベーステーブルの作成と設定、データのインポートやエクスポート、データフィールドの設定などが行えます。

以下の記事で「Detaタブ」の具体的な使い方を解説しています。

Styles（スタイル）タブ

Stylesタブとは、各エレメントの書式テンプレートの管理をするタブです。

Styles（スタイル）タブでは、アプリケーションのスタイルに関する設定を行うことができます。

ここでは、テキストのフォント、背景色、ボーダーなどのスタイルをカスタマイズできます。

例えば、アプリケーション全体のカラーテーマを設定することができます。

作成、編集、削除ができます。

例、フォント、文字サイズ、文字色など。

Plugins（プラグイン）タブ

Pluguinsタブとは、外部連携や追加機能を手軽に導入できるプラグインを管理するタブです。

Plugins（プラグイン）タブでは、アプリケーションに追加機能を統合することができます。

Bubbleは多くのプラグインを提供しており、地図、ソーシャルメディア連携、決済システムなどの機能を簡単に追加できます。

プラグインのインストール、アンインストールができます。

例えば、Google Mapsプラグインを使用して、地図表示機能を追加できます。

例、ストライプの決済機能の導入、Twitterのソーシャルログインなど。

Settings（セッティング）タブ

Settings（セッティング）タブでは、アプリケーション全体の設定を管理できます。

ここでは、セキュリティ設定、ドメイン設定、データベース設定などを行います。

例えば、SSL証明書を設定して通信のセキュリティを強化したり、カスタムドメインを設定してアプリケーションのURLをカスタマイズしたりすることができます。

このタブを使用して、アプリケーション全体の動作を調整し、セキュリティを強化できます。

例、アプリの料金プラン変更、カスタムフォントの設定などの設定。

＊翻訳設定で日本語に設定できますが、翻訳対象範囲が限られているため、見た目にあまり変化はありません。

Settings（セッティング）タブ

Settings（セッティング）タブでは、アプリケーション全体の設定を管理できます。

ここでは、セキュリティ設定、ドメイン設定、データベース設定などを行います。

例えば、SSL証明書を設定して通信のセキュリティを強化したり、カスタムドメインを設定してアプリケーションのURLをカスタマイズしたりすることができます。

このタブを使用して、アプリケーション全体の動作を調整し、セキュリティを強化できます。

例、アプリの料金プラン変更、カスタムフォントの設定などの設定。

＊翻訳設定で日本語に設定できますが、翻訳対象範囲が限られているため、見た目にあまり変化はありません。

Settings（セッティング）タブの設定例

Settingsタブでは、プラン変更、セキュリティ設定、ドメイン設定、データベース設定などを行うことができます。

Bubbleのプランの変更手順

以上がBubbleの主要なタブの使い方です。

各タブは特定の目的に沿った機能があり、アプリケーション開発を効率的に行うためにはタブの機能を使いこなすことが不可欠です。

プロジェクトに合わせてこれらのタブを活用し、アプリケーションを開発しましょう。

Logs（ログ）

ログタブとは、サーバーの使用状況やワークフローの実行回数の統計情報を確認できるタブです。

Logs（ログ）タブでは、アプリケーションの動作ログを表示することができます。

ここでは、ユーザーアクションやエラーメッセージなどが記録され、トラブルシューティングや監視に役立ちます。

例えば、ユーザーが特定のページにアクセスした際のログを確認できます。

これらのタブを適切に活用することで、Bubbleを使ったアプリケーション開発を効率的に進めることができます。

それぞれのタブは特定の役割を果たし、タブを理解して使いこなすことで、円滑に開発を進めることができます。

【Step 3】アプリ開発の実践手順

実際の開発は、以下の流れで進めるとスムーズです。

1. データベース設計（Data）： どんなデータが必要か（ユーザー名、投稿内容、画像など）を定義します。
2. 画面作成（Design）： 必要なページを作成し、テキストや入力フォームを配置します。
3. 動きの設定（Workflow）： 「保存ボタン」にデータを保存する処理などを設定します。
4. レスポンシブ対応： PCだけでなくスマホでも綺麗に見えるよう調整します。
5. プレビュー確認： 右上の「Preview」ボタンで実際の動作をテストします。

重要！レスポンシブデザインの基礎

Bubbleで躓きやすいのが、画面幅に合わせてレイアウトを変える「レスポンシブ設定」です。

Designタブの「Layout」設定で、以下のポイントを意識しましょう。

• Container layout： 要素の並び方（Column=縦並び、Row=横並び）を決めます。
• Width / Height： 「Fixed（固定）」のチェックを外し、％やpxで最小・最大幅を指定することで、画面サイズに応じて伸縮させます。

まとめ：まずは手を動かして慣れよう

Bubbleは機能が多いため、最初は戸惑うかもしれません。

しかし、「Designで作って、Workflowで動かす」という基本さえ押さえれば、驚くほど自由にアプリを作れるようになります。

まずはチュートリアルを触ったり、簡単なToDoアプリを作ったりして、操作に慣れていきましょう。