名刺ジェネレーター CardForge - オリジナル名刺デザイン作成ツール

## 1. アプリの目的・ターゲットユーザー
フリーランサー・学生・副業ワーカー・同人作家・クリエイターなど、手軽にオリジナル名刺をデザインしたい人向け。デザインソフト不要でブラウザ上でリアルタイムプレビューしながら名刺を作成し、PNG/PDF でダウンロードできる無料ツール。

## 2. 主要機能
- **テンプレート選択**: ビジネス・クリエイター・ポップ・和風・ミニマル・パステルの6カテゴリー×各3種=計18テンプレートを用意（HTML/CSS で実装）
- **リアルタイム編集**: 名前・肩書き・会社名・電話番号・メール・SNSアカウント・一言コメントの各フィールドを入力すると即座にプレビューに反映
- **カラーカスタマイズ**: 背景色・文字色・アクセントカラーをカラーピッカーで自由変更。テンプレートごとにデフォルト配色を持つ
- **フォント選択**: Google Fonts 不使用（システムフォント＋Web Safe Fonts）で明朝体・ゴシック体・丸ゴシック・英字セリフ・英字サンスセリフから選択
- **アイコン・装飾**: SVG アイコン（電話・メール・Twitter・Instagram・GitHub など）をワンクリックで挿入。絵文字も使用可
- **ダウンロード**: html2canvas.js を使い表面・裏面それぞれ PNG ダウンロード。印刷用 91×55mm 比率を維持
- **保存・読み込み**: LocalStorage にデザインデータを JSON 保存し、次回アクセス時に復元

## 3. 画面構成
### メイン画面（1ページ完結）
- **左ペイン（編集パネル）**: タブ切り替えで「テンプレート選択」「テキスト入力」「カラー」「フォント」「装飾」の5タブ
- テンプレートタブ: カテゴリーボタン＋サムネイルグリッド
- テキストタブ: 各フィールドの input/textarea
- カラータブ: 背景・文字・アクセントの3つのカラーピッカー
- フォントタブ: フォントファミリー選択ラジオ＋サイズスライダー
- 装飾タブ: アイコン一覧グリッド（クリックで挿入）
- **右ペイン（プレビューエリア）**: 実寸比率の名刺プレビュー（表・裏タブ切り替え）。リアルタイム更新。スマホでは上下レイアウトに変更
- **フッターボタン**: 「PNG でダウンロード（表）」「PNG でダウンロード（裏）」「デザインを保存」「デザインをリセット」

## 4. データ構造
DB 不要。すべて LocalStorage + JavaScript で完結。
```
localStorage['cardforge_design'] = JSON.stringify({
templateId: 'business_01',
fields: {
name: '山田 太郎',
kana: 'やまだ たろう',
title: 'フリーランスデザイナー',
company: '',
phone: '090-xxxx-xxxx',
email: 'taro@example.com',
sns: '@taro_design',
comment: 'UI/UX設計が得意です'
},
colors: {
bg: '#1a1a2e',
text: '#ffffff',
accent: '#e94560'
},
fontFamily: 'gothic',
fontSize: 14,
icons: ['phone', 'mail', 'twitter'],
backDesign: 'logo_only'
})
```

## 5. デザインの方向性
- UI は **ダークモード基調**（背景 #1e1e2e、パネル #2a2a3e）でプロっぽい雰囲気
- アクセントカラーは紫〜ピンクのグラデーション
- 編集パネルと名刺プレビューの間は縦の区切り線でスッキリ分離
- 名刺プレビューは白いカード風の影付きボックスで、実物感を演出
- テンプレートサムネイルはホバー時に拡大＋選択枠が光るエフェクト
- スマホ表示では編集パネルをアコーディオン式に折りたたみ、プレビューを上部固定
- 全体的にシャープでスタイリッシュ。「無料なのにこれだけできる」という驚きを与えるビジュアル品質を目指す