SleepLog - 睡眠記録＆質スコア可視化アプリ

## 1. アプリの目的・ターゲットユーザー
「なんとなく眠れていない」「疲れが抜けない」と感じる20〜50代の働く人向けに、毎日の睡眠を記録・スコア化し、改善のヒントを提示する睡眠管理Webアプリ。外部デバイス不要でブラウザだけで完結し、登録なしでも LocalStorage で即使用開始できる。

## 2. 主要機能
- **睡眠ログ入力**: 就寝時刻・起床時刻・寝つきやすさ(1〜5)・目覚め感(1〜5)・夢の有無・前日のカフェイン/アルコール/運動フラグを入力
- **睡眠スコア自動計算**: 睡眠時間・寝つき・目覚め・生活習慣フラグを独自アルゴリズムで0〜100点に換算し、S〜Dのグレード表示
- **週間・月間グラフ**: 睡眠時間の棒グラフ＋スコア折れ線グラフを Canvas/Chart.jsライクな自前描画で重ね表示。ベッドタイムの分布を24時間リングで可視化
- **改善アドバイス自動生成**: 記録パターン(カフェイン多い日の翌日スコア低下など)を内製ルールで分析し、5〜8種のアドバイスカードをローテーション表示
- **ストリーク＆バッジ**: 連続記録日数のストリーク表示と、「7日連続」「平均7時間達成」「早寝マスター」など12種の実績バッジ
- **エクスポート**: 過去ログをCSV形式でダウンロード

## 3. 画面構成
- **ホーム/ダッシュボード**: 今週の平均スコア大表示・直近7日の棒+折れ線グラフ・本日の記録入力ボタン(目立つCTA)・今日のアドバイスカード1枚
- **記録入力モーダル/ページ**: 就寝/起床時刻のタイムピッカー・寝つき/目覚めの星評価スライダー・カフェイン/アルコール/運動のトグルスイッチ・一言メモ(任意)・保存ボタン
- **カレンダービュー**: 月カレンダー上に各日のスコアを色分けヒートマップ表示(緑〜赤)。日付クリックで詳細ポップアップ
- **統計ページ**: 月別平均・曜日別平均・習慣フラグとスコアの相関ランキング・睡眠時間分布ヒストグラム・ベッドタイムリング
- **バッジページ**: 獲得済み/未獲得バッジ一覧をグリッド表示。未獲得はシルエット+取得条件
- **設定**: 目標睡眠時間設定(デフォルト7.5h)・通知リマインダー設定(PWAプッシュ/なし)・データリセット

## 4. データ構造
LocalStorage 主体で運用(PHP/MySQLはオプションのクラウド同期バックエンドとして準備)。

**sleep_logs テーブル** (MySQL)
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| session_key | VARCHAR(64) | ブラウザ固有UUIDキー |
| log_date | DATE | 睡眠対象日 |
| bedtime | TIME | 就寝時刻 |
| waketime | TIME | 起床時刻 |
| sleep_duration_min | INT | 計算済み睡眠時間(分) |
| ease_score | TINYINT | 寝つきやすさ 1-5 |
| refresh_score | TINYINT | 目覚め感 1-5 |
| had_caffeine | TINYINT(1) | |
| had_alcohol | TINYINT(1) | |
| did_exercise | TINYINT(1) | |
| had_dream | TINYINT(1) | |
| memo | VARCHAR(255) | |
| quality_score | TINYINT | 0-100の計算スコア |
| created_at | DATETIME | |

**badges_earned テーブル**
| session_key | badge_id | earned_at |

## 5. デザインの方向性
- **テーマ**: ダークモードベース(深夜〜早朝の空をイメージした深紺 #0D1B2A〜#1B2E45)。アクセントはソフトな月光ゴールド(#F4C542)と星明りシルバー(#C8D6E5)
- **フォント**: 日本語は Noto Sans JP、数値はやや丸みのあるサンセリフ(Nunito互換CDN)でやわらかく
- **UIトーン**: 圧迫感のない余白多め・カードUIベース・アイコンは月・星・zzz など睡眠モチーフのSVG自作
- **アニメーション**: スコア数値のカウントアップ・グラフの描画アニメ(CSS transition + requestAnimationFrame)で達成感を演出
- **スコアカラーリング**: 80-100=月光ゴールド / 60-79=ソフトブルー / 40-59=オレンジ / 0-39=レッドで直感的に把握