CancelGuard - 解約・退会手続きナビ&違約金シミュレーター

## 1. アプリの目的・ターゲットユーザー

サブスクリプションサービス、携帯電話・インターネット回線、ジム・習い事、リース契約など「解約したいのに手順がわからず放置している」ユーザーが、解約手順・必要書類・違約金・注意ポイントをすぐに把握できる実用ツール。

ターゲット:
- サブスク費用を見直したい個人・ビジネスパーソン
- 複数の契約を抱えて解約タイミングを逃しがちな人
- 「違約金がいくらかかるか不安で解約に踏み切れない」ユーザー

---

## 2. 主要機能

- **サービス別解約ガイド**: 動画配信・音楽・クラウドストレージ・携帯・インターネット回線・フィットネス・ビジネスツール・保険など10カテゴリ×60件超の内製データベースから「解約手順ステップ・必要情報・注意事項・よくある落とし穴」を表示
- **違約金・精算シミュレーター**: 契約開始日・最低利用期間・月額料金・更新月を入力すると、解約日ごとの違約金額と「最もお得な解約タイミング(次の更新日まで○日)」をカレンダー形式でリアルタイム表示
- **マイ解約リスト**: 解約予定サービスをリスト管理し、手続き状況(未着手/申請済/完了)をステータス更新。解約完了日と節約金額の累計を表示する「節約カウンター」
- **更新日アラートメモ**: サービス名・次回更新日・月額を登録すると、更新が近い順に並び替えてリマインダー表示(Webプッシュ通知 or ページ内バナー)
- **解約チェックリスト自動生成**: サービスジャンルを選ぶと「データのバックアップ・他サービスへの登録変更・家族共有の確認」などカテゴリ別チェックリストを自動表示、ステップごとにチェック可能

---

## 3. 画面構成

### TOP画面
- 検索バー(サービス名で即検索) + カテゴリアイコングリッド(10カテゴリ)
- 「よく解約されているサービス」ランキング(内製カウンター)
- 「違約金シミュレーターを試す」CTAボタン

### サービス詳細画面
- サービスロゴ代わりのアイコン＋名称＋月額目安
- 解約手順(ステップカード形式、番号付き)
- 注意事項・よくある落とし穴(警告カラーカード)
- 契約期間タイプ(月次自動更新 / 年間 / 最低利用期間あり)のバッジ表示
- 「このサービスを解約リストに追加」ボタン

### 違約金シミュレーター画面
- フォーム: サービス名(テキスト自由入力)・契約開始日・月額・最低利用期間・更新サイクル
- 結果: 今日解約した場合の違約金 / 次の更新日 / 更新日に解約した場合の違約金(0円)を大きく表示
- 横スクロール式「月別タイムライン」: 今後12か月の各月解約時コストを棒グラフで可視化
- 「年間節約額 = ○○円」の強調表示

### マイ解約リスト画面
- カード一覧(サービス名・月額・ステータスバッジ・登録日)
- ステータスを「未着手→申請済→完了」にワンタップで更新
- 完了したサービスの月額合計を「月○○円・年○○円の節約達成！」と表示
- LocalStorageで保存(登録不要)

### 解約チェックリスト画面
- ジャンル選択(動画/音楽/携帯/ジム等)
- チェックリスト項目を順番に表示、完了項目は打ち消し線
- 全完了でアニメーション演出(紙吹雪)

---

## 4. データ構造

### DBテーブル概要(MySQL)

**services テーブル**
- id, category_id, name, monthly_fee_min, monthly_fee_max, contract_type(monthly/annual/minimum), cancellation_url, steps_json(解約手順JSON), notes_json(注意事項JSON), cancel_count(解約ガイド参照数), created_at

**categories テーブル**
- id, name(動画配信/音楽/クラウド/携帯/ネット回線/ジム/ビジネスツール/保険/学習/その他), icon, color_code

**checklist_templates テーブル**
- id, category_id, step_order, title, description

※マイ解約リスト・シミュレーター入力値・チェック済状態はすべてLocalStorageで管理(ログイン不要)

---

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

- **カラー**: メインカラーはネイビー(#1E3A5F)＋アクセントにオレンジ(#FF6B35)。「節約・お得」の文脈でポジティブかつ信頼感のある配色
- **トーン**: シンプルで清潔感のあるカード型UI。情報量が多くなりがちなので余白を広めに取り、ステップは番号付きカードで視覚的に区切る
- **アイコン**: Font Awesome 無料版で統一
- **スマホ最適化**: ステップカードはアコーディオン形式で折りたためる設計にし、スマホでの縦スクロール操作を優先
- **警告・注意カード**: 黄色・赤のボーダー付きカードで「解約月末締め切りに注意」「年間契約の場合は返金なし」等をひと目で伝える
- **フォント**: 日本語はシステムフォント(游ゴシック/Noto Sans)、英数字は Roboto