Skip to content

グルメ機能設計

概要

MileTrek のグルメ機能は、旅行先の食体験をプランニングの中心に据えるための仕組みです。Phase 2 で追加され、以下の 2 つの入口から利用できます。

  1. イベント管理画面のグルメタブ: 特定の旅行プランに紐付くおすすめ・ブックマーク一覧
  2. グルメメインタブ(ボトムタブ): 旅行に紐付かない「グルメ探索」エントリーポイント

さらに、ブックマークしたレストランを起点に旅行プランを逆提案する UX(「このお店に行く旅行を計画」)を備えています。

データモデル

restaurants(レストランマスタ)

地域・エリア・ジャンル・価格帯・複数ソースのレーティングを保持します。詳細は データベース設計 を参照。

主要カラム:

カラム用途
region / area地方/エリアでの絞り込み
cuisineジャンル(寿司、ラーメン、焼肉 など)
price_range¥ ¥¥ ¥¥¥ ¥¥¥¥
tabelog_rating / tabelog_reviews / tabelog_url食べログソース
google_rating / google_reviews / google_urlGoogle Maps ソース
hours / phone / description店舗情報

gourmet_bookmarks(ブックマーク)

カラム用途
user_idユーザーID(FK)
restaurant_idレストランID(FK)
created_at作成日時

UNIQUE制約: (user_id, restaurant_id) で二重保存を防止。

レーティング表示ルール

食べログと Google Maps の 2 ソースを使い分けます。

条件表示
両方のレーティングあり食べログ・Google を横並びで 2 つ表示
食べログのみ食べログレーティングのみ
Google のみGoogle レーティングのみ
両方なしレーティング非表示

優先ソース: カード等の狭小スペースでは tabelog_rating > google_rating の優先度で 1 つだけ表示します。詳細ページでは常に両方を表示します。

レーティング数値は 0-5 の範囲で星アイコン(#FF9500)と共に表示します。

API エンドポイント

メソッドパス認証説明
GET/api/v1/gourmet-レストラン一覧(region, cuisine で絞り込み)
GET/api/v1/gourmet/:id-レストラン詳細 + 同エリアの近隣レストラン
GET/api/v1/gourmet/bookmarks🔒ログインユーザーのブックマーク一覧
POST/api/v1/gourmet/bookmarks/:restaurantId🔒ブックマーク追加
DELETE/api/v1/gourmet/bookmarks/:restaurantId🔒ブックマーク削除

レスポンス例(GET /api/v1/gourmet/:id

json
{
  "success": true,
  "data": {
    "restaurant": {
      "id": 42,
      "name": "すし善 本店",
      "region": "北海道",
      "area": "札幌",
      "cuisine": "寿司",
      "priceRange": "¥¥¥¥",
      "imageUrl": "https://...",
      "tabelog": { "rating": 4.12, "reviews": 384, "url": "https://tabelog.com/..." },
      "google":  { "rating": 4.5,  "reviews": 912, "url": "https://maps.google.com/..." },
      "hours": "17:00-22:00",
      "phone": "011-xxx-xxxx",
      "description": "..."
    },
    "nearby": [ /* 同エリアの restaurants 配列 */ ]
  }
}

UI コンポーネント

グルメメインタブ

セクション内容
ヘッダー「グルメを探す」+ 検索バー
地域チップ横スクロール(北海道 / 東北 / 関東 / 関西 / 九州 / 沖縄 …)
ジャンルフィルター寿司 / ラーメン / 焼肉 / 居酒屋 …
レストランカード写真(16:10、border-radius 16px)+ 店舗名 17px + ジャンル・エリア + レーティング + 価格帯
ブックマークボタンハートアイコン(アクティブ: #FF3B30

レストラン詳細ページ

  • ヒーロー画像(16:9)+ オーバーレイタイトル
  • レーティングセクション(食べログ・Google 並列)
  • 店舗情報カード(営業時間・電話・住所)
  • 外部リンクボタン: 食べログ / Google Maps(新タブで開く)
  • 近隣レストラン(同 area の他店を横スクロール)
  • フッター CTA: 「このお店に行く旅行を計画」

ブックマーク一覧

イベント管理画面グルメタブ および グルメメインタブ内の両方からアクセス可能。

ブックマーク → 旅行計画提案 UX

[ブックマーク一覧 or レストラン詳細]
      │ 「このお店に行く旅行を計画」

レストランの region/area → 最寄り空港コードに変換


[Search + Map] に遷移(destination プリセット)


空席カレンダーから日付タップ → 予約インテント → trip 仮登録


作成された trip のグルメタブに、起点のレストランが自動追加される

この一連の UX により、「このお店に行きたい」という動機から逆算して旅行プランを組み立てることができます。

今後の拡張

  • 食べログ・Google Maps の API 直接連携(現状は静的シードデータ)
  • 予約連携(食べログ予約・一休レストラン)
  • ユーザー投稿によるレストランレビュー
  • 外国料理・海外レストラン対応(Phase 3 の国際線対応と連動)