ParkMemo - 駐車位置記録＆時間制限アラートナビ

【目的・ターゲット】広い駐車場やコインパーキングで「どこに停めたか忘れた」「気づいたら制限時間を超過して割高料金になった」を防ぐ、ドライバー向け実用ツール。買い物客・観光客・営業車ドライバーが対象。ログイン不要、端末発行トークンでMySQLに同期し機種変更後も復元可能。

【主要機能】
1. ワンタップ記録: Geolocation APIで現在地座標・時刻を保存し、階数/区画/目印テキスト・写真1枚を追加できる。
2. 帰還ナビ: 記録地点との直線距離とDevice Orientation APIによる方位を割り出し、コンパス針アニメーションと歩数目安で車まで迷わず戻れる。
3. 時間制限タイマー: コインパーキングの最大料金切替時間や予約終了時刻をセットし、残り時間をカード表示。5分前・1分前にSE付きアラートで通知。
4. 駐車履歴＆費用管理: 過去の記録を地図なしのリスト/カレンダーで一覧、よく使う駐車場をお気に入り登録、月間駐車費用の自動集計グラフ表示。
5. 音声メモ入力: マイクで「3階Bエリア」等を話すと文字起こしして区画メモに自動反映(Web Speech API)。
6. マルチデバイス同期: 6桁の共有コードで家族・同僚と1台の記録を共有可能。

【画面構成】①ホーム: 大きな「ここに停めた」ボタンとアクティブな駐車カード(残り時間・距離) ②記録画面: 写真/メモ/タイマー設定フォーム ③帰還ナビ画面: 中央にコンパス、下部に距離と経過時間 ④履歴一覧: リスト/カレンダー切替、月間集計チャート ⑤設定: 通知音・単位・共有コード管理。

【データ構造(MySQL)】parking_records(id, device_token, lat, lng, memo, photo_path, parked_at, time_limit_minutes, alert_fired, fee, created_at) / share_groups(id, share_code, device_token) 。位置情報は端末内キャッシュも併用しオフライン時も表示可能。

【デザイン方向性】ソフトなパステルグラデーション背景(ミント×ラベンダー)、丸みを帯びたフラットデザインに軽いセルシェーディング。案内役マスコット「パーキー(車型ロボット)」がボタン誘導や達成演出で登場し、親しみやすさを演出。スマホ縦持ち最優先、大きめタップ領域。

【音の仕様】BGMは常時再生せず、帰還ナビ画面のみ任意ON。Lo-fi chill、BPM80、4/4拍子、Cmaj7-Am7-Dm7-G7進行をA(8小節)/B(8小節)で展開、ブラシ風ハイハット+ソフトキック(1・3拍)、8小節毎にスネアロールのフィル、木琴風アルペジオメロディ。SEは記録完了時の3音上昇チャイム、5分前は穏やかなベル、1分前は短い緊急ビープ、ボタンタップに軽いクリック音。Web Audio APIでAudioContext.currentTime基準の先読みスケジューリングを行い、BGM/SEを別音量スライダーで制御、ミュート切替、画面遷移時に全ノードをdisconnectして解放する。

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

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