ScrapBook Studio - デジタルスクラップブッキングメーカー

## 1. アプリの目的・ターゲットユーザー
旅の思い出、推し活、育児記録、ライフログなどを「スクラップブック風コラージュページ」としてブラウザだけで作成・保存・共有できる無料ツール。デザインソフトは不要で、マスキングテープ風デコや手書きメモ風テキストなどのアナログ質感を再現し、デジタル世代の10〜40代女性をメインターゲットとする。

## 2. 主要機能
- **素材の貼り付け**: 写真アップロード(最大10枚/ページ)、内蔵のイラスト素材(150点以上: 花・星・リボン・切手・付箋・フレームなど)をドラッグ&ドロップでキャンバスに配置
- **テキストデコレーション**: 手書き風・スタンプ風・タイトル風の3スタイルのテキストボックスを配置。文字色・サイズ・傾き調整が可能
- **アナログ質感デコ素材**: マスキングテープ(12種の柄)・クラフト紙風背景・折り目風シャドウ・ステッカー風枠線をワンクリックで追加できるデコツール
- **テンプレート**: 旅行・誕生日・推し活・日常記録・季節イベントの5カテゴリ×各4種類(計20テンプレート)をプリセット提供
- **PNG書き出し & 公開ギャラリー**: 作成したページをPNG(A4/正方形/横長の3サイズ)で書き出し。任意でギャラリーに投稿でき、いいね(ハートスタンプ)で反応できる
- **LocalStorage自動保存**: ログイン不要でブラウザ内に最大10ページ分の作業データを保存・再編集可能

## 3. 画面構成
### トップページ
- ヒーロービジュアル(完成例コラージュ3点を横並び表示)
- 「新規作成」「テンプレートから始める」「ギャラリーを見る」の3ボタン

### エディター画面
- **左サイドバー**: タブ切り替えで「背景」「素材」「テキスト」「デコ」「写真」の5カテゴリをアイコン一覧表示
- **中央キャンバス(Canvas要素)**: 選択中オブジェクトは青枠+ハンドル表示。ドラッグ移動・コーナーハンドルでリサイズ・回転ハンドルで傾き変更
- **右サイドバー**: 選択オブジェクトのプロパティパネル(不透明度・重なり順・削除ボタン)
- **上部ツールバー**: Undo/Redo(最大20ステップ)・書き出し・保存・ギャラリー投稿ボタン

### 公開ギャラリーページ
- 投稿一覧(マソンリーレイアウト、新着順/いいね順の切り替え)
- 各カードにいいねボタン(セッションCookieで1回制限)
- タグフィルター(旅行・育児・推し活・季節など)

## 4. データ構造
### DBテーブル(公開ギャラリー機能のみMySQLを使用。それ以外はLocalStorage)
```sql
-- 公開投稿テーブル
CREATE TABLE gallery_posts (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(60) NOT NULL,
image_path VARCHAR(255) NOT NULL, -- PNGを/uploads/以下に保存
tags VARCHAR(200), -- カンマ区切り
likes INT DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- いいね重複防止テーブル
CREATE TABLE gallery_likes (
id INT AUTO_INCREMENT PRIMARY KEY,
post_id INT NOT NULL,
visitor_id VARCHAR(64) NOT NULL, -- セッションID or クッキーUUID
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
UNIQUE KEY uq_like (post_id, visitor_id)
);
```
- エディターのページデータはLocalStorageにJSON形式で保存(オブジェクト座標・素材ID・写真のDataURL・テキスト内容を格納)

## 5. デザインの方向性
- **全体トーン**: クリーム・オフホワイト・くすみピンク・セージグリーンを基調としたリラックス感のあるアナログ温感デザイン
- **フォント**: 見出しは丸ゴシック系、UIラベルはNoto Sans JP
- **エディター背景**: 薄いグリッド紙風テクスチャで「本物のスクラップブックの上に貼っている感」を演出
- **素材UIアイコン**: パステル色の手描き風イラストアイコンで統一
- **スマホ対応**: スマホでは左サイドバーを画面下部のタブバーに切り替え、キャンバスはピンチズームに対応
- **アニメーション**: 素材をキャンバスにドロップした際に軽いバウンスアニメーション(CSS transition)を付与し、楽しさを強調