自主制作Webアプリ解説「パンBOX – お気に入りのパン屋さんを見つける、つながる」

制作物/つくってみた

アプリ概要

ユーザーは福岡市内のパン屋を探したり、口コミ投稿やお気に入り保存ができます。また、店舗側は店舗情報充実や口コミへの返信ができるアプリです。

  • ユーザー側
    • 福岡市にあるパン屋を検索できる
    • パン屋への口コミを点数付きで投稿・編集・削除できる
    • お気に入りのお店、行ってみたいお店をマイページで管理できる
  • 店舗側
    • メニューやお店のこだわり・思いを公開できる
    • 店舗情報充実
    • 口コミへの返信

このアプリを作った背景

自分が困ったり、残念に思った経験と、パン屋業界の状況を踏まえて「こんなものがあればもっとパン屋業界が良くなるのでは」と考えたため。

私の経験

  • 「え!あそこのパン屋さん潰れちゃったの!!??好きだったのに…。」という残念な経験
  • 「パン好きだし、良いパン屋さん探したいけど、ググってもいまいち出てこない…。でもインスタでいちいち探すのは面倒。。」という困り事

パン屋業界の状況

2019年の倒産件数は31件。前年比2.1倍となり過去最多を更新した。負債規模別では、「5000万円未満」が22件と、小規模倒産が7割を占めた。

帝国データバンクより引用

思ったこと

パン屋さんを求めている人と、パン屋さんのどちらも困ってる状況なんだったら、どうにかしたい!!

と思い、双方に下記のようなメリットのあるサービスを作ることを決めました。

  • ユーザー側
    • どんなパン屋さんがどこにあるか、どんなメニューがあるか分かる
  • パン屋側
    • 自店舗の認知を広められる(=マーケティングの場)
  • 私の野望
    • パン屋の思いや創業背景も伝えられる仕様にすることで、ユーザーにパン屋により親しみを持ってもらう(=ユーザーとパン屋の距離を縮める)

【補足】食べログやホットペッパーなど、大手グルメサイトは既にありますが、それらのメインターゲットは収益面から見ても「予約ができる飲食店」かと思われるので、そこに該当しないパン屋には、特化サイトを作る意義があると考えました。

機能

  • 新規登録機能(ユーザー・店舗)
  • ログイン・ログアウト機能
  • 検索機能(キーワード・エリア・パンの種類)
  • 口コミ投稿・編集・削除機能
  • お気に入りリスト、行ってみたいリストへの登録・削除機能
  • 検索結果、レビュー、お気に入りリストの並び替え機能
  • マイページ機能
  • 店舗管理機能
  • ページネーション機能

新規登録機能

ユーザー・店舗それぞれに対する新規登録機能。

ログイン・ログアウト機能

ユーザー・店舗それぞれに対するログイン・ログアウト機能。

検索機能

キーワード検索、エリア検索、パンの種類検索の3種類が可能。

また。上記3種類のAND条件での検索も可能。

口コミ投稿・編集・削除機能

ユーザーは、口コミの投稿・編集・削除ができる。

店舗は自店舗への口コミに対してのみ、返信可能。返信は編集・削除可。

お気に入りリスト、行ってみたいリストへの登録・削除機能

お気に入り登録・行ってみたい登録の2種類があり、ボタン1つで登録・削除が可能。

並び替え機能

検索結果一覧、レビュー一覧、お気に入り・行ってみたいリスト一覧の並び替えができる。

フロント側で並び替えを行っているため、通信は必要なく高速な並び替えを実現。

マイページ機能

お気に入りリスト・行ってみたいリスト・自分のレビューの3種類の一覧を確認できる。

ユーザー情報の編集・削除も可能。

店舗管理機能

店舗情報の登録・編集・削除ができる。

ページネーション機能

検索結果一覧・レビュー一覧・お気に入り・行ってみたいリストの4か所で、ページネーション機能を実装。

ポイント

  • すべて非同期通信(SPA)。
  • アトミックデザインを意識したコンポーネント管理。
  • GitHubでコミットやプルリクを使用しながら開発。
  • CSSクラス名はBEM記法を実践。
  • Laravel Sanctumを用いた認証機能。
  • ログインユーザーに合わせて、同じぺージでも表示するコンポーネントを変更。
  • 並び替え機能により、目的に応じた検索性を向上。
  • 口コミ投稿等をモーダルで実装し、よりシームレスなUXに。
  • ぱっと見ても使いやすく分かりやすいUIにすることを意識。
  • レスポンシブ対応済。

使用技術等

  • フロントエンド:TypeScript, React, HTML, Sass
  • バックエンド:PHP, Laravel
  • DB:PostgreSQL
  • インフラ:AWS(EC2 | Route53 | RDS)
  • ソースコード管理:GitHub

環境

  • TypeScript 4.1.3
  • React 16.14.0
  • Laravel 8.22.1
  • PHP 7.3.26
  • PostgreSQL 12.5

※ER図

ローンチした際のマネタイズ方法

主に2つを考えています。

  • 広告収入
    • バナー広告
  • 店舗からの収入(こちらは店舗数が充実してから)
    • フリープラン、スタンダードプラン、プレミアムプランなどプランを作成し、スタンダードプランとプレミアムプランの場合は課金を必要とする
      • プランごとに、メニュー掲載可能数、おすすめ店舗として表示される数を変える
      • プランによって利用可能機能を制限<例:スタンプカード機能(未実装)、クーポン発行機能(未実装)>
タイトルとURLをコピーしました