ReadyMail — 件名・本文ワンクリック生成メール下書きメーカー

## 1. アプリの目的・ターゲットユーザー
ビジネスメール、お礼メール、謝罪メール、問い合わせ、依頼、断り、催促など「何を書けばいいかわからない」場面で、状況を選ぶだけで即座に件名と本文の下書きを生成する無料ツール。社会人1年目・転職者・営業職・フリーランス・就活生・苦手意識のある中高年ビジネスパーソンを主なターゲットとする。SNSで「これ便利すぎる」と拡散されやすいよう、生成結果をワンクリックでコピーできる体験設計を重視する。

## 2. 主要機能
- **シーン選択×トーン選択でメール下書きを自動生成**: 「お礼」「謝罪」「依頼」「断り」「催促」「確認」「挨拶」「見積依頼」「クレーム対応」「採用・応募」など20種のシーンと、「丁寧・ビジネス標準・カジュアル・強め」4トーンをドロップダウンで選ぶだけで件名+本文を組み立て生成する。外部APIは使わず内製テンプレートエンジン（PHP側で変数置換）で動作。
- **カスタム変数入力**: 宛先会社名・担当者名・自分の名前・日付・金額・商品名・理由など最大8個の穴埋め変数をフォームで入力すると文面に自動反映。入力欄はシーンに応じて動的に切り替わる。
- **ワンクリックコピー＆件名・本文分割コピー**: 「件名をコピー」「本文をコピー」「まとめてコピー」の3ボタンを大きく配置。スマホでの操作を最優先に設計。
- **言い換えバリエーション表示**: 生成後に「もう少し柔らかく」「もう少し強く」「短く」ボタンで同一シーンの別表現バリエーション（各シーン×トーン×3パターン合計240パターン）に切り替えられる。
- **SNS共有カード生成**: 生成されたメール例文の一部をOGP風カードとしてPNG表示し、「こんな例文が使える」としてSNS拡散を促す共有ボタンを設置。
- **ローカル履歴保存**: 直近10件の生成履歴をLocalStorageに保存し、再利用できるマイ履歴欄を表示。

## 3. 画面構成
### トップページ（1ページ完結型SPA）
- **ヘッダー**: ロゴ「ReadyMail」＋キャッチコピー「0秒でビジネスメールの下書きが完成」
- **STEP1 シーン選択パネル**: 20シーンをアイコン付きカードグリッドで表示（お礼・謝罪・依頼・断り・催促・確認・挨拶・自己紹介・見積依頼・納期調整・クレーム対応・採用応募・内定承諾・退職連絡・欠席連絡・遅刻連絡・紹介・転送・フォローアップ・その他）
- **STEP2 トーン選択**: 「丁寧（フォーマル）」「標準（ビジネス）」「カジュアル」「強め（催促など）」の4択ラジオボタン
- **STEP3 変数入力フォーム**: シーンに連動して3〜8個の入力欄が動的表示。プレースホルダーに記入例を表示し迷わせない。
- **生成ボタン**: 大きな「メールを作成する →」ボタン
- **生成結果エリア**: 件名欄（コピーボタン付き）＋本文欄（コピーボタン付き）＋「まとめてコピー」大ボタン。「柔らかく」「強く」「短く」の言い換えボタン3つ。
- **マイ履歴サイドパネル（PC）/ アコーディオン（スマホ）**: 最近の10件を一覧表示し再生成ボタン付き。
- **フッター**: 使い方ガイド、よくある質問（5問）、SNSシェアボタン

## 4. データ構造
### DBなし構成（LocalStorageのみ）
- テンプレートデータはPHPファイル内の連想配列で管理（`templates.php`）
- `scene_id`（例: `thanks`, `apology`, `request`）
- `tone`（`formal` / `standard` / `casual` / `strong`）
- `variant`（1〜3のパターン番号）
- `subject_template`（件名テンプレート文字列、変数は`{{var_name}}`形式）
- `body_template`（本文テンプレート文字列）
- `required_vars`（必要な変数名の配列）
- 変数定義ファイル `vars.php`（変数ID・ラベル・プレースホルダーのマスタ）
- LocalStorageキー: `readymail_history`（JSON配列、最大10件、各件に scene/tone/variant/vars/generated_at を保存）

### サーバー側処理（PHP）
- `generate.php`: POSTで scene/tone/variant/vars を受け取り、テンプレートに変数を埋め込んでJSONレスポンスを返す
- `api/variants.php`: シーンとトーンを渡すとバリエーション数を返す

## 5. デザインの方向性
- **カラー**: メールらしい清潔感のあるネイビー（#1E3A5F）をメインカラー、アクセントにスカイブルー（#4A9FD4）、背景は白〜薄いグレー（#F8FAFC）
- **フォント**: Noto Sans JP（日本語）、システムUIフォントにフォールバック
- **レイアウト**: モバイルファーストの1カラム。PCはSTEP1〜3を左650px、生成結果を右側に並べる2カラム。
- **アニメーション**: 生成ボタン押下時にローディングスピナー（200ms程度の擬似遅延でリアル感演出）→ 結果エリアがフェードイン。コピー成功時は「コピーしました✓」のトースト通知。
- **シーンカードのアイコン**: SVGインラインアイコン（メール封筒・お辞儀・ビックリマーク等）で視覚的に選びやすくする
- **全体トーン**: シンプルで迷わない、ツール感の強いプロフェッショナルUI。過剰な装飾なし。スマホで片手操作しやすいボタンサイズ（最低44px）を厳守。