Bubble(ノーコード)とは?ツールの特徴、事例、学習方法を解説!

ノーコードツールBubbleの特徴、事例、学習方法を解説!

ノーコードはコードを一切書かずに開発を進める手法で、近年多くの企業から注目されています。その中でも「Bubble」は完成度の高いアプリを簡単に作れる優れものです。

しかしBubbleってどのようなツールなの?どう使えば良いの?という方も多いのではないでしょうか。
特徴を知らないまま導入すると、自社のニーズに合っていなかったということにもなりかねません。

本記事では、Bubbleの特徴・料金・開発事例・始め方などを解説します。

「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある
目次

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

Bubble公式サイトのトップページの画像
出典元:Bubble

Bubbleは、機能単位ごとのパーツをマウスで移動させてWebアプリを制作できる「ノーコードツール」の一種です。

Bubbleはカスタマイズ性に富んだツールとして知られていて、自由度の高い制作が可能な点が魅力となっています。

本題に入る前に、まずノーコードとは何かについて確認しましょう。

ノーコード・ローコードとは

ノーコードはプログラミングコードを書かずに開発する手法です。似たような手法にローコードがありますが、こちらはコードを書く量をおさえて制作を進めます。

アプリ開発やWebサイト制作は基本的にコードを書くため、プログラミング技術があれば、どのようなものでも制作可能な一方で完成までの時間が長くなったり、人件費が高くなりがちという問題点があります。

しかしノーコード・ローコードであればコードを書く必要がほぼないため、制作期間の短縮・人件費の削減が可能です。

つまり、開発を委託したりエンジニアを雇用したりせずに、自社に合ったアプリなどを短期間で制作できるのです。

Bubbleは特にWebアプリ開発に適している

Bubbleは、特にWebアプリ制作に適した開発ツールです。

Webサイトを作るためにも使えますが、サイトの検索順位を上位に表示させるために必要な「SEO対策」は自身で行う必要があります。

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

Bubbleが持つ特徴を把握することで、Bubbleが自社に適した開発ツールなのか実際に現場へ導入した後にどうなるかを想定でき、他のツールと比較検討しやすくなります。

自社にとってベストなツールを選ぶために、まずは特徴を知っておきましょう。

Bubbleのメリット

Bubbleのメリットについてまとめたスライド
Bubbleのメリット

Bubbleの主なメリットは、以下の3つです。

コードを書かずに開発ができる

Bubbleを使えば、制作時にコードを書く必要はありません。画面上のパーツをマウスで移動させるだけで作業を進められるので、参画しやすく、プログラムを組む際に発生しがちなエラーもありません。

そのため、完成までの時間を短縮できるというメリットが得られるのです。

レイアウト・デザインの自由度が高い

Bubbleは設定できるレイアウトやデザインの幅が広いことが特徴です。従来の似たツールではテンプレートを使うので、独自性に富んだデザインを実装できず、機能面での制約がありました。

しかし、Bubbleでは機能パーツのサイズやカラー、デバイスごとのレイアウト設定などができるため、自由度が非常に高いです。

そのため、高いデザイン性と機能性を兼ね備えた、完成度の高いアプリ開発が可能です。

制作環境構築の手間がかからない

Bubbleはアカウント登録後にすぐ利用できるので、制作に必要な環境を構築する手間がかかりません。

知識のない人や初心者が手軽に参入できる点も、魅力だといえるでしょう。

Bubbleのデメリット

Bubbleのデメリットについてまとめたスライド
Bubbleのデメリット

Bubbleの主なデメリットは、以下の2つです。

操作画面やサポートページがすべて英語

Bubbleは操作画面やサポートページがすべて英語で書かれており、ネット上の日本語の情報もあまり多くありません。

ただ、近年はYouTubeやnote、Udemyなど、日本語で書かれた解説記事が増えています。理解を深める上で大きな手助けとなるため、参考にしながら学習を進めていきましょう。

基本的なプログラミングの知識が必要

自由度が高い分、Bubbleを使いこなすにはプログラミングの基礎知識が必要です。

例として、入力したメッセージが管理者に送信されるようにするには、なぜそうなるか具体的な仕組みを知っておく必要があります。

