こんにちは。

この記事では、ノーコードツールのBubbleを使った開発事例として、弊社が関わった案件を元に紹介していきます。

TwitterなどのDMに、日々多くの相談を受ける中で、Bubbleでどういったサービスが構築できるのか？という参考にしていただけるものを作成したいと思い、シリーズ化しています。

前回の好評をいただいた第一弾、TripBookの記事をまだご覧になっていない方はこちらから。

Bubble開発事例の第2弾である今回のサービスは、食品ロスを題材にしたスタートアップのFreeatを紹介します。

このプロジェクトは、2020年8月に行われた、Startup Studioとノーコーダーとのマッチングイベントにノーコーダーとして参加した際に、私が興味を持ちチームに加わりました。

このサービスを大きく分類するとすれば、C to C向けプラットフォーム。ということで、メルカリやジモティーなどの出品から受け取りまでを行うサービスをノーコードで作成したといえます。

Freeat:広告で価値ある余剰食品を無料に

このサービスは、アプリ上で広告視聴したユーザーが、賞味期限の近い余剰食品を無料で得ることができる“タダメシ”＆食品ロス削減サービスです。

サービス自体は正式リリースまでは至らずですが、実店舗との実証実験を複数回に渡り行い、ミニマムに検証を高速で行いながら開発を回すという特徴的な活動ができました。

Bubble上で広告配信プラットフォームを独自で構築し、実際のユーザーさんに使っていただくまでの実働レベルにもなり、単なるAdSenseによる広告収入以外の収益構造も可能であることがわかります。

Freeat サービス概要

Freeatは、以下の登場人物でビジネスモデルを構成しています。

1. レストランや居酒屋など、余剰食品が出てくる実店舗による"余り物の出品者"
2. それをプラットフォームで見て、店舗まで無料で取りに行く申請をする"受取り者"
3. 受取り者に対して広告配信 & アンケートの収集を行う"広告配信者"

Freeatでは、アプリを介して余剰商品の出品・受取り申請までを可能にしており、受け取る際には1分程度の動画広告の閲覧が必須になります。実証実験では、学生をターゲットにしてユーザー獲得をしていたため、動画広告には就活系メディアやレンタル系サービスなど、ターゲティングがしやすいものになっています。

また大きな特徴として、動画広告閲覧後に広告主が事前に用意したアンケートに答えてもらう機能もあり、アンケート結果の提供と送客を価値提供として広告配信料をいただくモデルとなっています。

ここからは、プラットフォーム型(CtoCのサービス)として汎用性のある機能を紹介し、Freeatならではの機能について(申告後の実際の受け取り判定など)も含めて解説していきます。

Bubbleの技術的論点

この章では、Freeatの開発に取り入れた具体的なBubbleの機能・技術について解説します。 ここで解説する技術は、Freeat以外にも汎用的な機能も多く、別サービスでもどのように活用できるかを紹介しています。 サービスのイメージなどが具体的にできるようにしています。  

Bubbleの基本機能

出品機能

1つ目の機能は、出品機能です。この機能は余剰商品を抱えた店舗ユーザーさんが利用する機能です。

Freeart出品画面。メルカリのような販売商品出品には汎用的に利用できます。

この機能は、冒頭で触れた通り、メルカリなどのC to Cプラットフォームなどでユーザーが商品を出品したり、CrowdWorksのような求人紹介マッチングのようなサービスとしての基本機能です。

商品ごとにタイトル・写真・説明文・在庫・カテゴリーなどを登録・編集することができます。

Freeatの場合は、それに加えて受け渡し可能時間帯と掲載開始日時を合わせて登録することで、サービスに必要な情報を記入してもらいます。

この機能がいかに汎用性が高いかというと、弊社が運用しているKoremoという書籍のシェアプラットフォームでもほとんど同じ形式で構築をしていることからもご理解いただけると思います。

後述しますが、Freeatの構築は弊社のKoremoをトレースしたものであり、デザインや通知の基本機能などは受け継いだものを再利用することで、ノーコードの開発期間をさらに短縮することに成功しています。

このように、プラットフォーム型となるものには共通点が多く、ノーコードBubbleの強みである開発スピードを最大限に活かしたプロダクト開発・検証用簡易サービスなどの提供を得意としています。

商品受け取りフロー

