ドリームジャー - 目標貯金ビジュアライザー

旅行・結婚式・新居家電・留学・車など「欲しい未来」に向けた貯金を、透明なジャー(瓶)に液体が満ちていく形で視覚化する目標貯金トラッカー。数字だけの家計簿では続かない人向けに、達成の喜びを演出でしっかり味わえる公開ツール。

【主要機能】
1. 複数の貯金ジャーを作成(名称・目標金額・テーマ7種・任意の締切日、6桁の共有コードで家族と閲覧・入金を共有可能)
2. 入金記録すると液体レベルがなめらかにアニメーション上昇。達成率%・残り金額・現在ペースからの達成予測日を自動算出
3. 100%達成で紙吹雪演出とファンファーレBGMが再生され、達成バッジをコレクション
4. 入金頻度からストリーク(継続日数)を計算し、週間カレンダーで可視化
5. 入金履歴タイムライン、CSVエクスポート、通貨単位設定
6. テーマ別アンビエントBGMのON/OFF、BGM/SE音量を個別スライダーで調整

【画面構成】
ホーム(ジャー一覧カード、進捗バー付き)/ジャー詳細(大きな液体アニメーション、進捗グラフ、入金ボタン、履歴リスト)/ジャー作成・編集モーダル/入金記録モーダル/達成演出フルスクリーンオーバーレイ/設定画面。

【データ構造(MySQL)】
jars(id, share_code, name, theme, target_amount, current_amount, deadline, created_at) / deposits(id, jar_id, amount, memo, deposited_at) / achievements(id, jar_id, badge_type, achieved_at)

【デザイン方向性】
水彩風パステルカラーの温かい線画イラスト、丸みのあるフラットデザイン、ガラス質感の光沢表現。テーマごとに背景色調(旅行=水色、結婚式=淡いピンク等)を変化させる。

【BGM仕様(Web Audio API)】
テーマ別アンビエントBGM: 4/4拍子・BPM66・Cメジャー系。ピアノのアルペジオ(ルート-5th-オクターブ分散和音)を8分音符でループし、サイン波パッドで持続和音を重層、4小節ごとにトライアングル波のベルフィルを挿入。A(4小節:I-V-vi-IV)→B(4小節:ii-V-I-IV、旋律を1音上に展開)のA/B構成をループ再生。達成ファンファーレはBPM120・4/4拍子、矩形波の主旋律(ドミソド上昇)+キック/スネア/ハイハットの8分ドラムを4小節。AudioContext.currentTime基準で先読みスケジューリングし、BGM/SEの音量ノードを分離、ミュートボタンと画面遷移時のノード切断・解放を実装する。

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

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