bubble（バブル）の使い方を解説！ノーコードで開発は可能？

「ノーコードツールのbubbleを登録してみたけど使い方がわからない・・・」
「サイト内が英語表記なので翻訳しながら操作するのが大変・・・」

このようなお悩みをお持ちではありませんか？

プログラミングコードを使わずにアプリ開発ができるノーコードツール。その中でもbubble（バブル）は開発の自由度が高く、あらゆるアプリ開発ができる人気のサービスです。

しかし、その自由度の高さから「操作が難しい」という声も少なくありません。また海外サービスということもあり日本語訳がないこともハードルが高く感じる要因となっています。

本記事ではノーコード・ローコード開発を手掛けるBOLTが、ノーコードツールbubbleの使い方、機能概要、実際の開発事例まで解説します。

この記事を読んで頂くことで、bubbleの基本的な使い方がわかりますので、ノーコード開発に興味がある方はぜひ最後までご覧ください。

ノーコードツールbubbleとは？

ノーコードツールの「bubble（バブル）」とは、Webアプリケーション開発に特化したノーコードプラットフォームです。従来のプログラミング開発のようなコーディングが一切不要で、ドラッグ＆ドロップの直感的な操作だけでアプリ開発が可能です。

海外サービスですが、世界的なノーコードブームに伴い、日本でも人気のノーコードツールとして注目されています。bubbleが人気の理由としては次の3つが挙げられます。

1. 自由度が高く、柔軟なアプリ開発可能
2. プログラミング不要で非エンジニアでも開発が可能
3. 無料から利用できる

こうしたことから個人利用・企業利用問わず、あらゆるシーンで使われています。スピーディな開発ができることから、システム開発会社でもプロトタイプ（試作品）開発にbubbleを活用し、従来の開発にかける労力・コスト削減に繋げています。

現在スタートアップ企業などでは、「小さくサービスを開発し、素早く検証し、改善を繰り返す＝MVP開発」の概念が主流となっています。そのMVP開発の手段としてbubbleは最適なツールです。

bubbleのはじめ方

本項では、bubbleをはじめて利用する方に向けて、アプリ作成の手順を解説します。

初めてbubbleにログインする際は、アカウント発行が必要です。

また、bubbleサイト内は英語表記となっており、日本語に対応していません。（2021年7月現在）日本語に翻訳したい方は、Google翻訳や、DeepLなどと翻訳ツールを利用すると良いでしょう。

ブラウザでGoogle Chromeを利用している方は、アドレスバーから日本語に翻訳することも可能です。

アプリを新規作成する

アカウント作成が完了したら、Home画面に表示します。

Home画面内にある「New app」をクリックすると、アプリ作成が開始します。

続いて、「Create a new app」の画面が表示されたら、作成するアプリ情報を入力します。

• Name of this new app：アプリの名前
• What kind of app are you building？：どのようなアプリを作るか
• Is it customer-facing or internal？：社外向けか、社内向けか
• Details of what you’re building：構築する内容詳細※空欄可
• What’s your goal with this application？：アプリ開発の目標

下記画像の赤枠内はプルダウン形式になっているので、目的に合った内容を選択します。特に目的がなければ、「Other」「Internal or employee-facing」で問題ありません。

入力後「Create a new app」をクリックします。

次に「New Application Assistant」書かれたサイドバーが表示されます。

アシスタント機能を使用するか確認していますが、今回は使用しませんので赤枠のボタンをそれぞれクリックします。

• Start with a blank page：ブランクページで作成する
• close the assistant：アシスタント機能を閉じる

bubbleの操作画面の使い方

ここでは、bubbleの操作画面の使い方を解説します。bubbleは機能が豊富であるため、初めて操作する際はどんな機能があるのか、どうやって使えば良いか迷うこともあるでしょう。

一つひとつの機能をかんたんに解説しますので、実際の操作画面を見ながら参考にしてください。

機能タブの概要

bubbleでは、画面の一番左にある6つのタブの中から機能を選択し、アプリを作成していきます。

Design（デザイン）タブ

デザインタブは、編集中のページに「エレメント」を追加する機能です。

エレメントとは、テキストボックス・ボタン・マップといった要素のことです。

追加したいエレメントを選択し、ドラッグ＆ドロップで右側のページに移動させるだけで、配置可能です。

Workflow（ワークフロー）タブ

ワークフロータブは、ワークフローを定義する際に使用します。

ワークフローとは、業務の一連のやりとりの流れを、あらかじめ決められたルールや慣習に沿って処理することです。

例えば、あるサイトでアカウントを持っていない新規ユーザーがログインしようとした場合に以下のルールを設定するとします。

• 「新規登録をしてください」というメッセージを表示させる
• アカウント作成ページを表示させる

このようなルールをワークフローにあらかじめ設定しておくことで、アクションの自動化が可能になります。

下記の画像の場合は、「送信する」ボタンをクリックすると、ボタンの色がGray（灰色）になるように設定しています。

Data（データ）タブ

データタブはデータ構造の確認や修正する場合に使用します。例えば、登録ユーザー情報をデータベースに登録し、管理や削除を行います。