ただし、プログラミングを0から学習するより難易度は低いので、書籍や学習サービスを使って仕組みを理解しておきましょう。

Bubbleの開発事例2選

ここでは、Bubble含むノーコードツールの開発事例を2つ紹介していきます。

事例その1:借金一括管理アプリ(Qoins)

借金一括管理アプリ「Qoins」のトップページの画像
出典元:Qoins

Qoinsは、借金管理が苦手な方や、返済に向けて貯蓄を行っている方向けの借金一括管理アプリです。

貯蓄方法設定機能や目標金額の設定機能など、節約やお金の管理が苦手な方にとって役立つ機能が多く備わっています。

UI(ユーザーインターフェース)やセキュリティ対策、操作性など様々な面で優れており、ノーコードであっても高品質なアプリを作成できることの代表例とも言えるサービスです。

事例その2:ビジネスパーソン向けコーチングサービス(Marlow)

ビジネスパーソン向けコーチングサービス「Marlow」のトップページの画像
出典元:Marlow

Marlowは、コーチとコーチング希望者を繋ぐマッチングサービスです。

アカウント登録後、コーチング希望者が繋がりたいコーチの条件を設定するだけで、マッチングが自動的に完了します。

以下の記事では、共同創業者のMary Foxが金銭的に困窮していた際にBubbleと出会い、実際にアプリをつくるまでの過程の一部が語られています。

https://bubble.io/blog/executive-coaching-meets-design-thinking-an-interview-with-marlow/

これらのことから、Marlowは「開発コストを低く抑えられる」というBubbleの強みが現れたサービスの代表例だと言えるでしょう。

その他のノーコードツールを含めた事例については、以下記事をご覧ください。

あわせて読みたい
ノーコードツールで作られた開発事例20選!【国内・海外まとめ】 「ノーコード開発でどんなサービスが作れるの?」「デザインや機能はぶっちゃけどうなの?」 このような疑問をお持ちではありませんか。 ノーコード開発は、非エンジニ...

Bubbleの利用料金

Bubbleには4つのプランがあり、プランによって利用料金が異なります。

プランごとの利用料金は以下の通りです。ストレージ容量が少ない、バックアップ機能がないなど、Freeプランでは一部機能に制限がかかっています。本格的にアプリ制作を行いたい方は、Personal以上のプランの利用がおすすめです。

プランFreePersonalProfessionalProduction
料金無料$25/月(年)$29/月(月)$115/月(年)$129/月(月)$475/月(年)$529/月(月)
テスト開発
独自ドメイン不可
バックアップ機能なし7日間30日間1年間
複数人開発なしなし2人まで15人まで
ストレージ容量0.5GB10GB20GB50GB
サポート内容フォーラムEmailEmailEmail
おすすめ用途運用テストアプリ制作中規模の開発大規模の開発
出典:Bubble公式サイト 料金プラン

Bubbleの始め方・学習方法

本章ではBubbleの始め方・学習方法を解説します。

Bubbleのアカウントを作成する

Bubbleのアカウントは、以下の手順で作成します。

アカウントの作成手順
  1. 公式サイトに飛び、「Get starded」をクリック
  2. メールアドレス・パスワードを設定


    Googleアカウントでのログイン、またはメールアドレス・パスワードを入力を行い、アカウントを作成します。

    アカウントを作成すると利用規約とプライバシーポリシーに同意したことになりますので、作成前に確認しておきましょう。

これだけで利用を開始できます。

Bubbleのおすすめ学習方法4選

ここでは、Bubbleのおすすめ学習方法4選を紹介します。

1. Bubbleチュートリアル

アカウント登録後は、操作方法を学べるチュートリアルを受けられます。
画面からスライドショーの作り方・ログインシステムの制作方法・他ページへデータを送信する方法などを、ナビ付きで学ぶことができます。


チュートリアルをスキップすることも可能ですが、基本的な制作方法を教えてくれるので、本格的に使用する前に受講することをおすすめします。
リンク先の通り、チュートリアルは全部で12種類あり、終了までの目安時間は51分と記載されています。

https://bubble.io/lessons

ここでは、チュートリアルのうち3種類を紹介します。

