IconForge - SVGアイコン&ステッカーメーカー

## 1. アプリの目的・ターゲットユーザー
デザインソフト不要で、ブラウザ上でオリジナルのSVGアイコン・ステッカー・バッジを直感的に作成・ダウンロードできる無料ツール。ターゲットはWebデザイナー・エンジニア・ブロガー・SNS運用担当者・個人クリエイターなど「手軽にアイコンを量産したい」すべてのユーザー。外部ライブラリへの依存なし、登録不要で即使用開始できる。

## 2. 主要機能
- **シェイプパレット**: 円・角丸四角・六角形・星・吹き出し・リボン・シールド・矢印など30種のベース形状をワンクリック配置
- **テキスト重ね**: フォント(ゴシック/明朝/等幅/丸ゴシック/英字セリフ/英字サンセリフ)・サイズ・色・太字・斜体・縦書き/横書き切り替え
- **スタイルカスタマイズ**: 塗り色(単色/グラデーション2点)・枠線(色・太さ・破線)・角丸半径・影・不透明度をスライダー/カラーピッカーで即調整
- **プリセットテンプレート**: 「NEW・SALE・OPEN・限定・推し活・GitHub向け」など用途別20テンプレートを収録、選ぶだけで即完成
- **多形式ダウンロード**: SVG / PNG(1x・2x・3x) / WebPの3形式でエクスポート。サイズは16/32/64/128/256/512pxから選択
- **公開ギャラリー & コピー**: 作ったアイコンをギャラリーに投稿(ニックネームのみ)して共有。他ユーザーの作品をコピーして自分のキャンバスに読み込む機能

## 3. 画面構成
### メイン編集画面 (1画面完結・左右分割レイアウト)
- **左パネル**: タブ切替式 [シェイプ / テキスト / スタイル / テンプレート]
- シェイプタブ: 30種アイコンボタン、クリックでキャンバス中央に配置
- テキストタブ: テキスト入力フォーム、フォント・サイズ・色・配置設定
- スタイルタブ: 選択オブジェクトの塗り・枠・影・透明度パネル
- テンプレートタブ: カテゴリ別サムネイル一覧(SNS用/ECサイト用/ブログ用など)
- **中央キャンバス**: SVG描画エリア(正方形・白/透過切替)。オブジェクトをドラッグ移動・クリック選択。選択時にハンドルで拡縮・回転
- **右パネル**: レイヤー一覧(重ね順の上下変更)、削除ボタン、アンドゥ/リドゥ
- **ヘッダー**: アイコンサイズ選択(プルダウン)・背景透過ON/OFF・ダウンロードボタン・ギャラリー投稿ボタン

### ギャラリーページ
- カード形式でSVGサムネイルを一覧表示(新着順/人気順タブ)
- カテゴリフィルター(SNS/EC/ブログ/バッジ/その他)
- 各カードに「このデザインを使う」ボタン → 編集画面へデータを渡す
- いいねカウント(IPベースで1日1回)

## 4. データ構造
### DBテーブル (MySQL)
**gallery** テーブル
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| nickname | VARCHAR(32) | 投稿者名 |
| svg_data | MEDIUMTEXT | SVGソース文字列 |
| thumbnail | LONGTEXT | base64 PNG サムネイル(128px) |
| category | VARCHAR(20) | SNS/EC/blog/badge/other |
| likes | INT DEFAULT 0 | いいね数 |
| created_at | DATETIME | |

**gallery_likes** テーブル (重複いいね防止)
| カラム | 型 |
|---|---|
| id | INT PK |
| gallery_id | INT |
| ip_hash | VARCHAR(64) |
| liked_date | DATE |

※ 編集データ(シェイプ/テキスト構成のJSON)はlocalStorageにも保存し、ブラウザリロードで復元できる。

## 5. デザインの方向性
- **配色**: ダークネイビー背景(#0f172a)＋アクセントカラーに鮮やかなインディゴ(#6366f1)とアンバー(#f59e0b)。クリエイティブツールらしいプロフェッショナル感
- **フォント**: UIにInter/Noto Sans JP。シンプルでフラットなアイコンUI
- **キャンバス**: 白または市松模様(透過確認用)の清潔感あるワークスペース
- **レスポンシブ**: PCはサイドパネル固定の横並びレイアウト。スマホはボトムシートにパネルを収納し、キャンバスを最大化
- **アニメーション**: オブジェクト追加時にポップインエフェクト、ダウンロード完了時に軽いフラッシュのみ。動作を重くしない最小限の演出