KentoBF5587 / bookstore_visitor

0 stars 0 forks source link

ほんやがたり

アプリのロゴ

目次

■ サービス概要

〜今こそ本屋を語りましょう〜

本屋を訪れるのが好きな方を対象にしたサービスです。ユーザーにとっての”推し本屋”を見つける手助けをします。本屋を検索し、その本屋に対して”どんなところが好きか”を投稿できます。行ってみたい本屋を見つけたら自身のアカウントに”行ってみたい本屋”としてブックマークを保存し、確認することも可能です。  

■ サービスURL

https://bookstore-visitor.fly.dev/

■ このサービスへの思い、作りたい理由

「書店が10年間で764社が倒産」、「現在書店がない市町村は全国の約26%」と書店に関しての悲しいニュースをよく耳にします。一方で、「本屋が好き」「本屋で知らない本に出会うのが好き」という意見もまだまだあります。

書店は「紙の本を手に入れるところ」に留まらず、「1つの楽しめるスポット」という要素があるのではと思います。

 書店員によって陳列された本のラインナップを見て、当初は買う予定のなかった本をレジに持って行ってしまう方も多いのではないでしょうか。あるいは、観光地で記念スタンプを押す楽しみがあるように、普段行かない本屋で買った本が思い出に残るという事もあるのではないでしょうか。

「販売スペースのラインナップ」、「居心地の良さ」、「ユニークな試み」など人によって本屋の好きなところは様々だと思うので、「どんなところが好きか」を共有していければと思います。

自分も「書店でどの本をカゴに入れるか」迷ったりする時間が好きなので、書店に思い入れがある1人としてこのアプリを作ってみたいと考えました。

■ ユーザー層について

書店が好きな方

 ”読書”というよりも今回は”本屋”がアプリのテーマになっているので選びました。本屋で過ごす時間が好き、珍しい本屋に行ってみたいと思う方向けのサービスです。

■ サービスの利用イメージ

ログインなし

本屋検索・”おすすめ文”の閲覧
Image from Gyazo
本屋の検索が出来ます、また本屋に紐づくおすすめ文の閲覧も出来ます
診断機能
Image from Gyazo
簡単な質問に答えることで、診断機能で遊べます(全6種類)

ログインあり(Googleログインも可能)

プロフィール編集機能
Image from Gyazo
プロフィールページを編集する機能
本屋を新規登録する作成
Image from Gyazo
本屋の投稿が出来ます。建物名を入力するとオートコンプリート機能により地名が表示されます
”おすすめ文”の作成
Image from Gyazo
"おすすめ文"の作成が出来ます。”おすすめ文”を書くことで、ユーザーはその本屋を”推し本屋”とする事が出来ます
本屋を”行きたい本屋リスト”に追加
Image from Gyazo
しおりのアイコンをクリックすると、”行きたい本屋リスト”に追加することが出来ます
”推し本屋”で買った本を記録
Image from Gyazo
”推し本屋”で買った本を記録する事が出来ます。

■ サービスの差別化ポイント・推しポイント

本屋の検索はGoogleなどで条件や書店名を調べたら簡単に出てきます。

そちらと差別化を図るために、

本屋ごとにタグを設定し、タグをクリックする事で絞り込み検索が出来る。

例. 「関東」「ポップがユニーク」「広い」「落ち着く」「イベント開催あり」「買った本をすぐ読める」「ラインナップがユニーク」「個人経営」「カフェなどが併設」「アクセスが良い」「メディアで紹介(雑誌・TV・有名なブログなど)」

「本屋のレビューページ」をユーザーが書いていて楽しくなるような仕組みを取り入れていきます。

現段階で取り入れようと考えているのは、「自己紹介カード」のような形になるレビューです。なるべくライトな質問をあらかじめ用意し、それに答えてもらうとカードのようなものが出来上がるイメージです。

例. 「〇〇書店について(ここは選んだ本屋の名前が自動的に入力されるようにする)」「かいた日」「この本屋と出会ったきっかけは?」「初めて行ったのはいつ頃?」「どんなところが好き?(テキスト入力するか、もしくはここでタグをユーザーに選んでもらうか)」「この本屋にキャッチコピーをつけるとしたら?」「推し本屋の愛を自由に書いて!」

ユーザーは好きな本屋を「おすすめの本屋」として登録することができ、そこに”その本屋でどの本を買ったか”を登録する事が出来るのもポイントです。

■ 使用技術

カテゴリ 技術内容
開発環境 Docker
サーバーサイド Ruby 3.2.2 Rails 7.1.3.2
フロントエンド Hotwire, JavaScript
CSSフレームワーク Bootstrap5.3.3
WebAPI GoogleMapAPI
アプリケーションサーバー Fly.io
データベースサーバー PostgreSQL
バージョン管理ツール GitHub
コード解析ツール Rubocop

■ 画面遷移図

Figma:https://www.figma.com/file/e1JOvfTRraI07AInM1CVNz/%E7%94%BB%E9%9D%A2%E9%81%B7%E7%A7%BB%E5%9B%B3?type=design&node-id=0-1&mode=design&t=r8YJaMB9n1libCFU-0

■ ER図

draw.io: https://app.diagrams.net/#G1Dd2jxO4JVnGLgIRyG7FojvgRva0GJIDr#%7B%22pageId%22%3A%22C5RBs43oDa-KdzZeNtuy%22%7D