ブリーズフロー - 呼吸法ガイド＆パーソナル瞑想BGMメーカー

【目的・ターゲット】仕事や勉強の合間に不安・緊張・寝つきの悪さを整えたい全年代向けの呼吸法トレーニング便利ツール。医学的に知られる呼吸法パターンをビジュアルとBGMで正確にガイドし、誰でも迷わず実践できるようにする。

【主要機能】
1. プリセット呼吸法6種(4-7-8睡眠導入・ボックス呼吸4-4-4-4・コヒーレント5-5・2:1ロングエグゼイル・エネルギー活性化・不安鎮静)を目的タグ付きで選択。
2. セッション画面中央の呼吸オーブがCanvasで吸う/止める/吐く/止めるに合わせて滑らかに拡大縮小・色変化・光の粒子演出。
3. Web Audio APIで呼吸フェーズに完全同期した生成BGMを再生(仕様は下記)。
4. 1〜20分のセッション時間設定、終了後に実施ログをLocalStorageへ自動記録、連続日数ストリークとカレンダーヒートマップ表示。
5. 吸う・止める・吐く・止めるの秒数を個別スライダーで指定できるカスタムパターンビルダー(保存・呼出可)。
6. 森・海・宇宙・朝焼けの4テーマで背景ビジュアルと音色セットを切替。任意でニックネーム登録し、匿名の継続日数ランキング(PHP+MySQL)に参加可能。

【画面構成】
・ホーム:プリセットカード一覧、今日の実施状況、連続日数バッジ
・セッション実行画面:呼吸オーブ、残り時間、フェーズテキスト、テーマ背景、一時停止/終了ボタン
・カスタムビルダー画面:秒数スライダー、プレビュー再生、保存リスト
・履歴/統計画面:月間カレンダーヒートマップ、セッション時間推移グラフ、ランキング表示
・設定画面:BGM/SE音量スライダー、ミュート、テーマ選択

【データ構造】MySQL: users_anon(id, nickname, streak_days, total_sessions, updated_at) / sessions_log任意集計テーブル。詳細な個人ログはLocalStorage(pattern_id, date, duration, theme)とcustom_patterns(name, inhale, hold1, exhale, hold2)で管理し、サーバーには集計値のみ送信。

【BGM仕様】ジャンルはヒーリング/アンビエント、4/4拍子・BPM64。ルート音Cのパッドドローン(サステイン長め、ローパスフィルターでフェーズ同期しカットオフを吸気で開き呼気で閉じる)+ ペンタトニックのベル/シンセアルペジオを重ねる。コード進行はCmaj7→Am7→Fmaj7→Gsus4を8小節1ループ、4小節ごとにベル音を1音ずつ追加し8小節目でリバーブ量を増すシマーフィルを挿入。ドラムは使わず、代わりにフェーズ切替時にソフトなチャイムSE(サイン波2音)を先読みスケジュールで鳴らす。AudioContext.currentTime基準でノードを事前スケジュールし、BGM/SEは別GainNodeで音量管理、ミュート切替、セッション終了・画面遷移時に全ノードをstop/disconnectしてメモリ解放する。

【デザイン方向性】柔らかいグラデーションと光の粒子、丸みのある形状、パステル×深みのある配色で、呼吸に合わせて画面全体がゆっくり呼吸するような没入感を演出する。

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

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