レシポン - レシート撮影でたまる家計簿

【目的・対象】レシート入力が面倒で家計簿が続かない人向けに、レシート撮影→ブラウザ内OCR自動読取→ワンタップ登録を実現し、記録するたびにマスコットが喜ぶ演出でモチベーションを維持する家計簿アプリ。20〜40代の家計管理初心者〜継続挫折経験者が対象。

【主要機能】
1. カメラ撮影/画像アップロードしたレシートをTesseract.js等のブラウザ内OCRライブラリで解析し、金額・日付・店舗名候補を自動抽出（サーバー送信なし、APIキー不要）
2. 抽出結果を確認・修正してカテゴリ(食費/日用品/交通/娯楽/医療/衣服/その他)選択でワンタップ登録
3. 登録するとコイン加算とマスコットの喜びアニメーション+効果音、一定コインでレベルアップ演出
4. 月間ダッシュボード：カテゴリ別ドーナツグラフ、日別棒グラフ、予算に対する進捗バー、警告アラート
5. 週間・月間振り返りを自動生成BGM付きスライドショーで再生（達成バッジ表示）
6. 実績バッジ(初登録/7日連続/予算達成など)とマイページでのバッジコレクション表示

【画面構成】
・トップ(ヒーロー画像+撮影ボタン+今月サマリー)
・撮影/確認画面(カメラプレビュー→OCR結果編集フォーム)
・履歴一覧(日付別カード表示、検索・フィルタ)
・ダッシュボード(グラフ、予算設定)
・振り返りレポート(スライド再生、BGM/ミュート切替)
・バッジ・実績ページ

【データ構造(MySQL)】
users(id, device_token, nickname, coins, level, created_at)
receipts(id, user_id, store_name, amount, category, purchased_at, memo, created_at)
budgets(id, user_id, category, monthly_limit)
badges(id, user_id, badge_type, earned_at)

【デザイン方向性】
パステルのミント×コーラルピンク×クリーム×ゴールドを基調とした丸みのあるフラットデザイン。太め輪郭線、柔らかい光の演出。丸顔で大きな目のレシート精霊マスコットが画面各所で反応。

【BGM/SE仕様(Web Audio API)】
メインBGM: ポップ、BPM106、4/4拍子。コード進行C→G→Am→F(8小節)をAメロとし、9〜16小節目でメロディを1音上げてBメロ展開。シンセベース+木琴風メロディ+ソフトなハイハット。4小節ごとに軽いグロッケンのフィルを挿入。AudioContext.currentTimeで先読みスケジューリングし、BGM/SE音量を独立制御、ミュートボタン、画面遷移時にノードをdisconnectして解放。SE: 登録音(短い上昇アルペジオ)、レベルアップ音(4音ファンファーレ)、バッジ獲得音(キラキラベル)。

## BGM品質要件
- アプリの雰囲気に合うジャンル・BPM・拍子を定め、ドラム、ベース、和声、メロディの4層で構成する
- 最低8小節またはA/Bの2展開を作り、休符、アクセント、フィル、フレーズ変化を入れる
- Web Audio APIはAudioContext.currentTime基準で先読みし、BGM/SE別音量・ミュート・停止処理を実装する
- 単一オシレーターの持続音や1〜3音だけの反復はBGMとして不可

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する