【超入門①】ノーコードBubbleの始め方〜アカウント作成 & 画面操作で迷わない！〜
この記事でわかること
Bubble のアカウント作成
Bubble のエディタ画面の基本的な構成と操作方法
対象読者
ノーコード開発初心者
Bubble を初めて使う人
プログラミング未経験者・初心者
Bubble アカウント作成
Bubble 公式サイトへアクセス
Bubbleを知ったきっかけの質問です。
どれか選択して次へ進みましょう。
AIアシスタントを受けるかどうかの質問です。
今回は使用せずに"Skip and take me to the editor"をクリックしてください。
フリートライアルを実施するかどうかの質問です。
14日間過ぎると課金が始まるので、今回は"Start with basic features"をクリックしてください。
この画面に到達したらアカウント登録完了です 🎉
Bubble エディタ画面の基本構成
エディタ画面の全体像
最初は難しそうに見えるかもしれませんが、大丈夫！各部分の役割を理解すれば、すぐに使いこなせるようになります。
この画面で最も重要なのは、左側のサイドバーです。各項目が何をするものなのか、具体例を交えながら説明していきます。
Design
アプリの見た目（UI）をデザインする場所です。できることの例:
ログイン画面のボタンや入力フォームを配置する
商品の画像や説明文を表示する
カレンダーを表示する
ポイント:
要素をドラッグ＆ドロップで配置し、プロパティ（色、サイズ、フォントなど）を調整して見た目を整えます。
Workflow
ユーザーの操作（クリック、入力など）に対して、アプリがどう動くかを設定する場所です。できることの例:
ユーザーがボタンをクリックしたら、別のページに移動する
入力されたデータをデータベースに保存する
ユーザーがログインしたら、マイページを表示する
ポイント:
「トリガー」（いつ）と「アクション」（何をするか）を組み合わせて、アプリの動作を定義します。
Backend Workflow（有料）
サーバー側で定期的に実行したり、特定の条件で自動的に実行される処理（バッチ処理、API連携など）を設定する場所です。
ユーザーの操作とは関係なく動きます。できることの例:
毎日決まった時間にメールを送信する
定期的に外部のAPIからデータを取得し、データベースに保存する
ユーザー登録から一定時間後にステップメールを送る
ポイント:
Workflowはユーザーの操作に反応して動くのに対し、Backend Workflowは、例えば毎日決まった時間にデータを自動的に更新したり、他のサービスと連携して情報を取得したりするなど、裏側で自動的に処理を行います。
Data
アプリで使うデータ（データベース）を定義・管理する場所です。できることの例:
商品名、価格、在庫数などの情報を管理する
ユーザーのプロフィール情報を保存する
ブログ記事のタイトル、本文、投稿日などを管理する
ポイント:
データの種類（テキスト、数値、画像、日付など）や構造（テーブル）を定義し、データを追加・編集・削除できます。
Styles
アプリ全体のデザインのスタイル（色、フォント、ボタンの形など）を統一的に管理する場所です。できることの例:
アプリ全体のテーマカラーを設定する
ボタンのスタイル（角丸、影など）を統一する
見出しのフォントサイズや色を設定する
ポイント:
ここでスタイルを設定しておくと、個々の要素のデザインを毎回細かく設定する必要がなくなり、デザインの一貫性を保てます。
Plugins
Bubbleの機能を拡張するための追加機能（プラグイン）をインストール・管理する場所です。できることの例:
Stripeと連携して決済機能を実装する
Google Mapsを埋め込んで地図を表示する
カレンダーやグラフなどの便利なUI要素を追加する
ポイント:
豊富なプラグインが用意されており、外部サービスとの連携や機能拡張を簡単に行えます。
Settings
アプリ全体の基本的な設定を行う場所です。できることの例:
アプリ名、ドメイン、アイコンを設定する
SEO設定（検索エンジン最適化）を行う
プライバシーポリシーや利用規約を設定する
ポイント:
アプリの公開前に必要な設定を行います。
Logs
アプリの動作ログ（エラー、実行履歴など）を確認する場所です。できることの例:
エラーが発生した時の原因を調査する
アプリの利用状況（ユーザー数、ページビューなど）を把握する
ワークフローの実行結果を確認する
ポイント:
問題が発生した時のデバッグや、アプリの改善に役立ちます。
上から順によく使う項目となっております。
語句の補足:
UI (ユーザーインターフェース): アプリの見た目や操作性のこと。
SEO (検索エンジン最適化): Googleなどの検索結果で上位に表示されやすくするための対策。
バッチ処理: 決まった時間にまとめてデータを処理すること。
API連携: 他のWebサービス（例えばGoogle MapsやStripe）の機能を自分のアプリで利用できるようにすること。
次のステップ
この記事では、Bubbleのアカウント作成とエディタ画面の基本操作について解説しました。
次は、実際にBubble UI BuilderでUI実装を体験してみましょう！