WaterRhythm - 水分補給リズムトレーナー

## 1. アプリの目的・ターゲットユーザー
在宅勤務・デスクワーカー・高齢者・運動習慣のある人など「水分補給を忘れがち」な全世代向けに、体重・活動量・気温・季節から1日の最適水分量を算出し、飲んだ量をタップ記録しながら「飲むべきリズム（時刻別推奨量）」でガイドする水分管理Webアプリ。
既存アプリ（BodyFuel・SleepLog・StretchFlow等）が扱わない「水分補給そのもの」に特化し、単なるカウンターではなく体調・天候・運動量に応じた動的アドバイスを提供する点が差別化ポイント。

---

## 2. 主要機能

- **パーソナル目標設定**: 体重(kg)・活動レベル(3段階)・今日の気温(入力 or スライダー)・飲酒予定の有無を入力すると、1日の推奨水分量(mL)をWHO基準式で自動算出。
- **タップ記録パネル**: コップ(150mL)・ペットボトル(500mL)・水筒(350mL)・スポーツドリンク(500mL)・コーヒー/お茶(利尿補正-50mL)などのアイコンボタンをタップするだけで、累積摂取量をリアルタイム更新。カスタム量(任意mL)も入力可能。
- **時刻別リズムウェーブ**: 起床〜就寝までの時間帯を横軸にした「理想摂取ペース曲線」と「実績バー」を重ねたグラフ表示。現在時刻に対して「あと〇mL足りています」「飲み過ぎペースです」などのステータスを色で表示。
- **おすすめアラートバナー**: ページを開くたびに「前回記録から〇分経過、コップ1杯のタイミングです」などのバナーをローカルストレージのタイムスタンプをもとに表示（Push通知なし・ブラウザ完結）。
- **7日間トレンドカレンダー**: 1週間の達成率を棒グラフ＋色分けカレンダー(赤〜青グラデーション)で表示。連続達成ストリーク日数を表示してモチベーション維持。
- **水分補給Tipsカード**: 脱水サインチェックリスト(尿の色見本・口の乾き等)、季節別ポイント(夏の発汗量・冬の乾燥対策)、カフェイン換算、スポーツ時の補給タイミングなど20枚のTipsカードをランダム表示。

---

## 3. 画面構成

### トップ / ホーム画面
- 画面上部: 今日の目標量(mL)と大きなサークルゲージ(達成率 %・現在量/目標量)
- サークルの下: 水滴アニメーション付きの「飲んだ！」記録ボタン群（コップ・ペットボトル等アイコン）
- その下: 時刻別リズムウェーブグラフ（横スクロール対応）
- 一番下: 本日のTipsカード（スワイプで切り替え）

### 設定画面（モーダルまたは別ページ）
- 体重入力・活動レベル選択(デスクワーク/普通/運動多め)・気温入力・飲酒予定トグル
- 目標量のプレビューと「保存」ボタン
- ニックネーム(表示用)入力

### 履歴画面
- 7日間カレンダービュー(達成率カラー)
- 日別詳細: 選択日の摂取ログ（時刻・種類・量）タイムライン
- ストリークバッジ表示(3日/7日/14日/30日)

### Tipsライブラリ画面
- カテゴリタブ(基礎知識・脱水サイン・季節・スポーツ・食べ物からの水分)
- 20枚のカードを一覧表示

---

## 4. データ構造

### ローカルストレージのみで完結（DB不要・サーバーサイド処理なし）

**user_profile** (JSON)
```
{
nickname: string,
weight_kg: number,
activity_level: 'low' | 'medium' | 'high',
wake_hour: number,
sleep_hour: number
}
```

**daily_records** (JSON配列、キー: 'YYYY-MM-DD')
```
{
date: string,
temp_celsius: number,
drinking_today: boolean,
goal_ml: number,
logs: [
{ time: 'HH:MM', type: 'cup'|'bottle'|'tumbler'|'sports'|'coffee'|'custom', ml: number }
]
}
```

**tips_seen** (配列): 表示済みTipsのIDリスト

※ PHPはlocalStorage経由の静的ファイル配信のみ使用、MySQLは使用しない構成でも可。将来的な拡張用にPHP+MySQL構成も選択可能(ユーザー認証なし・セッションIDのみ)。

---

## 5. デザインの方向性

- **カラーテーマ**: 水・清涼感を連想させる「クリアブルー(#4FC3F7)〜ディープアクア(#0288D1)」グラデーションをベースに、達成状態はグリーン、不足はオレンジ、超過はパープルで表現。背景はオフホワイト(#F7FBFF)。
- **メインビジュアル**: ホーム画面の大サークルゲージは水が満ちていくアニメーション（CSS keyframesで水面が揺れる表現）。
- **フォント**: 日本語はNoto Sans JP、数値表示はRoboto(太字)で視認性重視。
- **レイアウト**: モバイルファースト・シングルコラム。PC表示時は2カラム(左:記録パネル、右:グラフ+Tips)。
- **トーン**: 医療的・堅苦しくなく、「水を飲むのが楽しくなる」ゲーミフィケーション要素(ストリーク・バッジ)を自然に組み込んだポップかつミニマルなUI。
- **アイコン**: Font Awesome or SVGインラインで水滴・コップ等を使用し、画像依存なし。

---

## 実装規模の目安
- ファイル構成: index.php(トップ)、history.php、tips.php、settings.php + style.css + app.js
- JavaScriptのみでローカルストレージ操作・グラフ描画(Canvas API or Chart.js CDN)
- 外部API・認証・課金なし。1〜2日で完成できる現実的な規模。