日本発ノーコードアプリ開発ツール『Click』

ノーコードツールBubbleの使い方について。実際の使い方を解説!

こちらの記事では、ノーコードツールBubble(バブル)の使い方を解説しています。

ノーコードツールBubble(バブル)とは、米国に本社を置く、Bubble Group,incが提供するノーコードプラットフォームです。

Webアプリの開発に適しており、ノーコードツールであることから、開発にコーディングは不要です。

一般的にノーコードツールは、カスタマイズ性が低いというデメリットがありますが、Bubbleはカスタマイズ性が高いという特徴があります。

ノーコードツールBubble(バブル)は、日本語に対応しておらず、初心者の方が扱うには難しいですが、

ドラッグ&ドロップの直感的な操作でアプリやWebサイトを作成できますので、慣れてしまえば扱えるようになるはずです。

ノーコードツールBubble(バブル)の使い方について知りたい方は、参考にして下さい。

 

ノーコードツールBubbleの使い方|導入

Bubbleの使い方を解説するにあたって、

Bubbleは、日本語に対応していないため、「Google翻訳」やDeepeL」の利用をおすすめします。

インターネットブラウザで「Google Chrome」を利用している方は、画面右上のアドレスバーから日本語に切り替えることも可能です。(画面のレイアウトが崩れる)

Bubbleの導入方法は、以下の通りです。

*既に登録済みの方は、Bubble公式サイトからログインしてください。

STEP.1
Bubble公式サイトにアクセス

 

STEP.2
メールアドレスを入力し「Get started free」をクリック

 

STEP.3
メールアドレスとパスワードを入力し「Get started」をクリック。

Googleアカウントでも登録することができます。

STEP.4
画像の画面になったら登録完了。

 

ノーコードツールBubbleの使い方|アプリ開発

次に、Bubbleでアプリを開発する手順を解説します。

STEP.1
「New app」をクリック。

STEP.2
アプリの情報を入力し「Create a new app」をクリック。

  • Name of this new app(アプリの名前)
  • What kind of app are you bliding(アプリの種類)
  • is it customer-facing or internal?(外部、内部向けか)
  • Start from a template(optional)(テンプレートの使用)
  • Datails of what you’re building(アプリの詳細)
  • What’s your goal with this application(作成する目的)

STEP.3
「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(デザイン)タブ

デザインタブとは、テキストやボタンなどの要素(エレメント)を配置してアプリの見た目を設計するタブです。

▶UI Builderの画面

  • UI Builder/Responsiveの切り替え
UI Builder➜各エレメント幅や高さを設定する。(設定)

Responsive➜携帯タブレットパソコンの画面の幅の違いによってエレメントの表示(幅、高さ、配置)を確認できる。(確認)

  • Elements tree
どのエレメントの中に含まれているのか確認する。
  • Visual elements
テキスト、ボタンなど視覚的なエレメントの選択をする。
  • Containers
各エレメントをまとめる(グループ)。

繰り返し表示する「リピーティンググループ」「ポップアップ表示」を作成できる。

  • Input forms
テキストの入力フォーム、チェックボックス、ドロップダウンボックス、検索ボックス、画像アップローダーなどを作成できる。
  • Reusabule elements
使いまわしたいエレメントの登録ができる。
  • Element templete
「タブが配置されているエレメント」や「ログイン・サインアップ画面」のテンプレートが用意されている。

▶Responsiveの画面

Responsive画面では、デバイスを選択して画面表示を確認したり、画面サイズを変更できます。

この画面でエレメント別にレスポンシブ設定が可能です。

 

Workflow(ワークフロー)タブ

Workrflowタブとは、アプリの動作を設定するタブです。

例として、ボタンをクリックしたら別のページに移動するなどです。

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

 

Data(データ)タブ

Detaタブとは、アプリのデータ構造を作成するタブです。

データベースの設定を行うことができます。

▶Data types

データの名前。

▶Data field

データタイプに属するデータの項目。

▶App data

アプリ内に実際にあるデータを閲覧、登録、編集、削除できる。

開発と本番で2つに分けられています。(開発と本番で、データベース自体が違う。)

▶Option sets

運営側が事前に設定する静的なデータ。(性別や生年月日など変更できない要素)

 

Styles(スタイル)タブ

