チーム17 R-Hack
旅行を計画するとき、多くのサービスは「場所」や「宿」を起点に検索する。
しかし実際には、
- 「牡蠣が食べたい」
- 「粉もんを食べ歩きしたい」
- 「その土地の名物を味わいたい」
のように、食べたいものが旅の動機になることも多い。
私たちが本当に欲しかったのは、おいしものを食べたいという気持ちから、
行き先も、店も、宿も、迷わず決められる体験
- 食べたいもの（特産品）から旅行先を探せる導線が弱い。
- 食と宿泊の情報が分断されていて、計画に手間がかかる。
- 地域の魅力（特産品）が「知って終わり」で、行動につながりにくい。
結果として、「食べたい」→「どこで？」→「近くの宿は？」を別々のサイトで調べる必要があり、
旅の計画に時間とストレスがかかる。
特産品 → 地域 → 飲食店 → 宿泊施設 をワンストップでつなぎ、
「本当に欲しい」= 食起点 でスムーズに旅が決まる体験を実現
- 特産品を選ぶだけで、対象地域がわかる
- 地図上で、近くの飲食店と宿が同時に見える
- ピン色分けで迷わない（飲食店 / 宿泊）
これにより、食べたいを起点に、すぐに旅の形へと具体化できる。
特産品など食べたいものを起点に、その地域の飲食店と宿泊施設を地図上で提示し、
「本当にしたい旅」を最短で作る。
- 特産品検索（食べたいものから選ぶ）
- 日本地図・地域表示（行き先候補が直感的にわかる）
- Google Maps連携
- 周辺飲食店検索（Places API）
- 近隣宿泊施設検索
- ピン色分け表示
- 初回ユーザー向けガイド（React Joyride）
-
トップ画面で、食べたい特産品を選択
- 地図・名産一覧・写真から選ぶ、または検索バーに入力
-
特産品を選択（または検索ボタン押下）すると、検索結果画面（名産地を選ぶ画面）へ遷移する。
- 画面上部に「◯◯の検索結果」が表示され、候補の名産地一覧が出る。
- 一覧から行きたい名産地を選択する。
- 名産地を選択すると、MapView画面へ遷移する。
※この画面では「戻る」ボタンで①トップ画面へ戻る。
MapViewでは、地図上に以下の3種類のピンが表示される。
- 🔵 青ピン：検索した特産品（ユーザーが選んだ特産品）の地点
- 🟡 黄ピン：検索していないが、近くにある名産品の地点
- 🟢 緑ピン：宿泊施設
- 🟠 オレンジマーカー：選択中の店舗・施設（強調表示）
ピンをクリックすると、店舗名や施設名などの詳細情報を確認できる。
※この画面では「戻る」ボタンで②検索結果画面へ戻る。
- “旅先”ではなく “食べたい” を起点にした設計
- 検索の手間を減らし、行動までを短くする導線
- 特産品の魅力を「知る」から「行く」に変える体験設計
- 直感的に選べるスライダーUI
- 地図とリストの双方向連動設計
- ピンの色分けにより視認性向上
- 選択中店舗の強調表示（視線誘導設計）
- 必要な情報のみを表示する段階的UI
- 情報過多を防ぐミニマルデザイン
- 認知負荷を下げる自動フォーカス機能
- AWSで公開
- React
- TypeScript
- Vite
- React Router
- Tailwind CSS
- Google Maps JavaScript API
- Google Geocoding API
- Google Places API
- Open AI API