BudgetFilm - 映画・ドラマ鑑賞記録＆レコメンドトラッカー

## 1. アプリの目的・ターゲットユーザー
映画・ドラマ・アニメの視聴記録をつけ、評価・感想メモを蓄積することで「次に何を観るか」の悩みを解消する鑑賞管理アプリ。外部APIなしで内製データベース(300タイトル以上)から動作する。週2〜3本以上視聴する映画好き・ドラマジャンキーの10〜50代が主なターゲット。登録不要でLocalStorageに保存するため即使用可能。

## 2. 主要機能
- **鑑賞ログ記録**: タイトル・ジャンル・評価(★1〜5)・一言感想・視聴日・鑑賞状態(「観た」「観たい」「観てる」)をワンページで入力登録。自由入力またはプリセット300タイトルからオートコンプリート選択
- **マイシアター一覧**: 登録済み作品をカード形式で表示。ステータス別タブ・ジャンル別フィルター・評価順/視聴日順ソート対応
- **統計ダッシュボード**: 総視聴本数・累計鑑賞時間推定・ジャンル分布ドーナツグラフ・月別視聴本数棒グラフ・平均評価スコアをビジュアル表示
- **レコメンドエンジン**: 過去に高評価(★4以上)したジャンル・タグを分析し、内製プリセットDBから未視聴の推薦作品を最大10件提示
- **ウォッチリスト共有**: 「観たい」リストをテキスト形式またはURLパラメータ(Base64エンコード)でシェアできる機能
- **鑑賞チャレンジ**: 「今月10本」「5ジャンル制覇」などのバッジチャレンジを設定し、進捗をプログレスバーで表示

## 3. 画面構成
- **ホーム/ダッシュボード**: 統計サマリーカード(視聴本数・推定時間・平均★)、今月のチャレンジ進捗、レコメンド作品スライダー、最近記録した作品3件
- **ログ追加モーダル**: フローティングボタン(＋)クリックでオーバーレイ表示。タイトル(オートコンプリート付きテキスト入力)・ジャンルセレクト(アクション/ラブ/ホラー/SF/アニメ/ドキュメンタリー/コメディ/ミステリーなど15種)・ステータスラジオ・★評価クリック・感想テキストエリア・視聴日ピッカー
- **マイシアター一覧ページ**: 3タブ(観た/観てる/観たい)、検索バー、フィルター(ジャンル・★)、ソートドロップダウン。各カードにジャンルバッジ・★・感想冒頭30文字・編集/削除アイコン
- **レコメンドページ**: 「あなたへのおすすめ」見出し、推薦理由タグ(「アクション好きなあなたに」等)付きカード一覧。「観たい」追加ボタン
- **統計ページ**: ジャンルドーナツ(Chart.js)、月別棒グラフ、Top3高評価作品、チャレンジバッジ一覧
- **共有ページ**: ウォッチリストのテキスト生成・URLコピーボタン

## 4. データ構造
**LocalStorage キー: `bfm_entries`** (JSON配列)
```
[
{
id: "uuid",
title: "タイトル名",
genre: "アクション",
status: "watched" | "watching" | "want",
rating: 4,
memo: "感想メモ",
watchedAt: "2025-06-01",
duration: 120, // 分(プリセットから自動入力 or 手動)
createdAt: "2025-06-01T12:00:00Z"
}
]
```
**LocalStorage キー: `bfm_challenges`** (達成バッジの配列)
```
[{ id: "monthly10", achieved: true, achievedAt: "2025-06-30" }]
```
**内製プリセットDB (JS定数)**: 300タイトル × {title, genre, duration, tags[]} の配列をJSファイルに収録。タイトルは架空でなく日本で広く知られる実在の映画・ドラマ・アニメ名を使用。

## 5. デザインの方向性
- **シネマティックなダークテーマ**: 背景 #0d0d0d〜#1a1a2e のディープネイビー系、アクセントカラーはゴールド #f5c518(IMDb風)とスカーレット #e50914
- フォントは見出しに Noto Serif JP、本文に Noto Sans JP を使用し上質感を演出
- 作品カードはポスタービジュアル(ジャンルごとの絵文字アイコン+グラデーション背景)で映画館のロビー感を演出
- 統計グラフはChart.js(CDN)を使用しシンプルに実装
- モバイルファースト設計。カード2列グリッド(スマホ)→3〜4列(PC)
- アニメーションは最小限(カードのホバースケール、モーダルフェードイン)に抑えて動作を軽く保つ
- PHP/MySQLは不使用。完全フロントエンド(HTML+CSS+JS)で完結し、data.jsに内製プリセットを収録