【ノーコード】Bubbleとは?特徴と共にBubbleの使い方を解説

スポンサーリンク

プログラミングやIT関係に詳しい方は、ノーコードという言葉を聞いたことがあるのではないでしょうか。

ノーコードとは簡単に説明すると、プログラミングの技術なしでWebサイトやWebアプリをを作れる技術のことです。

詳しくはこちら

【初心者必見】プログラミングの知識が必要ないって本当?今話題のノーコードに関して紹介!
【初心者必見】プログラミングの知識が必要ないって本当?今話題のノーコードに関して紹介!
みなさんこんにちは!mayoblogのハヤテです。 最近コロナの影響で在宅ワークが増えましたね。その影響で急速にエンジニア人材の需要が高まったことをご存知ですか.....

そしてノーコード開発をするためには、ノーコードツールを使う必要があります。

ノーコードツール紹介記事

プログラミング未経験者にもおすすめ! 最強ノーコードツール7選
プログラミング未経験者にもおすすめ! 最強ノーコードツール7選
みなさんこんにちは! mayoblogのハヤテです。 ノーコードというツールが最近、爆発的に人気を伸ばしているのはご存知でしょうか? ノーコードの登場によってI.....

その中でもオールマイティーなツールのBubble(バブル)について今回は紹介しようと思います。

この記事を読むことで

  • Bubbleってどんなツールなの?
  • 他のノーコードツールとどこが違うの?
  • Bubbleの使い方を知りたい!

これらの疑問を解決できます。

スポンサーリンク

ノーコードツール【Bubble】とは?

概要

Bubble(バブル)とはプログラミングの技術が不要でWebサイトやWebアプリを作成できるツールで、他のツールと比べても知名度が高く、安心して使用することができます。

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に関して詳しくはこちら

誰でも一瞬でアプリを作れるノーコードツールの【glide】とは?
誰でも一瞬でアプリを作れるノーコードツールの【glide】とは?
最近IT業界でノーコードブームが巻き起こっています。 ノーコードとは そんなノーコードブームの中、みなさんは「glide」というノーコードツールをご存知ですか?.....

Bubbleで作られたサービスを3つ紹介

1.HelloGuru


HelloGuruはBubbleで作られた、ノーコード学習サイトです。

Bubbleはもちろん、glideやadalo、またWebflowなどの多岐にわたるノーコードツールの学習をすることができます。

https://university.helloguru.io/

2.Zeroqode

ZeroqodeはBubbleで作られたノーコードWebアプリ開発ツールです。

ノーコードツールで作られたノーコードツールとはなかなか斬新で面白いですよね。

「コーディングより10倍早く作成できるが、コーディングに引けを取らないものを作れる」と歌っているのだけあり、かなり使いやすいツールです。

Zeroqode |No-code app templates, courses, plugins and more
No-code app templates & plugins for Bubble, courses, backends, webview packages for native apps. Now you can build apps without code even faster

3.コレモ

コレモでは「これも読みたい」「あれも読みたい」と言った希望を叶えてくれます。

登録時に3ポイントもらえ、本1冊=1ポイントで購入できます。そして読み終わった本を1冊売ると2ポイント獲得できるので

あれもこれもたくさんの本を読むことができます。

「コレモ」本をシェアする
読書好きのための、書籍シェアサービスです。月額300円で本が何冊でも借り放題!全く新しい本をシェアするプラットフォームで、コレも読みたいを叶えます。

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

Bubbleはマルチタスクで、Bubbleさえあればなんでも作れちゃうところがオススメポイントです。

BAD

機能面に関してはコーディング不要なので簡単ですが、やはりデザインに関してが一番大変ですね。

まとめ

・Bubble(バブル)はプログラミングの技術が不要でWebサイトやWebアプリを作成できるツールで、glide(グライド)など他のツールに比べて複雑なサービスを作れます。

・コーディングは難しいけど、しっかりと洗練されたWebサービスを作成したい方にオススメです。

チュートリアルが豊富にあるので、まずはそこから始めましょう。

いかがだったでしょうか。

ノーコードツールは世の中に沢山あり、全てを把握しているわけではないのですが、

Bubbleはかなり優れたツールだと思います。Bubbleさえ使いこなせたら他のノーコードツールはいらないと言っても過言ではありません。

この記事を読んで少しでもノーコードツールのBubbleに興味を持ってくれたら嬉しいです。

この記事を書いた人

須田 隼(ハヤテ)

現役米国大学生

都内の国立大学を受験するも失敗。その後元々の夢だったアメリカの大学進学を決意。
 このブログではアメリカの大学に入って経験したことや、英語、または様々なスキルに関して紹介していきたいと思います!
 是非コメントや疑問点が有りましたら連絡お願いします!!

コメント

タイトルとURLをコピーしました