ボードゲームデザイナー BoardCraft - オリジナルボードゲーム設計メーカー

## 1. アプリの目的・ターゲットユーザー
オリジナルのボードゲームを「ルール設計 → コンポーネント生成 → 印刷用シート出力」まで一気通貫でブラウザ完結できる無料ツール。「こんなゲームを作りたいけど何から始めればいいか分からない」初心者クリエイターから、同人ゲームの試作を素早く行いたいホビーデザイナーまでを対象とする。外部APIなし・登録不要で即使用開始できる。

## 2. 主要機能
- **ゲームテンプレート選択**: すごろく・カードゲーム・タイル配置・陣取り・ビンゴの5種テンプレートから原型を選び、ゼロからルール文書を埋めていくウィザード形式のガイド付き設計フロー
- **ルールブックエディタ**: ゲーム名・人数・対象年齢・目的・ターンの流れ・勝利条件・特殊ルールを専用フォームで入力し、プレイアブルなルールブック(HTML+印刷用CSS)を自動整形
- **コンポーネントビルダー**: カード・タイル・トークンをブラウザ上でデザイン(背景色・テキスト・アイコン絵文字・枠スタイル選択)し、1枚ずつ編集して複数枚まとめて管理するカードデッキ/タイルセット作成機能
- **ゲームボードエディタ**: 格子状(最大10×10マス)のシンプルなボードを生成し、マスごとに色・ラベル・特殊効果テキストをクリックで設定。スゴロク風の曲線パスも自動レイアウトで生成可能
- **印刷用一括出力**: ルールブック・カードシート(A4面付け)・ボードの3種を個別にブラウザ印刷(window.print)できるよう整形。PNG保存ボタンも搭載(html2canvas使用)
- **ローカル保存 & 共有URL**: 設計データをLocalStorageに保存し、JSONエクスポート/インポートで別端末と共有。URLパラメータにBase64エンコードした軽量データを載せる「共有リンク」機能

## 3. 画面構成
- **トップページ**: キャッチコピー・5種テンプレートカード・「新規作成」「データ読み込み」ボタン。作成済みプロジェクト一覧(LocalStorage)を下部に表示
- **ウィザード画面(Step 1〜4)**: Step1=テンプレート&基本情報入力 / Step2=ルールブックエディタ(各フィールドにプレースホルダー例文入り) / Step3=コンポーネントビルダー(カード/タイル/トークンのタブ切り替え) / Step4=ボードエディタ。各ステップ上部にプログレスバー
- **プレビュー/出力画面**: 左ペインに項目ナビ、右ペインに実際の印刷イメージを表示。ルールブック・カードシート・ボードの各「印刷」「PNG保存」ボタン。「共有リンクをコピー」ボタン
- **共通ヘッダー**: ロゴ・現在のプロジェクト名・保存状態インジケーター(自動保存)

## 4. データ構造
DB不要。すべてLocalStorageとURLパラメータで完結。
```
project: {
id: string, // UUID
name: string,
template: 'sugoroku'|'card'|'tile'|'area'|'bingo',
updatedAt: string,
rulebook: {
players: string, // 例:"2〜4人"
age: string,
goal: string,
turnFlow: string,
winCondition: string,
specialRules: string[]
},
cards: [
{ id, label, body, bgColor, borderStyle, iconEmoji, count }
],
tiles: [
{ id, label, bgColor, iconEmoji, count }
],
tokens: [
{ id, label, color, shape: 'circle'|'square'|'star', count }
],
board: {
cols: number, // 最大10
rows: number,
cells: [
{ row, col, label, bgColor, effect, isStart, isGoal }
],
pathStyle: 'grid'|'snake'
}
}
```
LocalStorageキー: `boardcraft_projects` (JSON配列)

## 5. デザインの方向性
- **ファンシー×クラフト感**: クラフト紙テクスチャ風の暖色ベージュ(#F5ECD7)背景に、深みのある茶(#5C3D2E)と赤橙(#E8671B)のアクセントカラー
- ボードエディタのマスはシャドウ付きカード風、カードビルダーはリアルなカードの角丸プレビュー
- フォントは見出しに太めのゴシック体、本文は読みやすいサンセリフ。絵文字アイコンを積極活用してデザインリテラシーが低くても見た目を整えやすくする
- モバイルでは各ステップをフルスクリーム縦スクロール、PCでは左サイドバー+右プレビューの2カラムレイアウト
- アニメーションは控えめ(ステップ切り替え時のフェード程度)にして印刷プレビューの視認性を最優先