TokenCount Pro — AIプロンプト・文章のトークン数リアルタイムカウンター＆コスト試算ツール

## 1. アプリの目的・ターゲットユーザー
ChatGPT・Claude・Geminiなどの生成AIを業務利用するエンジニア・ライター・マーケター・学生が「このテキスト、何トークン？いくらかかる？」を即座に把握できる無料ブラウザツール。APIコストの見積もり、プロンプト最適化、SNSや記事の文字制限確認など幅広いシーンで使われることを想定。外部API不要・サーバー送信ゼロで完結するため安心して機密文章も貼り付けられる点を前面に打ち出し、SNSで「これ便利すぎ」と拡散される設計にする。

## 2. 主要機能
- **リアルタイム多指標カウント**: テキストエリアに貼り付けた瞬間に、文字数・空白除外文字数・単語数・行数・バイト数(UTF-8)・推定トークン数(GPT-4o/Claude 3.5/Gemini 1.5 Pro の3モデル別)を同時表示する。トークン推定はBPE近似アルゴリズム（日本語は文字単位換算係数を適用）をJS実装で再現し、外部API不要。
- **AIモデル別コスト試算**: 主要12モデル（GPT-4o / GPT-4o-mini / GPT-3.5-turbo / Claude 3.5 Sonnet / Claude 3 Haiku / Gemini 1.5 Pro / Gemini Flash など）の公開料金テーブルを内蔵し、Inputトークン単価 × 推定トークン数 = 試算コスト（USD / JPY換算）を即表示。バッチ処理「同じプロンプトを何回送るか」スライダーで月次コストも試算できる。
- **プロンプト最適化ヒント**: トークン数が設定した閾値を超えると「短縮のヒント」（重複表現の指摘、箇条書き化の提案など）をローカルルールベースで自動提示。削除候補の冗長パターン（接続詞の重複、空白行など）をハイライト表示。
- **比較モード（A/Bペイン）**: 左右2ペインで2つのプロンプトを同時入力し、トークン差・コスト差・文字数差をリアルタイム比較。「最適化前 vs 後」の効果確認に最適。
- **スニペット保存 & 共有**: よく使うプロンプトをLocalStorageに最大30件保存し、ワンクリックで呼び出せる。保存せずに現在の入力文とカウント結果をURLエンコードしてショートURL相当のパラメータで共有可能（PHP側でデコードして表示するだけ、DB不要オプション）。
- **SNS共有カード生成**: 「このプロンプトは○○トークン！GPT-4oで1回あたり約○円」の結果をOGP風PNGカードとしてCanvas描画しダウンロード + Twitter/X・LINEへの共有ボタン付き。これがSNS拡散の起点になる。

## 3. 画面構成
### メイン画面（1ページ構成・スクロール対応）
- **ヘッダー**: ロゴ「TokenCount Pro」、モデル選択タブ（シングル / 比較モード切替）、ダークモードトグル
- **入力エリア（シングルモード）**: 大きなテキストエリア（高さ可変リサイズ可）、右上に「クリア」「サンプルを試す」ボタン
- **ライブカウンターパネル（入力エリア直下）**:
- 大きな数字で「推定トークン数」をメインに表示
- サブ指標グリッド: 文字数 / 単語数 / バイト数 / 行数
- モデル切替タブ（12モデル）でトークン数が瞬時に切り替わるアニメーション
- **コスト試算カード**: Input料金 / Output料金（任意入力）/ 1回あたりUSD・JPY / バッチ回数スライダー / 月次コスト
- **最適化ヒントエリア**: 警告バッジ付きリスト（閾値超過時のみ展開）、短縮提案のハイライトトグル
- **比較モード（AペインBペイン）**: 上記カウンターパネルが2列並び、差分バッジを中央に表示
- **スニペット引き出し（サイドドロワーまたは下部アコーディオン）**: 保存一覧・ロードボタン
- **SNS共有カード生成セクション**: Canvas プレビュー、テンプレート3種（シンプル / カラフル / ダーク）、DL・共有ボタン
- **フッター**: モデル料金の参照元・更新日表示、免責事項（推定値である旨）

## 4. データ構造
DB不要。すべてLocalStorageとJSオブジェクトで完結。

```js
// モデル料金テーブル（JS定数）
const MODELS = [
{ id: 'gpt-4o', name: 'GPT-4o', inputUsdPer1k: 0.005, outputUsdPer1k: 0.015, jpFactor: 1.8 },
{ id: 'gpt-4o-mini', name: 'GPT-4o mini', inputUsdPer1k: 0.00015, outputUsdPer1k: 0.0006, jpFactor: 1.8 },
// ...12モデル分
];

// LocalStorage スニペット構造
{
"snippets": [
{ "id": "uuid", "title": "商品説明プロンプト", "text": "...", "savedAt": "2025-01-01T00:00:00Z" }
]
}
```

PHPファイルは1つ（index.php）のみ。URLパラメータ `?t=URLエンコードテキスト` でテキストを受け取り初期値として埋め込む用途のみに使用。

## 5. デザインの方向性
- **カラースキーム**: ダークモードをデフォルト。ベース #0f0f0f、サーフェス #1a1a2e、アクセント #7c3aed（パープル）、成功 #10b981、警告 #f59e0b。ライトモードはベース #f8fafc、アクセント同色。
- **タイポグラフィ**: 数字部分にJetBrains Mono（コーダー感）、本文は Noto Sans JP。トークン数の大きな数字はアニメーションカウントアップで変化を視覚的に演出。
- **UIテイスト**: VSCode / Linear 風のミニマルダッシュボード。角丸小さめ、ボーダー細め、情報密度高め。カード間に微細なglowエフェクト。
- **スマホ対応**: テキストエリアは全幅、カウンターパネルは2×2グリッド→スマホで1×4縦積みに変化。比較モードはスマホでは上下2段レイアウト。
- **マイクロインタラクション**: トークン数変化時にドラムロール的な数字アニメーション（300ms）。コスト試算のスライダー操作でリアルタイム更新。共有カード生成時に紙吹雪演出。
- **規模感**: HTML1枚 + CSS1枚 + JS1枚（計3ファイル） + index.phpの計4ファイル構成。1日で実装完了できる現実的なスコープ。