RoutineScape - 朝夜シネマティック・ルーティンタイマー

1. 目的・ターゲット
「習慣化アプリはあるが実行中がただの数字タイマーで味気ない」という不満を解消する、朝活・夜活ルーティンを美しい背景ビジュアルとオリジナルBGMで演出しながら進行できる実行支援ツール。学生・社会人・在宅ワーカーなど、身支度や就寝準備を習慣化したい人向け。

2. 主要機能
・テンプレート選択: 朝活/夜活/仕事前/運動前/瞑想などのプリセットルーティン(ステップ・所要時間つき)
・オリジナルルーティン作成: ステップ名・時間・雰囲気テーマをドラッグ並べ替えで自由編集し保存
・シネマティック実行画面: 現在ステップに応じた背景ビジュアルが自動切替、カウントダウンタイマーと次ステップ通知音
・雰囲気別BGM自動再生: 爽やか/集中/リラックスなど生成済みループ音源をステップテーマに合わせて自動選択、音量・ミュート操作
・実行履歴とストリーク: 完了ルーティンをカレンダーヒートマップに記録、連続達成日数・達成率をグラフ表示
・共有機能: 自作ルーティンをURL発行して友人と共有、コピーして自分用にカスタマイズ可能

3. 画面構成
・ホーム: テンプレート一覧をサムネイル画像付きカードで表示、マイルーティン一覧
・編集画面: ステップリスト(名前・時間・テーマ選択)、並べ替え、プレビュー
・実行画面: フルスクリーン背景+大型タイマー+ステップ名+進捗バー+BGMコントロール
・履歴画面: カレンダーヒートマップ、ストリークバッジ、月別達成率グラフ

4. データ構造
・routines(id, session_id, name, type, is_public, share_code, created_at)
・routine_steps(id, routine_id, step_order, title, duration_seconds, theme)
・routine_logs(id, routine_id, completed_at, total_duration, steps_completed_count)
ログイン不要、ブラウザのセッションIDをCookieで発行しDBに紐付け。

5. デザイン方向性
朝は暖色系(オレンジ・ゴールドのグラデーション)、夜は寒色系(紺・紫)で時間帯を演出。丸みのあるカードUIと大きな写実背景画像で没入感を演出し、UIテキストは最小限にして映像体験を主役にする。スマホ縦画面でのフルスクリーン実行を基本に、PCでも余白を活かしたレイアウトに対応。