ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

ノーコードでウェブアプリが作れる!Bubble(バブル)の使い方

f:id:toka-xel:20200116163409p:plain

まずは私の一番のお気に入りである Bubble (バブル)のことについて紹介します。

Bubbleとは

bubbletop.png (35.6 kB)

Bubbleは、ノーコードでWebアプリなどを開発することができるサービス開発ツール(サービス)です。無料から使うことができる上に、ビジュアルプログラミングに対応しておりコーディング経験がなくても直観的な操作でサービスを作ることができます。 主にスタートアップやビジネスオーナー向けに設計されていて、従来の開発方法に比べて安価で早く、そしてより柔軟に Webアプリを作成することができます。

なぜ Bubble なのか?

Bubbleは、プログラミングをすることなくWebアプリを作れるプラットフォームであるということです。

Webアプリ開発する際に必要となるプロトコルの知識、Webページを構成するHTMLやCSS、JavaScriptの知識、その他プログラミング言語の知識、DB設計の知識、開発用ツールや開発フレームワークなどの知識――、Bubbleはこれらの知識を必要としないため、ノーコードで簡単に、誰にでも自社ツールを開発するチャンスを与えてくれるプラットフォームであるためです。

・・・ただ、「それ、WordPress でもいいんじゃない?」と言われることがあります。

WordPress との比較

WordPress はとても優秀な CMS だと思います。

プラグインも充実しているし、テンプレートも豊富。この点では Bubble は WordPress に全くかないません。

ランディングページやブログ、静的なホームページなどを作るのであれば、WordPress の方が良いと思います。

ただし、それ以上の複雑なことをやろうとした場合、WordPress ではコーディングなしで実現することは難しいと思います。

あなたが技術者であり、簡単に WordPress に手を入れることができるのであれば、WordPress でもいいのかもしれません。

しかしながら、そうでないのであれば、Bubble の方がオススメです。

なお、SEO的にも Bubble はあまり強くはないと言われています。

そのためか、最近は、ランディングページだけは WordPress や SquareSpace、Landen で作成し、アプリへのログインページから Bubble で作成するというパターンを見かけるようになりました。

あとで紹介する Clarify がちょうどそのパターンなのですが、

www.clarifyhq.com → Landen

app.clarifyhq.com → Bubble

となっており、www.clarifyhq.com で Login ボタンを押すと app.clarifyhq.com に遷移するように構築されています。

Bubble で作られた Webアプリ

Bubble は 2015年後半にリリースされ、2018年6月時点で 16万人以上のユーザーがいて、ビジネスとして稼働しているものも何千という単位であるそうです。いくつかご紹介します。


MirrorMirror

https://mmirror.io/

簡単な A/B テストを行える Webアプリ。

2019年3月に行われた Product Hunt Makers Festival の Everything Else 部門で見事優勝しました。


Clarify

https://www.clarifyhq.com

自分のキャリアを管理する Webアプリ。成果等をトラッキングして、給与交渉などに利用するそうです。マクドナルドなど大手企業でも採用実績あり。

2019年7月12日現在で Product Hunt の upvote: 173


Qoins

https://qoins.io/

借金を管理して返済もできる Webアプリ。

2019年7月12日現在で Product Hunt の upvote: 144


Bubbleの始め方とレッスンについて

Bubbleを使うにあたり初めに専用アカウントを作成する必要があります。作成手順は、フリーメールやチャットツールなど一般的なアカウント作成とほとんど変わりません。

【Bubble公式サイトはこちら】

Visual Programming | Bubble


アカウント作成手順

■1. Bubble公式サイト https://bubble.is/ へアクセスし、右上の「sign up」をクリック。

■2. Email、Passwordを設定(入力)し、「SIGN UP, IT'S FREE」をクリック。

01_signup.jpg (22.5 kB)


■3.レッスンでBubbleの使い方を学ぶ(省略可能)。

02_lessons.jpg (65.3 kB)

各レッスンではBubbleの使い方や機能をナビ付きで教えてくれます。レッスンはいつでも確認することができるので、とりあえずコンソールを見たい方は「CREATE A NEW APP」をクリックしましょう。


あとは作るだけ

これだけでBubbleの事前準備は完了です。どのようなアプリ、ホームページ、サービスを作るか設計し、Bubbleに描き起こしていきましょう。


具体的なアプリの作成方法

当ブログでは、具体的なアプリの作成方法を解説しています。

下に載せているアプリは Bubble 入門者向けに作成しておりますので、よろしければ順に見てください。 もちろん気になったものがあれば、そちらから見ていただいても大丈夫です。


twitter のような簡単な SNS をBubble で作ってみる(入門者向け)

blog.nocodelab.jp


元号ジェネレーター


OGP画像 かんたん作成

blog.nocodelab.jp


Bubble で作る「4択クイズアプリ」


Bubble で作る「フラッシュカード」


Bubble でログイン処理をしてみよう!