FontCanvas - 手書き風レタリング&文字デザインメーカー

## 1. アプリの目的・ターゲットユーザー
SNS投稿・誕生日カード・ウェルカムボード・店頭POPなどに使いたい「おしゃれな手書き文字デザイン」を、書道や手書きレタリングのスキルなしでブラウザだけで作れる無料ツール。ターゲットはインスタグラマー・ハンドメイド作家・イベント幹事・学校の先生・飲食店スタッフなど、デザイン初心者〜中級者。

## 2. 主要機能
- **レタリングスタイル変換**: 入力した文字（日本語・英語混在対応）を「カリグラフィ」「バブル文字」「ブロック体」「リボン体」「影文字」「グラデーション塗り」「アウトラインのみ」「二重線」など10スタイルにワンクリック変換し、Canvas上にリアルタイム描画する
- **デコレーション素材配置**: 花・星・ハート・月・葉っぱ・リボン・ドット枠・水彩風シミなど60種のSVG素材をドラッグ&ドロップでキャンバスに追加・移動・拡縮・回転できる
- **カラーテーマ一括適用**: 文字色・影色・背景色のセットを「北欧ナチュラル」「ビンテージクラフト」「ポップガーリー」「モノトーン」「和モダン」など15パターンから選んで一括変更できる
- **キャンバスサイズ選択**: Instagramスクエア(1080×1080)・横長バナー(1200×630)・縦長ストーリー(1080×1920)・A4・ポストカードの5プリセットと、幅×高さの自由入力に対応
- **文字配置レイアウト**: 中央・左寄せ・右寄せ・アーチ型・波型・円形の6配置モードで文字列を自動カーブ配置できる（Canvas arc描画）
- **PNG書き出し & ギャラリー公開**: 完成デザインをPNGダウンロード。任意でタイトルとタグを付けて公開ギャラリー（DBに保存）へ投稿し、いいねを受け取れる

## 3. 画面構成
### トップページ (index.php)
- ヘッダー: ロゴ + 「つくる」「ギャラリー」タブ
- ヒーロー: サンプル作品3点スライドショー + 「今すぐ作る」ボタン

### エディタ画面 (editor.php)
- **左パネル（入力・設定）**:
- テキスト入力エリア（最大40文字、行分割対応）
- スタイルセレクター（10種アイコンボタン）
- フォントサイズスライダー（24〜200px）
- カラーテーマ選択（15枚のカラーチップ）+ 個別カラーピッカー（文字色・影・背景）
- 配置モード選択（6種アイコン）
- キャンバスサイズ選択
- **中央エリア**: HTML5 Canvas（リアルタイムプレビュー）
- **右パネル（素材）**:
- カテゴリタブ（花・星・自然・記号・枠）
- 素材サムネイル一覧（クリックでCanvas追加）
- 配置済み素材のレイヤーリスト（選択・削除・重ね順変更）
- **下部ツールバー**: PNG保存ボタン・ギャラリー投稿ボタン・リセットボタン

### ギャラリー画面 (gallery.php)
- 投稿一覧カードグリッド（画像サムネイル・タイトル・いいね数・投稿日）
- タグフィルター横スクロール
- いいねボタン（セッションで重複防止）

## 4. データ構造
### テーブル: gallery_works
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| title | VARCHAR(80) | 作品タイトル |
| tags | VARCHAR(200) | カンマ区切りタグ |
| image_data | MEDIUMTEXT | Base64 PNGデータ |
| likes | INT DEFAULT 0 | いいね数 |
| created_at | DATETIME | 投稿日時 |

### テーブル: gallery_likes
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK | |
| work_id | INT FK | |
| session_hash | VARCHAR(64) | セッションID由来のハッシュ |

## 5. デザインの方向性
- **ベースカラー**: クリーム白(#FFF9F0)と温かいオフホワイト背景で「手作り感」を演出
- **アクセントカラー**: テラコッタ(#D4714E)とセージグリーン(#7A9E7E)でナチュラルなハンドメイド系ブランド感
- **フォント**: UIはNoto Sans JPを使用し、エディタの見出しはやや丸みのあるフォントで親しみやすく
- **レイアウト**: 左パネル固定・右パネル固定・中央Canvasが最大化するスプリットUI。スマホ時はタブ切り替えで左/中央/右を切り替え表示
- **素材SVGの実装**: 60種の素材は埋め込みSVG文字列をJS内に定数配列として保持し、DB・外部CDN不要でCanvas drawImage変換して描画する
- **全体トーン**: CanvaやPinterestに近い「おしゃれで直感的なクリエイティブツール」の雰囲気。アニメーションは最小限に抑え軽量化を優先する