BodyFuel - 食事バランス＆栄養素ビジュアルチェッカー

## 1. アプリの目的・ターゲットユーザー
「今日の食事、栄養バランス大丈夫？」を外部API・カロリー計算アプリ不要でサクッと確認できる食事バランス可視化ツール。専門知識がなくても、食べたものを選ぶだけで主要栄養素の過不足をレーダーチャートとメーターで直感的に把握できる。
- **ターゲット**: 健康意識が芽生え始めた20〜40代、ダイエット中・体づくり中の人、子どもの食事管理が気になる親、外食が多いビジネスパーソン

---

## 2. 主要機能

- **食事ログ入力（朝食・昼食・夕食・間食）**: 350種以上の内製食品DBから食品名で検索して選択。各食品にタンパク質・脂質・炭水化物・食物繊維・ビタミンC・カルシウム・鉄分・塩分の8栄養素を内包。
- **栄養バランス可視化**: 8栄養素をレーダーチャートで表示。日本人の食事摂取基準（性別・年代別）に基づいた推奨量と比較し、「過剰 / 適正 / 不足」を色（赤/緑/青）で色分け表示するメーター付き。
- **改善ヒント自動提案**: 不足している栄養素に対し「この栄養素が多い食品はコレ！」を最大3件サジェスト（内製データ）。「鉄分不足→ほうれん草・レバー・あさり」など。
- **1週間ふりかえりカレンダー**: 過去7日分の栄養バランスをミニレーダーチャートで並べて表示。どの曜日にどの栄養が偏りがちかひと目でわかる。
- **体型・活動量プロフィール設定**: 性別・年代（10代/20代/30代/40代/50代以上）・活動レベル（低/中/高）を設定すると推奨摂取量がパーソナライズ。ログイン不要でLocalStorageに保存。
- **食事バランスシェア画像生成**: 本日のレーダーチャート＋栄養サマリーをCanvas APIでPNG画像化してダウンロード・SNS共有できる。

---

## 3. 画面構成

### トップ画面（今日の食事ダッシュボード）
- 上部：プロフィール設定ボタン（性別・年代・活動レベル）
- 中央：大きなレーダーチャート（8栄養素）＋総合バランススコア（100点満点）
- 下部：朝食・昼食・夕食・間食の4ブロック。各ブロックに「追加」ボタン
- フッター：今日の改善ヒント（最大3件）

### 食品追加モーダル
- テキスト検索ボックス（インクリメンタルサーチ）
- カテゴリフィルター（主食・主菜・副菜・乳製品・果物・飲み物・菓子・その他）
- 食品カード選択→量（g/個/杯などプリセット）を選択→追加ボタン
- 最近追加した食品を最大10件ショートカット表示

### 栄養素詳細パネル（レーダーチャートの各点タップで展開）
- 摂取量・推奨量・達成率バー
- その栄養素の体内での働きを1〜2行で説明
- 補える食品ランキング（TOP3）

### 1週間ふりかえり画面
- 7日分のミニレーダーチャートをカレンダー形式で配置
- 各日付タップで詳細ログを確認
- 週間平均スコアと最も不足しがちな栄養素TOP3を表示

### プロフィール設定画面（モーダル）
- 性別（男性/女性）、年代、活動レベルの選択UI（ラジオボタン＋説明テキスト）

---

## 4. データ構造

### 食品マスタ（JS/JSONファイル、DBなし・サーバーレス）
```
foods[]
id: int
name: string（例: ご飯(茶碗1杯)）
category: string
unit: string（例: 1杯/100g/1個）
protein: float（g）
fat: float（g）
carb: float（g）
fiber: float（g）
vitaminC: float（mg）
calcium: float（mg）
iron: float（mg）
salt: float（g）
```

### ユーザーデータ（LocalStorage）
```
profile: { gender, ageGroup, activityLevel }
logs: {
"YYYY-MM-DD": {
breakfast: [ { foodId, qty } ],
lunch: [ { foodId, qty } ],
dinner: [ { foodId, qty } ],
snack: [ { foodId, qty } ]
}
}
```

### 推奨摂取量テーブル（JSオブジェクト）
- 性別×年代×活動レベルの組み合わせ（計30パターン）で8栄養素の推奨量を定義

※ サーバー・DBは不要。全てクライアントサイドで完結。PHPは静的ファイル配信のみ。

---

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

- **カラーパレット**: クリーンなホワイトベース＋アクセントにフレッシュグリーン（#4CAF50）とウォームオレンジ（#FF8C42）。不足は青（#5B9BD5）、過剰は赤（#E05252）で統一。
- **フォント**: 日本語はNoto Sans JP、数値表示は少し大きめのモノスペースフォント。
- **レイアウト**: カード型UI、角丸多め。スマホはシングルカラム、PCは2カラム（左：ログ入力エリア / 右：チャート＆ヒント）。
- **アニメーション**: レーダーチャートはデータ追加のたびにスムーズに伸縮アニメーション（CSS transition）。バランススコアはカウントアップ演出。
- **全体トーン**: 医療的・硬派にならず、料理アプリっぽい親しみやすいビジュアル。食品アイコンは絵文字（🍚🥩🥦）を活用してリッチ感をコストゼロで演出。