FramePoem - 写真×詩のコラージュカードメーカー

## 1. アプリの目的・ターゲットユーザー
写真（ローカルアップロードまたはプリセット背景）と自作の詩・短文を組み合わせて、詩的なコラージュカードを作成・ダウンロードできる無料ツール。
ターゲット：詩や俳句を楽しむ人、SNS用おしゃれ画像を作りたい人、誕生日・記念日カードを手軽に作りたい人（10代〜60代幅広く）。

## 2. 主要機能
- **背景選択**：ローカル画像アップロード（JPG/PNG）または内蔵プリセット背景（季節別25枚：春の桜・夏の海・秋の紅葉・冬の雪景色・夜空など）
- **テキスト詩レイヤー**：複数テキストブロックをCanvas上に配置。フォント（明朝・ゴシック・手書き風・英字セリフ系など8種）、文字サイズ、色、透明度、行間を調整可能
- **詩型テンプレート**：「俳句（5-7-5）」「短歌（5-7-5-7-7）」「3行詩」「自由詩」の4型を選ぶと入力欄が自動分割され、文字数カウントを表示
- **デコレーション素材**：SVGで描画したシンプルな装飾（花・葉・星・月・罫線・額縁など20種）をCanvas上にドラッグ配置、サイズ・色変更可能
- **フィルター & テクスチャ**：背景画像に6種のCSSフィルター（セピア・モノクロ・ぼかし・ヴィンテージ・クール・ウォーム）と4種の紙テクスチャオーバーレイ（和紙・クラフト紙・羊皮紙・水彩紙）を適用
- **PNG書き出し & 公開ギャラリー**：Canvas.toDataURL()でPNGダウンロード。任意でサーバーの公開ギャラリーに投稿（ニックネーム+詩型タグ付き）し、「いいね」を受け取れる

## 3. 画面構成
### メイン編集画面（1ページ完結）
```
┌─ヘッダー: アプリ名 / 「ギャラリーを見る」ボタン──────────┐
│ ┌─左パネル(280px)──────┐ ┌─Canvasプレビュー─────┐ │
│ │ ① 背景タブ │ │ 正方形 / 横長 / 縦長 │ │
│ │ アップロード/プリセット│ │ (サイズ切替ボタン) │ │
│ │ ② テキストタブ │ │ │ │
│ │ 詩型選択/入力フォーム │ │ ← ドラッグ操作可 │ │
│ │ フォント/サイズ/色 │ │ │ │
│ │ ③ デコタブ │ │ │ │
│ │ 素材一覧(クリックで追加│ └──────────────────────┘ │
│ │ ④ フィルタータブ │ ┌─ツールバー(Canvas下)─┐ │
│ │ フィルター/テクスチャ │ │削除/前面/背面/全消去 │ │
│ └────────────────────┘ └───────────────────────┘ │
│ [PNGダウンロード] [ギャラリーに投稿] │
└────────────────────────────────────────────────────────┘
```
### 公開ギャラリーページ
- カードサムネイルのマソンリーグリッド表示
- 詩型タグ・新着/いいね順のフィルター
- 各カードにいいねボタン（PHP+MySQLで集計）

## 4. データ構造
### テーブル: `frampoem_cards`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| nickname | VARCHAR(50) | 投稿者ニックネーム |
| poem_type | ENUM('haiku','tanka','3line','free') | 詩型 |
| poem_text | TEXT | 詩の本文（改行区切り） |
| image_data | MEDIUMBLOB | PNG画像バイナリ（最大500KB） |
| likes | INT DEFAULT 0 | いいね数 |
| created_at | DATETIME | 投稿日時 |

### テーブル: `frampoem_likes`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO_INCREMENT | |
| card_id | INT FK | |
| voter_hash | VARCHAR(64) | IPハッシュ（重複いいね防止） |
| created_at | DATETIME | |

※ 編集状態はLocalStorageに自動保存し、閉じても復帰可能

## 5. デザインの方向性
- **全体トーン**：文学・詩集を連想させる落ち着いたエレガントなデザイン。背景は生成りのオフホワイト（#F7F3EE）、アクセントに深みのある紫紺（#3D3580）
- **フォント**：UIに Noto Serif JP を採用し、和の情緒を演出
- **左パネル**：タブ切替式でモバイルではボトムシート表示に変化（レスポンシブ）
- **Canvas**：実寸プレビューを中央大きく表示し「作っている感」を重視
- **ギャラリー**：Pinterest風のマソンリーグリッド、カード上にhoverでいいね数表示
- **アニメーション**：素材追加時のポップイン、ダウンロード時の短いシャッターエフェクト（CSS）
- **実装規模感**：編集画面 1HTML + gallery.php + api.php（投稿/いいね）+ style.css + editor.js の計5〜6ファイル構成で完結