bubleはノーコードでありながら、高度で柔軟なアプリ開発が行えるツールとして知られています。実際に「Bubbleでのノーコード開発に挑戦したい」と考えている方も多いのではないでしょうか。
ノーコードは比較的簡単な開発手法であるものの、Bubbleは初心者にとって少々難易度の高いツールと言えます。
当記事では、Bubbleの使い方について、アカウント作成から開発までの方法や、開発画面の使い方、チュートリアルのやり方について紹介します。
「Bubbleを使い始めたけどよく分からない」「Bubbleでのノーコード開発を始めてみたい」と考えている方は、ぜひ参考にしてください。
また、弊社ではBubbleを用いた様々なサービスを開発しておりますので、こちらも合わせてご覧ください。
以下の資料では、ノーコード開発ツールによるアプリケーションの開発事例の詳細をお伝えしています。
ノーコードの基礎知識の紹介
ノーコードの開発事例10選
弊社シースリーレーヴの開発事例も含めてご紹介しています。今後ノーコードでの開発をご検討中の方はぜひご参考ください。
ノーコードツール「Bubble」とは
Bubble（バブル）は、米国に本社を置くBubble Group,incが提供するノーコードツールです。
Webアプリやソフトの開発に特化しており、柔軟な開発が可能なことから、世界中で多くの人に利用されています。
Bubbleには、以下のようなメリットがあります。
コードの記述が不要
デザイン性・機能性が高い
無料プランから利用できる
「そもそもBubbleとは？」「Bubbleを詳しく知りたい」という方は、下記の記事を参考にしてください。
Bubbleの使い方｜アカウント作成から開発
ここからは、Bubbleの使い方について解説します。
Bubbleは日本語に対応していないため、英語が苦手な方は「Google翻訳」や「DeepeL」の利用がおすすめです。
アカウント作成から開発までの流れは以下の通りです。
アカウントを作成する
まずは、Bubbleのアカウントを作成します。
Bubble公式サイトにアクセスして、アカウントを作成しましょう。既に登録済みの方は、ログインしてください。
画面中央にある「Get started for free」をクリックし、Googleアカウントまたはメールアドレス&パスワードを設定して「Get started」をクリックします。
プライバシーポリシーが表示されるので「I agree Bubble’s terms…」と書かれた青いボタンをクリックして同意。
「バブルへようこそ！」という画面が表示されたら登録完了です。
アンケートに回答する
利用目的に関するアンケートが表示されるので、適当なものを選択します。
「Next」で進み、最後に「Submit」をクリックすると、アカウントが作成完了です。
左下の「Skip」をクリックすることでアンケートをスキップすることもできます。
開発を進める
アカウント作成が完了したら、エディター画面が表示されます。ここからアプリ開発を進めることが可能です。
ホームの「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で作ったアプリ12選｜Bubbleの特徴や料金、注意点も解説の記事を参考にしてください。
二択画像投票サービス「Twinq」
Twinqは、写真を使って二択の質問を投稿し、ワンタップで回答できる投票サービスです。
年代・職業・地域・年収などを設定でき、各項目ではグラフの比較によって細かな分析に役立てられます。
開発期間はわずか2ヶ月、開発人数は1,2名と低コスト・ハイスピードでありながら、システム開発に劣らないクオリティを実現しています。
オンラインMCマッチングサービス「ReMoCe」
ReMoCeは、オンライン飲み会を楽しく気軽に、コミュニケーション活性化するMCを呼べるマッチングサービスです。
呼びたいMCを選び、クレジットカードで支払いを完了させるだけ。イベントに必要な台本の作成、イベントの打ち合わせなどをすべてリモシー上で行うことができます。
開発期間はわずか1ヶ月で、Bubbleを用いて開発されました。
ノーコード・ローコード開発「一括見積もりサービス」
ノーコード開発を提供している会社を一括で検索・紹介できる、日本最大級のノーコード開発相談サイトです。
Webサイト・スマホアプリ・ECサイトなどをはじめとする16のカテゴリーから検索でき、複数の開発会社を比較することができます。
このサービスは、以下を目的としてリリースされました。
多くのノーコード・ローコード開発企業を集め、広く認知させる
ノーコード・ローコードの適正価格を市場に広げる
今までにない価値あるサービスが高速で生まれる場所を提供する
ノーコード開発ならシースリーレーヴへお任せください！
シースリーレーヴでは「地球上で最も顧客の成功を実現する企業」をモットーに開発だけでなく、企画からデザイン・開発、リリース後のマーケティングやサポートまでWebサービスやアプリの受託開発に関する相談、開発を承っております。
お客様は、リリースが終わりではなく、そこからがスタート！
サービスを通して、お客様、そしてユーザーが本当に成し遂げたい事を実現するお手伝いをさせて頂きます。
弊社はノーコード開発・システム開発もできる弊社だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。
どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します！
実際に開発してみたいけれど、予算は？こんなサービスを作りたいけどノーコードでできるのか？最短でどれくらい？どんな小さなことでも、ぜひお気軽にご相談下さい。
技術スタッフがご相談させて頂きます！
ノーコード開発に関するお役立ち資料も無料でダウンロードできますのでぜひご参照ください。
最後まで読んでいただき、ありがとうございました！
