「Bubbleの使い方が分からない」「英語が多くて大変」と感じていませんか？
この記事では、ノーコード・ローコード開発を手掛けるファンリピートが、Bubbleの基本操作から、知っておくべきメリット・デメリット、料金プラン、具体的な開発事例、そして気になる費用感まで、網羅的に解説します。
ノーコード開発を始める上で押さえておきたいポイントも盛り込んでいるので、「これからBubbleを学びたい」方も、「Bubbleでの開発を依頼したい」方も、ぜひ最後までお読みください。この記事を読めば、Bubbleで何が実現できるのか、具体的にイメージできるようになります。
＞＞bubble開発の費用感とスケジュールがわかる資料をDLする（無料）
＼ ホワイトペーパー ／
bubbleで実現するアプリ開発とその費用について
【わかること】
・bubbleでのアプリ作成を依頼するときの費用感
・ほかのツールとの比較
・弊社の開発事例の詳細（料金や開発の流れ）
ノーコードツールbubbleとは？
ノーコードツールの「bubble（バブル）」とは、Webアプリケーション開発に特化したノーコードプラットフォームです。従来のプログラミング開発のようなコーディングが一切不要で、ドラッグ＆ドロップの直感的な操作だけでアプリ開発が可能です。
海外サービスですが、世界的なノーコードブームに伴い、日本でも人気のノーコードツールとして注目されています。bubbleが人気の理由としては次の3つが挙げられます。
- 自由度が高く、柔軟なアプリ開発可能
- プログラミング不要で非エンジニアでも開発が可能
- 無料から利用できる
こうしたことから個人利用・企業利用問わず、あらゆるシーンで使われています。スピーディな開発ができることから、システム開発会社でもプロトタイプ（試作品）開発にbubbleを活用し、従来の開発にかける労力・コスト削減に繋げています。
現在スタートアップ企業などでは、「小さくサービスを開発し、素早く検証し、改善を繰り返す＝MVP開発」の概念が主流となっています。そのMVP開発の手段としてbubbleは最適なツールです。
＞＞bubble開発の費用感とスケジュールがわかる資料をDLする（無料）
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開発の費用感とスケジュールがわかる資料をDLする（無料）
掲示版アプリの挙動を確認
ログイン・ログアウト機能
新規登録ユーザーは「ユーザー名」「メールアドレス」「パスワード」を入力します。
新規登録ユーザーはデータベースに保存されるため、次回以降は「メールアドレス」「パスワード」を入力するだけでログインができるようにします。
また、ログインユーザー以外がメッセージ投稿しようとすると、ログイン画面に遷移するように設定しています。
アラート機能
アラート機能を使うことで、ログアウト時に「ログアウトしました」、ログイン時に「ログインしました」をメッセージを表示させることができます。
メッセージ投稿機能
メッセージ内容を入力し「書き込む」ボタンを押すと「投稿者名」「日付」「メッセージ」が、投稿順に並ぶように設定しています。
bubbleを使ったノーコードアプリ開発事例
本項では、ノーコード・ローコード開発を手掛けるBOLTが手掛けた、bubble開発事例を紹介します。
＞＞bubble開発の費用感とスケジュールがわかる資料をDLする（無料）
株式会社BaaS様のSaaS型プロダクトの開発事例
SaaS型の完全匿名の社内掲示板サービスです。
管理者（責任者）が議論をしたいテーマのスレッドを立て、その議題に対して全ての従業員が匿名で本音の意見を出すことによって、議論を活性化させます。
主な機能としては、
- 完全匿名の社内掲示板
- スレッドの振り返り機能
- タスク管理
- スレッドの制限
- イイね機能の搭載
- 不適切ワードの検出、管理、承認
- 子会社アカウントへのマルチログイン
といった機能を実装し、社内エンゲージメントを向上させる社内掲示板サービスを開発しました。
bubbleを使うことで、納品までのリードタイム短縮化を実現し、顧客の要望に応じた柔軟なシステム構築支援を実現しています。
寺院向けの求人掲載・採用プラットフォーム
僧侶を探す寺院と寺院で働きたい人との、縁を継なぐことを目的としたサービスです。
求職中の僧侶はニーズに合った求人を探すことができます。寺院側としては、いろいろな雇用形態に合った人材を募集可能。
機能としては以下のとおりです。
- 求人の作成、募集（寺院側）
- 求人、寺院の検索（僧侶側）
- 求人の管理
- 求人への応募
- メッセージ機能など
こちらの開発に関してのスケージュール感や費用などは、以下の資料で紹介しています。無料でダウンロードできるので、ぜひ読んでみてください。
＞＞bubble開発の費用感とスケジュールがわかる資料をDLする（無料）
まとめ｜bubbleを使えば、非エンジニアでも短時間でアプリ開発が可能
ノーコードツールBubbleを使えば、プログラミング不要でアプリ開発が可能です。この記事で紹介した基本的な使い方をマスターすれば、様々な機能を試せるようになるでしょう。
しかし、ツールを覚えるだけでは不十分です。 開発を成功させるには、「どんな課題を解決したいのか」「そのためにどんな機能が必要か」といった要件定義・設計が欠かせません。
まずは、あなたの作りたいアプリの目的や必要な機能を具体的に整理してみてください。
「実際の開発事例を見てみたい」「具体的な費用感が知りたい」 という方は、こちらの無料資料がおすすめです。Bubble開発のリアルな情報が満載です。
＞＞bubble開発の費用感とスケジュールがわかる資料をDLする（無料）
＼ ホワイトペーパー ／
bubbleで実現するアプリ開発とその費用について
【わかること】
・bubbleでのアプリ作成を依頼するときの費用感
・ほかのツールとの比較
・弊社の開発事例の詳細（料金や開発の流れ）
bubbleチュートリアル、無料で公開しています
弊社では、bubble初心者向けのチュートリアルを無料で公開しています。
アカウント作成からデータベース設計、ワークフロー設定まで、基礎から実践的な使い方を丁寧に解説。無料なうえ、もし途中でつまずいても弊社エンジニアがサポートします。まずは無料チュートリアルで、Bubbleに触れてみませんか？