Bubbleチュートリアルのトップページの画像
出典元:Bubble lessons

チュートリアル内容(全12種)

  1. データの保存
    本チュートリアルでは、「入力した住所に対応する場所をマップ上に表示させる」機能を作成します。

    住所の入力フォームや入力データをデータベースに保存する仕組みを作りながら、Bubbleの基礎であるデータの扱い方を学ぶことができます。

  2. 新規登録システムの構築
    本チュートリアルでは、新規登録とログインの機能を作成します。

    ログイン中・ログアウト中それぞれの挙動構築を通じ、状態ごとに表示画面を変化させる仕組みを学ぶことができます。

  3. To-Doアプリの作成
    本チュートリアルでは、To-Doアプリを作成します。

    こちらは12種のチュートリアルの集大成となっており、それまでのチュートリアルで習った入力フォームやデザイン設定、ワークフロー構築を用いたアプリ開発を行います。

    本チュートリアル終了後は、実際に開発に取り組んでみましょう。

2. YouTubeの解説動画

Bubble初学者の方には、以下動画での学習がおすすめです。

こちらの動画では、「アカウント作成~商品投稿アプリの作成」までが解説されています。

アプリ作成を通じ、各種エレメントの説明やワークフローの構築、データベースの作成方法といったBubbleの基礎となる要素をすべて抑えることが可能な動画です。

3. 書籍

【bubble】勉強本1~8

初心者の方も理解しやすいよう、画像や動画で解説が行われている書籍です。

全部で8冊あり、Twitter風アプリ等の作成を通してBubbleの基礎知識を身につけることができます。
Kindle unlimitedに加入されている方は、全巻無料で読むことができます。

4. Udemyの講座

https://www.udemy.com/course/nocode_bubble2020/

UdemyではBubbleの基礎が1時間半で学べる講座が販売されています。
詳細な説明を受けながら学習したい方、体系立ててBubbleの基礎を学びたい方には、こちらの講座がおすすめです。

よくある質問集3選

Bubbleで作成したアプリを販売することはできますか?

可能です。顧客向けのWebアプリ開発を行うプランとして、Bubble公式がagency planを推奨しています。

利用可能なクーポンや割引はありますか?

学生や非営利団体に所属されている方は、すべてのプランを3割引で利用することができます。また、教育機関であれば、support@bubble.io でBubble公式と連絡を取り、「classroom plan」への加入を相談できます。(出典:Bubble公式サイト サポートセンター

アプリ制作に使えるテンプレートはありますか?

あります。下記リンクから購入し、テンプレートを使用してアプリを制作することができます。無料で利用できるテンプレートも数多くありますので、ぜひ利用してみてください。

https://bubble.io/home/templates

Bubbleを使ってプログラミング未経験でもアプリを開発しよう

Bubbleはマウスでパーツを配置していくだけでアプリを制作でき、デザインやレイアウト設定の自由度が高いことが特徴です。エンジニアでなくともシステムを手軽に制作できるので、開発への参加ハードルが低くなっています。

その一方、質の高いアプリ、他社と比較しオリジナリティのあるアプリを制作するためには、Bubbleへの高い習熟度と開発経験が必要になります。

完成度とオリジナリティの高さを求めるなら、他社への外注を検討しましょう。費用は少し高くなりますが、品質に確実性があり、運用のサポートをしてくれるところもあります。

高品質でオリジナリティのあるアプリをお求めの方は、外注を検討してみてはいかがでしょうか。

Power Platformを使用したシステム内製化事例
無料プレゼント中


   

ダウンロード
こちらからお気軽にどうぞ

「煩雑なExcel管理から脱したい」
慣れ親しんだシステムを使って効率化したい
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
シェアする

この記事を書いた人

システム開発の窓口は株式会社ファンリピートが運営しています。
当社では、ノーコード・ローコードを用いたDX支援事業や、プロジェクトマネジメント、コンサルティングなど、規模を問わず20社以上の企業のシステム開発のサポートを行っています。要件定義からリリースまではもちろん、システムの保守・改修までトータルにご支援が可能ですので、気になることがありましたらお気軽にお問合せください。

目次