MentalWeather - 気分天気予報＆セルフケアログ

## 1. アプリの目的・ターゲットユーザー
毎日の気分・感情状態を「天気」のメタファーで直感的に記録し、気分の波パターンを可視化することで自己理解を深めるセルフケアWebアプリ。ストレスを感じやすい20〜40代の働く人・学生・育児中の親を主なターゲットとする。専門的な心理ツールではなく「日記を書くより手軽・グラフより親しみやすい」入力体験を提供し、毎日続けられることを最優先にする。

## 2. 主要機能
- **気分天気入力（1日1〜複数回）**: 晴れ／くもり／小雨／雨／雷雨／雪／霧の7種類の天気アイコンをタップして気分を記録。加えてエネルギーレベル（低〜高の5段階スライダー）と任意のひとことメモ（50文字以内）を入力
- **気分カレンダー**: 月表示のカレンダーに天気アイコンを並べ、その日の「心の天気」を一覧で振り返れる。日付タップで詳細ポップアップ表示
- **週間・月間トレンドグラフ**: 天気を数値スコア（晴れ=7〜雷雨=1）に変換した折れ線グラフと、エネルギーレベルの棒グラフを重ねて表示。気分の波パターンを視覚的に把握
- **セルフケアカード提案**: 記録した天気パターンに基づき「今日のあなたへのひとこと」とセルフケアTips（深呼吸・軽い運動・休息・人と話す等）を1〜3枚のカードで提示。内製の50パターンからロジックで選択（外部API不要）
- **週次サマリーレポート**: 毎週月曜に「先週の天気まとめ」として最多天気・平均エネルギー・連続晴れ/雨日数・改善提案をサマリーカードで表示

## 3. 画面構成
- **ホーム画面（今日の天気入力）**: 大きな天気アイコン7選択肢、エネルギースライダー、メモ欄、記録ボタンを中央配置。画面上部に直近3日間の小さなアイコンサムネイル
- **カレンダー画面**: 月間カレンダー。各日セルに天気アイコンを表示。前月・翌月ナビゲーション。日付タップで「日時・天気・エネルギー・メモ」のモーダルポップアップ
- **トレンド画面**: 週間/月間切り替えタブ。気分スコア折れ線グラフ（Canvas.js使用）＋エネルギー棒グラフ。下部に「今週のあなたへ」セルフケアカード3枚をカルーセル表示
- **設定画面**: 記録リマインダー時刻設定（ブラウザNotification API）、テーマカラー選択（ライト/ダーク/パステル）、データリセット
- **オンボーディング（初回のみ）**: 3枚のスワイプスライドでアプリの使い方をガイド

## 4. データ構造
すべてブラウザのLocalStorageに保存（登録・ログイン不要）。DBは不要。

```
logs（配列）:
{
id: string, // UUID
date: 'YYYY-MM-DD',
time: 'HH:mm',
weather: 1〜7, // 1=雷雨 7=晴れ
energy: 1〜5, // エネルギーレベル
memo: string, // 最大50文字
createdAt: timestamp
}

settings:
{
reminderTime: 'HH:mm' | null,
theme: 'light' | 'dark' | 'pastel',
onboardingDone: boolean
}
```

## 5. デザインの方向性
- **空と天気をモチーフにしたやわらかい世界観**: 背景は薄いグラデーション空（晴れ=水色〜ラベンダー、雨=グレーブルー）がその日の最新天気に合わせて変化
- **天気アイコン**: 絵文字（☀️🌤️⛅🌧️⛈️❄️🌫️）を大きく使い、シンプルかつ感情移入しやすい見た目
- **フォント**: 丸みのある日本語フォント（Noto Sans JP）で親しみやすさを演出
- **カラーパレット**: パステルブルー・ペールイエロー・ミントグリーンをベースに、暗い感情を表す天気でも圧迫感のない柔らかいトーンを維持
- **アニメーション**: 天気アイコン選択時に軽いフワッとしたCSSアニメーション。グラフは描画時にフェードインで表示
- **モバイルファースト**: ボトムナビゲーション（ホーム・カレンダー・トレンド・設定）で片手操作に最適化。PC表示は中央カラム固定（max-width 480px）