CopySnap — 秒速コピーライティング変換ツール

## 1. アプリの目的・ターゲットユーザー
普通の文章や商品説明を、目的別の「刺さるコピー」へワンクリックで変換する無料ブラウザツール。SNS投稿・LP・求人票・メルマガ・チラシなど用途に合わせた文体に自動整形する。

**ターゲット:** 個人事業主・スタートアップ・ECショップ運営者・副業ライター・学生（ゼミ発表や就活エントリーシートにも）。「コピーライティングの知識がなくても結果が出る」を価値訴求にする。

---

## 2. 主要機能

- **変換モード12種（内製ルールベース）**
- SNS煽りコピー / BENEFITファースト / 損失回避型 / ストーリー起承転結 / 箇条書き整理 / 問いかけ型 / 権威・数字強調 / 共感ファースト / 緊急性訴求 / ターゲット絞り込み型 / SEO風キーワード密度強調 / 子ども向けやさしい文体
- 各モードは固定テンプレート＋置換ルール＋文末パターンで構成（PHP側で処理）

- **ターゲット年代・トーン設定**
- 年代（10代 / 20〜30代 / 40〜50代 / シニア）とトーン（カジュアル / ビジネス / 親しみ / ラグジュアリー）を組み合わせて変換結果を微調整

- **ビフォー／アフター並列表示**
- 入力テキストと変換結果を左右または上下で並べてリアルタイム比較。コピーボタン付き

- **お気に入り保存（LocalStorage）**
- 気に入った変換結果を最大30件ブラウザ内に保存。後から一覧で見直しコピーできる

- **SNS文字数カウンター連動**
- X（140字）/ Instagram（2200字）/ Facebook / LINEの上限をバッジ表示し、超過時に赤くアラート

- **ギャラリー共有（PHP + MySQL）**
- ユーザーが「これは良い変換だった」と思ったペアを匿名で公開ギャラリーに投稿。いいね数でランキング。他ユーザーの例を見てインスピレーションを得る

---

## 3. 画面構成

### トップページ（/ または index.php）
- **ヘッダー:** ロゴ「CopySnap」+ ナビ（使い方・ギャラリー）
- **メインエリア（2カラム）:**
- 左列: テキストエリア（入力）＋ターゲット年代セレクト＋トーンセレクト
- 右列: 変換モード12個のカードボタン（アイコン付き）＋変換結果テキストエリア＋コピーボタン＋お気に入り追加ボタン
- **文字数カウンターバー:** SNS別の残り文字数をバッジで常時表示
- **ビフォー/アフター比較ボタン:** 縦並びポップアップモーダルで確認

### 使い方ページ（/howto）
- 12種モードの解説カード（どんな場面に使うか・変換例）
- よくある質問（FAQ）アコーディオン

### ギャラリーページ（/gallery.php）
- 投稿一覧カード（元テキスト→変換後テキスト・モード名・いいね数）
- ソート: 新着 / いいね数順 / モード別フィルター
- 匿名投稿フォーム（入力テキスト・変換テキスト・モード・一言コメント）

### お気に入りページ（LocalStorage, /favorites 相当のJS）
- 保存した変換ペアの一覧カード＋削除ボタン＋全コピーボタン

---

## 4. データ構造

### DBテーブル（MySQL）

**gallery_posts（ギャラリー投稿）**
```
id INT PRIMARY KEY AUTO_INCREMENT
original TEXT NOT NULL -- 元テキスト
converted TEXT NOT NULL -- 変換後テキスト
mode_key VARCHAR(40) NOT NULL -- 変換モード識別子
comment VARCHAR(200) -- 投稿者コメント（任意）
likes INT DEFAULT 0
ip_hash VARCHAR(64) -- スパム防止用IPハッシュ
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
```

**gallery_likes（いいね重複防止）**
```
id INT PRIMARY KEY AUTO_INCREMENT
post_id INT NOT NULL
ip_hash VARCHAR(64)
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
UNIQUE(post_id, ip_hash)
```

### LocalStorage（お気に入り）
```json
[
{
"id": "uuid",
"original": "元テキスト",
"converted": "変換後テキスト",
"mode": "sns_hype",
"savedAt": "2025-06-01T12:00:00"
}
]
```

---

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

- **カラー:** 深みのあるインディゴ（#3B3F8C）をベースに明るいイエロー（#F5C518）のアクセント。「変換」のトリガー感・速度感を表現
- **フォント:** 見出しはやや太め丸ゴシック系、本文は読みやすいサンセリフ
- **変換モードカード:** アイコン（emoji可）＋モード名＋一言説明の3行構成。選択中はイエローのアウトライン強調
- **アニメーション:** 変換ボタン押下時に0.3秒のスピン＋フェードイン（CSS transitionのみ、JSライブラリ不要）
- **モバイル優先:** 1カラムスタック。変換モードは横スクロールのタブレット形式に切り替え
- **全体トーン:** プロフェッショナルだが堅苦しくない。「あのツール便利すぎてSNSで紹介したくなる」ポップさを意識
- **OGP画像:** 「普通の文→刺さるコピーに秒速変換🚀」のキャッチコピーをOGPに設定し、SNSシェア時に拡散されやすくする