PatternWeave - シームレスパターン&テキスタイルデザインメーカー

## 1. アプリの目的・ターゲットユーザー
ブラウザだけで、布地・壁紙・ラッピング紙・デジタル背景などに使えるシームレス（繰り返し）パターンを直感的にデザインできる無料ツール。デザイナー志望の学生、ハンドメイド作家、同人誌作家、Webデザイナー、個人ブロガーなど、「オリジナルの繰り返し柄を手軽に作りたい」ユーザーをターゲットとする。外部APIや有料ソフト不要。

---

## 2. 主要機能
- **タイル描画エディタ**: 16×16 / 32×32 / 64×64 pxのタイルキャンバスにドット・自由線・図形ツールで描画。カラーピッカーとスポイトツール搭載。
- **シームレスプレビュー**: 描いたタイルを3×3〜5×5グリッドでリアルタイム繰り返し表示。「どう繰り返されるか」を即確認。
- **タイリングモード切替**: 通常タイル / ハーフドロップ(レンガ積み) / ダイヤモンド(45度回転) / ミラー(鏡像) の4種のリピート方式を1クリックで切替可能。
- **プリセットテンプレート20種**: ストライプ・水玉・チェック・麻の葉・市松・花柄・幾何学など和洋取り混ぜた20種のスターターテンプレートを収録。選んでカスタマイズできる。
- **書き出し**: タイル画像(PNG)・シームレスプレビュー画像(PNG)・SVGパターン定義ファイルの3形式でダウンロード。
- **公開ギャラリー&いいね**: 作成したパターンを公開投稿でき、他ユーザーの作品にいいねできる。DBはMySQL使用。

---

## 3. 画面構成
### ① トップ/ギャラリーページ (`index.php`)
- ヘッダー: アプリロゴ・「新規作成」ボタン
- 公開ギャラリー: 投稿されたパターンをカードグリッドで表示（サムネイル・いいね数・投稿日）
- 「今すぐ作る」CTAボタン

### ② エディタページ (`editor.php`)
**3カラム構成（スマホは縦スタック）**
- **左パネル(ツールボックス)**:
- ツール選択: ペン / 直線 / 矩形 / 円 / 塗りつぶし / スポイト / 消しゴム
- カラーパレット: 16色スウォッチ + カスタムカラーピッカー
- タイルサイズ選択: 16/32/64px
- タイリングモード選択: 4種ラジオボタン
- プリセット一覧ドロップダウン
- **中央パネル(描画キャンバス)**:
- Canvas要素(ズーム機能: 1x〜8x)
- アンドゥ/リドゥボタン
- クリアボタン
- **右パネル(シームレスプレビュー)**:
- リアルタイム繰り返しプレビュー(Canvas)
- 背景色変更スライダー(プレビュー背景のみ)
- 書き出しボタン(PNG/SVG)
- タイトル入力 + 公開投稿ボタン

### ③ 作品詳細ページ (`view.php?id=xxx`)
- パターンプレビュー大表示
- タイトル・投稿日・いいね数とボタン
- 「このパターンを編集する」ボタン(タイルデータをエディタにロード)

---

## 4. データ構造
### `patterns` テーブル
```
id INT AUTO_INCREMENT PRIMARY KEY
title VARCHAR(100)
tile_size TINYINT -- 16, 32, 64
tile_mode VARCHAR(20) -- normal, halfdrop, diamond, mirror
pixel_data TEXT -- JSON配列: [[r,g,b,a], ...] タイル全ピクセル
preview_png MEDIUMBLOB -- シームレスプレビューPNGのbase64 or バイナリ
likes INT DEFAULT 0
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
```

### `pattern_likes` テーブル
```
id INT AUTO_INCREMENT PRIMARY KEY
pattern_id INT
browser_fp VARCHAR(64) -- LocalStorageのUUIDで二重いいね防止
created_at DATETIME
```

---

## 5. デザインの方向性
- **カラーテーマ**: 白ベース・ライトグレー背景。アクセントカラーは「テキスタイルらしい深みのある藤色(#7B5EA7)」。
- **フォント**: 見出しはやや幾何学的なサンセリフ(Noto Sans JP)。
- **UIスタイル**: フラットデザイン。ツールパネルは左固定サイドバー、プレビューは右固定。スマホでは下部タブで左/中/右パネル切替。
- **エディタの質感**: キャンバスのグリッド線はうっすら表示(透明度20%)。ズーム時はピクセル境界が明確に見えるよう`image-rendering: pixelated`適用。
- **ギャラリー**: パターンカードはホバー時にアニメーション繰り返しプレビューが再生されるように見える(CSSアニメーション)。
- **全体規模**: PHPファイル5本(index/editor/view/api_save/api_like)、JS 1本(editor.js 約400行)、CSS 1本で完結する現実的な構成。