Bubbleの使い方を徹底解説！Bubble開発事例も紹介
- シースリーレーヴ編集者
- 6月26日
- 読了時間: 9分
更新日：8月12日
bubleはノーコードでありながら、高度で柔軟なアプリ開発が行えるツールとして知られています。実際に「Bubbleでのノーコード開発に挑戦したい」と考えている方も多いのではないでしょうか。
ノーコードは比較的簡単な開発手法であるものの、Bubbleは初心者にとって少々難易度の高いツールと言えます。
当記事では、Bubbleの使い方について、アカウント作成から開発までの方法や、開発画面の使い方、チュートリアルのやり方について紹介します。
「Bubbleを使い始めたけどよく分からない」「Bubbleでのノーコード開発を始めてみたい」と考えている方は、ぜひ参考にしてください。
目次
また、弊社ではBubbleを用いた様々なサービスを開発しております。
Bubbleでどのようなアプリを開発することが出来るか確認してみてください。
すぐにサービス開発をしたい方や、複雑なサービスを検討されている方はお気軽にご相談ください。
ノーコードツール「Bubble」とは
Bubble（バブル）は、米国に本社を置くBubble Group,incが提供するノーコードツールです。
Webアプリやソフトの開発に特化しており、柔軟な開発が可能なことから、世界中で多くの人に利用されています。
Bubbleには、以下のようなメリットがあります。
コードの記述が不要
デザイン性・機能性が高い
無料プランから利用できる
「そもそもBubbleとは？」「Bubbleを詳しく知りたい」という方は、下記の記事を参考にしてください。
Bubbleの使い方｜アカウント作成から開発
ここからは、Bubbleの使い方について解説します。
Bubbleは日本語に対応していないため、英語が苦手な方は「Google翻訳」や「DeepeL」の利用がおすすめです。
アカウント作成から開発までの流れは以下の通りです。
1.アカウントを作成する
まずは、Bubbleのアカウントを作成します。
Bubble公式サイトにアクセスして、アカウントを作成しましょう。既に登録済みの方は、ログインしてください。
画面中央にある「Get started for free」をクリックし、Googleアカウントまたはメールアドレス&パスワードを設定して「Get started」をクリックします。
プライバシーポリシーが表示されるので「I agree Bubble’s terms…」と書かれた青いボタンをクリックして同意。
「バブルへようこそ！」という画面が表示されたら登録完了です。
2.アンケートに回答する
利用目的に関するアンケートが表示されるので、適当なものを選択します。
「Next」で進み、最後に「Submit」をクリックすると、アカウントが作成完了です。
左下の「Skip」をクリックすることでアンケートをスキップすることもできます。
3.開発を進める
アカウント作成が完了したら、エディター画面が表示されます。ここからアプリ開発を進めることが可能です。
ホームの「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?：アプリ開発の目標 |
「Create a new app」をクリックし、「Start with a blank page」と「close the assistant」をクリック。
Start with a blank page：ブランクページで作成する
close the assistant：アシスタント機能を閉じる
Bubbleの使い方｜実際の開発画面の使い方
Bubbleでアプリ作成をするときは、7つのタブを使用します。
Design（デザイン）
Workflow（ワークフロー）
Data（データ）
Styles（スタイル）
Plugins（プラグイン）
Settings（セッティング）
Logs（ログ）
ここからは、それぞれのタブの操作方法について解説します。
Design（デザイン）
Designは、テキストやボタンなどの要素（エレメント）を配置して、アプリの見た目の部分を設計するためのタブです。
Designタブは、以下の要素で構成されています。
UI Builder/Responsiveの切り替え
Elements tree
Visual elements
Containers
Inputforms
Reusabule elements
Element trmplete
Responsive
追加したいエレメントを選択して、ドラッグ&ドロップで右側の編集ページに移動させることで、配置することができます。
Workflow（ワークフロー）
Workflowは、ワークフローを定義する際に使用するタブです。
アプリの細かな動作ルールを設定することで、アクションの自動化が可能になります。
たとえば、アカウントを持っていない新規ユーザーがログインしようとした場合に、自動的にアカウント作成ページを表示させるなどの流れです。
Data（データ）
Dataは、アプリの構造を作成して確認・修正が行えるタブです。
Dataタブは以下の要素で構成されています。
Data types
Data field
App data
Option sets
たとえば、ユーザー情報をデータベースに登録することで、管理や削除が行うことができます。
Styles（スタイル）
Styleは、各エレメントの書式テンプレートを管理するタブです。
ボタンやテキストなどの色・大きさ・フォントを編集することができます。
エレメントは1つずつではなく、共通のスタイルを設定して一括変更も可能です。
Plugins（プラグイン）
Pluginsは、外部連携や追加機能を導入できるプラグインを管理するタブです。
プラグインには、決済機能やSNS連携サービスなどのさまざまなものがあります。
ここでは、プラグインのインストール、アンインストールが実行可能です。
Settings（セッティング）
Settingsは、Bubbleの各種設定を変更できるタブです。
プランのアップグレードや請求に関する項目も、ここから設定できます。
翻訳設定で日本語に変更することもできますが、翻訳対象範囲が限られているため、あまり大きく変わりません。
Logs（ログ）
Logsは、サーバーの使用状況やワークフローの動作状況を確認できるタブです。
Bubbleチュートリアルの使い方
Bubbleには、操作方法が学べるチュートリアルが全部で12種類用意されています。
はじめて利用する方は、全コース実施して操作に慣れるのがおすすめです。
チュートリアルを始める手順は以下の通りです。
Home画面の「Start Lesson」をクリック エディタ画面と案内文が表示されたら「Start」をクリック |
チュートリアルは1つのコースにつき、10分弱で完了します。チュートリアルは合計12コースあるので、すべて完了させると3時間程度かかるでしょう。
チュートリアル画面はすべて英語表記ですが、次にやるべきアクションが矢印で表示されるため、英語が苦手な方でも迷わずに進められます。
Bubbleの基本的な使い方を紹介しましたがいかがでしたでしょうか。
Bubbleはノーコードツールの中でも開発が難しく戸惑う部分が多くあると思います。
Bubbleでの開発で疑問がある方はお気軽にご相談ください。
Bubble認定代理店の弊社がお答えします。
Bubbleを使ったノーコード開発事例
ここからは、Bubbleで開発したアプリの事例を紹介します。
さらに詳しく事例を知りたい方は、【開発事例】ノーコードBubbleで作ったアプリ12選｜Bubbleの特徴や料金、注意点も解説の記事を参考にしてください。
二択画像投票サービス「Twinq」
開発期間
約２ヶ月
概算費用
100～200万円
※デザイン・企画も含む(同等のサービスを開発した場合)
サービスサイト
Twinqは、写真を使って二択の質問を投稿し、ワンタップで回答できる投票サービスです。
年代・職業・地域・年収などを設定でき、各項目ではグラフの比較によって細かな分析に役立てられます。
開発期間はわずか2ヶ月、開発人数は1,2名と低コスト・ハイスピードでありながら、システム開発に劣らないクオリティを実現しています。
オンラインMCマッチングサービス「ReMoCe」
開発期間
約１ヶ月
概算費用
200～300万円
※デザイン・企画も含む(同等のサービスを開発した場合)
サービスサイト
ReMoCeは、オンライン飲み会を楽しく気軽に、コミュニケーション活性化するMCを呼べるマッチングサービスです。
呼びたいMCを選び、クレジットカードで支払いを完了させるだけ。イベントに必要な台本の作成、イベントの打ち合わせなどをすべてリモシー上で行うことができます。
開発期間はわずか1ヶ月で、Bubbleを用いて開発されました。
ノーコード・ローコード開発「一括見積もりサービス」
開発期間
約２ヶ月
概算費用
200～300万円
※デザイン・企画も含む(同等のサービスを開発した場合)
サービスサイト
ノーコード開発を提供している会社を一括で検索・紹介できる、日本最大級のノーコード開発相談サイトです。
Webサイト・スマホアプリ・ECサイトなどをはじめとする16のカテゴリーから検索でき、複数の開発会社を比較することができます。
このサービスは、以下を目的としてリリースされました。
多くのノーコード・ローコード開発企業を集め、広く認知させる
ノーコード・ローコードの適正価格を市場に広げる
今までにない価値あるサービスが高速で生まれる場所を提供する
まとめ
本記事では、「ノーコードツール『Bubble』とは？」から始まり、アカウント登録の手順、実際の開発画面の操作方法、チュートリアル、さらに実例までを網羅的にご紹介しました。Bubbleを活用すれば、エンジニアでなくとも本格的なWebアプリをドラッグ＆ドロップ操作だけで開発できる点が最大の魅力です。ログイン機能やデータ管理、決済連携など、通常はコーディングが必要な機能も直感的に組み立てられるのが大きな特長です。
また、Bubbleには約3時間で操作に慣れられる12種類のチュートリアルが用意されており、手を動かしながら実際に動くアプリを作る中でスキルを効率的に身につけられます。さらに、TwinqやReMoCeのように、わずか数ヶ月、少人数体制で実際にサービスがリリースされた事例が豊富なのも心強いポイントです。
これらを総合すると、Bubbleは初期費用を抑えて素早くプロトタイプを立ち上げたい方に特に適しており、市場検証やアイデアのブラッシュアップにも最適なツールといえるでしょう。エンジニアではないけれど自分の手でアプリを作ってみたい、副業や起業のために実用的な試作品を迅速に完成させたい、といったニーズもBubbleがしっかりサポートしてくれます
Bubble開発ならシースリーレーヴへお任せください！
シースリーレーヴでは「地球上で最も顧客の成功を実現する企業」をモットーに開発だけでなく、企画からデザイン・開発、リリース後のマーケティングやサポートまでWebサービスやアプリの受託開発に関する相談、開発を承っております。
お客様は、リリースが終わりではなく、そこからがスタート！
サービスを通して、お客様、そしてユーザーが本当に成し遂げたい事を実現するお手伝いをさせて頂きます。
弊社はノーコード開発・システム開発もできる弊社だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。
どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します！
実際に開発してみたいけれど、予算は？こんなサービスを作りたいけどノーコードでできるのか？最短でどれくらい？どんな小さなことでも、ぜひお気軽にご相談下さい。
技術スタッフがご相談させて頂きます！
ノーコード開発に関するお役立ち資料も無料でダウンロードできますのでぜひご参照ください。
最後まで読んでいただきありがとうございました！