出品された商品を受け取る際、学生は商品の一覧ページから、現在地に近い食品や、カテゴリー・商品名などで検索をかけ、余剰商品を探します。一覧から詳細ページにいくと、その店舗の情報や受け取り可能時間など、先述の商品の出品情報が閲覧でき、受け取り申請に進みます。

申請を行った学生は、1分間の動画広告の視聴後にアンケートに答え、取引に進みます。

商品の取引完了は実店舗まで取りに行くことで完了するため、アプリ内で完結はしません。

学生が本当に取りに行ったのかを判定するために、店舗側の取引画面に4桁のピンコードを表示し、それを学生が受け取り時に入力して取引を完了する。というシステムを構築しています。

取引画面

商品の受け取り完了の管理については、そのビジネスモデルに応じて複数の仕組みが考えられるかと思います。

書籍シェアサービスのKoremoでは、メルカリのように商品(書籍)が購入者に渡った際に、受け取り完了の処理と販売者レビューを行うことで実装を行いました。

カテゴリー検索

こちらもプラットフォーム型のサービスでは必須の機能です。

下のYouTubeはKoremoの操作動画になりますが、このようにカテゴリーごと・出品状態ステータスなど複数の切り口での検索が可能となります。

地図検索

この機能も多くの相談者さんからよくいただきます。

地図上に複数の店舗のピンを立てて、それをクリックすると詳細が表示されるような仕組みになっています。

この機能はBubbleのmapエレメントを使って実装しており、地図の見た目は複数パターン設定することができます。

発展機能

広告配信管理

これがFreeatの大きな特徴であり、ビジネスモデルを構築するための肝になる機能です。

多くのwebアプリが広告マネタイズを考えた場合、AdSenseやAdmob、アフィリエイトなどが考えられます。

Freeatでは、高いコンバージョン率・社会課題解決系サービスであるという2点から、サービスに共感していただける広告主を独自開拓することで広告配信を行っていました。

10社ほどの配信企業ユーザーからの動画広告が流れ、それらは BubbleにHTMLを直書きすることで実現しました。

動画を埋め込む方法にはいくつか方法があります。YouTubeの埋め込みや、実ファイルを再生するものもありますが、広告のように以下の要件を満たすための実装が必要でした。

• 特定のユーザーの操作で動画が自動再生(JavaScriptでトリガー制御)
• 広告クリックで広告主のメディアやLPへ送客
• クリック回数の計測

HTMLでの動画実装

このように、一見Bubbleの機能だけでは実現できないカスタマイズ性の高い機能でも、実際にHTMLやJavaScriptを書くことによって実装する場面が多々あります。

テンプレート開発の効果

先述の通り、今回のサービスは弊社が開発したCtoCのプラットフォーム型のテンプレートを使用することで、本来かかる開発コストを大幅に下げることに成功しました。

出品・購入(申請)・取引・メッセージ・評価というプラットフォームに必要な機能がパッケージ化されており、実際に開発開始からα版のリリースまでは2週間ほどで完了しています。

ノーコードBubbleでの開発と、パッケージ化されたサービス提供は今後もますます増えていくと考えられます。

実際、私がCTOとして拘っているQEDでも、6月2日にPakejiをリリースしました。

Pakejiには、社内業務効率化や新規事業などさまざまなシチュエーションに合ったシステムテンプレートが存在しているため、低コストで自前のソステムを持つことができます。

こちらもお気軽にご相談ください。

スタートアップとノーコードの相性

今回の記事では、スタートアップスタジオから生まれたプロジェクトであるFreeatについて紹介しました。

フードロスという大きな社会問題について、小資金で短期間に実証実験にまで持っていくことができました。

この例のように、今回当事者となった身としてノーコードとスタートアップのMVP作成は非常に相性が良いと感じました。

ユーザーに使っていただき、その声を聞いて目のまで修正していく、これができるのがノーコードでの開発の最大の強みだと考えます。

今後も、弊社ではスタートアップの新規事業支援なども強化していく予定ですので、独自の高速開発ノウハウを提供していきます。

  Twitterでは、日々ノーコードBubbleに関する情報や最新のニュースをタイムリーに発信しています。 開発のご相談などいつでも承っておりますので、お気軽にお声かけください。

Twitterプロフィールへ