StreetFood Map - ご当地B級グルメ&屋台料理レシピ図鑑

## 1. アプリの目的・ターゲットユーザー
全国のご当地B級グルメ・屋台料理・郷土食をインタラクティブな日本地図から探索し、家庭で再現できるレシピを楽しめる食文化図鑑アプリ。旅行好き・料理好き・食文化に興味のある10代〜60代の幅広い層をターゲットとする。外部APIは使わず、内製データ100件以上のレシピDBで完結する。

## 2. 主要機能
- **地図クリック探索**: 日本地図をSVGで描画し、都道府県をクリックまたはタップするとその地域のご当地グルメ一覧がポップアップ表示される
- **レシピ詳細ページ**: 料理名・地域・カテゴリ（屋台/郷土食/B級グルメ/スイーツ）・難易度・調理時間・材料リスト・手順（ステップ形式）・うんちく（食文化コラム）を表示
- **レシピ検索 & フィルター**: キーワード検索、カテゴリ/地方ブロック（北海道・東北・関東・中部・近畿・中国・四国・九州）/難易度の3軸フィルター
- **お気に入り & 作った記録**: LocalStorageでお気に入り登録と「作った！」チェックを保存。マイページで一覧確認
- **ご当地グルメランキング**: 「作った！」カウントをサーバーサイド集計してPHP+MySQLでランキング表示（上位20件）
- **ランダム探索ボタン**: サイコロアイコンを押すと全国からランダムに1品ピックアップ。「今日作るもの」を直感的に決められる

## 3. 画面構成
### トップページ
- ヘッダー: アプリロゴ「StreetFood Map」＋検索バー＋ナビメニュー（地図/ランキング/ランダム/お気に入り）
- メインビジュアル: SVGインタラクティブ日本地図（都道府県ホバーで地名ハイライト、クリックで地域グルメリスト表示）
- 地図下部: 地方ブロック別タブ切替ボタン（北海道・東北・関東・中部・近畿・中国・四国・九州沖縄）
- サイドまたは下部: 「ランダム探索」大ボタン＋今週人気の5件カード

### 地域グルメ一覧パネル（地図クリック後スライドイン）
- 都道府県名 + グルメ件数バッジ
- グルメカードリスト（サムネイル絵文字アイコン/料理名/カテゴリタグ/難易度星/作った人数）
- 「全て見る」ボタンで一覧ページへ遷移

### レシピ詳細ページ
- 料理名・地域バッジ・カテゴリタグ・難易度（星1〜3）・調理時間
- 大きなイラスト風絵文字 or CSS描画のプレースホルダー画像
- 材料タブ / 手順タブ / うんちくタブの切り替えUI
- 「作った！」ボタン（押すとカウントアップ & LocalStorageに保存）＋「お気に入り」ハートボタン
- 同じ地域の関連グルメ3件カード

### ランキングページ
- 「作った！」数トップ20をメダルアイコン付きでリスト表示
- 地方フィルタータブ付き

### お気に入り/作ったページ
- LocalStorage保存データをカードグリッドで表示
- 「まだ作っていない」「作った」タブ切り替え

## 4. データ構造
### PHPファイル内または別JSONファイルとして内製レシピDB（100件以上）
```
recipes テーブル（MySQL）
- id INT PK AUTO_INCREMENT
- name VARCHAR(100) // 料理名（例: じゃじゃ麺）
- prefecture VARCHAR(20) // 都道府県（例: 岩手県）
- region ENUM('北海道','東北','関東','中部','近畿','中国','四国','九州沖縄')
- category ENUM('屋台','郷土食','B級グルメ','スイーツ','ドリンク')
- difficulty TINYINT(1) // 1〜3
- cook_time TINYINT // 分単位
- emoji VARCHAR(10) // 代表絵文字アイコン
- ingredients TEXT // JSON配列 [{"name":"...","amount":"..."}]
- steps TEXT // JSON配列 ["手順1","手順2"...]
- trivia TEXT // うんちくコラム（200字程度）
- made_count INT DEFAULT 0 // 「作った！」累計数
- created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
```

### クライアントサイド（LocalStorage）
```
sfm_favorites: [id, id, ...] // お気に入りIDリスト
sfm_made: [id, id, ...] // 作ったIDリスト
```

### PHPエンドポイント
- `api.php?action=list&region=X&category=Y&q=Z` → JSON一覧返却
- `api.php?action=detail&id=X` → JSON詳細返却
- `api.php?action=made&id=X` → made_count+1（POST）
- `api.php?action=ranking&region=X` → ランキングJSON返却

## 5. デザインの方向性
- **カラーパレット**: 屋台・祭りの活気をイメージした温かいビジュアル。ベースは白 `#FDFAF5`（和紙風）、アクセントカラーは朱色 `#E84040` と山吹色 `#F5A623`、テキストは墨黒 `#2C2C2C`
- **フォント**: 見出しは少しクセのある丸ゴシック系（Google Fonts: Noto Sans JP）、英語部分はセリフ体でエスニック感
- **地図UI**: SVGの都道府県パスは薄い山吹色塗りで、ホバー時に朱色ハイライト。境界線は細い墨色線
- **カード**: 角丸・薄いドロップシャドウ・絵文字を大きく表示してポップに。難易度は🌶️アイコンで表現
- **全体トーン**: 昭和のレトロ屋台＋現代ミニマルの融合。重すぎず、旅情感と食欲感を両立させる