ノーコードツールBubbleの使い方を画像付きで分かりやすく解説！

Bubbleは、比較的簡単かつ柔軟にアプリ開発を行えるノーコードツールであり、今注目を集めています。

そのため、「Bubbleを使用してアプリ開発にチャレンジしたい」、「Bubbleの使い方が知りたい」という方は多いのではないでしょうか。

この記事では、Bubbleの概要やBubbleの使い方などを解説するので、ぜひ参考にしてみてください。

そもそもBubbleとは？

ノーコードツール「Bubble（バブル）」とは、アメリカのニューヨークに本社を構えているBubble Group,incが提供しているプラットフォームです。

主にアプリやWebサイトの開発に特化しており、ソースコードを書かずにドラッグ&ドロップで柔軟かつ直感的な開発が可能です。

また、デザイン性や機能性なども高く、無料プランから利用できるというメリットもあります。

そのため、ノーコードツールのなかでもトップクラスの人気を誇っており、世界中で200万以上のユーザーに利用されています。

Bubbleの使い方【アカウント作成】

Bubbleの公式サイトは日本語に対応していません。

そのため、英語が得意でない場合は、「Google翻訳」や「DeepeL」の活用がおすすめです。

また、「Google Chrome」を利用している場合は、画面右上にあるアドレスバーから日本語に翻訳することもできます。

Bubbleの使い方の流れは以下の通りです。

1.アカウントを作成する

まずはじめにBubbleの公式サイトにアクセスし、アカウントを作成しましょう。

もし、すでにアカウントがあるという場合は、そのままログインしてください。

公式サイト上部にある「Get started for free（無料で始めましょう）」をクリックします。

次のページでは、Googleアカウントもしくはメールアドレスとパスワードを設定し、「Start building（構築を開始する）」をクリックします。

そうすると、アンケートが表示されます。

アンケートについては後述で解説します。

アンケートに回答したあとはこのようなメールが届くはずです。

そのなかの青文字で書かれている「Click here to confirm your email address」をクリックします。

そうすると「Thanks for confirming!（ご確認いただきありがとうございます!）」というページが表示されるでしょう。

「Welcome to Bubble（バブルへようこそ）」という画面が表示されれば登録完了です。

2.利用目的に関するアンケートに答える

登録の過程でアンケートがあります。

最初のページ「What is your goal today?（今日の目標は何ですか？）」では、「BUILD（建てる）」「HIRE（雇用）」「EARN（得る）」の3つから目的を選び、「Next（次へ）」をクリックします。

次のページでは、「CHALLENGING（挑戦）」「DILIGENT（勤勉）」「ADAPTABLE（適応性のある）」「EXPERT（エキスパート）」の4つがあり、自身や自社にマッチしたものを選択します。

「What best describes the stage of the idea you are looking to build on Bubble?（Bubble に基づいて構築しようとしているアイデアの段階を最もよく表しているものは何ですか?）」では、「INSPIRATION（インスピレーション）」「PLANNING（企画）」「EXECUTION（実行）」「REBUILDING（再構築）」のなかから選び、「Next（次へ）」をクリックします。

最後のページでは、Bubbleについてどこで知ったかを聞かれるので、該当しているものを選びましょう。

3.開発を始める

アカウント作成を行うと、エディター画面が表示され、この画面からアプリ開発を進めることができます。

開発手順に関しては、下記でご紹介します。

Bubbleの使い方【初期設定】

ここでは、Bubbleを使ったアプリの開発手順について解説します。

登録のときと同様、英語表記になっているので英語が苦手な場合は、「Google翻訳」や「DeepeL」などを活用してください。

アプリの名前・ファビコンを決める

アカウントを作成すると、アプリの名前を最初に決められます。

その後、有料プランへの移行を勧める画面が表示されますので、「Start With basic features」をクリックすれば無料版ですすめることができます。

その後、アプリの名前とアプリのアイコンとなるファビコンを設定します。

