PasteFlow — 定型文・テンプレート文章の穴埋め一発送信メーカー

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

「同じような文章を毎回手直しして送るのが面倒」という課題を解決する、穴埋め型テンプレート文章管理ツール。営業メール、お礼状、クレーム対応文、請求催促、SNS定型返信、議事録冒頭文など、繰り返し使う文章を「変数ブロック」付きで登録しておき、使うときに穴埋めフォームへ入力するだけで完成文をワンクリックコピーできる。

**ターゲット：** 営業担当者、カスタマーサポート担当、フリーランサー、個人事業主、学生・受験生（願書・志望動機の使い回し）

---

## 2. 主要機能

- **テンプレート登録・管理** — タイトル、本文、カテゴリ（営業／お礼／クレーム対応／SNS／その他）、タグを入力して保存。本文中の `{{変数名}}` 記法で穴埋め箇所を定義（例: `{{宛名}}` `{{商品名}}` `{{日付}}`）
- **穴埋めフォーム自動生成** — テンプレートを選択すると `{{変数名}}` を自動解析してフォームフィールドを展開。フィールドへ入力するとプレビューがリアルタイム更新される
- **ワンクリックコピー & 完成文プレビュー** — 「コピー」ボタンで完成文をクリップボードへ即コピー。「クリア」で入力値をリセットして再利用できる
- **公開プリセット30件** — ビジネスメール、お礼状、催促メール、SNS返信テンプレートなど30種を初期収録。使い方を見ながら即試用できる
- **共有URL発行** — 特定テンプレートを公開URLで共有可能。チームや部署でフォーマットを統一するのに使える（PHP + MySQL でテンプレートID をURLパラメータとして発行）
- **使用回数カウント** — テンプレートごとに使用回数を記録し、「よく使う順」でソートできる

---

## 3. 画面構成

### トップ / テンプレート一覧画面
- ヘッダー：アプリロゴ「PasteFlow」、カテゴリ絞り込みタブ（全て／営業／お礼／クレーム対応／SNS／その他）、検索ボックス（タイトル・タグ全文検索）
- テンプレートカード一覧（グリッド or リスト切替）：タイトル、カテゴリバッジ、変数名の一覧プレビュー、使用回数、「使う」ボタン、「編集」ボタン
- 右下に「＋新規テンプレート作成」FAB

### テンプレート作成・編集モーダル
- タイトル入力、カテゴリ選択（セレクト）、タグ（カンマ区切り）
- 本文テキストエリア（`{{変数名}}` の入力ガイドをツールチップで表示）
- リアルタイムで検出された変数名一覧を下部にバッジ表示
- 「保存」「キャンセル」「削除」ボタン

### 穴埋め使用画面（モーダルまたは全幅パネル）
- 左カラム：変数名ごとの入力フィールド（ラベルは変数名、任意でプレースホルダーも設定可）
- 右カラム：完成文プレビュー（変数部分はハイライト表示 → 入力完了後に通常テキストへ）
- 「コピー」ボタン（大きく目立つ）、「クリア」ボタン、「共有URLをコピー」ボタン
- スマホでは上下2段レイアウトに自動切替

### プリセット一覧ページ
- 初期収録30テンプレートをカテゴリ別に表示
- 各プリセットに「自分のライブラリへコピーして編集」ボタン

---

## 4. データ構造

### `templates` テーブル
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | テンプレートID |
| share_token | VARCHAR(32) UNIQUE | 共有URL用ランダムトークン |
| title | VARCHAR(120) | テンプレートタイトル |
| category | VARCHAR(30) | カテゴリ |
| tags | VARCHAR(200) | カンマ区切りタグ |
| body | TEXT | 本文（`{{変数名}}`含む） |
| use_count | INT DEFAULT 0 | 使用回数 |
| is_preset | TINYINT(1) DEFAULT 0 | 公式プリセットフラグ |
| created_at | DATETIME | 作成日時 |
| updated_at | DATETIME | 更新日時 |

※ユーザー認証は不要（登録不要で即利用）。ブラウザのLocalStorageに「自分が作成したテンプレートIDリスト」をキャッシュして、マイライブラリとして表示する設計。共有URLアクセス時はDBから直接テンプレートを取得してプリセット同様に表示。

---

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

- **カラー：** メインをインクブルー（#1A56DB）、アクセントをサンドオレンジ（#F59E0B）、背景は生成り白（#FAFAF7）。テキストカラーはチャコール（#1F2937）
- **雰囲気：** 「実務で毎日使えるプロツール」感。派手なアニメーションは避けシャドウと角丸でスマートにまとめる
- **フォント：** 日本語はNotesans JP（Google Fonts）、英数字はInter
- **変数ハイライト：** テンプレート本文中の `{{変数}}` 部分をオレンジ背景の角丸バッジで視覚的に強調
- **コピー完了演出：** 「コピー」ボタン押下後にチェックマーク＋「コピーしました！」へ0.8秒切り替わってから元に戻る
- **スマホ対応：** 穴埋めフォームはスマホでも快適に使えるよう大きなタップ領域を確保