オービットサブスク - 支出を宇宙の軌道で可視化するサブスクリプション管理ダッシュボード

目的・対象: Netflix的サブスクや各種会員サービスが増え続け「結局毎月いくら払っているか把握できない」人向けの、支出の見える化と解約判断を支援する個人向け便利ツール。企業向けSaaS管理ツールとは異なり、家庭・個人利用に特化する。

主要機能:
1. サブスク登録: 名前・カテゴリ(エンタメ/仕事/健康/教育/生活/その他)・金額・請求周期(月次/年次/週次)・次回請求日・カラーテーマを登録。
2. オービットビュー: 中心に自分アイコン、各サブスクを衛星として円軌道上にCanvas描画。次回請求日が近いほど中心へ接近するアニメーションで直感的に把握。
3. カレンダービュー: 月間の請求予定を一覧表示、請求7日前・当日にバッジ通知。
4. 節約シミュレーター: 解約候補にチェックすると年間削減額と累計節約額をリアルタイム試算、達成時にバッジ演出。
5. カテゴリ別支出ドーナツグラフと月間/年間合計サマリー。
6. データはLocalStorage保存。任意で6桁の同期コードを発行しMySQLへバックアップ、他端末で読込可能(ログイン不要)。

画面構成: (1)オービットビュー(メイン画面、衛星タップで詳細/編集モーダル) (2)登録・編集フォーム (3)カレンダービュー (4)節約シミュレーター (5)設定(通貨切替・通知ON/OFF・同期コード発行/読込)。全画面下部にBGM/SEの音量スライダーとミュートボタンを常設。

DB構造: subscriptionsテーブル(id, sync_code, name, category, price, currency, cycle, next_date, color_theme, status, memo, created_at, updated_at)。sync_codesテーブル(code, created_at, last_synced_at)で端末間バックアップを管理。

デザイン方向性: ダークネイビー×ネオングローの宇宙空間。フラットベクター、均一な線幅、柔らかい発光エフェクトで統一。衛星アイコンはカテゴリごとに色分けし、達成感のある光の演出を多用。

BGM仕様: アンビエント・スペースジャンル、BPM60、4/4拍子。ドラムは省略しキックの代わりに柔らかいパルス音を8拍ごとに1回。ベースはFのロングトーンのサブベース。和声進行はFmaj7→Dm7→Bbmaj7→Cmaj7を8小節ループ、Aメロは低音域中心、Bメロ(9-16小節目)でベルメロディを追加し明るく展開。4小節目・8小節目に微細なフィルイン(グリッサンド風ノイズ)を挿入。Web Audio APIでAudioContext.currentTime基準の先読みスケジューリングを実装し、BGM/SEの音量は別ゲインノードで管理、ミュートボタンと画面遷移時のノード解放処理を実装する。

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

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