ワンコイン家計簿 CoinLog — レシート不要・3タップで記録できるシンプル家計簿

## 1. アプリの目的・ターゲットユーザー
家計簿アプリが続かない最大の理由「入力が面倒」を解消するため、カテゴリ選択→金額入力→登録の最速3ステップで支出を記録できる超シンプル家計簿。ターゲットは20〜40代の一人暮らし・共働き夫婦で、難しい機能は一切なく「とにかく続けられる」ことを最優先にする。アカウント登録不要でブラウザのlocalStorageに保存し、オプションでCSVエクスポートも可能。

## 2. 主要機能
- **クイック入力パネル**: 画面上部に常時表示される大きな金額テンキー＋絵文字アイコン付きカテゴリボタン（食費🍚・交通🚃・娯楽🎮・日用品🧴・医療💊・その他📦）で即時登録
- **日別タイムライン**: 当日の支出一覧をタイムライン形式で表示。各行をタップして編集・削除が可能
- **月間サマリーダッシュボード**: 月の合計支出・カテゴリ別内訳をドーナツグラフと棒グラフで表示。予算設定機能付き（予算超過で赤アラート）
- **カレンダービュー**: 月カレンダーに各日の支出合計を表示。タップで当日の明細に遷移
- **CSVエクスポート**: 表示中の月のデータを「日付・カテゴリ・金額・メモ」形式でダウンロード
- **おみやげ統計**: 「今月一番使ったカテゴリ」「最高額の一回」「節約できた日（前週比マイナス）」などをひとこと分析テキストで表示

## 3. 画面構成
### ① ホーム画面（メイン）
- 上部: 今月の合計支出額（大きく表示）＋予算残り額バー
- 中央: クイック入力エリア（絵文字カテゴリ6個のグリッド→タップで選択→金額テンキー→メモ任意入力→「登録」ボタン）
- 下部: 本日の支出タイムライン（スクロール）

### ② 月間レポート画面
- ドーナツグラフ（カテゴリ別割合）
- 棒グラフ（週別支出推移）
- カテゴリ別リスト（金額降順）
- おみやげ統計テキスト
- CSVエクスポートボタン

### ③ カレンダー画面
- グリッドカレンダー（各日に支出合計額を小さく表示）
- 支出ゼロ日は緑ドット、支出多い日は赤みがかる色
- 日付タップ → ホームの当日タイムラインへスクロール

### ④ 設定画面
- 月間予算額の設定
- カテゴリ名・絵文字のカスタマイズ（最大8カテゴリ）
- データの全削除
- 操作説明（ヘルプ）

### ナビゲーション
- 画面下部に固定タブバー: ホーム / レポート / カレンダー / 設定

## 4. データ構造
すべてlocalStorageに保存（サーバー・DBなし）。将来的にPHP+MySQLへ移行できるよう構造を意識すること。

```
// 支出レコード (localStorage key: "coinlog_records")
[
{
"id": "uuid",
"date": "2025-07-15",
"time": "12:34",
"category_id": 1,
"amount": 850,
"memo": "ランチ"
}
]

// 設定 (localStorage key: "coinlog_settings")
{
"monthly_budget": 80000,
"categories": [
{ "id": 1, "name": "食費", "emoji": "🍚", "color": "#FF8C42" },
{ "id": 2, "name": "交通", "emoji": "🚃", "color": "#4A90D9" },
{ "id": 3, "name": "娯楽", "emoji": "🎮", "color": "#9B59B6" },
{ "id": 4, "name": "日用品", "emoji": "🧴", "color": "#27AE60" },
{ "id": 5, "name": "医療", "emoji": "💊", "color": "#E74C3C" },
{ "id": 6, "name": "その他", "emoji": "📦", "color": "#95A5A6" }
]
}
```

## 5. デザインの方向性
- カラーパレット: ベース白 (#FFFFFF)・薄グレー (#F5F6FA)、アクセントカラーはミントグリーン (#2ECC8A) を基調に温かみのあるポップデザイン
- フォント: 数字は大きく太く（視認性最優先）、本文はシステムフォント
- カテゴリボタンはカード型で絵文字を大きく表示し、タップターゲットを大きく確保（最低60×60px）
- 金額テンキーはスマホネイティブアプリ風の大きなボタン配置
- アニメーション: 登録成功時にコインが弾むマイクロアニメーション（CSS keyframes）
- 全画面をスマホ縦表示（max-width: 430px）を基準に設計し、PCはセンター配置でカード表示