PaperCraft Studio - ペーパークラフト展開図メーカー

## 1. アプリの目的・ターゲットユーザー
ブラウザだけで立体図形（箱・多角柱・多面体など）の展開図を生成し、印刷してそのまま切り取り・折り目を付けて組み立てられる無料ペーパークラフトメーカー。
- 小学生〜中学生（算数・理科の立体図形学習）
- 工作・DIY 好きな大人・保護者
- 教師・学童支援スタッフ（プリント教材として活用）
- 小物入れ・ギフトボックスを手作りしたい人

---

## 2. 主要機能
- **展開図ジェネレーター**: 立方体・直方体・三角柱・四角柱・六角柱・円柱・正四面体・正八面体・菱形ボックス（フタ付き）・ピラミッド型の計10種から選択し、W/H/D をスライダーで調整すると展開図がリアルタイムで Canvas に描画される
- **デザインカスタマイズ**: 展開図の面ごとに背景色・グラデーション・シンプルなパターン（ドット/ストライプ/チェック/花柄）を選択。面ごとにテキストラベルも入力可能
- **折り目・切り取り線の表示**: 折り目は青の点線、切り取り線は赤の実線で自動表示。「のりしろ」のオン/オフ切り替えも可能
- **印刷 & PNG 出力**: A4/A3 に合わせたスケール自動調整で印刷ダイアログを呼び出し、または高解像度 PNG をダウンロード
- **ギャラリー（プリセット作品）**: あらかじめデザイン済みの20種（クリスマスボックス・誕生日BOX・宇宙ロケット・お城・動物顔のサイコロなど）が並ぶプリセットギャラリー。選ぶとそのままエディタに読み込まれる
- **共有URL生成**: 展開図の設定値（形状・サイズ・色情報）を Base64 エンコードして URL クエリに埋め込み、リンクで共有できる

---

## 3. 画面構成
### トップ / ホーム画面
- ヒーローバナー：「切って折るだけ！立体ボックスが作れる」キャッチコピー
- 「新規作成」ボタン → エディタ画面へ
- プリセットギャラリーのサムネイル6枠（横スクロール） → 選択でエディタへ

### エディタ画面（メイン）
**左パネル（設定）**
- 形状選択ドロップダウン（10種）
- W / H / D スライダー（1〜30cm、0.1cm 単位）
- のりしろ幅スライダー（0〜1.5cm）
- 「デザイン」タブ：面セレクタ → 色ピッカー・パターン選択・テキスト入力
- 「表示」タブ：折り目線・寸法ラベル・面番号の表示ON/OFF

**右エリア（プレビュー）**
- Canvas（SVG ベース）でリアルタイム展開図描画
- ズームイン/アウト・リセットボタン
- 「印刷」「PNG 保存」「URL 共有」の3ボタン

**フッター内**
- 簡易 3D プレビュー（CSS 3D Transform で展開図の面をアニメーション折りたたみ表示。精度より視覚的楽しさ重視）

### プリセットギャラリー画面
- カテゴリタブ（全て / 収納BOX / イベント / キャラクター / 学習用）
- カード形式でサムネイル＋名称＋難易度（★1〜3）を表示
- 「このデザインで作る」ボタン → エディタに設定を注入

---

## 4. データ構造
バックエンド DB は原則不要（LocalStorage + URLパラメータで完結）。

**LocalStorage キー**
- `pcs_recent`: 最近使用した設定 JSON 最大10件（配列）
```
{ id, shape, w, h, d, margin, faceDesigns:[{faceId, color, pattern, text}], createdAt }
```
- `pcs_favorites`: お気に入り保存デザイン（同構造）

**プリセットデータ（PHP 内蔵 or JS 定数）**
```
presets.json: [
{ id, name, category, difficulty, thumb, config:{shape,w,h,d,margin,faceDesigns} },
...
]
```

PHP は静的ファイル配信と URL 共有ページ（OGP meta タグ生成）のみに使用。DB 不要。

---

## 5. デザインの方向性
- **テーマカラー**: 温かみのあるクラフト紙ベージュ (#F5ECD7) × 深緑 (#2D6A4F) × オレンジ (#E76F51)
- **フォント**: 見出しに丸ゴシック系、ラベルに等幅フォント（寸法表示）
- **雰囲気**: 文房具屋・工作教室のような手作り感。グリッド罫線背景、紙のテクスチャ風 CSS
- **エディタレイアウト**: PC は左パネル(280px) + 右プレビューの2カラム。スマホは上部タブ切り替えで「設定」「プレビュー」を交互表示
- **印刷時**: 背景・ナビゲーションを非表示にして展開図のみを A4 中央配置で出力するメディアクエリ適用
- **アニメーション**: 形状変更・サイズ調整時にプレビューが 0.15s でスムーズ再描画。プリセット読み込み時はカードがフェードインで表示