UrlBio — リンク一本で伝わるプロフィールページメーカー

## 1. アプリの目的・ターゲットユーザー
SNSプロフィール欄に貼れる「自分専用の紹介ページ」を5分で無料作成できるツール。Linktree・lit.link の代替として、登録不要・ドメイン不要でブラウザだけで完結する点が差別化ポイント。ターゲットは副業フリーランサー・クリエイター・学生・インフルエンサー・名刺代わりのページが欲しい個人全般。SNSで「無料でLinktr.ee相当が作れた」と拡散されることでアクセス数増大を狙う。

## 2. 主要機能
- **プロフィール作成**: アイコン画像(URL指定 or 内蔵アバター30種)・名前・肩書き・ひとこと紹介・背景テーマ(12種)を入力し、リアルタイムスマホプレビューで確認しながら編集
- **リンク登録**: タイトル・URL・アイコン(SNS自動判定 or 50種の絵文字アイコン)を最大20件登録。ドラッグ&ドロップで並び替え可能
- **公開URL発行**: 入力データをBase64/JSONエンコードしてURLパラメータに埋め込み、短い公開URLを生成(DBなしでもページが表示される仕組み)。QRコードも同時生成
- **テーマ・デコレーション**: グラデーション背景・フラット・ダーク・パステル・和風など12テーマ、カードの角丸・影・枠線スタイルを3種から選択。Twitterカード用OGP画像(Canvas生成PNG)もダウンロード可能
- **PNG名刺カード出力**: プロフィール+QRコードをA6横サイズの名刺風PNGとしてCanvasで書き出し。印刷・SNS投稿用に活用できる

## 3. 画面構成
### 3-1. トップページ (index.php)
- キャッチコピー「5分でリンクまとめページが作れる」+ サンプルデモ(静止画または実際のサンプルURL)
- 「今すぐ作る」ボタン → エディタページへ
- 使い方3ステップ説明(入力→プレビュー→URLコピー)

### 3-2. エディタページ (editor.php / SPA的構成)
- 左ペイン: 入力フォーム(プロフィール設定タブ / リンク設定タブ / デザインタブ の3タブ構成)
- 右ペイン: スマホ型フレーム内にリアルタイムプレビュー(PC表示では常時表示、スマホでは下部フローティングボタンでトグル)
- 下部固定フッター: 「公開URLをコピー」「QRコードを表示」「名刺PNGをダウンロード」の3ボタン

### 3-3. 公開プロフィールページ (view.php?d=xxxxx)
- URLパラメータのデータをデコードして表示するだけのシンプルページ
- プロフィール画像・名前・肩書き・ひとこと
- リンクカードのリスト(クリックで外部URLへ)
- 最下部に「UrlBioで無料作成」の薄いフッター(バイラル誘導)
- OGPメタタグ動的生成でSNS共有時にカード表示

### 3-4. QRコードモーダル
- qrcode.js(CDN)でCanvas生成したQRコードを表示
- PNGダウンロードボタン付き

## 4. データ構造
DBは使用しない。すべてのデータはURLパラメータに格納(エンコード上限約2000文字を考慮しリンク最大20件・各フィールド文字数制限を設ける)。

エンコード仕様:
```
JSON → UTF-8文字列 → Base64url → URLクエリパラメータ ?d=<base64url文字列>
```

JSONスキーマ(例):
```json
{
"name": "山田 太郎",
"title": "フリーランスデザイナー",
"bio": "UI/UXとブランディングが得意です",
"avatar": "url:https://..."; または "preset:12",
"theme": "gradient_purple",
"cardStyle": "rounded_shadow",
"links": [
{"label": "Twitter", "url": "https://...";, "icon": "twitter"},
{"label": "ポートフォリオ", "url": "https://...";, "icon": "🎨"}
]
}
```

LocalStorageに作業中データを自動保存し、ページ再訪時に復元。

## 5. デザインの方向性
- **エディタUI**: 白背景・グレー系の落ち着いたUIで「プロフェッショナルツール感」を演出。アクセントカラーはビビッドパープル(#7C3AED)。
- **公開ページ**: ユーザーが選んだテーマで全画面表示。スマホで見栄えが良いよう縦長カード型レイアウト、最大幅480px固定。ボタンはタップしやすい高さ52px。
- **フォント**: 日本語はNoto Sans JP(CDN)、英語見出しはPoppins。
- **マイクロアニメーション**: リンクカードにホバー時の浮き上がり効果(transform translateY -2px)、公開URL生成時にコピー完了トースト表示。
- **全体トーン**: 「軽い・速い・無料で使える」を前面に、ランディング的なトップページで離脱率を下げる。

## 6. 技術的補足
- PHP: view.php でURLパラメータをデコードしOGPメタタグを動的生成するのみ。他は静的HTML+JS。
- qrcode.js(CDN)でQRコード生成。
- Canvas APIで名刺PNG書き出し。
- sortable.js(CDN)でリンクのドラッグ並び替え。
- サーバーへの個人データ送信・保存は一切なし(プライバシー訴求ポイントとして明記)。
- OGP画像はCanvasで生成したBase64 DataURLをmetaタグに埋め込む(軽量OGPカード)。