Styles（スタイル）タブ

スタイルタブは、見た目に関する設定機能です。

配置したエレメント（ボタン、テキストなど）の色やフォントの大きさを変更が可能です。

エレメントを一つひとつ編集しなくとも、共通のスタイルを設定しておくことで一括変更もできます。

Plugins（プラグイン）タブ

プラグインタブは、拡張機能を追加する際に使用します。

例えば、決済機能など、bubble以外の外部サービスと簡単に連携させることが可能です。

Settings（セッティング）タブ

セッティングタブでは、bubbleの設定変更ができます。プランのアップグレードや請求に関する設定項目があります。

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

Logs（ログ）タブ

ログタブでは、ストレージの使用状況やワークフローの動作状況を確認できます。

bubbleチュートリアルの使い方

bubbleでは、操作方法を学べるチュートリアルがあります。全12コースが用意されていますので、はじめての方は全コース実施することをおすすめします。

チュートリアルの開始方法

Home画面に戻り、「LESSONS」の右上にある「Start lesson」をクリックします。

エディタ画面と案内文が表示されるので「Start」ボタンをクリックします。

するとチュートリアルが始まりますので、あとは手順に従って操作を進めます。

ひとつのコースにつき、およそ10分弱で完了します。チュートリアルは合計で12コースがあるので、3時間ほどあればすべて終えられるでしょう。

チュートリアルはすべて英語ですが、矢印などで次にやるべきアクションが指示されるので、英語が苦手な方でも問題ありません。

もし、英語表記がわかりにくいと感じた方は翻訳サービスを使うことをおすすめします。

例えば、Google翻訳を使用すると画面全体や、チュートリアルの文章が次のように表示されます。

bubbleで掲示板アプリを開発してみた

bubbleで掲示板アプリのプロトタイプ（試作品）を作成しました。

実装した機能としては、

• ログイン・ログアウト機能
• アラート機能
• メッセージ投稿機能

といった3つを設計しています。

これらの機能を実装して、テストリリースするまでに2時間程度で作成することができました。

掲示版アプリの挙動を確認

ログイン・ログアウト機能

新規登録ユーザーは「ユーザー名」「メールアドレス」「パスワード」を入力します。

新規登録ユーザーはデータベースに保存されるため、次回以降は「メールアドレス」「パスワード」を入力するだけでログインができるようにします。

また、ログインユーザー以外がメッセージ投稿しようとすると、ログイン画面に遷移するように設定しています。

アラート機能

アラート機能を使うことで、ログアウト時に「ログアウトしました」、ログイン時に「ログインしました」をメッセージを表示させることができます。

メッセージ投稿機能

メッセージ内容を入力し「書き込む」ボタンを押すと「投稿者名」「日付」「メッセージ」が、投稿順に並ぶように設定しています。

bubbleを使ったノーコードアプリ開発事例

本項では、ノーコード・ローコード開発を手掛けるBOLTが手掛けた、bubble開発事例を紹介します。

株式会社BaaS様のSaaS型プロダクトの開発事例

SaaS型の完全匿名の社内掲示板サービスです。

管理者（責任者）が議論をしたいテーマのスレッドを立て、その議題に対して全ての従業員が匿名で本音の意見を出すことによって、議論を活性化させます。

主な機能としては、

• 完全匿名の社内掲示板
• スレッドの振り返り機能
• タスク管理
• スレッドの制限
• イイね機能の搭載
• 不適切ワードの検出、管理、承認
• 子会社アカウントへのマルチログイン

といった機能を実装し、社内エンゲージメントを向上させる社内掲示板サービスを開発しました。

bubbleを使うことで、納品までのリードタイム短縮化を実現し、顧客の要望に応じた柔軟なシステム構築支援を実現しています。

まとめ｜bubbleを使えば、非エンジニアでも短時間でアプリ開発が可能

本記事ではノーコードツールbubbleの使い方について解説しました。bubbleを使えば、プログラミングの知識・経験がない方でもアプリ開発が可能です。

bubbleは、操作性が優れているだけではなく、機能が豊富で柔軟な設計が可能なので、ノーコード開発に興味がある方は操作方法を覚えて損はありません。

しかし実際にアプリ開発をする上で最も重要なことは、要件定義・設計といった開発プロセスの上流工程です。

ノーコードツールはプログラミングを使わないとはいえ、そもそもどんなサービスを開発するのか、それにはどのような機能が必要なのかといった、要件定義・設計が甘ければ、実業務で役立たないシステムになるでしょう。

そのためにも、まずはbubbleの使い方を覚えることだけではなく、以下のポイントを整理しておきましょう。

• システム開発の目的
• どのような課題を解決したいか
• どんな機能があると実行できるか

このような要件定義・設計が自社だけでは難しければ外部の開発会社に相談することもおすすめです。

その際に、提案依頼書（RFP）を作成することで、スムーズに発注できます。RFPについては、「RFPとは？提案依頼書の目的・作成時のポイント・注意点まで解説」にて詳しく解説していますので参考にしてください。