LabelCraft - オリジナルラベル・シール デザインメーカー

## 1. アプリの目的・ターゲットユーザー
手作りジャム・瓶詰め・ハンドメイドコスメ・ワイン・クラフトビール・お菓子ギフトなどに貼るオリジナルラベルを、デザインスキルなしでブラウザだけで作れる無料ツール。ハンドメイド作家、小規模農家・食品加工事業者、ギフト好きの主婦・学生、ラベルを作りたいがIllustratorは使えない20〜50代を対象とする。

## 2. 主要機能
- **テンプレート選択**: 円形・楕円・四角・タグ型・ヘクサゴン・アーチ型の6形状 × 和風・ナチュラル・レトロ・シンプル・ポップ・クラフト紙風の6テーマ = 計36テンプレートを用意。選ぶだけで即プレビュー表示。
- **テキスト編集**: 商品名・サブコピー・内容量・原材料・製造日などの各テキストエリアをフォーム入力で編集。フォント（明朝/ゴシック/手書き風/欧文serif/sans）・サイズ・色・太字・配置（中央/左/右）を個別設定。
- **デコレーション素材**: ボタニカル・リボン・星・ハート・罫線・フレームなど内製SVGアイコン50種を1クリック配置。位置はドラッグ移動・サイズはスライダーで調整。
- **カラーカスタマイズ**: 背景色・枠線色・テキスト色をカラーピッカーで自由変更。グラデーション背景（2色）オプションあり。
- **サイズ指定**: 一般的なラベルサイズ（丸形Ø40/Ø60/Ø80mm、長方形50×30/90×55/105×148mm）から選択。カスタムmm入力も可。
- **書き出し・印刷**: PNG（300dpi相当の高解像度）ダウンロード、A4用紙に同一ラベルを面付け印刷するHTMLプリントビュー（2×4=8面、3×5=15面など面付け数自動計算）。作成データはLocalStorageに最大20件保存し、再編集可能。

## 3. 画面構成
- **トップページ**: 用途別ギャラリー（ジャム・コスメ・ビール・ギフト）をカード表示し「このテンプレートで作る」ボタンで即エディタ起動。新規作成と保存済み一覧へのナビ。
- **エディタ画面（メイン）**: 左サイドバーにタブ切り替え式パネル（テンプレート / テキスト / デコ / カラー / サイズ）、中央に原寸比率リアルタイムプレビュー（Canvas描画）、右サイドバーに保存・PNG書き出し・印刷ボタン。スマホでは上部タブ＋下部プレビュー縦レイアウトに切り替え。
- **印刷プレビューページ**: A4ページに選択した面付けでラベルを配置したhtmlを別タブ表示し、ブラウザ印刷ダイアログへ誘導。カット線（トンボ代わりの点線）を描画。
- **保存一覧モーダル**: 保存済みラベルをサムネイル表示。タップで再編集、長押し（またはボタン）で削除。

## 4. データ構造
DBは不使用。全データはLocalStorageに保存。
```
localStorage key: "labelcraft_items"
値: JSON配列
[
{
"id": "uuid",
"updatedAt": "ISO8601",
"shape": "circle|oval|rect|tag|hexagon|arch",
"theme": "wabi|natural|retro|simple|pop|kraft",
"templateId": "circle_natural_01",
"size": { "w": 60, "h": 60, "unit": "mm" },
"texts": [
{ "id": "t1", "role": "title", "value": "手作りジャム", "font": "serif", "size": 18, "color": "#3b2a1a", "bold": true, "align": "center", "x": 50, "y": 38 }
],
"decos": [
{ "id": "d1", "svgKey": "leaf_01", "x": 20, "y": 15, "scale": 1.2, "color": "#5a7a3a" }
],
"bg": { "type": "solid|gradient", "color1": "#fdf6e3", "color2": "#f0e0c0" },
"border": { "color": "#8b6340", "width": 2, "style": "solid|dashed|double" },
"thumbnail": "data:image/png;base64,...(64x64縮小)"
}
]
```

## 5. デザインの方向性
- **テイスト**: ナチュラル・温かみのある手作り感。クラフト紙ベージュ・アイボリーを基調としたUI背景。アクセントは深緑とテラコッタ。
- **フォント**: UIはNoto Sans JP。プレビュー内フォントはGoogle Fontsをローカルフォールバック付きで読込（Noto Serif JP / Kosugi Maru / Playfair Display / Lato）。
- **プレビュー描画**: Canvas 2D API でリアルタイム描画。テキスト・SVGアイコン・背景・枠線をすべてCanvas上にレンダリングしPNG書き出し。
- **レスポンシブ**: PC（1200px〜）ではサイドバー2カラム+中央プレビュー。タブレット（768〜1199px）ではサイドバー折りたたみ。スマホ（〜767px）では下部固定パネルとスクロールプレビュー。
- **規模感**: PHP不使用（静的HTML+CSS+JS完結）。外部依存はGoogle Fontsのみ（CDN）。実装量はJS約1,200行・CSS約400行の1回完成規模。