HashSnap — ハッシュタグ一括生成＆分析ツール

## 1. アプリの目的・ターゲットユーザー
Instagram・X(旧Twitter)・TikTok・YouTube・Threadsなどに投稿する際、「どんなハッシュタグを付ければ伸びるか」を瞬時に解決するブラウザ完結型の無料ツール。投稿文やキーワードを入力するだけで最適なハッシュタグセットを自動生成し、コピーまで1クリックで完了する。ターゲットは個人インフルエンサー・副業系クリエイター・中小企業SNS担当者・フリーランスカメラマンなど、SNS運用に関わるすべての人。「毎回ハッシュタグを考えるのが面倒」「なんとなく付けているが伸びない」という悩みを解消する。SNSでシェアしたくなる診断カード出力機能を設け、拡散を狙う。

## 2. 主要機能
- **ハッシュタグ自動生成**: キーワード（最大5個）またはフリーテキストを入力し、関連ハッシュタグを最大30個生成。内製の連想辞書DB（カテゴリ×キーワード×関連タグ約5,000エントリ）をもとにサーバーサイド（PHP）で算出するため外部APIキー不要。
- **SNSプラットフォーム別出力**: Instagram（推奨30個・スペース区切り）、X（推奨3〜5個・#付き文章末尾形式）、TikTok（推奨10個）、YouTube（推奨15個）の4形式をタブで切り替え、ワンクリックコピー。
- **人気度スコア表示**: 各タグに「超人気🔥 / 中規模✨ / ニッチ🌱」の3段階バッジを表示。内製スコアテーブル（ハッシュタグ毎の想定投稿数レンジ）を参照。超人気タグと中規模・ニッチタグを適切にミックスした「バランスセット」を自動提案する。
- **ハッシュタグ除外・固定機能**: 生成されたタグを個別にクリックして除外、または「固定」ピン留めして再生成時も維持できる。
- **SNS共有カード生成**: 生成したハッシュタグセットを「#〇〇系クリエイター向けタグセット」としてPNG画像化し、そのままインスタのストーリーやXに貼れる見栄えの良いカードとして保存できる（Canvas描画）。
- **よく使うセット保存**: LocalStorageにお気に入りのタグセットをラベル付きで最大20件保存し、次回以降ワンクリック呼び出し。

## 3. 画面構成
### トップページ（単一ページ構成）
- **ヘッダー**: ロゴ「HashSnap」＋キャッチコピー「ハッシュタグ、もう悩まない」
- **入力エリア**: キーワード入力フィールド（タグ型チップUI）またはフリーテキスト貼付エリア、SNSプラットフォーム選択ラジオボタン4種、カテゴリ絞り込みドロップダウン（美容・グルメ・旅行・ビジネス・ライフスタイル・スポーツ・アート・テクノロジー など20カテゴリ）、「生成する」ボタン。
- **結果エリア**: プラットフォーム別タブ、タグ一覧（バッジ付き・クリックで除外/固定トグル）、バランスセット推奨テキストボックス（コピーボタン付き）、「このセットを保存」ボタン、「SNSカードを作成」ボタン。
- **SNSカードモーダル**: Canvas描画のプレビュー（テーマカラー選択3種）＋PNGダウンロードボタン。
- **保存済みセット一覧**: ページ下部にアコーディオンで表示。ラベル・タグ数・プラットフォーム・作成日表示、コピー・削除ボタン。
- **フッター**: 使い方ガイド（3ステップ図解）、注意事項（ハッシュタグ効果の保証はしない旨）

## 4. データ構造
### DBテーブル（MySQL）
#### `hashtag_master`（ハッシュタグマスタ）
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| tag | VARCHAR(100) | ハッシュタグ本文（#なし） |
| category | VARCHAR(50) | 大カテゴリ（美容・グルメ等） |
| sub_category | VARCHAR(50) | サブカテゴリ |
| popularity_level | TINYINT | 1=超人気 2=中規模 3=ニッチ |
| platform_flags | VARCHAR(20) | 対応プラットフォームフラグ（ig/x/tt/yt） |
| created_at | DATETIME | |

#### `hashtag_relations`（関連タグリレーション）
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| tag_id | INT FK | 親タグ |
| related_tag_id | INT FK | 関連タグ |
| weight | FLOAT | 関連度スコア（0.0〜1.0） |

#### `hashtag_keywords`（キーワード→タグ変換辞書）
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| keyword | VARCHAR(100) | 検索キーワード（日本語・英語） |
| tag_id | INT FK | 対応するタグ |
| match_score | FLOAT | マッチスコア |

※ 保存済みセットはLocalStorageのみで完結しDBへの書き込みなし。アクセスログ・統計はPHPセッションログで集計のみ（個人情報なし）。

## 5. デザインの方向性
- **カラーパレット**: グラデーション主体のモダンSNSデザイン。背景は深めのネイビー〜パープル（#0F0C29→#302B63）、アクセントはInstagramグラデ風のコーラル×ゴールド。
- **フォント**: 見出しはRounded（丸ゴシック系Webフォント）、本文はシステムフォント。
- **タグUI**: タグはピル型チップ。超人気=コーラル、中規模=ゴールド、ニッチ=ミント色のバッジを左端に表示。
- **SNSカード**: 縦長1080×1350px相当のCanvas描画。3テーマ（グラデ/ミニマル白/ダーク黒）から選択。タグ一覧＋カテゴリラベル＋HashSnapロゴ入り。
- **スマホ最適化**: 入力→結果を縦スクロールで完結。コピーボタンは固定フッター追従ボタンとしてスマホ親指操作を優先。
- **マイクロアニメーション**: 生成ボタン押下後のローディングスピナー、タグチップのクリック時のフリップ除外演出（CSS transform）で軽快さを演出。