PolyMap - 世界の言語・方言インタラクティブマップ

## 1. アプリの目的・ターゲットユーザー
世界中の言語・方言の分布を地図上で視覚的に探索し、各言語の基本情報・あいさつフレーズ・豆知識・話者数を楽しく学べる教育系インタラクティブマップアプリ。言語学に興味がある学生・社会人、旅行好き、語学学習者、教師を主なターゲットとする。外部APIは不要で内製データのみで完結する。

---

## 2. 主要機能
- **言語マップ探索**: SVGベースのインタラクティブ世界地図。国・地域をホバー/タップすると、その地域の主要言語名・語族・話者数・公用語かどうかがポップアップで表示される
- **言語詳細カード**: 言語名クリックで詳細画面へ遷移。文字体系・語順・発音の特徴・由来・有名な借用語・日本語との関係・おもしろ豆知識を表示
- **あいさつフレーズ集**: 各言語の「こんにちは/ありがとう/さようなら/乾杯」の4フレーズをネイティブ表記＋ローマ字読みで表示。Web Speech APIで音声合成再生ボタンも設置
- **語族ツリービュー**: インド・ヨーロッパ語族／シナ・チベット語族／アフロ・アジア語族など主要12語族を折りたたみツリーで表示し、属する言語を一覧できる
- **言語クイズモード**: 「この国の公用語は？」「この文字はどの言語？」「話者数が多いのはどっち？」の3タイプ・計60問のクイズで知識をテスト。10問ごとにスコア表示
- **お気に入り言語リスト**: LocalStorageを使い、気になった言語をブックマーク保存。マイリストページで一覧表示

---

## 3. 画面構成

### トップページ（マップビュー）
- ヘッダー: ロゴ「PolyMap」、検索バー（言語名・国名で絞り込み）、クイズモードボタン、語族ツリーボタン
- メインエリア: SVGインタラクティブ世界地図（横幅100%）。国をホバーで色変化＋ポップアップ表示
- 右サイドパネル（PC）/ 下スライドアップパネル（スマホ）: 言語詳細カード表示エリア
- 地図上部に語族カラーレジェンドバー（語族別に色分け表示）

### 言語詳細カード（パネル内表示）
- 言語名（大）・語族・話者数バッジ・公用語フラグアイコン
- タブ切り替え:「概要」「あいさつ」「豆知識」
- 概要タブ: 文字体系・語順・公用語の国リスト
- あいさつタブ: 4フレーズ＋音声ボタン
- 豆知識タブ: 3〜4行の面白エピソード
- ★お気に入りボタン

### 語族ツリーページ
- 左列に語族リスト（12語族）。クリックで右列に属する言語カード一覧
- 各言語カードは話者数・地域・クリックで詳細へリンク

### クイズモードページ
- 1問ずつ表示。4択ボタン。正解/不正解アニメーション
- 10問終了後にスコアカード（正解数・正答率・得意ジャンル）
- SNSシェア用テキスト生成ボタン

### お気に入りページ
- LocalStorageに保存した言語カードを一覧表示
- カードを削除可能

---

## 4. データ構造（DBなし・JSON内製データ）

### languages.json（内製・約80言語分）
```
{
id: "ja",
name: "日本語",
family: "孤立語族",
speakers_million: 125,
script: "漢字・平仮名・片仮名",
word_order: "SOV",
official_countries: ["JP"],
greetings: {
hello: {native: "こんにちは", roman: "Konnichiwa"},
thanks: {native: "ありがとう", roman: "Arigatou"},
goodbye: {native: "さようなら", roman: "Sayounara"},
cheers: {native: "乾杯", roman: "Kanpai"}
},
fun_facts: "英語に取り入れられた日本語由来の単語はKaraokeやEmojiなど300語以上...",
trivia: "..."
}
```

### countries.json（国コード → 主要言語IDマッピング）
```
{ "JP": ["ja"], "CN": ["zh", "yue"], "FR": ["fr", "oc"], ... }
```

### families.json（語族ツリー構造）
```
{ id: "indo-european", name: "インド・ヨーロッパ語族", color: "#4A90D9", branches: [...], languages: [...] }
```

### quizzes.json（クイズ問題60問）
```
{ id:1, type:"country_lang", question:"スワヒリ語が公用語の国はどこ？", choices:[...], answer:"KE", explanation:"..." }
```

DBは不要。PHPはJSON配信（data/*.json を静的配置）またはPHPでJSONを返すシンプルなAPIとして実装。

---

## 5. デザインの方向性
- **カラーパレット**: ダークネイビー(#0D1B2A)を地図背景に、語族ごとに鮮やかな差し色（6〜12色）で国を塗り分け。UIはオフホワイト・淡いゴールドで知的・探検家風の雰囲気
- **フォント**: 見出しにセリフ系（Noto Serif JP）、本文にNoto Sans。多言語表示のためNoto系を優先
- **アニメーション**: 地図ホバー時のなめらかな色変化、詳細カードのスライドイン、クイズ正解時の紙吹雪エフェクト（CSS only）
- **サイズ感**: 地図はPC横幅70%・スマホは上60%に固定表示し、下スクロールで詳細情報が読めるレイアウト
- **アイコン**: Font Awesome（CDN）で国旗絵文字＋言語アイコンを補助的に使用
- 全体的に「旅する辞典」「探検ノート」のような手書き地図×デジタルの混在スタイルを目指す