こんにちは、プロダクトマネージャーの田嶋です。
春と言えば新しい出会いの季節・・・そう、マッチングサービスですよね💓(?)
YouTubeにノーコードツール「Bubble」の初心者向け解説動画として「マッチングサービス」の制作方法が公開されており、以前からノーコードに関心があったため、今回はそれをなぞって再現してみました。本ブログは、当該動画の学習を通じたBubbleの使用感レビューとなります。
Bubbleってなんか聞いたことあるけど、
- どこまで複雑なことができる？
- 学習難易度はどれくらい？
の話題に関心のある方はぜひ読み進めてください💡
【目次】
学習動機 / Bubbleを選んだ理由
そもそも何故ノーコードを学習したか？と言うと、
- シンプルに楽しそう
- PdMとしての守備範囲が広くなりそう（プロトタイプ検証を自分でできる等）
の2点が主たる理由でした。
ツール選定については、以前に STUDIO を利用したことがありましたが、習得が簡単な一方、できることはホームページ作成程度で、会員登録のような複雑なことはできないツールでした。
Bubbleについては 解説ブログ に
Bubbleはノーコード開発ツールの中でも、最も高度なアプリを作れるツールです。
と紹介があり、期待と不安が半々な感じもありましたが、Bubbleに詳しい友人が身近にいることも後押しとなり、勢いで始めてみました（困ったら聞いたろ精神）
初手としてマッチングサービスがお勧めされる理由は、あらゆるサービスへ応用が効く汎用性の高さです。アカウント登録や決済等の一般的に必要とされる基本機能を備えたうえで、マッチングサービスは男女の出会いだけでなく様々なサービスが存在する（メルカリ、クラウドワークス etc.）ため、幅広く応用が効きそうです。
Bubbleの利用料については、一般公開すると月額費用が発生する課金形態ですが、非公開であれば無料で利用できます。
作成した画面
合計10以上の画面を作成しました。ざっと一覧でご紹介します。
※管理画面側もありますが、今回の紹介はユーザー側のみ。
■LP / アカウント登録 / ログイン
基本情報を入力してアカウント登録・ログインができます。
※LPに記載した情報はテスト文章であり事実とは異なります。
■ユーザー一覧 / 検索 / 詳細
異性ユーザーを確認でき、相手へ「いいね💗」を送ることができます。
■マッチングまわり
互いに「いいね💗」を送りあった場合にマッチングします。また「いいね💗」をくれたユーザーが分かるページも用意しています。
■チャットまわり
マッチングしたユーザーとチャットのやり取りができます。一覧では、最新のメッセージを確認できます。
■マイページ / プロフィール
自身のプロフィールを確認・編集できます。
■いいね購入
クレジットカードで「いいね💗」を購入できます。（初回登録時に3つ付与があり、ログイン条件によっては追加の無料付与もあります。）
ちなみに決済機能は自身で作り込んでおらず、プラグインのSripeを利用しました。
Bubbleの制作画面
制作に利用したのは、主に次の3画面です。
■Design
パーツを並べてお絵かきしたり、表示情報の参照元を定義する画面です。
添付のプロフィール詳細画面の例では、開いたユーザーの各種プロフィール情報を取得するよう定義しています。
■Workflow
アクションに対する挙動を定義（画面遷移 / データ作成）する画面です。
添付のプロフィール詳細画面の例では、「いいね💗」を押した後の挙動を定義しています。（このロジックは具体例として後述します）
■Data
テーブルを定義する画面です。
今回は3つテーブルを用意しました。
1.All Users：ユーザー情報
「Like Users」のカラムがマッチングの肝です。
2.All Chat Groups：マッチングした2人により作成されるチャット部屋
チャット一覧に表示する "最新のメッセージ" は、このテーブルの「Last Text」を参照しています。
3.All Chats：チャットで送信された全テキスト
全てのやり取りはここに記録されます。
感想
■雑感
シンプルにBubbleすげー！と思いました。本当にマッチングサービスができちゃった、と率直に驚いています。
そして楽しかったです。教材をなぞっているとは言え、自分の意図した通りにプレビューで動いた時はアガりますね。モノ作りって楽しい！
■作業時間
動画尺7h弱に対して、実際の作業時間は40hくらいでした。
後半は要領を掴んで大分スピードが上がったと思いますが、特に前半は動画と並行で作業するのは難しく、止めては戻してで、なんだかんだで結構時間が掛かりました。ただ、もしノーコードと知らず、5人日でこのサービスができたと聞いたら、通常のWeb開発と比較してめちゃくちゃ早いと感じます。Bubbleを極めたら動画のとおり1日でサービスを作れる世界線もあるのかもしれません。この早さはさすがノーコードですね。
■Bubbleの習熟難易度
前評判通り、やはり少し難しく感じました。
しかし、それはBubbleに対してと言うよりも、それなりに複雑なモノを作るにはロジックが必要で、"ノーコードと言えど要件定義プロセスは必要" というのが体感としての気付きでした。（ノーコードに幻想を抱きすぎていた👀）
実際に動画内でも、「プログラミング言語の学習は不要ですが、プログラミング的思考は必要」と話されていて、開発に全く関わりのない職種の方にとってはそこに慣れることに時間を要するかもしれません。
例えば・・・
- ボタン押下時に、どんな条件において、どんな情報を生成するか
- 画面表示する内容は、何を参照するか
解説動画は要件定義書や仕様書のドキュメントなくひたすら作業のみ進んでいくため、脳筋で追いかけていると「あれ、今は何のための設定をしているんだっけ？」と時々迷子になりました。（設計なく場当たり的に作ってるとしたら、動画のup主はまじで賢いと思いますw）
マッチングサービスにおけるロジックの具体例としては、「いいね💗」の挙動に以下のようなロジックを設定しています。
- 💗は、残り1以上の場合のみ押せる（1未満なら購入ページへ）
- 💗を押すと、相手の「💗をくれた人リスト」に自分を追加
- もし自分の「💗をくれた人リスト」に相手もいればマッチング
- マッチングすると、2人のチャットグループを作成する
- ただし、既にマッチング済みの場合はチャットグループを再作成しない
もし自分でサービスをイチから作るとしたら、前工程としてUIフローやテーブル定義書くらいは用意してから臨むのが良いと思いました。
おわりに
◎Bubbleは殆ど何でもできるは、本当 👍
体感としてもそう思いましたし、また実際にBubbleに詳しい友人も「ネイティブアプリと、サクサクと素早い動きが必要なサービス以外は基本的に何でも作れる」と話していました。
◎ノーコードと言えど、要件定義プロセスは必要 ⚡
"作る"ことが簡単なだけで、"どう作るか？"は人間自身が考える必要があります。ここは私もノーコードに幻想を抱きすぎていたところでした。
一方で、AIの台頭により検討プロセスまでもを不要とする未来が、そう遠くない日に来る気もしています。昨今のChatGPTを始めとする生成系AIには、私も日々驚かされている1人です。人間が作りたいサービスのアイデアをざっくり伝えるとAIが良い感じにやってくれる、人間はそれをベースに細かな修正を指示するだけ、というようなサービス開発が近い将来主流となっているかもしれません。
すると最終的に我々人間が価値を発揮できるのは、作りたい意思と、それを適切に言語化できる能力なのでしょうか。PdMとしてはより上流・事業側のスキルを高めた方が良いのでは..？等々、絶賛模索中だったりもします。笑
最近は少しバタバタしており次の学習がまだ取り組めていない状況ですが、また別のサービスも作って遊んでみようと思います。
以上、ありがとうございました！
ユニファでは仲間を随時募集しています！詳細は下記の募集要項をご覧ください。