Stylesタブとは、各エレメントの書式テンプレートの管理をするタブです。

作成、編集、削除ができます。

例、フォント、文字サイズ、文字色など。

 

Plugins(プラグイン)タブ

プラグインタブとは、外部連携や追加機能を手軽に導入できるプラグインを管理するタブです。

プラグインのインストール、アンインストールができます。

例、ストライプの決済機能の導入、Twitterのソーシャルログインなど。

 

Settings(セッティング)タブ

セッティングタブとは、各種設定をできるタブです。

例、アプリの料金プラン変更、カスタムフォントの設定などの設定。

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

 

Logs(ログ)タブ

ログタブとは、サーバーの使用状況やワークフローの実行回数の統計情報を確認できるタブです。

 

ノーコードツールBubbleの使い方|実際の開発

Bubbleを利用した本格的な開発の方法につきましては、以下の記事を参考にしてください。

 

ノーコードツールBubbleの使い方|チュートリアル

Bubbleでは、チュートリアルを利用して基本的な操作方法について学習することができます。

初めてBubbleを使用する方は、チュートリアルを利用することで、Bubbleの基礎的な操作方法について理解ができるため、利用することをおすすめします。

Bubbleのチュートリアルには、以下の12種類のレッスンがあります。

レッスン名 レッスン内容
Saving data 入力された住所をデータベースに保存して地図に表示するレッスン。
Building a sign-up ユーザーの新規登録とログインシステムを実装するレッスン。
Saving and moodifying データベースを使用していいね機能を実装するレッスン。
Building a slideshow プラグインを使用してスライドショーを実装するレッスン。
Sending data pages 新規ページを作ってデータベースに保存された画像を表示させるレッスン。
Using conditions 条件分岐についてのレッスン。
Defining a field as a list of things データベースにリストを入れるレッスン。
Using APIs and sending data to groups 外部APIを使用するレッスン。
Using external APIs 外部APIを使用するレッスン②。
Using the chart element データをチャートに表示するレッスン。
Login with Facebook FacebookのOAuth認証を実装するレッスン。
Graduation lesson:a to-do app To-doアプリを作成するレッスン。

 

▶Saving data➜4分

入力された住所をデータベースに保存して地図に表示するレッスン。

学べる内容

  • 「input」と「Button」の連携方法
  • データベースの作り方
  • 「Input」に入力された情報をデータベースに保存する方法

日本語の解説:Bubbleのチュートリアル解説①>>

▶Building a sign-up ➜4分

ユーザーの新規登録とログインシステムを実装するレッスン。

学べる内容

  • 「Sign up」と「Log in」機能の実装
  • 「Containers」の「Group」を使ってログイン後の挙動を実装
  • 「Log out」機能

日本語の解説:Bubbleのチュートリアルの解説②>>

▶Saving and moodifying➜6分

データベースを使用していいね機能を実装するレッスン。

学べる内容

  • 「Containers」の「Repeating Group」を使ってデータベースに登録された情報をリストで表示させる方法
  • 「Make changes to thing」でデータベースに登録された情報を更新する

日本語の解説:Bubbleのチュートリアルの解説③>>

▶Building a slideshow➜2分

プラグインを使用してスライドショーを実装するレッスン。

学べる内容

  • 「Plugin」の導入方法
  • プラグイン「Slideshow」の使い方

日本語での解説:Bubbleのチュートリアルの解説④>>

▶Sending data pages➜6分

新規ページを作ってデータベースに保存された画像を表示させるレッスン。

学べる内容

  • 「Picture Uploader」で画像をアップロードする方法
  • 別ページを作成する方法
  • 「Link」を使って別ページに遷移する方法
  • ページ間でデータをやり取りする方法

日本語の解説:Bubbleのチュートリアルの解説⑤>>

▶Using conditions➜3分

条件分岐についてのレッスン。

学べる内容

  • 「Conditional」の使い方
  • 「Alert」の使い方
  • ワークフローで条件を加える方法

日本語の解説:Bubbleのチュートリアルの解説⑥>>

▶Defining a field as a list of things➜5分

データベースにリストを入れるレッスン。

学べる内容

  • データフィールドにリストを登録する方法
  • データベースの入れ子構造の理解

日本語の解説:Bubbleのチュートリアルの解説⑦>>

