TRPGシナリオジェネレーター ScenarioCraft - テーブルトークRPGのシナリオをブラウザで即生成

## 1. アプリの目的・ターゲットユーザー
テーブルトークRPG（TRPG）のゲームマスター（GM）や初心者プレイヤーが、「今夜セッションをやりたいけどシナリオを考える時間がない」「どんな設定にすれば面白いかわからない」という悩みを解決するWebアプリ。外部AIなし・内製データだけで、設定を選ぶだけでセッションにすぐ使えるシナリオ概要・NPC・ダンジョン構造・謎・ボスをランダム生成する。TRPGファン、ボードゲーム好き、ゲームクリエイター志望者、キャンプや旅行中にオフラインゲームを楽しみたいグループ向け。

## 2. 主要機能
- **シナリオ一発生成**: ジャンル（ファンタジー/ホラー/SF/現代ミステリー/西部劇の5種）・プレイ人数（1〜6人）・プレイ時間目安（短編30分/中編2時間/長編4時間）を選ぶだけで、タイトル・あらすじ・依頼主・目的・舞台・事件の発端・どんでん返し候補を自動生成する
- **NPC自動生成**: シナリオに登場するNPC最大6名の名前・職業・外見・性格・秘密・GMへの口調サンプルをランダム生成。再生成ボタンで個別に差し替え可能
- **ダンジョン/マップ構造自動生成**: 部屋数5〜12のテキスト構造マップ（各部屋に「罠/宝/情報/戦闘/謎」などのタグ付き）を生成。Canvas 2Dで簡易ビジュアル表示
- **謎・手がかりカード生成**: 事件解決に必要な手がかりカードを3〜6枚自動生成（どこで・何が・意味）。GMメモとして印刷用HTMLに整形できる
- **シナリオ保存・共有**: 生成したシナリオをLocalStorageに最大20件保存。「公開URL」ボタンでPHPがDBにシナリオJSONを保存し、固定URLでシェア可能（読み取り専用）

## 3. 画面構成
- **トップページ**: ジャンル選択（アイコン付きカード）、プレイ人数セレクタ、プレイ時間セレクタ、「シナリオを生成する」大ボタン。左側にサンプルシナリオのプレビュー3件を表示して雰囲気を伝える
- **生成結果ページ**: 上部にシナリオタイトル・あらすじカード。タブ切り替えで「NPC一覧」「マップ構造」「謎・手がかり」「GMメモ（印刷用）」を表示。各セクションに「このパーツだけ再生成」ボタンを配置。右上に「保存」「共有URLをコピー」「印刷」ボタン
- **マイシナリオ一覧ページ**: LocalStorage保存分をカード形式で一覧表示。削除・再編集（生成結果ページへ遷移）が可能
- **公開ギャラリーページ**: DBに保存された公開シナリオを新着順・ジャンル別で一覧表示。タイトルクリックで詳細を閲覧。「いいね」カウント機能付き

## 4. データ構造
### DBテーブル（公開共有用のみ。メイン機能はLocalStorage）
**scenarios（公開シナリオ）**
- id INT AUTO_INCREMENT PRIMARY KEY
- share_token VARCHAR(12) UNIQUE（ランダム英数字、公開URL用）
- genre VARCHAR(20)
- play_time VARCHAR(10)
- player_count TINYINT
- title VARCHAR(100)
- content JSON（あらすじ・NPC・マップ・手がかりの全データをJSON格納）
- likes INT DEFAULT 0
- created_at DATETIME

### LocalStorage構造
- `scenarioCraft_saves`: 配列でシナリオオブジェクトを最大20件保存
- 各オブジェクト: { id, genre, title, summary, npcs[], map{rooms[]}, clues[], createdAt }

### 内製データ（JSファイルに定数として格納）
- ジャンル別 タイトル接頭語・接尾語リスト各50件
- NPC名前リスト（和風/洋風/SF系各50件）、職業60種、性格形容詞40種、秘密パターン30種
- 部屋タイプ・罠パターン・宝物リスト各40件
- 手がかりテンプレート（場所×物品×意味の組み合わせ）各40件
- どんでん返しパターン20種

## 5. デザインの方向性
- **全体テーマ**: 古い羊皮紙の手稿風。背景色は #2B1D0E（深いこげ茶）またはジャンルに応じて切り替え（ホラーなら暗紫、SFならネイビー）
- **フォント**: 見出しに serif 系のウェイトを使いゴシック風に、本文は読みやすい游ゴシックまたはNoto Serif JP
- **カード**: 角丸あり、縁に羊皮紙テクスチャ風のCSSグラデーション（#D4B483 → #C8A96E）、わずかな影で立体感
- **アクセントカラー**: 深紅 #8B1A1A とゴールド #C8A400 を使いRPG感を演出
- **アイコン**: Unicode絵文字（⚔️🗡️🧙🏰🔍💀🚀🔮）を多用しリソース節約
- **印刷用ビュー**: `@media print` で白背景・黒テキストのGMシート形式に切り替え、A4に収まるレイアウト
- **スマホ対応**: タブ切り替えをスワイプ対応、生成ボタンは画面下部固定でいつでも押せる