MoodBoard Maker - ビジョンボード＆ムードボード作成ツール

## 1. アプリの目的・ターゲットユーザー
目標・夢・インテリアイメージ・ブランドコンセプトなどを視覚的に整理する「ムードボード（ビジョンボード）」をブラウザだけで無料作成できるツール。外部サービス不要でローカル保存まで完結する。
- ターゲット: 夢や目標を可視化したい学生・社会人、インテリアや旅行を計画する主婦・主夫層、デザイナー・クリエイターのコンセプトボード用途、副業・起業を考えるビジネスパーソン

## 2. 主要機能
- **ボード作成**: A3横/正方形/縦長など5種のキャンバスサイズを選択してボードを新規作成
- **素材パネル**: あらかじめ用意したカテゴリ別のフリー画像素材(旅行・食・自然・都市・ライフスタイル・ビジネス・カラースウォッチ 各30枚以上)をドラッグ&ドロップで配置
- **テキスト追加**: フォント(明朝/ゴシック/手書き風の3種)・サイズ・色・回転を自由設定できるテキストラベルを追加
- **カスタム画像アップロード**: ユーザーが手持ちの画像をアップロードしてボードに配置(クライアントサイド処理のみ、サーバー保存なし)
- **要素操作**: 配置した画像・テキストをドラッグ移動・リサイズ・回転・重なり順変更・削除
- **PNG書き出し & ローカル保存**: ボードをPNG画像としてダウンロード。localStorage にボードデータ(JSON)を保存し次回も継続編集可能
- **テンプレート**: 「夢・目標ボード」「インテリアイメージ」「旅行計画」「ブランドムード」の4テンプレートをワンクリックで呼び出し

## 3. 画面構成
### トップページ (index.php)
- ヒーローエリア: キャッチコピー + 「新規作成」ボタン + サンプルボード画像3点
- テンプレート選択カード(4種)をグリッド表示
- 使い方3ステップ説明(アイコン+テキスト)

### エディタ画面 (editor.php or editor.html)
- **左サイドパネル(素材パネル)**: カテゴリタブ切り替え → サムネイルグリッド表示 → ドラッグまたはクリックでキャンバスに追加
- **中央キャンバス**: HTML5 Canvas or CSS transform ベースの自由配置エリア。選択中要素はハンドル(リサイズ・回転)付き枠線を表示
- **右サイドパネル(プロパティ)**: 選択要素のサイズ・位置・回転・不透明度を数値入力で微調整。テキスト要素の場合はフォント・色・太字も表示
- **上部ツールバー**: ボードタイトル入力 / Undo-Redo / 全削除 / ローカル保存 / PNG書き出し / テンプレート呼び出し
- **モバイル対応**: スマホ時は素材パネルが下部ドロワー、キャンバスはピンチズーム対応

### ギャラリーページ (gallery.php) ※サーバーDB使用
- 他ユーザーが「公開」設定でシェアしたボードを一覧表示(サムネイル+タイトル+いいね数)
- いいねボタン(セッション単位で1回まで)
- 自分のボードを公開シェアする際はタイトルと画像データをDBに保存

## 4. データ構造
### boards テーブル (公開シェア用)
```sql
CREATE TABLE boards (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(100) NOT NULL,
thumbnail MEDIUMTEXT NOT NULL, -- base64 PNG
likes INT DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
```
### likes テーブル
```sql
CREATE TABLE likes (
id INT AUTO_INCREMENT PRIMARY KEY,
board_id INT NOT NULL,
session_hash VARCHAR(64) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uniq_like (board_id, session_hash)
);
```
- ボードのレイアウトデータ(要素の配置JSON)はlocalStorageのみ管理。DBには公開時のPNGサムネイルのみ保存することでサーバー負荷を最小化

## 5. デザインの方向性
- **カラー**: 白を基調にアクセントカラーはソフトなコーラルピンク (#FF6B6B) とディープネイビー (#2C3E50)
- **雰囲気**: おしゃれ・クリエイティブ・女性にも男性にも使いやすいミニマルデザイン。角丸・シャドウを多用
- **フォント**: 見出しは Google Fonts「Noto Serif JP」、UIは「Noto Sans JP」
- **アイコン**: Font Awesome 6 Free を使用
- **エディタUI**: Figma/Canva風の3ペイン構成。キャンバス背景は薄いグレーのチェッカー模様
- 実装はHTML5 Canvas(Fabric.js不使用、素の Canvas API + DOM方式) または CSS transformベースのDOM操作で対応し、外部JSライブラリへの依存を最小限にする