top of page
  • kokimizuochi

Bubbleの使い方を徹底解説!Bubbleのノーコード開発事例も紹介

更新日:3月1日


bubleはノーコードでありながら、高度で柔軟なアプリ開発が行えるツールとして知られています。実際に「Bubbleでのノーコード開発に挑戦したい」と考えている方も多いのではないでしょうか。


ノーコードは比較的簡単な開発手法であるものの、Bubbleは初心者にとって少々難易度の高いツールと言えます。


当記事では、Bubbleの使い方について、アカウント作成から開発までの方法や、開発画面の使い方、チュートリアルのやり方について紹介します。


「Bubbleを使い始めたけどよく分からない」「Bubbleでのノーコード開発を始めてみたい」と考えている方は、ぜひ参考にしてください。


また、弊社ではBubbleを用いた様々なサービスを開発しておりますので、こちらも合わせてご覧ください。


ノーコード開発実績


以下の資料では、ノーコード開発ツールによるアプリケーションの開発事例の詳細をお伝えしています。

  • ノーコードの基礎知識の紹介

  • ノーコードの開発事例10選

弊社シースリーレーヴの開発事例も含めてご紹介しています。今後ノーコードでの開発をご検討中の方はぜひご参考ください。

ノーコード開発ツールによるアプリケーション開発事例集

ノーコードツール「Bubble」とは


Bubble(バブル)は、米国に本社を置くBubble Group,incが提供するノーコードツールです。


Webアプリやソフトの開発に特化しており、柔軟な開発が可能なことから、世界中で多くの人に利用されています。


Bubbleには、以下のようなメリットがあります。

  • コードの記述が不要

  • デザイン性・機能性が高い

  • 無料プランから利用できる

「そもそもBubbleとは?」「Bubbleを詳しく知りたい」という方は、下記の記事を参考にしてください。



Bubbleの使い方|アカウント作成から開発


ここからは、Bubbleの使い方について解説します。


Bubbleは日本語に対応していないため、英語が苦手な方は「Google翻訳」や「DeepeL」の利用がおすすめです。


アカウント作成から開発までの流れは以下の通りです。


アカウントを作成する


bubble使い方1

まずは、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使い方2

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使い方3

Bubbleには、操作方法が学べるチュートリアルが全部で12種類用意されています。


はじめて利用する方は、全コース実施して操作に慣れるのがおすすめです。


チュートリアルを始める手順は以下の通りです。

​Home画面の「Start Lesson」をクリック エディタ画面と案内文が表示されたら「Start」をクリック

チュートリアルは1つのコースにつき、10分弱で完了します。チュートリアルは合計12コースあるので、すべて完了させると3時間程度かかるでしょう。


チュートリアル画面はすべて英語表記ですが、次にやるべきアクションが矢印で表示されるため、英語が苦手な方でも迷わずに進められます。


Bubbleを使ったノーコード開発事例


ここからは、Bubbleで開発したアプリの事例を紹介します。


さらに詳しく事例を知りたい方は、【開発事例】ノーコードBubbleで作ったアプリ12選|Bubbleの特徴や料金、注意点も解説の記事を参考にしてください。


二択画像投票サービス「Twinq」


二択画像投票サービス「Twinq」

Twinqは、写真を使って二択の質問を投稿し、ワンタップで回答できる投票サービスです。


年代・職業・地域・年収などを設定でき、各項目ではグラフの比較によって細かな分析に役立てられます。


開発期間はわずか2ヶ月、開発人数は1,2名と低コスト・ハイスピードでありながら、システム開発に劣らないクオリティを実現しています。





オンラインMCマッチングサービス「ReMoCe」


オンラインMCマッチングサービス「ReMoCe」

ReMoCeは、オンライン飲み会を楽しく気軽に、コミュニケーション活性化するMCを呼べるマッチングサービスです。


呼びたいMCを選び、クレジットカードで支払いを完了させるだけ。イベントに必要な台本の作成、イベントの打ち合わせなどをすべてリモシー上で行うことができます。


開発期間はわずか1ヶ月で、Bubbleを用いて開発されました。






ノーコード・ローコード開発「一括見積もりサービス」


ノーコードに関する資料のダウンロードはこちら

ノーコード開発を提供している会社を一括で検索・紹介できる、日本最大級のノーコード開発相談サイトです。


Webサイト・スマホアプリ・ECサイトなどをはじめとする16のカテゴリーから検索でき、複数の開発会社を比較することができます。


このサービスは、以下を目的としてリリースされました。


  • 多くのノーコード・ローコード開発企業を集め、広く認知させる

  • ノーコード・ローコードの適正価格を市場に広げる

  • 今までにない価値あるサービスが高速で生まれる場所を提供する





ノーコード開発ならシースリーレーヴへお任せください!


シースリーレーヴでは「地球上で最も顧客の成功を実現する企業」をモットーに開発だけでなく、企画からデザイン・開発、リリース後のマーケティングやサポートまでWebサービスやアプリの受託開発に関する相談、開発を承っております。


お客様は、リリースが終わりではなく、そこからがスタート!

サービスを通して、お客様、そしてユーザーが本当に成し遂げたい事を実現するお手伝いをさせて頂きます。

弊社はノーコード開発・システム開発もできる弊社だからこその技術で、圧倒的な短納期・低価格ながら高パフォーマンスなサービスを実現いたします。


どんなお悩みでもまずはぜひ一度ご連絡ください。解決の糸口を必ず見つけ出します!

実際に開発してみたいけれど、予算は?こんなサービスを作りたいけどノーコードでできるのか?最短でどれくらい?どんな小さなことでも、ぜひお気軽にご相談下さい。

技術スタッフがご相談させて頂きます!

ノーコード開発に関するお問い合わせはこちら

ノーコード開発に関するお役立ち資料も無料でダウンロードできますのでぜひご参照ください。

ノーコードに関する資料のダウンロードはこちら


最後まで読んでいただき、ありがとうございました!


Comments


資料ダウンロード.jpg

ノーコードに関するお役立ち資料をご用意しました。

ぜひご活用ください。

☑︎ノーコード開発ツールアプリケーション開発事例集

☑︎新規事業に最適な開発系ノーコードツール紹介

☑︎ローコード/ノーコード開発のセキュリティ対策

☑︎誰でもわかる!ノーコードとローコード

開発実績バナーFIX.jpg
最新記事
ノーコード開発お問い合わせバナー

ノーコードに関するお問い合わせや、ご相談などお気軽にどうぞ!

カテゴリー
bottom of page