チラシ・POP自動デザインメーカー FlyerCraft

## 1. アプリの目的・ターゲットユーザー
個人商店・飲食店・地域イベント主催者・PTA・サークルなど、デザインスキルや有料ソフトを持たない人が、ブラウザ上でチラシ・POP・告知ポスターを素早く作れる無料ツール。印刷用PNG出力とSNS投稿向けサイズ切り替えに対応。

## 2. 主要機能
- **テンプレート選択**: 「セール告知」「イベント開催」「求人募集」「メニュー表」「お知らせ」「季節挨拶」など20種類以上のプリセットテンプレートをカテゴリ別に一覧表示。サムネイルクリックで即ロード。
- **リアルタイムビジュアルエディタ**: Canvas(HTML5)上でテキストブロック・画像エリア・図形(四角・丸・矢印)を配置。ドラッグ移動・リサイズ・回転に対応。
- **テキスト装飾**: フォント(ゴシック/明朝/丸ゴシック/手書き風など8種)・サイズ・太字・色・背景色・縁取り・行間を個別設定可能。
- **カラーテーマ**: ワンクリックで全体の配色を切り替えられるプリセットカラーテーマ10種(ポップ・シック・和風・ナチュラル等)。
- **サイズプリセット切替**: A4縦・A4横・正方形(SNS用1080×1080)・横長バナー(1200×630)の4サイズを選択可能。切り替え時にレイアウトを自動リスケール。
- **PNG書き出し**: Canvas内容をPNG画像としてダウンロード。解像度は標準(96dpi)と印刷向け高解像度(300dpi相当の3倍スケール)を選択可能。

## 3. 画面構成
### トップページ
- ヒーローバナー(「無料でプロ級チラシを作ろう」コピー)
- カテゴリタブ付きテンプレートギャラリー(2〜3列グリッド)
- 「白紙から作る」ボタン

### エディタページ (/editor.php?template=XXX)
- **左サイドバー**: 要素追加パネル(テキスト追加ボタン・図形追加ボタン・背景色選択・カラーテーマ選択・サイズプリセット切替)
- **中央**: Canvas編集エリア(選択中要素はハンドル表示)
- **右サイドバー**: 選択要素のプロパティパネル(テキスト内容・フォント・色・サイズ・不透明度・レイヤー順序の上下移動)
- **上部ツールバー**: 元に戻す/やり直し・全削除・PNG書き出し(標準/高解像度)ボタン
- スマホでは左右サイドバーを下部タブ切替式に変換

### ギャラリーページ (/gallery.php)
- ユーザーが「公開保存」したチラシを一覧表示(任意機能・モデレーションなし・閲覧のみ)

## 4. データ構造
### テンプレートはJSONファイルで管理 (DB不要のコア機能)
```
/templates/
sale.json # テンプレート定義
event.json
...(20種)
```
各JSONの構造:
```json
{
"id": "sale",
"name": "セール告知",
"category": "店舗",
"size": "A4",
"theme": "pop",
"elements": [
{"type":"rect", "x":0,"y":0,"w":794,"h":1123,"fill":"#FF4444"},
{"type":"text", "x":100,"y":200,"text":"大セール開催!","font":"gothic","size":72,"color":"#FFFFFF","bold":true}
]
}
```

### ギャラリー公開保存 (任意)
**テーブル: shared_designs**
| カラム | 型 | 説明 |
|---|---|---|
| id | INT PK AUTO | |
| share_token | VARCHAR(16) | URLトークン |
| canvas_json | MEDIUMTEXT | 全要素のJSON |
| size_preset | VARCHAR(20) | |
| thumbnail_b64 | MEDIUMTEXT | Canvas.toDataURL縮小版 |
| created_at | DATETIME | |

## 5. デザインの方向性
- UIカラー: 白ベース・アクセントカラーはコーラルレッド(#FF5A5F)と明るいイエロー(#FFD166)
- フォント: UIはNoto Sans JP
- カード型テンプレートギャラリーはホバーで「このテンプレートを使う」ボタンが浮かび上がるアニメーション
- エディタはCanvasエリアを最大化し、サイドバーはコンパクトに。初心者が操作に迷わないようアイコン+ラベル併記
- テンプレートのビジュアルは日本人に親しみやすいポップ〜ビジネス寄りのデザインを揃える
- 全体的に「誰でも5分で完成できる」感を演出するシンプルUX