習慣トラッカー「ハビットリング」- 毎日の習慣を視覚的に記録・継続するアプリ

## 1. アプリの目的・ターゲットユーザー
毎日の習慣（運動・読書・水分補給・早起きなど）をチェックするだけで記録でき、継続日数や達成率をリング状グラフで視覚的に確認できる習慣管理アプリ。三日坊主になりがちな人・自己管理を始めたい社会人・学生がターゲット。ログイン不要でローカルストレージ保存、オプションでニックネームとセッションIDによる簡易クラウド同期も可能。

## 2. 主要機能
- **習慣の登録・編集・削除**: 習慣名・アイコン(絵文字選択)・カラー・目標頻度(毎日 / 週N回)を設定。最大10件まで登録可能。
- **デイリーチェック**: トップ画面に今日の習慣一覧を表示し、ワンタップで達成マーク。チェック時にリングがアニメーションで塗り埋まる演出。
- **ストリーク(連続日数)表示**: 各習慣ごとに現在の連続達成日数と最長記録を表示。3日・7日・30日達成時にバッジをポップアップ表示。
- **カレンダーヒートマップ**: GitHub風の月間達成状況ヒートマップ(達成度に応じて色の濃淡が変化)でひと目で継続状況を把握。
- **週間・月間サマリー**: 習慣ごとの達成率をリング状グラフ(SVGアニメーション)で表示する統計ページ。全体の平均達成率も表示。
- **簡易クラウド同期(任意)**: ニックネームと自動生成の6桁コードを使ったセッション保存。別端末からコードを入力するとデータを引き継げる。

## 3. 画面構成
- **トップ(今日のチェック画面)**: ヘッダーに日付と全体達成リング。習慣カードをタイルまたはリスト形式で並べ、チェックボタンと連続日数を表示。右下に「習慣を追加」FAB。
- **習慣追加・編集モーダル**: 習慣名入力・絵文字ピッカー(50種程度プリセット)・カラーパレット・頻度設定のシンプルなフォーム。
- **統計ページ**: 上部に選択中の習慣ドロップダウン。SVGリンググラフ(週/月切替)と下部にカレンダーヒートマップを表示。
- **バッジ一覧ページ**: 獲得済みバッジ(実績)をグリッド表示。未獲得はモノクロで表示しコレクション欲を刺激。
- **設定ページ**: ニックネーム設定・同期コードの確認・データリセット・ダークモード切替。

## 4. データ構造
**ローカルストレージ(JSON形式)**
- `habits`: [{id, name, emoji, color, frequency, created_at}]
- `logs`: [{habit_id, date(YYYY-MM-DD), done(bool)}]
- `badges`: [{badge_id, earned_at}]
- `settings`: {nickname, sync_code, dark_mode}

**MySQLテーブル(クラウド同期用)**
- `sync_sessions(sync_code VARCHAR(6) PK, nickname VARCHAR(30), data MEDIUMTEXT JSON, updated_at TIMESTAMP)`
- sync_codeをキーにJSONをまるごとUPSERT保存するシンプル設計。個人情報は不要。

## 5. デザインの方向性
- **カラーテーマ**: 白ベースのクリーンなライトモード。習慣ごとに設定したカラーがリング・カード枠・チェックマークに反映されカラフルに。ダークモードも対応。
- **タイポグラフィ**: Noto Sans JPを使用。数字はやや大きめで達成感を強調。
- **アニメーション**: チェック時にリングが時計回りに塗り埋まるCSSアニメーション(0.4秒)。バッジ獲得時は紙吹雪のconfettiエフェクト(純JS実装)。
- **スマホ最優先**: カード縦並びで親指で操作しやすいボタム配置。PCでは2カラムのグリッドレイアウトに切替。