PriceWatch - 競合価格モニタリング＆値付け戦略メーカー

## 1. アプリの目的・ターゲットユーザー
自社商品・サービスの価格設定に悩む中小企業の販売担当者・EC運営者・個人事業主が、競合他社の価格情報を手動で登録・追跡し、「今の自社価格は高いのか安いのか」を可視化した上で、最適な値付け戦略（値上げ余地・値下げ限界・ポジショニング）をブラウザだけで導き出せる無料ツール。競合価格をスプレッドシートで管理している担当者のExcel依存を脱却させる。

## 2. 主要機能
- **商品・サービス登録**: 商品名・カテゴリ・自社価格・原価・目標粗利率を登録。最大30商品まで対応。
- **競合価格入力＆履歴管理**: 商品ごとに最大10社の競合価格を登録し、日付付きで履歴保存。価格変動を折れ線グラフで可視化。
- **ポジショニング分析**: 競合の最安値・最高値・中央値を自動算出し、自社価格の市場内ポジション（最安/安め/中間/高め/最高）を信号機カラーのバッジで表示。
- **値付け戦略シミュレーター**: 目標粗利率や競合ポジション（中間狙い・プレミアム狙い・最安狙い）を選ぶと推奨価格レンジを自動算出。値引きした場合の粗利額・粗利率もリアルタイム計算。
- **アラート設定**: 競合価格が自社より○%以上安くなったら画面上にアラートバナーを表示する閾値設定機能。
- **レポートCSV出力**: 商品別・競合別の価格比較テーブルをCSVダウンロード。印刷用HTMLレポートも1クリックで生成。

## 3. 画面構成
- **ダッシュボード（TOP）**: 登録商品の一覧カード。各カードに自社価格・市場ポジションバッジ・競合社数・最終更新日を表示。アラート中の商品は赤枠でハイライト。右上に「商品追加」ボタン。
- **商品詳細画面**: 上部に自社価格・原価・粗利率。中段に競合価格の一覧テーブル（社名・価格・登録日・編集/削除）と「競合追加フォーム」。下段に価格推移折れ線グラフ（Chart.jsで描画）と市場ポジション横棒インジケーター。
- **値付け戦略シミュレーター画面**: 商品セレクタ→戦略タイプ選択（3ボタン）→推奨価格レンジ表示→任意価格入力で粗利シミュ。
- **アラート設定モーダル**: 商品ごとにアラート閾値（競合最安値比 XX% 以下になったら警告）をスライダーで設定。
- **レポート出力画面**: 出力範囲（全商品 or 選択商品）・形式（CSV / 印刷プレビュー）を選んで実行。

## 4. データ構造
**DBなし・LocalStorageのみで完結（PHP不要、静的HTML+JS構成）**

```
localStorage キー設計:

pricewatch_products: [
{
id: "uuid",
name: "商品名",
category: "カテゴリ",
ownPrice: 数値,
costPrice: 数値,
targetMarginRate: 数値(%),
alertThreshold: 数値(%),
createdAt: "ISO日付"
}
]

pricewatch_competitors_{productId}: [
{
id: "uuid",
companyName: "競合社名",
priceHistory: [
{ price: 数値, recordedAt: "ISO日付" }
]
}
]
```

## 5. デザインの方向性
- カラースキーム：ネイビー(#1E3A5F)をメインに、白・ライトグレーで清潔感のあるビジネスライクなUI。アクセントカラーにアンバー(#F59E0B)を使い、重要数値や推奨価格を強調。
- フォント：日本語はNoto Sans JP、英数字はInter（Google Fonts）。
- ポジションバッジは赤（最安）→オレンジ→黄→緑（中間）→青（高め）→紫（最高）の6段階グラデーション。
- 折れ線グラフはChart.jsを使用。自社ラインを太い実線、競合各社を細い破線で描き分ける。
- スマホではカード一覧→スワイプで詳細に遷移するシンプルなSPA構成（画面切り替えはJS show/hideで実現）。
- 全体的にExcelライクな密度感を避け、カード型UIで「パッと見てわかる」ことを優先する。