StretchFlow - 座りすぎ解消・デスクワーカー向けストレッチガイドアプリ

## 1. アプリの目的・ターゲットユーザー
長時間デスクワークやリモートワークで「肩こり・腰痛・目の疲れ・むくみ」に悩む20〜50代のオフィスワーカー・在宅ワーカーを主なターゲットとする。「今どこが辛いか」と「今どこにいるか（会社の席 / 自宅 / 移動中）」の2軸から最適なストレッチメニューをその場で提案し、タイマーガイドで正しいフォームを保ちながら実施できる。運動が苦手な人でも1〜5分の隙間時間に完結できる設計にする。

## 2. 主要機能
- **症状×シチュエーション選択メニュー**: 症状（肩こり / 腰痛 / 眼精疲労 / 首こり / 手首疲れ / 足のむくみ / 全身リフレッシュ の7種）×場所（座ったまま / 立って / 横になって の3種）の組み合わせ（最大21パターン）から最適なストレッチセットを自動選出する
- **ストレッチタイマーガイド**: 各ポーズをSVGイラストで表示し、設定秒数のカウントダウンバー＋音声カウント（Web Audio APIの「ピ」音）で次のポーズへ自動遷移。ポーズ数は1セット3〜6種、合計1〜5分で完結
- **ポーズ詳細解説モーダル**: 各ストレッチをタップすると「効く部位のハイライト図 / 正しいやり方テキスト / よくある間違い / 注意事項」を表示
- **今日のストレッチ記録（LocalStorage）**: 実施完了したセッションを日付・症状・所要時間で記録し、カレンダービューと週間達成グラフで継続確認
- **ストレッチリマインダー**: 「X時間おきにリマインドする」をONにするとブラウザのNotification APIで通知（許可取得後）。ページを開いたままでも動作するシンプルなsetInterval管理
- **コンディションメモ**: セッション終了後に「ビフォー／アフターの体の楽さ」を5段階でタップ入力し、効果を振り返れる

## 3. 画面構成
- **トップ画面**: キャッチコピー＋「今すぐストレッチを始める」大ボタン。下部に「今日の記録サマリー（達成セッション数・合計時間）」カード。リマインダー設定トグル
- **症状選択画面**: 体のシルエット図（正面SVG）の各部位（肩・首・腰・目・手首・足）をタップして症状を選ぶ直感UI。複数選択可。「場所を選ぶ」ボタンへ
- **シチュエーション選択画面**: アイコンカード3種（椅子・立ち姿・ベッド）をタップして選択
- **メニュー提案画面**: 選んだ条件に合うストレッチセット名・ポーズ数・所要時間を表示。「スタート」ボタンで開始。各ポーズのサムネイルリストも表示
- **セッション実行画面（フルスクリーン推奨）**: 中央に大きなSVGポーズイラスト、ポーズ名・効かせる部位テキスト、カウントダウンバー、「次へスキップ」「一時停止」ボタン、進捗ドット（○○●○○）
- **完了画面**: 「お疲れさまでした！」メッセージ、所要時間表示、アフター評価5段階タップ、「記録を見る」「もう1セット」「トップへ」ボタン
- **記録画面**: 月間カレンダー（実施日に色付き）、週間棒グラフ（合計時間）、最近のセッション履歴リスト（日付・症状タグ・時間・評価）

## 4. データ構造
**DBは使用しない（完全LocalStorage管理）**

```
// ストレッチマスタ（PHPまたはJSの内製JSON）
stretches: [
{
id: "sh_01",
name: "肩甲骨ほぐし",
target: ["肩", "背中"],
situation: ["seated", "standing"],
symptom: ["shoulder", "full"],
duration_sec: 30,
svg_key: "shoulder_roll",
instruction: "...",
caution: "..."
}, ...
]
// 合計50ポーズ以上を内製定義

// LocalStorage: セッション記録
sessions: [
{
id: "uuid",
date: "2025-07-01",
symptom: ["shoulder","eye"],
situation: "seated",
duration_sec: 180,
poses_completed: 5,
after_score: 4
}, ...
]

// LocalStorage: リマインダー設定
reminder: { enabled: true, interval_hours: 1, last_notified: "2025-07-01T10:00:00" }
```

## 5. デザインの方向性
- **カラーパレット**: メインカラーは爽やかな青緑（#3ABCB1）、アクセントにライトオレンジ（#FF8C5A）、背景はオフホワイト（#F7F9FA）。健康・清潔感・リラックスを演出
- **トーン**: 医療的にならず「軽くてポジティブ・続けやすい」ワークアウトアプリ風
- **イラスト**: 人体ポーズはシンプルなSVGラインアート（棒人間よりやや肉感的なアウトライン）。性別・年代を問わない中性的なデザイン
- **タイポグラフィ**: 見出しは丸ゴシック系（Noto Sans JP）、数字カウントダウンは大きく太字で視認性を優先
- **アニメーション**: ポーズ遷移時はフェードスライド、カウントダウンバーはCSSトランジションで滑らかに進行。完了時は紙吹雪エフェクト（canvas confetti）
- **スマホ最優先レイアウト**: 縦スクロールを最小限に抑え、1画面1アクションのウィザード形式を徹底。PCではmax-width:480pxでセンタリング表示