https://www.fluff-maps.com

サービス概要

動物とふれあうことができる施設（動物園、牧場、動物カフェなど）を、施設のジャンルや動物の種類ごとに検索したり、マップ上で見ることができるサービスです。

ターゲットユーザー

年齢、性別を問わず動物とふれあうことが好きな方

ユーザーが抱える問題

• 動物とふれあえる施設を探したいが検索してもまとめサイトしかなく、地域やカテゴリごとに探すことが難しい
• ふれあいコーナーのない動物園なども動物とふれあえる施設として紹介されていたり、ふれあえる動物の種類が記載していなかったりなど、欲しい情報が手に入りずらい。

解決方法

• 施設のジャンルやふれあえる動物の種類を選択して絞り込み検索できる。
• 検索結果の一覧画面や施設詳細ページでふれあえる動物の種類が分かる。
  • ふれあいコーナーのない動物園などは掲載せず、動物とのふれあいに特化したサービスとなっています。

このサービスを制作した背景

私自身、動物とふれあうことが好きでよく動物園や牧場に行きます。 しかしそういった施設を検索しても絞り込み検索ができるようなサービスが少なく欲しい情報も手に入りにくいため、簡単に検索できて動物の種類が分かりやすいサービスが欲しいと思い製作しました。

製作するにあたり掲載する施設の質にもこだわりました。 中には適切ではない環境で飼育をしたり、動物のストレスを考慮しないなど配慮が足りない施設も存在します。 そういった施設を掲載することの無いように可能な限り口コミや評判をチェックしたり、詳細画面に報告機能を作成するなどできる限りの工夫をしました。

機能の紹介

トップページ	トップページ中部
・メイン機能の検索フォーム	・全ユーザーの投稿画像がランダムで表示されます

トップページ下部	検索結果
・動物やカテゴリのリンクが一覧で見れます ・クリックすると関連する施設を全件取得して一覧で表示	・該当する施設をマップと一覧に全件表示

詳細画面	写真投稿画面
・施設の詳細情報を表示	施設に関する画像を投稿できます ・コメントを任意でつけることができます

報告画面	プロフィール
・施設を管理者に報告する機能です ・報告が完了すると管理者にメールが届きます	・お気に入りの動物やカテゴリーを設定することができます ・お気に入りを設定するとトップページでお気に入りに基づいたオススメの施設を表示します

その他の画面、機能

・フリーワード検索

・ユーザー登録、ログイン機能

・パスワードリセット機能

・Twitterログイン機能

・施設のお気に入り機能

・Twitter、LINEによる共有機能

・利用規約、プライパシーポリシー

・アプリ紹介ページ

・Googleフォームでお問い合わせ機能

・管理画面

など

画面遷移図

https://www.figma.com/file/utIO1lkRWOHriQEhteZ15g/%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA?node-id=0%3A1

ER図

使用技術

バックエンド

• Ruby 3.1.2
• Rails 6.1.6

主要ライブラリ

• Sorcery（ログイン）
• SeedFu（データ作成）
• CarrierWave(画像アップロード)
• ActiveHash（擬似的なテーブル作成）
• MetaTags(SEO)
• RSpec(テスト)
• RuboCop(リントチェック)

フロントエンド

• HTML/SCSS/JavaScript
• CSSフレームワーク
  • Tailwind CSS
  • daisyUI

インフラ

• Heroku
• PostgreSQL（データベース）
• Amazon S3（本番環境の画像アップロード）
• SendGrid（本番環境のメール送信）

その他

• TwitterAPI（Twitterログイン）
• GoogleMapsAPI
• GooglePlacesAPI（施設データ取得）

ツール

• Googleアナリティクス (GA4)
• Googleサーチコンソール
• Google広告
• キーワードプランナー （Google広告）

関連リンク

サービス紹介記事

https://qiita.com/kazuki1025okumura/items/c4f23d62a8d333b8be46