Bubbleの使い方を現役エンジニアが解説！画像付きで初心者でも安心です！
低コスト・高速なプロダクト開発手段として、特に新規事業や社内DXのMVP開発等において急速に浸透してきているノーコード開発。
そして数あるノーコードツールの中でも、国内外問わず多くのシェアを誇るのがBubbleです。
従来のプログラミング開発にも劣らない開発柔軟性と、実運用に耐えうる品質担保が可能なツールとして知られるBubbleですが、その分使いこなすことが難しいのも事実です。
本記事ではそんなBubbleの使い方について、アカウント開設からアプリ公開までの手順や開発画面の見方、操作方法を詳しく解説します。
- Bubbleを社内で導入しようとしているが、使い方が分からない
- Bubbleを学んで、エンジニアとしてのスキルセットを広げたい
このような方はぜひご覧ください。
当社SwoooはBubble開発において国内トップレベルの実績を有し、以下のような強固な体制で多くの企業様の新規事業やDXプロジェクトを支援してきました。
- 国内初のBubble公式開発認定試験合格者が在籍
- 日本で3つしかないBubbleシルバーエージェンシーに認定
- 営業・マーケまで包括的に支援可能
そんなSwoooのBubble開発ノウハウを体系的に学び、自身のスキルアップや内製化に生かせるオンラインスクール「Swooo BootCamp」も運営しております。Bubbleを本格的に学びたいエンジニアや企業様はぜひ無料相談にお申し込みください。
▼Bubble学習の基礎を無料動画で学びたい方はこちら
目次
- ノーコードツールBubbleの使い方：初めて利用する方はこちら
- ノーコードツールBubbleの使い方：開発画面の見方や操作方法はこちら
- Design（デザイン）タブ｜アプリのフロントエンド構築はここから行う
- Workflow（ワークフロー）タブ｜データの処理ロジックの構築はここから行う
- Data（データ）タブ｜データベースの構築や個別データの管理はここから行う
- Styles（スタイル）タブ｜複数画面、複数箇所で再利用したいデザインの管理はここから行う
- Plugins（プラグイン）タブ｜アプリの機能を拡張したいときに活用する
- Settings（セッティング）タブ｜アプリの基本的な設定はここから行う
- Logs（ログ）タブ｜サーバーログの確認はここから行う
- 補足① – Backend Workflow（バックエンドワークフロー）｜サーバーサイドでのデータ処理はここから実装する
- 補足②｜Bubble開発がさらに円滑に進むTipsを3個紹介！
- ノーコードツールBubbleの使い方：アプリの公開はこちら
- まとめ｜ノーコードツールBubbleの使い方を最短で覚えたい方は「Swooo BootCamp」
ノーコードツールBubbleの使い方：初めて利用する方はこちら
他のノーコードツールすべてにも当てはまることですが、ノーコードの利用にはまずアカウント登録が必要となります。Bubbleを一度も使ったことがない方は、まずアカウント登録から進めていきましょう。
また、Bubbleはすべて英語での表記となっておりますが、一度慣れてしまえば読解に苦労することはあまりありません。どうしても英語が苦手という方は、ブラウザの自動翻訳機能などを活用して利用すればほとんど問題ないでしょう。
アカウント登録〜ログイン｜まずは簡単な情報入力のみでOK！
まずはBubbleのアカウント登録画面から、メールアドレスとパスワードを入力してアカウントを開設しましょう。
Googleアカウントをお持ちの方は、Googleログインを利用した登録も可能です。
パスワードは以下の条件を満たす必要があります。
- 8文字以上の文字列であること
- 1文字以上の数字を含めること
- 1文字以上の大文字アルファベットを含めること
- 1文字以上の半角記号を含めること
開発物の機密情報漏洩などにもつながりかねない非常に重要な工程ですので、画面の指示に従い、外部に知られにくい強固なパスワードを設定し、管理しておきましょう。
入力を終えると、簡単なアンケート画面が続きます。
Bubbleを知ったきっかけや、Bubbleの利用目的などについて問われますが、回答内容によって利用に制限がかかることはありませんので、簡単に入力してしまっても構わないでしょう。
アンケートを終えると、以下の添付画像のように、Bubbleに搭載されたAI機能の活用が提案されます。作りたいアプリの概要を記入すると、それに従ってアプリの叩き台を高速で開発してくれます。
これを活用して開発に取りかかるのも非常に有用ですが、今回はあくまで自身の力でBubbleの基本的な操作をできるようになることを目指した記事ですので、詳細は省略させていただきます。
最後に有料プランの2週間無料トライアルが提示されます。アプリの公開や独自ドメイン設定のためには有料契約をする必要がありますが、基本的な画面操作や開発学習の範囲であれば、無料プランで十分でしょう。
ここまで終えると、早速新規アプリの開発画面に移行しますが、まずはBubble使用の全体像を掴むために、ダッシュボード画面の説明からさせていただきます。
Bubbleのダッシュボード画面の解説｜開発物の管理、アカウント設定などはここから行う
開発画面の左上のBubbleアイコンをタップし、「Back to my apps」をタップすると、ダッシュボード画面に進むことができます。
Apps：立ち上げたアプリの管理はこちらから行う
ダッシュボードに移動すると、最初はAppsというページに入ります。
ここでは、自身のアカウントで立ち上げたアプリを一覧で確認・管理することができます。
各アプリの記載箇所をタップすると、アプリ名の変更や開発画面への移動、削除などが可能です。
一覧の上部にある検索窓からは、フリーワード検索やアプリの並べ替えも行えるので、効率的にアプリの管理ができるUIとなっております。
Build Guides：Bubble AIからアプリ開発の技術的な提案が受けられる！
続いて、Build Guidesという画面について説明します。
これはBubbleに新規搭載された機能になっており、Bubble AIがアプリ構築をサポートしてくれます。作りたいアプリの概要を入力すると、
- アプリに必要な機能
- 実装にかかる工数
- 機能開発の手順
- データベース設計の立案
など、技術的な側面を中心にBubble AIが開発推進の提案をしてくれます。
一例として、「ビジネスマッチングアプリを開発したい」と入力してみます。
すると以下のように、マッチングアプリに必要な機能とその難易度をわかりやすく提案してくれます。
各機能を押下すると、機能の構築手順や、実装に必要なデータベースの立案までAIが行ってくれます。
▼ユーザー登録/ログイン機能の提案の例
開発物の事業フェーズや予算によっても開発ボリュームや各機能の必要度は変わりますが、アプリ開発においてはその優先度をつける基準が見えづらいことがプロジェクト推進を妨げる大きな要因となります。随時この機能を利用することで、機能単位で開発の推進是非の判断の一助を得ることができるため、特にBubbleや開発の初学者にとっては非常に有用な機能と言えるでしょう。
無料アカウントであっても提案の生成数に上限はなく、過去の内容を再入力することで過去の提案を後から見返すことができる点も非常にありがたい特徴です。
Templates：導入あるいは自作したテンプレートを管理できる
続いて、Templates画面を説明します。
BubbleにはAIの他に、Bubble自身やBubble開発のエキスパートが公開したアプリのテンプレート（無料・有料さまざま）が数多く提供されており、またテンプレートを自作することもできます。
自身が購入あるいは自作したテンプレートを、Appsと同様のUIで検索・管理できるのがこの画面です。
一般公開されているテンプレートは「Marketplace」というページから検索、購入が可能です。
Plugins：自作したプラグインを管理できる
続いてPlugins画面です。
Bubbleでは、テキストやボタン、画像アップロードなどの基本として備わっている実装機能に加えて、Stripe（決済機能）やLINE、Google等を利用したソーシャルログインなど、外部ツールとの連携によって機能を拡張することができます。
そのような機能を、外部公開されているプラグイン（こちらも無料・有料問わずさまざまです）を導入することで、より高速に実装することが可能となります。
このプラグインも自作することが可能で、この画面では自作したプラグインを管理することができるようになっています。
外部公開されているプラグインも、先述のMarketplaceから検索、購入することができますので、ぜひ利用してみてください。
Account, Billing：アカウント設定や支払いの管理ができる
続いて、アカウント設定や支払い周りのページを紹介します。
これはダッシュボード右上のアイコンをタップすると現れるメニューから移動できます。
この画面では、Bubbleアカウントの設定（名前、アイコン、メアド・パスワードの管理など）や、2段階認証の導入、メール通知の設定、支払い情報の管理を行うことができます。
その他、Bubble開発に関する公式レクチャー動画や、Bubble公式ブログ、Bubble公式フォーラム（開発に関する疑問等をBubbleユーザーや公式ユーザー同士で質問、回答できる場）も提供されているので、随時活用すると良いでしょう。
特にレクチャー系のコンテンツは英語だと理解しづらいこともあると思いますので、必要であればSwooo BootCampのような日本のBubble開発会社が提供している研修・スクールを活用することで学習効率をあげることがおすすめです。
ノーコードツールBubbleの使い方：開発画面の見方や操作方法はこちら
ダッシュボードの概要を解説したところで、ここからはアプリの開発画面（エディター）の見方や操作方法を説明していきます。
エディターは以下にあげる大きく7つのタブに分かれています。
- Design
- Workflow
- Data
- Styles
- Plugins
- Setings
- Log
Design（デザイン）タブ｜アプリのフロントエンド構築はここから行う
まずはDesignタブの解説です。
ここでは、画面上のボタンやテキストなどのエレメントや、画像ファイルのアップロード箇所の配置など、アプリのフロントエンドを構築することができます。
ボタンやテキストボックスなどの要素をドラッグ＆ドロップするだけで簡単に画面デザインを作成できます。レイアウトやデザインを自由にカスタマイズし、思い通りのアプリ画面を構築しましょう。
UI BuilderでPC向けの画面を実装したのち、Responsiveタブに移動すると、スマホ画面でのデザイン調整や確認まで行うことが可能です。
Workflow（ワークフロー）タブ｜データの処理ロジックの構築はここから行う
Workflowタブでは、アプリが動く仕組みを作ります。例えば、「ボタンをクリックしたらデータを保存する」といった処理ロジックを設定することができます。視覚的に条件を設定できるため、初心者でも簡単にロジックを組み立てられます。
以下の例では、「Button Aをクリックしたとき」をトリガーとして、
- アカウントを新規登録する
- 登録完了後に、別のページへ遷移する
という処理ロジックを構築しています。
Data（データ）タブ｜データベースの構築や個別データの管理はここから行う
Dataタブでは、アプリで使うデータを管理します。データベースの構造を作ったり、保存されたユーザー情報などを確認・編集できます。初めての方でも、表形式で直感的に扱えるので安心です。
デフォルト状態では以下のようにUserテーブル（BubbleではテーブルをData Typeと呼びます）と4つのデータカラム（Data Fieldと呼びます）が備わっており、これらは削除不可能ですが、これに加えて様々な設計を追加することで、アプリに必要な処理ロジック・機能を構築することができます。
Design,Workflow,Dataはそれぞれ事前にドキュメント等で整理した上で構築を進めることが鉄則ですが、実装を進める中で変更が必要となるケースも多々ありますので、事前準備と柔軟な変更を並行した上で推進していくことが、大きな手戻りやプロジェクトの停滞を生まないためにも重要となります。
▼アプリ開発を外注したい方へ
▼Bubble開発を学習したい方へ
Styles（スタイル）タブ｜複数画面、複数箇所で再利用したいデザインの管理はここから行う
Stylesタブでは、よく使うデザインをテンプレートとして登録できます。同じデザインを何度も使う場合、ここに設定しておくことで、アプリ全体のデザイン統一や変更の工数が大きく削減できます。また、ページ読み込みスピードの改善に寄与する場合もあるので、デザイン制作の段階からどのデザインをテンプレ登録しておくかを入念に擦り合わせることが重要です。
Plugins（プラグイン）タブ｜アプリの機能を拡張したいときに活用する
Pluginsタブは、アプリに便利な機能を追加できる場所です。例えば地図やソーシャルログイン、Google Analytics（アクセス解析ツール）、決済機能の導入などにおいて、既存のプラグインを活用することでアプリの機能を簡単に拡張することができます。
API Connectorを利用することで、外部プラグインでは提供されていないAPI連携も非常に自由度高く開発することができるので、必要があれば積極的に活用していきましょう。
Settings（セッティング）タブ｜アプリの基本的な設定はここから行う
Settingsタブでは、アプリの名前やドメイン設定、SEO対策、プライバシー設定など、基本的な設定を行います。開発初期段階でしっかり設計をして実行しておくと、開発のみならずアプリの運用もスムーズに行うことができます。
Logs（ログ）タブ｜サーバーログの確認はここから行う
Logsタブは、アプリの動作履歴やエラー情報を確認する場所です。アプリの動作が予期せず止まったり、問題が発生した時はここでログを確認して原因を特定しましょう。
特にLogの検索は開発に慣れていないと難しい場合もありますので、適宜開発エキスパートの力も借りながら学習していくと良いでしょう。
当社Swoooでも個人・法人問わずBubble研修を随時承っておりますので、ぜひご利用ください。
続いて、Bubble開発をより円滑かつ高品質に行うための補足情報を紹介していきます。
補足① – Backend Workflow（バックエンドワークフロー）｜サーバーサイドでのデータ処理はここから実装する
Backend Workflowは、サーバー側で画面操作とは非同期の処理を実行できる便利な機能です。
定期的なデータ処理や、ユーザーが操作しない自動処理を設定する際などに使います。
処理にどうしても時間がかかり、同期処理だとUXを損なう可能性があるロジックなどをBackend Workflowに移行することで、ユーザー目線でアプリの動作を軽くすることもできますので、活用できると開発の幅が大きく広がります。上級者向けの機能ではありますが、ぜひ学習・利用してみてください。
補足②｜Bubble開発がさらに円滑に進むTipsを3個紹介！
続いて、Bubble開発をより円滑に進めるためのTipsを大きく3つ紹介していきます。
- 各エレメントには分かりやすい名前をつけておく
- プレビューでの動作確認を頻繁に行う
- App Search Toolを利用する
Bubble開発Tips①：各エレメントには分かりやすい名前をつけておく
Bubbleで開発するときは、各エレメント（要素）に意味のある分かりやすい名前をつけることが重要です。後で見返したり、修正が必要なときにスムーズに作業を進めることができます。
Bubble開発Tips②：プレビューでの動作確認を頻繁に行う
Bubbleでは実際のアプリ画面を即座にプレビューできます。細かい変更ごとに頻繁にプレビューをして、挙動を確かめながら開発を進めましょう。
開発では、想定通りの処理ロジックを組んでも、実際に動作させると思っていたものと違う挙動や予期せぬエラーが発生することが多々あります。これは開発スキルの向上によって一定程度防げるものではありますが、どんなに開発に熟練していても100%防ぐことは不可能です。
最悪なのは、一通りアプリの実装を終えた後に動作確認をして、後戻りの範囲が大きくなってしまったところで修正が必要となるパターンです。場合によっては月単位での大きなプロジェクト停滞と余分な稼働を生じることになりますので、必ず細かくプレビューをするようにしましょう。
プレビューは、画面上部のボタンから1クリックで簡単に実行できます。
Bubble開発Tips③：App Search Toolを利用する
App Search Toolを使えば、アプリ内の要素や設定、ワークフローを素早く探せます。特に規模の大きなアプリ開発の際には効率的に作業を進めることができ、初心者でも迷わずに開発が可能になります。
エディター右上の虫メガネアイコンから簡単に起動できるので、ぜひ効果的に活用して、管理工数を削減していきましょう。
▼ アプリ開発を外注したい方へ
▼ Bubble開発を学習したい方へ
ノーコードツールBubbleの使い方：アプリの公開はこちら
開発が完了したら、ついにアプリの公開に進みます。
アプリの公開には有料プランへの変更が必要となりますが、種々の準備が完了していれば1数分程度で完了しますので、非常に作業としては簡単です。
有料プランへの変更｜Settings画面から2分で完了！
まずはSettingsタブ内の「Plan」をクリックし、希望のプランを選んで支払い情報を入力しましょう。
Bubbleアプリを公開してみよう｜数クリックで簡単に公開ができる！
有料プランへの変更が完了したら、エディター右上のDeployボタンを押下して公開に進みます。
バージョン名を分かりやすく記載した上で完了しておくと、あとでバージョン復元も簡単に実行できるためおすすめです。
まとめ｜ノーコードツールBubbleの使い方を最短で覚えたい方は「Swooo BootCamp」
ここまで、Bubbleの基本的な使い方を詳細に説明してきました。
Bubbleは難易度が高いとはいえ、操作自体は慣れると非常に簡単なものです。
しかし、アプリ開発全般にも通ずる基本的な技術・知識が伴っていないと、アプリの品質やセキュリティ面、保守性の面で非常に脆弱なアプリが出来上がってしまうことも事実です。
そんなときは、当社Swoooが提供しているBubble研修講座「Swooo BootCamp」のようなサービスを利用することで、Bubble専門家と伴走しながら学習を効果的・効率的に進めることもできます。
ぜひご活用してみてください。
▼アプリ開発を外注したい方へ