<Using APIs and sending data to groups➜3分>

外部APIを使用するレッスン。

学べる内容

  • プラグインの使い方
  • APIに慣れる

日本語の解説:Bubbleのチュートリアルの解説⑧>>

▶Using external APIs

外部APIを使用するレッスン②。

学べる内容

  • プラグインの設定方法
  • APIを使用してデータを呼び出す方法

日本語の解説:Bubbleのチュートリアルの解説⑨>>

▶Using the chart element➜5分

データをチャートに表示するレッスン。

学べる内容

  • データをグラフで表示させる方法
  • データの登録ワークフロー

日本語の解説:Bubbleのチュートリアルの解説⑩>>

▶Login with Facebook➜3分

FacebookのOAuth認証を実装するレッスン。

学べる内容

  • Facebookでログインする方法

日本語の解説:Bubbleのチュートリアルの解説⑪>>

▶Graduation lesson:a to-do app➜7分

To-doアプリを作成するレッスン。

学べる内容

  • to doアプリの開発方法

日本語の解説:Bubbleのチュートリアルの解説⑫>>

また、1度学習したレッスンは、「Hard mode」というクリック箇所が表示されないモードでの学習ができるようになります。

自身の力でレッスンをクリアすることで、よりBubbleについて理解が深まりますので、ぜひ挑戦してみてください。

チュートリアルの開始方法は、以下の通りです。

STEP.1
ホーム画面に戻り、「Start lesson」をクリック。

STEP.2
「Start」をクリックして開始。

補足になりますがチュートリアルとは別に「Bubble Academy」「Bubble forum」「How to build」を利用してBubbleについて学習できます。

チュートリアルと比較して、より細かくBubbleについて学習できますので、ご活用ください。

Bubble Academyでは、動画教材やマニュアル・有名アプリを構築する方法について学ぶことができるシステムです。

Bubbleユーザーのコミュニティです。

Yahoo知恵袋のような仕組みで、他のユーザーに質問をすることができます。

2020年には、日本向けのカテゴリが作成されました。

URL:https://forum.bubble.io/t/bubble/90774

How to Buildとは、実際の開発手順を学習できるシステムです。

「Instagram」「Uber Eats」といった有名アプリの開発を体験できます。

*日本語には対応していないです。

URL:https://bubble.io/how-to-build

 

ノーコードツールBubbleは日本語に対応しておらず初心者には難しい

ノーコードツールBubbleは、カスタマイズ性が高く、操作方法を覚えてしまえば柔軟な開発が可能なものの、日本語に対応しておらず初心者には難しいです。

チュートリアルやBubbleアカデミーを活用して学習することも手段の一つですが、

おすすめな方法は開発を外注することです。

費用がかかってしまうデメリットがありますが、Bubbleについての知見が豊富な企業に依頼することで、コストを抑えつつ素早い開発が可能になります。

NoCodeDBを運営する株式会社For A-careerはノーコード/ローコード技術を主軸とした開発サービス『NoCode Dash』を運営しております。

Nocode Dashには、Bubbleでの開発経験が豊富なエンジニアが多く在籍しております。

無料相談から承っておりますので、お気軽にご相談ください。

 

ノーコードツールBubbleの料金は?

プラン名 Hobby Personal professional producution
料金(月額) 無料 29$ 129$ 529$

ノーコードツールBubbleの料金は、4つのプランに分かれており、producutionプランが一番上位のプランになります。

 Hobby ➜ Personal ➜ professional ➜ producution 

上記とは別に「Agencyプラン」がございますがそちらにつきましては、こちらのサイトをご参考にしてください。

また有料プランを年間契約することで料金の割引を受けられます。長期間Bubbleを利用する場合は、お得になりますのでご活用ください。

年間契約した場合のBubbleの料金は、以下の通りです。

プラン名 Hobby Personal professional producution
料金(月額) 無料 25$ 115$ 475$

またBubbleの料金プランは、「個人向け」「チーム向け」に分かれており、開発の規模によって最適なプランを選択する必要があります。

  • 個人向け➜ Hobby・Personal
  • チーム向け➜ professiona・producution

上位のプランになるほど「使用できる機能が増える」「サポート内容が手厚くなる」といったメリットがあります。

