Contents
1. アカウント作成と無料トライアル取得
サインアップ手順（H3）
Bubble の公式サイトからアカウントを作る流れはシンプルです。以下のステップに従えば、数分で開発環境が用意できます。
- トップページ (https://bubble.io) 右上の 「Sign up」 をクリック
- 名前・メールアドレス・パスワードを入力し 「Create account」 を送信
- 登録したメールに届く認証リンクを開き、メールアドレスを確認
ポイント：Google・GitHub アカウントでのシングルサインオン（SSO）も選択可能です。SSO の設定は同ページ下部の「Sign up with Google / GitHub」から行えます【1】。
メール認証後にすべき初期設定（H3）
メール認証が完了すると、Welcome Tour が表示されます。この画面で 「Start free trial」 を選択すると、30 日間のフル機能が自動付与されます。続いて以下を設定してください。
- Workspace 名：例
MyFirstApp（後から変更可） - デフォルト言語：日本語か英語など、プロジェクト全体で使用したい言語を選択
- Billing information：無料期間中は入力不要ですが、トライアル終了前にリマインダーがメールで送られます【2】
これらの設定が完了すると、すぐにエディタ画面へ遷移できる状態になります。
2. プロジェクト作成と基本的な UI デザイン
新規アプリ作成画面の概要（H3）
「New App」ボタンをクリックすると表示される入力項目は次の通りです。各項目は後から変更可能なので、まずはざっくり決めておけば問題ありません。
| 項目 | 説明 |
|---|---|
| App name | 管理画面上で表示される名前（英数字・ハイフンのみ） |
| Template | 空白または公式テンプレート（Marketplace、SaaS など）を選択 |
| Plan | 無料トライアルが自動適用されるため、プラン選択は後で OK |
作成直後に「Settings」タブから ページ幅（デフォルト 1200 px） と モバイルブレークポイント（768 px） を自由に調整できます【3】。
レスポンシブ対応の基本操作（H3）
Bubble のエディタはドラッグ＆ドロップで UI を構築でき、レスポンシブ設定もビジュアルに行えます。まずは以下の手順でベースレイアウトを作りましょう。
- コンテナ要素 を左側パネルからキャンバスへドラッグし、幅・高さを「Auto」に設定
- グリッドレイアウト（行列数や間隔はピクセル単位で指定）を追加すると、デスクトップ時は複数列、モバイル時は自動的に 1 列へ折り返されます
- 各 UI コンポーネント（テキスト・ボタン・画像）は右側の 「Responsive」 パネルで表示/非表示ブレークポイントを個別に設定可能
この手順だけでも、モバイルファーストのデザインがスムーズに実装できます。アクセシビリティ属性（ARIA ラベル）やカラーコントラストは Bubble の「Accessibility」ガイド に沿って追加すると、社内レビュー通過率が向上します【4】。
3. ワークフローの基礎と条件付き表示・カスタムステート活用
条件付き表示で動的 UI を作る（H3）
Bubble の 「Conditional」 タブは要素単位で表示ロジックを設定でき、コード不要で高度な UI が実現します。
- 対象要素を選択し、右側プロパティの 「Conditional」 を開く
- 「When」フィールドに条件式（例：
Current User is logged in）を入力 - 条件が成立したときに適用するスタイル（表示・非表示、色変更など）を設定し 「Save」
実務でよく使われる例は、「ログインユーザー向けのマイページリンク」を表示し、未ログイン時はサインアップボタンだけを見せる、といったシンプルな切替です。
カスタムステートでロジックを簡素化（H3）
カスタムステート は要素に付随する一時的変数で、リスト型や計算式も保持できます。2024 年の UI では以下の流れで設定します。
- ボタンなどの要素に 「Set state」 アクションを追加し、
State nameをorderStepとする - 「Value」に数値リスト（例：
[1,2,3]）や条件式（例：Current User's role is "admin"）を入力 - 別要素の Conditional で
When Button orderStep contains 2のように参照すると、ステップ管理が一つのステートに集約できる
この手法は分岐が多数あるワークフローでも 1 つのカスタムステートでまとめられることから、メンテナンスコストを大幅に削減 できます【5】。
4. データベース設計と外部 API 連携
リレーションと検索インデックスの設定手順（H3）
Bubble のデータタブでリレーションやインデックスを正しく構築すると、クエリ速度が向上します。
- Data → Data Types でテーブル（例：
Orders）を作成 - フィールド追加時に「Type」を別テーブル（例：
User）に設定すると、自動的にリレーションが生成されます【6】 - 各フィールド右側の “i” アイコン をクリックし、「Index this field」 にチェックを入れると検索インデックスが作成され、一覧表示や絞り込みが高速化します
特に検索頻度が高い項目（メールアドレス・ステータス）は必ずインデックス化すると、クエリ実行時間が 0.2 秒以下 に収まります。
API Connector の基本的な使い方（H3）
外部サービスとの連携は公式プラグイン 「API Connector」 が中心です。設定手順は次の通りです。
- Plugins → Add plugins で「API Connector」をインストール
- 「Add another API」ボタンを押し、以下項目を入力
| 項目 | 設定例 |
|---|---|
| Name | ExternalCRM |
| Authentication | OAuth2 (Authorization Code) |
| Access token URL | https://example.com/oauth/token |
| Authorize URL | https://example.com/oauth/authorize |
| Automatically refresh token | ✓（自動更新） |
- API 呼び出しは GET /contacts?status=active のように設定し、ヘッダー
Authorization: Bearer <access_token>が自動付与されます【7】。
|
1 2 3 4 5 6 7 8 9 |
{ "method": "GET", "url": "https://api.example.com/v1/contacts", "params": { "status": "active" }, "headers": { "Authorization": "Bearer {{access_token}}" } } |
この設定だけで外部 CRM とリアルタイム同期が可能です。
5. テスト・プレビュー・公開の流れ
プレビューとデバッグ機能（H3）
エディタ右上の 「Preview」 ボタンをクリックすると、即座にアプリがブラウザで表示されます。変更は自動保存されるため、手動リロードは不要です。
- Debugger パネル では実行中のワークフローやカスタムステートの値をリアルタイムで確認でき、エラー時には赤いハイライトとスタックトレースが表示されます【8】。
カスタムドメイン・SSL の設定（H3）
| プラン | 月額 (USD) | カスタムドメイン | SSL 自動取得 |
|---|---|---|---|
| Personal | 29 | × | × |
| Professional | 129 | ○ | ○ |
| Production | 399 | ○ | ○（自動更新） |
- 設定手順：
Settings → Domain / Emailに移動し、CNAME レコードを指示通りに DNS プロバイダーへ追加すると、数分でドメインが有効化します。 - SSL 証明書は Let’s Encrypt と連携して自動取得・更新されるため、別途費用はかかりません【9】。
バックアップ・ログ・GDPR 対応（H3）
- Data → Backups で日次バックアップを有効化。Production プランでは 30 日間の保持が標準装備です。
- Logs タブ から API 呼び出しやデータ変更履歴を CSV 形式でエクスポートでき、監査要件に合わせて保存期間を設定可能です。
- GDPR 対応：
- 「Cookie Consent」コンポーネントでユーザー同意取得
- データ削除リクエストは
Workflow → Delete thingで自動化し、実行ログに残す - 通信は全て HTTPS + TLS 1.3 が必須（Bubble インフラが標準サポート）【10】
6. 料金プランと公式情報へのリンク
本記事で示した価格表は 2024 年 12 月時点の Bubble 公式ドキュメント に基づいています。プラン内容や価格は予告なく変更される可能性があるため、最新情報は必ず下記公式ページをご確認ください。
- 料金プラン一覧：https://bubble.io/pricing
- サインアップ手順（動画）：https://bubble.io/tutorials/signup
- ヘルプセンター：https://forum.bubble.io/
参考文献・出典
- Bubble Docs – Single Sign‑On (SSO) 設定, 2024年12月閲覧。
- Bubble Help Center – Free Trial の開始とリマインダー, 2024年12月閲覧。
- Bubble Docs – App Settings のページ幅・ブレークポイント設定, 2024年12月閲覧。
- Bubble Accessibility Guide, 2024年12月閲覧。
- nocode.love 調査レポート「カスタムステート活用によるワークフロー削減」, 2023年10月取得。
- Bubble Docs – Data Types & Relations, 2024年12月閲覧。
- Bubble Docs – API Connector の OAuth2 設定例, 2024年12月閲覧。
- Bubble Docs – Debugger の使い方, 2024年12月閲覧。
- Bubble Docs – Custom Domain と SSL 設定, 2024年12月閲覧。
- Bubble Security Overview – GDPR & TLS1.3, 2024年12月閲覧。