PriceList Pro - 価格表・料金表ビルダー

## 1. アプリの目的・ターゲットユーザー
フリーランサー・個人事業主・小規模店舗が「自分のサービス料金表」をブラウザだけでプロ品質に作成し、印刷・PDF保存・共有URLで配布できるツール。Webデザイナー・カメラマン・コーチ・整体師・家庭教師・美容師など、料金体系を対外的に見せる必要がある人が5分で完成させられることを目指す。

## 2. 主要機能
- **テンプレート選択（6種）**: シンプル白・プレミアム黒・ポップカラー・和風・サロン・IT/Tech の6テーマから選択し、即座にプレビュー反映
- **プラン・項目エディタ**: プラン名・価格・通貨（円/USD/EUR）・サービス内容（最大6行）・オススメバッジ・人気タグを入力。最大4プランを横並びカード表示、ドラッグ&ドロップで順序変更
- **ヘッダー＆フッター設定**: 屋号・キャッチコピー・連絡先・注意事項（税込/税抜表示切替含む）を入力
- **リアルタイムプレビュー**: 入力内容が右パネルに即時反映され、PCでは左右2カラム、スマホでは上下スクロールで確認
- **出力機能**: ブラウザ印刷（window.print）でA4PDF化、LocalStorageに複数の料金表を保存・読み込み・複製・削除
- **共有URL生成**: 料金表データをBase64エンコードしてURLパラメータに埋め込み、リンクを受け取った相手がそのままブラウザで閲覧できる（DB不要）

## 3. 画面構成
### トップページ（/）
- ヒーローコピー「料金表を、5分で。」
- 「新規作成」「保存済み一覧」の2ボタン
- 完成イメージのスクリーンショット3枚スライダー

### エディタページ（/editor）
- **左パネル（入力エリア）**:
- Step1: テンプレート選択（サムネイル6枚クリック）
- Step2: ヘッダー情報（屋号・キャッチコピー・通貨・税表示）
- Step3: プラン一覧（プランカードをアコーディオン展開で編集、＋ボタンで追加）
- Step4: フッター（注意事項・連絡先）
- アクションボタン：「保存」「URLをコピー」「印刷/PDF」
- **右パネル（プレビューエリア）**:
- A4縦比率のプレビューカード
- テーマ別スタイル適用済みのリアルタイム表示

### 保存一覧ページ（/list）
- 保存済み料金表をサムネイルカードで一覧表示
- 「編集」「複製」「削除」「URL共有」のアクションアイコン

### 閲覧専用ページ（/view?d=xxx）
- URLパラメータから復元した料金表を閲覧専用で表示
- 「この料金表を自分でも作る」ボタンでエディタへ誘導

## 4. データ構造
DBは使用しない。LocalStorageに以下のJSON配列を保存:
```json
[
{
"id": "uuid",
"updatedAt": "2025-01-01T00:00:00Z",
"template": "premium-black",
"header": {
"brandName": "屋号",
"tagline": "キャッチコピー",
"currency": "JPY",
"taxLabel": "税込"
},
"plans": [
{
"id": "uuid",
"name": "スタンダード",
"price": 30000,
"unit": "/ 月",
"badge": "おすすめ",
"features": ["機能A", "機能B"],
"ctaLabel": "お問い合わせ",
"ctaUrl": ""
}
],
"footer": {
"notes": "注意事項",
"contact": "contact@example.com"
}
}
]
```
共有URL用: `JSON.stringify(data)` → `btoa(encodeURIComponent(...))` でURLパラメータ化（2000文字超の場合は警告）

## 5. デザインの方向性
- **UIテーマ**: ダークネイビー(#1a2035)をベースにゴールドアクセント(#f5c842)でプロフェッショナル感を演出
- **フォント**: 見出しはNoto Serif JP、本文はNoto Sans JP（Google Fonts）
- **レイアウト**: デスクトップは左40%入力・右60%プレビューの2カラム固定。モバイルはタブ切替（編集タブ/プレビュータブ）
- **プレビューカード**: box-shadow + border-radius で浮き上がった名刺風の仕上がり。テーマ別にグラデーション・アイコン絵文字・背景パターンを切替
- **アニメーション**: 入力フォーカス時にプレビュー該当エリアをハイライト（黄色のpulseアニメーション0.5秒）してどこが変わったか直感的に把握