ReadyBag - シーン別持ち物チェックリスト自動生成メーカー

## 1. アプリの目的・ターゲットユーザー
「旅行の荷造りで必ず何かを忘れる」「子どもの遠足準備が毎回バタバタする」「出張前に何を持っていくか毎回ゼロから考えている」──そんな悩みを解決する、シーン・条件入力から最適な持ち物チェックリストを自動生成するWebアプリ。

**ターゲット:** 旅行・出張が多いビジネスパーソン、子どもの学校行事に追われる保護者、アウトドア初心者、日常の持ち物管理が苦手な全年齢層。

---

## 2. 主要機能

- **シーン選択 × 条件入力による自動リスト生成**
「国内旅行」「海外旅行」「日帰りハイキング」「出張（1泊/2泊以上）」「子どもの遠足・運動会」「病院受診」「キャンプ」「ビジネス面談」など20シーンをプリセット。泊数・季節・天気予報（晴/雨/雪）・同行者（大人のみ/子どもあり/ペット同伴）・移動手段（車/電車/飛行機）を選ぶと条件フィルターが走り、必要度の高いアイテムが自動で洗い出される。

- **チェックリスト操作（チェック・追加・削除・並び替え）**
生成されたリストはカテゴリ（書類・衣類・衛生用品・電子機器・食べ物・子ども用品など）ごとにグループ化して表示。各アイテムをタップでチェック済みに。任意のアイテムを追加・削除でき、ドラッグ&ドロップで並び替え可能。

- **マイテンプレート保存・呼び出し（LocalStorage）**
作成・編集したリストをテンプレートとして名前付きで保存し、次回から一発呼び出し。「自分の出張2泊テンプレ」「子の遠足セット」など最大20件まで保存可能。登録不要・DBなし。

- **忘れ物リスクスコア表示**
チェック完了率に応じて「安心度メーター」をゲージで表示（0〜100%）。未チェック項目のうち重要度「必須」タグのアイテムが残っている場合は赤色で警告。

- **印刷 / テキストコピー出力**
リストをそのままブラウザ印刷（印刷用CSSで紙面最適化）またはプレーンテキストとしてクリップボードコピー。LINEやメモアプリに即貼り付けできる。

- **公開URLシェア（PHP + MySQL）**
完成したリストを公開URL化してSNSや家族に共有できる。URLにアクセスした人はリストを閲覧・自分のLocalStorageにコピー保存が可能。

---

## 3. 画面構成

### 画面①：トップ / シーン選択画面
- ヘッダー：ロゴ「ReadyBag」＋「マイテンプレート」ボタン
- シーンカードグリッド（アイコン＋シーン名。20種類、スマホ2列・PC4列）
- 「最近使ったシーン」履歴（LocalStorage、最大5件）

### 画面②：条件入力パネル（モーダルまたはサイドパネル）
- シーン名表示
- スライダー：泊数（0〜14泊）
- セレクト：季節（春/夏/秋/冬）、天気（晴/雨/雪）、同行者、移動手段
- 「リストを生成する」ボタン

### 画面③：チェックリスト画面（メイン）
- 上部：シーン名・条件サマリー・安心度メーター（%ゲージ）
- カテゴリ別アコーディオン形式でアイテム表示
- 各アイテム：チェックボックス／アイテム名／重要度バッジ（必須/推奨/あれば便利）／削除ボタン
- フッター固定：「アイテム追加」テキスト入力欄、カテゴリ選択プルダウン
- サイドまたは下部ボタン：「テンプレ保存」「コピー」「印刷」「URLシェア」

### 画面④：マイテンプレート一覧（モーダル）
- 保存済みテンプレートをカード表示（名前・シーン・アイテム数・最終更新日）
- 呼び出し・リネーム・削除ボタン

### 画面⑤：公開URL閲覧ページ
- 読み取り専用のチェックリスト表示
- 「このリストを自分用にコピー」ボタン（LocalStorageへ保存）

---

## 4. データ構造

### LocalStorage（クライアント側）
```
templates: [
{
id: "uuid",
name: "出張2泊テンプレ",
scene: "business_trip",
conditions: { nights: 2, season: "autumn", weather: "rain", members: "adult", transport: "plane" },
categories: [
{
name: "書類",
items: [
{ id: "uuid", label: "パスポート", priority: "must", checked: false },
...
]
}
],
createdAt: "2025-01-01T00:00:00"
}
]
```

### MySQLテーブル（公開URLシェア用のみ）

**shared_lists テーブル**
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| share_key | VARCHAR(12) | ランダム英数字キー（URLスラッグ） |
| title | VARCHAR(100) | リスト名 |
| list_json | MEDIUMTEXT | リスト全体のJSON |
| view_count | INT DEFAULT 0 | 閲覧数 |
| created_at | DATETIME | 作成日時 |
| expires_at | DATETIME | 有効期限（作成から90日） |

### 内製マスターデータ（PHPまたはJSファイル）
- `scenes.js`：20シーン定義（id, name, icon, defaultCategories）
- `items_master.js`：アイテムマスター約300件（id, label, scenes[], conditions{}, priority, category）
- conditionsフィールドで「泊数>=1」「weather=rain」「transport=plane」などのフィルタールールを定義
- 条件マッチングはブラウザJS側で処理（外部API不要）

---

## 5. デザインの方向性

- **テーマカラー：**ターコイズブルー（#00B4CC）×ホワイト×ライトグレー。清潔感と「準備完了」の安心感を演出。
- **フォント：** Noto Sans JP。丸みのある親しみやすいUIで子どもの保護者にも使いやすく。
- **アイコン：** 各シーンにかわいいフラットアイコン（SVGインライン）。アイテムのカテゴリもアイコン付き。
- **チェック済みアイテム：** 取り消し線＋グレーアウトで達成感を演出。チェック100%到達時にはミニ紙吹雪アニメーション（CSSアニメーション）。
- **安心度メーター：** 0〜60%は赤、61〜89%は黄、90〜100%は緑のグラデーションゲージ。
- **レスポンシブ：** スマホ優先のシングルカラムレイアウト。PCでは左にシーン/条件パネル、右にチェックリストの2カラム構成。
- **規模感：** PHP 3ファイル（index.php, share.php, api_share.php）＋JS 2ファイル（app.js, items_master.js）＋CSS 1ファイルで完結する現実的な実装規模。