読める！書ける！漢字難読チェッカー KanjiSnap

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

貼り付けたテキスト中の「難読漢字・読み間違えやすい漢字語」を瞬時に検出し、正しい読み・意味・用例をポップアップで表示する無料ブラウザツール。
- ブログ・記事・プレスリリース・メール・企画書を書くライター・ビジネスパーソン
- 「この漢字の読み方、あってる？」が気になる一般ユーザー（SNS拡散層）
- 就活・試験・資格勉強前に語彙を確認したい学生

SNS共有導線を強化し「難読漢字ランキング今日の難問」コーナーで毎日再訪を促す。

---

## 2. 主要機能

- **テキスト貼り付け解析**: 入力エリアにテキストをペーストするだけで、内蔵辞書（約800語）と照合し、難読・誤読多発漢字語をハイライト表示
- **ポップアップ詳細カード**: ハイライト語をタップ/ホバーすると「読み方・意味・よくある誤読・用例文」を表示
- **難読スコア表示**: テキスト全体の「難読レベルスコア（0〜100）」と難読語一覧リストをまとめて表示
- **今日の難読漢字クイズ**: デイリー更新（日付シードで疑似ランダム）で3問出題、4択形式、正解率をLocalStorageに蓄積
- **SNS共有カード生成**: 「今日の難読スコアXX点」「この漢字読める？」形式の画像カードをCanvas生成してPNG保存・シェア
- **よく間違える語TOP10ランキング**: PHPでアクセス集計し「今週の難問ランキング」を公開表示（ユーザー参加型）

---

## 3. 画面構成

### トップページ (index.php)
- ヘッダー: ロゴ「KanjiSnap」＋ナビ（ツール / 今日のクイズ / ランキング）
- メインカラム左: テキスト入力エリア（最大3,000文字、プレースホルダーにサンプル文）＋「解析する」ボタン
- メインカラム右: 解析結果パネル（難読スコア大表示、ハイライト済みテキスト、難読語一覧リスト）
- ハイライト語クリック→モーダルカード（読み / 意味 / よくある誤読 / 用例）
- SNS共有ボタン（X / LINE）＋PNG保存ボタン

### 今日の難読漢字クイズページ (quiz.php)
- 日付表示 + デイリー3問の4択クイズUI
- 正解/不正解アニメーション、全問後にスコアカード表示
- 「結果をシェア」ボタン（共有カード自動生成）

### ランキングページ (ranking.php)
- 今週・今月の「最多アクセス難読語TOP10」テーブル
- 各語に読み・意味サマリー

---

## 4. データ構造

### DBテーブル (MySQL)

**kanjis（内蔵辞書）**
```
id INT PK AUTO_INCREMENT
word VARCHAR(50) -- 難読語（例: 砂利）
reading VARCHAR(100) -- 読み（例: じゃり）
bad_reading VARCHAR(100) -- よくある誤読（例: すなり）
meaning TEXT -- 意味
example TEXT -- 用例文
difficulty TINYINT -- 難易度 1〜3
created_at TIMESTAMP
```

**access_log（集計用）**
```
id INT PK AUTO_INCREMENT
word_id INT FK
accessed_at DATE
count INT DEFAULT 1
```
（日次でUPSERT集計、ランキング表示に使用）

**LocalStorage（クライアント）**
- `ksnap_quiz_YYYY-MM-DD`: 当日クイズの回答状況
- `ksnap_total_score`: 累計クイズ正解数

---

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

- **カラー**: 深墨（#1a1a2e）背景 ＋ 朱赤（#e94560）アクセント ＋ 白・薄灰テキスト。和モダン×モノクロームで品のある印象
- **フォント**: 見出しに游明朝系（Google Fonts: Noto Serif JP）、本文は Noto Sans JP
- **ハイライト**: 難読語を朱赤下線＋薄黄背景でマーク。難易度に応じて色の濃さを変化（難易度3は太赤下線）
- **モーダルカード**: 白カード＋ドロップシャドウ、単語を大きく中央表示、読みをルビスタイルで上部に小表示
- **クイズUI**: ミニマルな4択ボタン、正解時に花吹雪アニメ（CSS）、不正解時に赤フラッシュ
- **スマホ対応**: 1カラムレイアウトに自動切替、入力エリアはfont-size:16px以上でiOSズーム防止
- **スコアカード（SNS共有用）**: Canvas 640×480px、朱赤グラデ背景に「KanjiSnap」ロゴ・スコア・難読語ワースト3を白文字で描画