自主制作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つを考えています。

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