QuoteFlow - 見積書・提案書かんたん作成メーカー

## 1. アプリの目的・ターゲットユーザー
フリーランサー・個人事業主・小規模事業者が、デザインソフトや会計ソフトなしでブラウザだけでプロ品質の見積書・提案書を素早く作成できるツール。ContractCraftが契約書・法的文書に特化しているのに対し、本アプリは「商談前の営業フェーズ」に特化し、見積→提案→受注確認の流れをワンストップでサポートする。登録不要でローカルストレージに保存し、PDFまたはHTMLで出力できる。

## 2. 主要機能
- **テンプレート選択 (5種)**: 汎用見積書 / Web制作提案書 / コンサルティング提案書 / 業務委託見積書 / イベント・撮影見積書。各テンプレートは業種特有の項目を初期値として持つ。
- **明細行ビルダー**: 品目名・数量・単価・税区分(8%/10%/非課税)を行単位で追加・削除・並び替え(ドラッグ&ドロップ)。小計・税額・合計を自動計算してリアルタイム表示。
- **発行者プロフィール登録**: 自社名・担当者名・住所・電話・メール・振込先をローカルストレージに保存し、次回以降は自動補完。
- **有効期限カウントダウン表示**: 見積有効期限を設定すると、書類プレビュー上と一覧画面に「あと○日」バッジを表示。期限切れは赤でアラート。
- **ステータス管理**: 各書類に「下書き / 送付済み / 検討中 / 受注 / 失注」のステータスをセット。一覧画面でフィルタリングしてパイプライン管理ができる。
- **PDF・HTML出力**: ブラウザのprint APIを使いA4縦レイアウトでPDF保存。HTMLコピー機能でメールに貼り付け可能。

## 3. 画面構成
### ① ダッシュボード (トップ)
- 書類一覧カード (書類番号・宛先・金額・ステータスバッジ・有効期限)
- 「新規作成」ボタン (テンプレート選択モーダルが開く)
- ステータス別フィルタータブ
- 合計受注額・受注率のシンプルなKPI表示 (ローカルデータ集計)

### ② 書類エディタ画面
- 左ペイン: フォーム入力エリア
- ヘッダー情報 (書類タイトル・書類番号・発行日・有効期限・宛先情報・発行者情報)
- 明細テーブル (行追加/削除ボタン、各セルは直接編集)
- 備考欄・支払条件テキストエリア
- ステータスセレクター
- 右ペイン (PC) / 下部タブ (スマホ): リアルタイムプレビュー (A4風カード)
- アクションバー: 「保存」「複製」「PDF出力」「削除」ボタン

### ③ プロフィール設定画面
- 発行者情報フォーム (ロゴ画像アップロード含む・DataURL保存)
- デフォルト税率・支払条件・備考テンプレートの設定

## 4. データ構造
すべてLocalStorageに保存 (DBなし・サーバレス)。

```json
// quotes[] 配列の各要素
{
"id": "Q-20250601-001",
"templateType": "general" | "web" | "consulting" | "commission" | "event",
"status": "draft" | "sent" | "considering" | "won" | "lost",
"title": "Webサイトリニューアル見積書",
"clientName": "株式会社〇〇",
"clientContact": "田中 様",
"issueDate": "2025-06-01",
"expiryDate": "2025-06-30",
"items": [
{ "name": "トップページデザイン", "qty": 1, "unit": "式", "price": 80000, "tax": 10 }
],
"note": "お支払いは納品後30日以内",
"createdAt": "2025-06-01T10:00:00",
"updatedAt": "2025-06-01T10:00:00"
}

// profile オブジェクト (別キー)
{
"companyName": "山田デザイン事務所",
"personName": "山田 太郎",
"address": "東京都渋谷区...",
"tel": "03-XXXX-XXXX",
"email": "info@example.com",
"bankInfo": "〇〇銀行 渋谷支店 普通 1234567",
"logoDataUrl": "data:image/png;base64,...",
"defaultTax": 10,
"defaultPayment": "請求書発行後30日以内",
"defaultNote": ""
}
```

## 5. デザインの方向性
- **カラー**: ネイビー (#1E3A5F) × ホワイト × アクセントにゴールド (#C9A84C) のプロフェッショナルビジネス系配色
- **フォント**: 見出しにNoto Sans JP Bold、本文・数値はmonospace系でクリーンに
- **レイアウト**: PC時は左フォーム/右プレビューの2カラム分割。スマホ時は上下タブ切り替えでスペースを最大活用
- **プレビュー**: A4白用紙カード風 (box-shadow付き)。会社ロゴがある場合は右上に表示
- **UX**: 明細行の合計はリアルタイムに金額が跳ね上がるカウントアップアニメーションで視覚的フィードバック
- **一覧**: ステータスバッジはカラーコーディング (グレー/青/黄/緑/赤)。カード型レイアウトでスマホでも視認しやすい