URLまとめリンク集メーカー LinkBundle

## 1. アプリの目的・ターゲットユーザー

複数のURLを1つのシェアページにまとめ、タイトル・説明・カテゴリ付きで整理して短いURLで共有できる「リンク集ページジェネレーター」。SNSのプロフィールに貼るリンク集（いわゆるLinktree型）だけでなく、勉強まとめ・プロジェクト参考リンク・イベント情報セットなど汎用的に使えることが差別化ポイント。
- **ターゲット**: 複数リンクをまとめてシェアしたいSNS発信者・学生・ビジネスパーソン・イベント主催者

---

## 2. 主要機能

- **バンドル作成**: タイトル・説明・アイコン絵文字を設定し、URLを最大20件まで追加（各リンクにラベル・説明・カテゴリタグを付与可）
- **ドラッグ&ドロップ並び替え**: 登録したリンクの順序をDnDで変更可能
- **公開URLの発行**: `/?b=ランダム8文字` 形式の短いURLを発行。DBにJSON保存し誰でもアクセス可能
- **プレビューモード**: 編集中のリンク集をリアルタイムでカード型レイアウトとしてプレビュー表示
- **OGP対応のシェアページ**: 公開ページはSNSシェア時にバンドルタイトル・説明がカード表示されるようmeta OGPを動的生成（PHPで出力）
- **QRコード表示**: 公開URLのQRコードをCanvas/ライブラリ不要のPure JS（qrcodejs CDN可）で生成しPNG保存可能

---

## 3. 画面構成

### ① トップページ (`index.php`)
- キャッチコピーと「リンク集を作る」ボタン
- 使い方3ステップ（入力→プレビュー→シェア）の図解
- 最近作成されたバンドル一覧（公開OKのもの、最新10件）

### ② 作成・編集ページ (`create.php`)
- 左カラム: 入力フォーム
- バンドル名・説明・アイコン絵文字セレクタ
- リンク追加エリア（URL・ラベル・説明・カテゴリタグ）
- ドラッグハンドル付きリンクリスト
- 公開設定（公開/限定公開 トグル）
- 「保存して公開」ボタン
- 右カラム: リアルタイムプレビュー（スマホ型フレームの中にカード表示）

### ③ 公開閲覧ページ (`bundle.php?b=XXXXXX`)
- バンドルタイトル・絵文字・説明
- リンクカード一覧（ラベル・URL・説明・カテゴリバッジ・外部リンクアイコン）
- QRコードパネル（折りたたみ展開式）
- 「自分もリンク集を作る」誘導ボタン

---

## 4. データ構造

### `bundles` テーブル
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| slug | VARCHAR(8) UNIQUE | 公開URL識別子（ランダム英数字8文字）|
| title | VARCHAR(100) | バンドル名 |
| description | TEXT | 説明文 |
| icon | VARCHAR(10) | 絵文字アイコン |
| links_json | MEDIUMTEXT | リンク配列をJSON文字列で格納 |
| is_public | TINYINT(1) | 1=公開 / 0=限定公開 |
| edit_token | VARCHAR(32) | 編集用トークン（Cookieに保存）|
| created_at | DATETIME | |
| updated_at | DATETIME | |

**links_json の構造例:**
```json
[
{"label": "公式サイト", "url": "https://...";, "desc": "詳細はこちら", "tag": "仕事"}
]
```

---

## 5. デザインの方向性

- **カラーパレット**: 背景 #F8F9FC（薄グレー）、アクセント #6C63FF（インディゴパープル）、カード背景 #FFFFFF、テキスト #1A1A2E
- **雰囲気**: Notion風のクリーンミニマル。カード要素に`border-radius: 12px` + `box-shadow`で浮いた質感
- **フォント**: Noto Sans JP（日本語）/ Inter（英数字）
- **リンクカード**: ホバー時に左ボーダーがアクセントカラーに変わるアニメーション
- **プレビューエリア**: iPhone風の丸角フレーム（CSS擬似要素で描画）内にスクロール可能なカード一覧
- レスポンシブ対応: 作成ページはPC=2カラム / スマホ=プレビューを下部タブ切り替えに変更