ノーコード【bubble】とは？使い方から開発アプリまで徹底解説！
2021.7.22
「bubble」は、プログラミング知識不要でWebアプリを開発できるノーコードのツールです。「bubble」は無料で使える範囲もあり、コーディングの知識がなくても視覚的な操作ができます。当記事では「bubble」について使い方から実際に開発されたアプリまで徹底解説します。今話題となっているノーコード開発ツール「bubble」についてポイントを押さえておきましょう。
目次
ノーコード開発ツール【bubble】とは？
「bubble」とは、アメリカ・ニューヨークに拠点を置く会社bubble社が作ったノーコード開発ツールです。これまでのプログラミングに欠かせなかったソースコードを一切使用しないことから「ノーコード」と呼ばれています。ここでは「bubble」について、概要を解説します。
もっとも有名なノーコード
「bubble」は2012年よりサービスをリリースしており、ノーコード開発ツールの中では歴史が長いです。アカウントを取得すれば誰でも利用でき、全世界で25万人以上のユーザーが「bubble」を使用しているとされ、現在もユーザー数は増加し続けています。
ノーコードでWebアプリが作れる
ノーコードとは、アプリ開発やソフトウェア開発に欠かせないプログラミング言語を、一切使用しなくてもWebアプリを作れることが特徴です。そのため、これまでなら必須であったプログラミング言語の知識が不要で、誰でもWebアプリやサービスの開発をすることができます。画面上に表示されたアイコンをクリックしたり、ドラッグ＆ドロップしたりするなど視覚的な操作でアプリ開発が可能です。
【bubble】の使い方をチェック！
「bubble」の登録から使い方までの流れを解説します。
アカウントを登録
「bubble」を使用するにはまずアカウント登録が必要です。作成手順はGmailなどのアカウント作成とほとんど同じです。
【公式サイト】https://bubble.io/
| 1. 上記URLをクリックし、右上の「sign up」をクリック 2. メールアドレスとパスワードを入力 3. 「SIGN UP, IT’S FREE」をクリックすれば登録完了 |
チュートリアル
こちらは省略して先へ進むことも可能ですが、ノーコードとは言え、全く知識がなければ「bubble」でアプリ開発を行うことは非常に難しいです。「bubble Lesson」では使い方をナビゲーションしながらチュートリアル形式で教えてくれます。チュートリアルはいつでも確認できますので、迷ったときはチェックしてみましょう。
【bubble】でできることは？
ここでは「bubble」でできることを操作性の特徴と拡張性の高さに分けてそれぞれ解説します。
直感的な操作でWebアプリを作成できる！
「bubble」は、エレメントと呼ばれる部品をドラッグ＆ドロップすることにより、直感的に開発することが可能です。自由度がとても高く、好きなデザインに仕上げることができます。もちろん、スマホ画面での表示（レスポンシブ対応）も調整可能です。
基本的な操作手順は
| 1. デザインタブでキャンバスをオープンする 2. テキストやボタンタブをクリックし、キャンバスへドラッグ＆ドロップ 3. ワークフローを設定する 4. 上記作業を繰り返し1つのアプリを作成 5. 完成したらサイトへ公開し、付帯されたアドレスをクリックすればWebアプリが完成 |
プラグインで拡張性が高い
「bubble」のプラグインは、コア機能ではありませんが、Webアプリへ追加使用できる機能です。例えば、イベントやアクション、データソースなどがプラグインにあたります。プラグインは、アプリにあらゆる機能を追加したり、組み合わせたりとアプリ自体の自由度を高める存在です。
プラグインは無数にあり、無料から有料のものまで様々。インストール・管理は「Plugins」タブで行い、プラグインを指定し、「DONE」をクリックすると、プラグインタブへ新しくインストールされたプラグインが表示され、使える状態になります。
また、あらゆるノーコードツールはある程度定められた規格のエレメントを選び、組み合わせながら配置することで、Webアプリを作成します。「bubble」の場合は、エレメントごとに形状・素材・色などを詳細に設定できるため、他のノーコードツールと比較すると難易度が高く、使いこなすまで慣れが必要です。
ノーコード【bubble】は無料で使える？利用料金は？
ノーコードツール「bubble」は無料で使用可能です。しかし、できることが限られてしまうため、実際にアプリをリリースする際には有料登録しなければなりません。ここでは無料でできることや、「bubble」で用意されている有料プランごとの特徴を解説します。
無料でできること
無料プランでも開発は可能ですが、「独自ドメインが使えない」「ストレージ容量が小さい」などの制限があります。テスト開発段階であれば無料プランでも問題ありませんが、サイトを公開して本格稼働をするには有料プランの契約が必要になります。
有料プランは3タイプ
有料プランは3タイプに分かれています。プラン名や料金とプランごとの特徴を下記の表へまとめていますので、参照してみてください。
| プラン名 | 年間/月会員 | 主な特徴 |
| Personal | ＄25/＄29 | API連携、独自ドメイン、SSL、メールサポートなど |
| Professional | ＄115/＄129 | 上記に加えてファイルストレージ20G、2人同時開発 |
| Production | ＄475/＄529 | 上記に加えてファイルストレージ50G、15人同時開発 |
ノーコード【bubble】で開発されたWebサービスを紹介！
ここでは実際に、ノーコード「bubble」で開発されたWebサービスをご紹介します。
レストラン検索サービスAppDuJou
出典：https://www.theappdujour.com/
まずはアメリカで使用されているレストラン検索アプリ「AppDuJou」を紹介します。アプリユーザーは無料で条件指定をしながらレストランを検索できるメリットがあり、飲食店側は会費を支払うことで、利用者へレストランの情報やメニューなどを届けることができます。
食べログのように、GoogleMap上に店舗のピンを刺すアプリケーションも実装が可能です。
自分のキャリアを管理できる！Clarify
次に紹介する「Clarify」は、自分のキャリアを管理できるWebアプリです。労働者は自分のキャリアをマイページにて登録・管理し、雇用者はそのデータを元に採用を行います。また、自分の成果を記録し、昇給・昇進の材料としても用いられているそうです。
リクナビのような就職希望者と企業をマッチングするサービスも開発可能であり、複数のカテゴリーやタグを設定し検索することができます。
アート作品のマッチングサービスKollecto
最後に紹介するのは「Kollecto」です。このサービスはバイヤーとアート収集家を繋ぐマッチングサービス。あらゆる音楽や書籍のサービスにマッチング機能があるのに、アートにはなかったことから着想を得たサービスです。サイト構成は誰でもアクセスしやすいシンプルさが特徴。
これ以外にも、メルカリのようなCtoCアプリ、LINEのようなチャットアプリ、YouTubeのような動画配信アプリ等を開発することが可能です。
MUGEN株式会社では無料の相談を受け付けておりますので、アプリ開発をご検討の際はぜひ一度お問い合わせください。
ノーコード【bubble】でWebアプリを開発しよう！
ノーコード「bubble」は無料でも使い始めることができ、プログラミング知識がなくてもアプリ開発ができるツールですが、使いこなすまでには時間が掛かり、機能連携をする場合には知識も必要になります。
スピーディーなアプリ開発が必要な場合、企画・設計の段階から無料相談が可能な弊社へご相談ください！