より詳しいBubbleの料金につきましては、以下の記事を参考にして下さい。

 

ノーコードツールBubbleに関するよくある質問

  • Bubble(ノーコード)の制作事例は?
  • Bubble(ノーコード)のデメリットは?
  • Bubble(ノーコードのおすすめの本・書籍は?

それぞれ解説します。

 

Bubble(ノーコード)の開発事例は?

Bubbleの開発事例として、我々Nocode Dashが開発した「Billmo」をご紹介します。

Billmo

URL:https://billmo.jp/

Billmoは、ファクタリングサービスです。特徴として請求書で審査が可能な点が挙げられます。

Bubbleを利用して開発することで、従来の開発よりコストを抑え、工数も削減することができました。

 

<日本の制作事例>

LIBRIS

URL:https://libris.ne.jp/

 

Koremo

URL:https://koremo.bubbleapps.io/

 

プラリノ

URL:https://bridal-renovation.com/

 

あいホーム

URL:https://aihome-vr.com/

 

<海外の制作事例>

MyDemos

URL:https://mydomos.com/

 

OnOtto

URL:https://www.onotto.com/

 

SHUFFLE

URL:https://sneak-peek.io/product/shuffle

引用:Bubbleの制作事例>>

また、Bubbleでは簡単なゲームの開発ができます。

*複雑なビデオゲームなどの開発には適していませんので、ご注意ください。

Bubbleで開発されたゲームの例として「スーパーマリオ」を再現した

バブルマリオ」があります。

ぜひ一度遊んでみてください。

 

ノーコードツールBubbleのデメリットは?

ノーコードツールBubbleのデメリットは、以下の点が挙げられます。

<日本語に対応していない>

Bubbleは、アメリカで開発されたノーコードツールのため日本語に対応していないです。

英語に不慣れな方には難しいです。

<決済サービス周りの設定が難しい>

Bubbleは、決済サービスを導入する場合、2つのサービスをまたぐ必要があります。

2つのサービスを利用する場合、学習コストが高くなりますし、動作が不安定になるといったことがあります。

<レスポンシブデザインが難しい>

Bubbleは、綺麗なランディングページの作成が難しいです。

レスポンシブエンジンの大幅アップデートにより、今後改善が期待できます。

<ネイティブアプリ化が保障されていない>

Bubbleは、ネイティブアプリ化が保障されていないです。

adaloなどの他のノーコードツールは、ネイティブアプリ化ができますので、それらと比較して使い道が狭くなっている点がデメリットです。

 

ノーコードツールBubbleのおすすめ本・書籍

Bubbleについて学習できる本は、以下の本が例としてあります。

日本語で学習できる貴重な教材ですので、興味のある方はご活用ください。

URL:Bubble.ioで始めるノーコード開発入門>>

URL:Bubble勉強本>>

 

【Nocode Dash】Bubbleでの開発はお任せください

NoCodeDBを運営する株式会社For A-careerはノーコード/ローコード技術を主軸とした開発サービス『NoCode Dash』を運営しております。

Nocode Dashには、Bubbleでの開発経験が豊富なエンジニアが多く在籍しております。

ご要望通りのカスタマイズは勿論、素早い開発をお届けいたします。

無料相談から承っておりますので、お気軽にご相談ください。

 

ノーコードツールBubbleの使い方|まとめ

ノーコードツールBubbleの使い方について解説しましたが、参考になったでしょうか?

Bubbleは、他のノーコードツールと比較してカスタマイズ性が高く、柔軟な開発が可能です。

また、Bubbleを利用して開発することでコストを抑え工数を少なくすることができるといったメリットがあります。

しかし、日本語に対応していないというデメリットもあります。

ドラッグ&ドロップの直感的な操作ができるとはいえ、英語に不慣れな方には、難しいと感じると思います。

そんな方は、チュートリアル・Bubble Academy・Bubble forum・How to Buildいった手段でBubbleの基礎から学習することができますので、ご活用ください。

とはいえ、高クオリティなアプリを開発するためには、それなりの学習コストがかかってしまいますので、Bubbleでの開発経験が豊富な企業に外注することもおすすめです。

我々Nocode Dashは、ノーコードを利用した、ローコスト×ハイスピードな開発を提供していますので、お気軽にご相談ください。

最後まで読んで頂きありがとうございました。