RibbonType - 手書き風カリグラフィーバナーメーカー

## 1. アプリの目的・ターゲットユーザー
SNSのヘッダー画像・誕生日カード・結婚式のウェルカムボード・店頭POPなどに使える「リボン型・フラッグ型・アーチ型のバナー文字装飾」をブラウザだけで作れる無料デザインツール。デザインソフトを持たない一般ユーザー（主婦・学生・個人店オーナー・SNS運用担当）が5分以内に完成品を書き出せることをゴールとする。既存のチラシメーカー(FlyerCraft)やタイポグラフィポスターメーカー(LetterArt Studio)と異なり、「リボン・バナー・ラベル型の枠装飾そのものを主役にした文字レイアウト特化ツール」という切り口。

## 2. 主要機能
- **バナーシェイプ選択**: リボン(左右ひだあり)・スクロール(巻物風)・アーチ・フラッグ(三角旗連なり)・ラベル楕円・ローゼット(丸型勲章風)の6種のSVGシェイプをワンクリック切り替え
- **テキスト装飾**: メインテキスト(最大30文字)・サブテキスト(最大20文字)を入力し、カリグラフィ風フォント(Google Fonts埋め込み: Pacifico / Dancing Script / Noto Serif JP 等)・文字サイズ・カーニング・縦横比をスライダーで調整
- **カラーテーマ**: プリセット24種(ゴールド婚礼/パステルガーリー/モノクロシック/レトロ喫茶/ビビッドポップ 等)と、バナー地色・文字色・ひだ影色の3箇所を個別カラーピッカーで指定可能
- **デコレーション追加**: 星・葉・花びら・ドット・ライン・小さなハートなど12種の飾りパーツをバナー周囲に追加。配置・サイズ・個数をスライダーで調整
- **リアルタイムプレビュー & 書き出し**: Canvas上にSVGをレンダリングして即座にプレビュー。PNG(横1200×630 / 正方形1080×1080 / A4縦向き)の3サイズでダウンロード。SVGとしてもダウンロード可能
- **公開ギャラリー**: 作成作品を1クリックで公開投稿・いいね・タグ検索できるギャラリーページ(PHP+MySQL)

## 3. 画面構成
- **トップ/エディタ画面(メイン)**: 左サイドパネル(シェイプ選択タブ / テキストタブ / カラータブ / デコタブ)＋中央プレビューキャンバス＋右上ダウンロードボタン群。スマホでは下部タブバーにパネルを格納
- **ギャラリーページ**: 新着・人気・タグ別フィルターでカード一覧表示。作品クリックで拡大＋いいね
- **使い方ページ**: 3ステップのアニメーションGIF風説明(静的HTML)

## 4. データ構造
```sql
-- 公開ギャラリー用
CREATE TABLE gallery_items (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(60),
tags VARCHAR(120), -- カンマ区切り
image_path VARCHAR(255), -- サーバー保存PNGパス
shape_type VARCHAR(30),
likes INT DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE gallery_likes (
id INT AUTO_INCREMENT PRIMARY KEY,
item_id INT,
ip_hash VARCHAR(64), -- 重複いいね防止
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```
エディタのステート(シェイプ・カラー・テキスト・デコ設定)はJSONオブジェクトとしてLocalStorageに自動保存し、再訪問時に復元。

## 5. デザインの方向性
- **ツール自体のUI**: 白背景＋ダークグレー文字の清潔感あるフラットデザイン。アクセントカラーはゴールド(#C9A84C)を使い、「手作り感×上品さ」を演出
- **プレビューキャンバス**: 薄いチェッカーボード背景で透過を視認しやすく
- **フォント**: UI本体はNoto Sans JP。エディタパネルのラベルは小さめ12px/グレーで情報過多にならないよう整理
- **アニメーション**: シェイプ切り替え時にSVGパスがモーフィングする軽いCSSトランジション(0.3s)でリッチ感を演出
- **全体規模**: index.html(エディタ) + gallery.php + upload.php(PNG受け取り＆DB登録) + api_like.php の4ファイル構成でシンプルに完結