プログラミングやIT関係に詳しい方は、ノーコードという言葉を聞いたことがあるのではないでしょうか。
ノーコードとは簡単に説明すると、プログラミングの技術なしでWebサイトやWebアプリをを作れる技術のことです。
詳しくはこちら
そしてノーコード開発をするためには、ノーコードツールを使う必要があります。
ノーコードツール紹介記事
その中でもオールマイティーなツールのBubble（バブル）について今回は紹介しようと思います。
この記事を読むことで
- Bubbleってどんなツールなの？
- 他のノーコードツールとどこが違うの？
- Bubbleの使い方を知りたい！
これらの疑問を解決できます。
ノーコードツール【Bubble】とは？
概要
Bubble（バブル）とはプログラミングの技術が不要でWebサイトやWebアプリを作成できるツールで、他のツールと比べても知名度が高く、安心して使用することができます。
2012年にサービスが開始されてから約10年の間で、40万人以上方々に使用されています。
そのため、テンプレートやプラグインの種類もかなり豊富で、自分が作りたいと思ったサービスを素早く簡単に作成することができます。
また、BubbleではWebアプリはもちろん、WebサイトやECサイトなど幅広い種類のサービスを作成することができます。
そのため、プログラミング経験がない初心者の方から、プログラミング経験のある玄人まで幅広い方々から愛用されています。
特徴
高速でWebアプリ構築ができる
Bubbleを使えば今までとても大変だったコーディングを行わずとも、Webアプリを構築できます。
またプログラミング学習に比べ、学習コストもものすごく低いので、誰にでも簡単に本格的なWebアプリを作成できます。
自由度や拡張性が高い
他のノーコードツールは、決められた色や形、また大きさなどのパーツをドラッグ&ドロップをし素材を作っていくのですが、
Bubbleの場合はそのパーツを一から細かく作成できるので、とにかく細かな操作が可能となっています。
テンプレートやプラグインが豊富
Bubbleには400を超えるテンプレートや、1000を超えるプラグインが用意されています。
自分で一から作っても良いのですが、テンプレートやプラグインを駆使しながらWebアプリを構築するとかなり効率的に行えます。
また無料で使えるものも多く存在するので、ぜひ利用してみてください。
料金プラン
Bubbleの料金プランは4つに分かれています。
「Freeプラン」ではアプリを作成し、自分のパソコンで動作確認をすることはできるのですが、サービスをリリースすることはできません。
値段を上げるにつれて、例えばSEO対策が強固になったり、API連携が可能になったり、また独自ドメインを所持できるようになります。
とはいえ僕のオススメはまず「Freeプラン」から始め、実際にアプリを作ってみることです。
そのアプリを作る過程で、欲しいと思った機能が「Freeプラン」に無ければプランをアップグレードするのが良いでしょう。
| プラン | 値段 |
| Free | 無料 |
| Personal | 月 25/$ |
| Professional | 月 115/$ |
| Production | 月 475/$ |
glideとの比較
glide（グライド）はノーコードツールの一種で、Googleスプレットシートやエクセルの情報を元にWebアプリを作成できます。
glideは扱い方がとても簡単で、初心者の方にでも簡単にアプリを作ることができます。
その分あまり複雑なアプリを作る場合には向きません。データ量が増えるとバグが起きたり、複雑な機能を実装するにはなかなか困難でした。
それに比べてBubbleでは複雑な機能を実装するのにとても向いています。先ほど説明したように、一つ一つのパーツから作成できるので細かな作業に向いています。
glideは複雑な機能を実装するのは難しいですが、アプリ作成がとても簡単にできるので簡単なアプリを素早く作成したい場合に向いています。
Bubbleは上級者向き
glideは初心者向きなんだね！
glideに関して詳しくはこちら
Bubbleで作られたサービスを3つ紹介
1.HelloGuru
HelloGuruはBubbleで作られた、ノーコード学習サイトです。
Bubbleはもちろん、glideやadalo、またWebflowなどの多岐にわたるノーコードツールの学習をすることができます。
2.Zeroqode
ZeroqodeはBubbleで作られたノーコードWebアプリ開発ツールです。
ノーコードツールで作られたノーコードツールとはなかなか斬新で面白いですよね。
「コーディングより10倍早く作成できるが、コーディングに引けを取らないものを作れる」と歌っているのだけあり、かなり使いやすいツールです。
3.コレモ
コレモでは「これも読みたい」「あれも読みたい」と言った希望を叶えてくれます。
登録時に3ポイントもらえ、本1冊＝1ポイントで購入できます。そして読み終わった本を1冊売ると2ポイント獲得できるので
あれもこれもたくさんの本を読むことができます。
Bubbleの使い方を紹介
1.アカウント作成
Bubbleの公式サイト（https://bubble.io/）へアクセスし、右上の「Get started」をクリックします。
そしたらこのような画面に移るので、そこでメールアドレスやパスワードを設定したら完了です。
2.アプリ作成画面
アカウント作成が終わると、このような画面に移動すると思います。
最初はこのようにチュートリアルが自動で表示されるので、Bubbleのいろはを知りたい方はぜひやってみましょう。
英語で記載されていますが、赤い矢印が表示され、クリックする箇所を示してくれるので英語が理解できなくてもあまり問題がなさそうです。
このように指示に従いチュートリアルを進めましょう！
英語のままでは厳しい方はGoogle Chromeで日本語翻訳を許可していたら、常に日本語表記になりますので試してみてください。
指示通りに行ったらこのようスライドショーができました！
このようなチュートリアルが10個以上あるので、ぜひ1つ1つ取り組んでみてください。
3.アプリを作る
実際にアプリを作る場合は、「Create a new app」をクリックし、名前や種類などを書き込んで新しくアプリを作成しましょう。
4.操作画面の説明
Design
この画面ではテキストや写真など全てのデザインの編集を行う場所です。
Bubbleでアプリを作るときにほとんどこの画面で作業することになります。
Designタブにはテキストやボタンなどの様々な要素（element）があるのですが、英語のままでもなんとなく理解できるものがほとんどだと思います。
Workflow
ここではDesignタブでデザインした要素に条件をつけることができます。
ここはプログラミングの条件分岐の概念に近いのですが、使っていくうちに徐々に理解できるのであまり心配しなくても大丈夫です。
Data
ここはいわゆるこのアプリのデータを管理する箇所です。
ここでユーザーの名前やメールアドレスなどの情報を管理したりすることができます。
最初の頃は上のWorkflowとこのDataの箇所がややこしいのですが、意味がわかるとかなり重要な箇所なので頑張って理解しましょう。
Styles
ここでは文字のフォントを変えたり、色を変えたりなどの細かな操作ができます。
Googleドキュメントやワードとかに近いのでかなりわかりやすい箇所だと思います。
Plugins
ここではプラグインを追加したり削除したりすることができます。
プラグインを入れることで、便利な機能をダウンロードするだけで実装できます。
とはいえ便利だからといって、プラグインを入れすぎるとアプリが重くなってしまうので入れ過ぎには注意しましょう。
Settings
この箇所ではアプリの設定を変更することができます。
とはいえこの箇所はあまり使うことがないので、ある程度理解できていれば大丈夫でしょう。
Logs
サーバーの使用量などを示してくれる箇所ですが、Settings同様あまり使うことがない箇所です。
Bubbleのネットでのレビュー
GOOD
ノーコードには様々なツールがある
・アプリを作りたい
Glide、Adalo、AppSheet・Webサイトを作りたい
Webflow、Yappli、Wix・ECサイトを作りたい
Shopify、Base・上記複数に対応したい
bubble・作業能率化を図りたい
Zapierあくまで一例で、他にも多くのツールがあります#ノーコード
— ぐっち@ノーコードで独立目指す、ＮｏＣｏｄｅエンジニア (@Nocode_Marketer) June 18, 2021
ロジック考えるのは好きだけどコードを書くのが苦手な人はノーコードやローコードを学べば問題なしです。
僕は書かなくていいならコードを書きたくない派なので、Bubble、Adaloや Node-REDなどはとても好きです。
根本的な考え方を学んで、出来るだけ楽しましょ☺️#プログラミング初心者と繋がりたい— KENGO@大手SEからフリーランス (@kengopm) June 21, 2021
Bubbleはマルチタスクで、Bubbleさえあればなんでも作れちゃうところがオススメポイントです。
BAD
ノーコード、機能つくるよりデザイン調整のが難しい気がやっぱりする、、。慣れかもしれないけど。bubbleレスポンシブめちゃ作りにくい、、🥲#ノーコード#bubble
— Yumiko@植物性🥑ミニマリスト (@engineerman8) June 23, 2021
データベース勉強しているはずなのに、デザイン面で時間掛け過ぎてると気付いた今日この頃….
これからはデザインが完成したテンプレ使ってデータベース周りのみ編集する勉強法でやってみます💪#Bubble #ノーコード
— みっこー@NoCodeで身近な悩み解決 (@micco_catlike) June 23, 2021
機能面に関してはコーディング不要なので簡単ですが、やはりデザインに関してが一番大変ですね。
まとめ
・Bubble（バブル）はプログラミングの技術が不要でWebサイトやWebアプリを作成できるツールで、glide（グライド）など他のツールに比べて複雑なサービスを作れます。
・コーディングは難しいけど、しっかりと洗練されたWebサービスを作成したい方にオススメです。
・チュートリアルが豊富にあるので、まずはそこから始めましょう。
いかがだったでしょうか。
ノーコードツールは世の中に沢山あり、全てを把握しているわけではないのですが、
Bubbleはかなり優れたツールだと思います。Bubbleさえ使いこなせたら他のノーコードツールはいらないと言っても過言ではありません。
この記事を読んで少しでもノーコードツールのBubbleに興味を持ってくれたら嬉しいです。
コメント