コピーライトフリー文章テンプレ超変換 — TextShift

## 1. アプリの目的・ターゲットユーザー
「敬語が苦手」「LINE感覚のまま仕事メールを送ってしまう」「SNS用に書いたのにブログっぽくなった」——そんな悩みを解決する**文体・トーン一発変換ツール**。ビジネスパーソン、学生、副業フリーランサー、SNS発信者など「文章を書く全員」がターゲット。

入力欄にテキストを貼り付け、変換先のトーン（例:丁寧なビジネスメール / 友達LINEふう / Twitter/X拡散ねらい / 5歳でも分かる説明 / 採用JD風 / 上司への報告 / インスタキャプション / 箇条書き要約）をボタンで選ぶだけで、ルールベースのテキスト変換エンジンが即座に変換テキストを生成する。外部APIキー不要・登録不要・サーバー保存なし。

---

## 2. 主要機能

- **トーン変換 10種類**: ①丁寧ビジネスメール ②カジュアルLINE ③Twitter/X拡散向け(改行・絵文字) ④5歳向けやさしい解説 ⑤採用JD・求人票風 ⑥上司への報告メール ⑦インスタキャプション(ハッシュタグ付き) ⑧箇条書き要約 ⑨プレスリリース・公式発表文 ⑩ポップチラシ・POP文
- **ルールベース変換エンジン**: PHP側で語尾変換(「〜する」→「〜いたします」)、文長自動調整、絵文字付与、ハッシュタグ提案、句読点・改行最適化をトーン別辞書+正規表現で処理
- **Before/After 並列プレビュー**: 左に入力原文、右に変換結果をリアルタイム表示。差分部分をハイライト
- **ワンクリックコピー & SNS共有ボタン**: 変換結果をクリップボードへ即コピー。Twitter/Xへの投稿ボタン付き
- **変換履歴(LocalStorage)**: 直近10件の変換ペアを端末に保存し、再編集できる
- **文字数・読了時間インジケーター**: 変換後のツイート文字数超過警告、メール想定読了秒数を表示

---

## 3. 画面構成

### トップページ (index.php)
- ヘッダー: アプリロゴ + キャッチコピー「どんな文章も、あなたが使いたい言葉に」
- **入力エリア**: placeholder付きtextarea(最大2000文字) + 文字数カウンター
- **変換先トーン選択**: 横スクロールタグボタン10個(スマホは2行グリッド) — アクティブで青ハイライト
- 「変換する」ボタン(大・目立つCTA)
- **Before/After比較エリア**: 2カラムカード — 左=原文(灰)、右=変換結果(白+差分黄ハイライト)
- コピーボタン / Twitter共有ボタン
- **使い方ガイド**: 3ステップアイコン説明(入力→選択→コピー)
- 変換履歴パネル(LocalStorage表示、折りたたみ)
- フッター: 注意書き(サーバー送信なし・個人情報不使用)

---

## 4. データ構造

**DBは使用しない(サーバーレス設計)**

- PHP側: トーン別変換ルール辞書を連想配列で定義
```
$rules = [
'business' => [
'suffix_map' => ['します' => 'いたします', 'ます' => 'ございます', ...],
'add_greeting' => 'お世話になっております。',
'remove_emoji' => true,
'max_sentence_len' => 60
],
'twitter' => [
'add_emoji' => true,
'line_break_per' => 2,
'add_hashtags' => ['#話題', '#シェア希望'],
'max_chars' => 140
],
...
]
```
- フロント: LocalStorageに `{ input, output, tone, timestamp }` の配列(最大10件)を保存
- ajax: input + tone をPHPへPOST → JSON { result, diff_positions, char_count } をレスポンス

---

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

- **モダンミニマル**: 背景白 + アクセントカラーは「Electric Blue(#3B82F6)」と「Soft Lime(#84CC16)」
- フォント: 本文 Noto Sans JP、UIラベル Inter
- トーンボタンはピル型タグ — 未選択はグレーアウト、選択時はグラデーション塗り
- Before/Afterカードは横並び(PC)・縦並び(スマホ)のレスポンシブ
- 変換アニメーション: 右カードが0.3secフェードインで更新されるだけのシンプルさを維持
- SNSで「変換結果スクショを投稿したくなる」よう、結果エリアは余白・フォントサイズが映える構成
- ダークモード対応(CSS変数切り替え)

---

## 補足(SNS拡散・集客戦略)
- 「友達LINEふうに変換した社内報告メール」「5歳向けに変換した専門用語」などのビフォーアフター画像がX/Instagramで自然にバズる仕様
- OGP画像を動的生成(アプリ名+「10秒で文体変換」のコピー)
- 変換結果のTwitter共有ボタンには自動でハッシュタグ `#TextShift` を付与し、UGCを促進