左上の「Upload your favicon」の下の画像部分をクリックすると、画像を入れることができますので、任意のアイコンを設定しましょう。

フォント・色・プラグインの設定

次はアプリで使うフォントを設定できます。

横のプルダウンからフォントを選び、決定します。フォントは即時に反映され、画面を確認することができます。

次はアプリで使用する色を決められます。

ボタンの色や文字色を変えられます。カラーコード入力だけでなく、カラーパレットから自由に色を選べるため、直感的に色を選ぶことができます。

次に、プラグインの追加を行います。公式のプラグインがいくつか選択できます。

「Browse all plugins」をクリックすると、プラグインを全て見ることができます。

プラグインを選択したら、「Get started building」をクリックすれば、アプリ開発を行う画面になります。

Bubbleの使い方【開発画面の使い方】

上記のフローを行うと、上の画像のような開発画面が出てきます。

Bubbleでアプリを使う際には、左側の7つのタブを使用して作成します。

• Design（デザイン）
• Workflow（ワークフロー）
• Data（データ）
• Styles（スタイル）
• Plugins（プラグイン）
• Settings（セッティング）
• Logs（ログ）

ここからは、7つのタブについて詳しく解説いたします。

Design（デザイン）

Design（デザイン）タブは、アプリケーションのページやUI要素を作成・編集する場所です。ドラッグアンドドロップで要素を配置したり、プロパティエディタで要素の設定を変更したりできます。

例えば、アプリにボタンを配置したい場合はDesignタブから「Button」を選択し、右側の画面にドラッグするだけでボタンを追加することができます。

Workflow（ワークフロー）

Workflow（ワークフロー）タブは、アプリケーションのロジックを作成・編集する場所です。イベントやアクションを組み合わせて、ユーザーの操作に応じてアプリケーションがどのように動作するかを定義します。

例えば、ボタンをクリックしたらどのページに移動するようにする、などの動作を設定します。

Data（データ）

アプリケーションのデータベースを作成・管理する場所です。データタイプやフィールドを定義したり、データの追加・削除・編集・検索を行ったりできます。

Styles（スタイル）

アプリケーションの見た目を統一・管理する場所です。スタイルという名前付きのセットを作成して、要素に適用することで、色やフォントなどのデザイン要素を一括で変更できます。

Plugins（プラグイン）

アプリケーションに外部サービスや機能を追加する場所です。Bubbleが提供するプラグインや、他のユーザーが作成したプラグインをインストールして、アプリケーションに組み込むことができます。

Settings（セッティング）

アプリケーションの設定や管理を行う場所です。アプリケーションの名前や説明、ドメイン名、SEO、APIなどの設定を変更したり、バージョン管理やデバッグツールなどを利用できます。

Logs（ログ）

アプリケーションの動作状況やエラー情報を確認する場所です。アプリケーションが実際にどのような処理を行っているかや、どこで問題が発生しているかなどをトラッキングできます。

詳しくは、bubbleの公式ページから詳しく見ることができますので、参考にしてください。

https://manual.bubble.io/

Bubbleでのアプリ開発なら「どこのあわ」へ

Bubbleはノーコードで直感的にアプリを作成できるツールです。ですが、日本語対応がなされていないため、英語がわからない方にはハードルが少し高いかもしれません。

Bubbleは無料でテストアプリを開発することができ、有料版では実際にリリースすることができますので、アプリ開発を行う際はぜひ一度無料版で操作感を確かめてみるのが良いでしょう。

企業が業務を効率化させたり、新しいサービスを提供したいという場合には、ぜひ「どこのあわ」にお任せください。

「どこのあわ」では、アプリを見て、触って、体験できるため、イメージのずれがありません。課題検証やカスタマイズが簡単にできるので、ニーズに合わせてアプリを作ることができます。金額も明確で、構想段階から一緒に伴走しますので、「なにから始めたらいいかわからない」「Bubbleを触ってみたけど、時間がかかりそう……」とお悩みの方は、ぜひ一度どこのあわにお問い合わせください。