LetterArt Studio - テキストアートポスターメーカー

## 1. アプリの目的・ターゲットユーザー
ひとことメッセージや名言・歌詞・短文を入力するだけで、文字そのものをデザインの主役にした「タイポグラフィアートポスター」をブラウザ上でリアルタイムに作成・ダウンロードできる無料ツール。デザインソフトを持たないSNS発信者・誕生日や結婚式の祝福カード作成者・手作り感のある店内POPを作りたい個人店オーナー・国語の授業素材を作りたい教師などを主なターゲットとする。

## 2. 主要機能
- **テキストアート自動生成**: 入力テキストを波・らせん・ハート・円・三角・X字・斜め縞など10種の「配置シェイプ」に沿って自動的に敷き詰める（Canvas 2D APIで描画）
- **スタイルパネル**: フォント(日本語対応GoogleFonts5種+等幅1種)・文字サイズ・文字間隔・行間・カラーグラデーション(前景2色+背景1色)をスライダーとカラーピッカーで調整
- **テンプレートプリセット**: 「誕生日おめでとう」「Thank You」「卒業記念」「開店祝い」「名言ポスター」など12種の用途別プリセットを1クリックで適用
- **リアルタイムプレビュー**: 編集操作のたびに即座にCanvasに反映し、スマホでも確認しやすい縦型(1080×1350)・横型(1920×1080)・正方形(1080×1080)の3サイズ切替
- **PNG書き出し & 公開ギャラリー投稿**: 高解像度PNGをローカルダウンロード。任意でタイトルと作者名を添えてサーバーの公開ギャラリーに投稿でき、他ユーザーの作品をブラウズして「いいね」できる
- **ランダム生成ボタン**: シェイプ・配色・フォントをワンクリックでランダム組み合わせ、アイデアが浮かばないときの起点に

## 3. 画面構成
### (A) トップページ / ギャラリー (`index.php`)
- ヒーローバナー（キャッチコピー + 「今すぐ作る」ボタン）
- 公開ギャラリーグリッド（新着順 / いいね順 タブ切替）: 各カードに画像サムネイル・タイトル・いいね数・いいねボタン
- ページネーション（1ページ20件）

### (B) エディター画面 (`editor.php`)
- **左サイドバー（スマホは下部ドロワー）**:
- テキスト入力エリア（最大100文字、リアルタイム文字数カウント）
- シェイプ選択グリッド（10種のアイコン付きボタン）
- スタイルパネル（フォント・サイズ・間隔・色2種・背景色）
- プリセット一覧（12種サムネイル）
- サイズ切替ラジオ（正方形/縦/横）
- ランダム生成ボタン
- **中央: Canvasプレビュー**（レスポンシブ縮小表示）
- **上部ツールバー**: ダウンロードボタン・ギャラリー投稿ボタン（投稿時にモーダルでタイトル・作者名入力）

### (C) 投稿完了モーダル
- 生成した公開URL表示・SNSシェアリンク（Twitter/X・LINE）

## 4. データ構造
```sql
-- ギャラリー投稿テーブル
CREATE TABLE gallery_posts (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(60) NOT NULL DEFAULT '無題',
author_name VARCHAR(40) NOT NULL DEFAULT '匿名',
image_path VARCHAR(255) NOT NULL, -- 書き出しPNGのサーバー保存パス
config_json TEXT NOT NULL, -- 再現用設定JSON(テキスト・シェイプ・スタイル等)
likes INT NOT NULL DEFAULT 0,
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
);

-- いいねの重複防止 (IPベース・セッションIDベース)
CREATE TABLE gallery_likes (
post_id INT NOT NULL,
voter_key VARCHAR(64) NOT NULL, -- SHA256(IP+UserAgent)
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (post_id, voter_key)
);
```
- 画像はサーバー上の `uploads/gallery/` ディレクトリに保存（月別サブフォルダ）
- DBなし版として、ダウンロード専用モードも用意（ギャラリー機能をOFF）

## 5. デザインの方向性
- **テーマ**: ダークモード基調（背景 #0f0f14、カード #1e1e2a）に、ネオン調のアクセントカラー（パープル〜シアン グラデーション）を組み合わせたクリエイティブスタジオ感
- **フォント**: UI全体にNoto Sans JPを使用し、作成物用はNoto Serif JP / Zen Maru Gothic / M PLUS 1p / Kosugi Maru / Sawarabi Mincho の5種を遅延読み込み
- **アニメーション**: Canvas描画はRequestAnimationFrameで滑らかに再描画。プリセット切替は0.3sのフェードトランジション
- **スマホ対応**: エディターのサイドバーは画面下から引き出すドロワー式。Canvasは画面幅に合わせて等比縮小し、縦長スマホでも全体が見えるよう配置
- **ワンページ完結感**: ギャラリーとエディターをシームレスに行き来できるよう、エディターへの遷移はページ遷移ではなく表示切替（JS classトグル）で実装し、体感速度を高める