UIデザイン原則ページのURL同期・シェア機能実装計画

UIデザイン原則ページ（/design-principles）にシェア機能を追加するための設計方針と実装計画をまとめる。

現状の課題

現在の /design-principles ページは Miller Columns UI を採用しており、以下の特徴がある。

良い点：

8カテゴリー・48原則を一覧しながら探索できる
矢印キーや「前へ」「次へ」ボタンで素早くナビゲーション可能
カテゴリーをクリックすればすぐに切り替えられる

課題：

URLが変わらないため、特定の原則へのディープリンクができない
シェアボタンを押しても、常に /design-principles がシェアされる
OGP画像を原則ごとにカスタマイズできない

alt text

結論：パスベースのURL同期を採用

Miller Columns UIを維持しつつ、URLをパスベースで同期させる方式を採用する。

/design-principles          → デフォルト（A-11が選択された状態）
/design-principles/f/8      → カテゴリーF・原則8が選択された状態
/design-principles/h/96     → カテゴリーH・原則96が選択された状態

選択肢の比較

A. クエリパラメータ方式

/design-principles?category=f&no=8

観点	評価
実装コスト	低い
OGP動的生成	難しい（Cloudflare Workersでクエリパラメータの処理が複雑）
SEO	やや不利（クエリパラメータは正規URLとして扱われにくい）
シェアURL	長くなりがち

B. パスベース方式（採用）

/design-principles/f/8

観点	評価
実装コスト	中程度
OGP動的生成	容易（既存の仕組みを流用可能）
SEO	有利（個別URLとしてインデックスされる）
シェアURL	短く明確

C. 完全独立ページ化

/design-principle-8-direct-manipulation

観点	評価
実装コスト	非常に高い（48ページ作成）
OGP動的生成	容易
SEO	有利
UI体験	Miller Columnsの一覧性が失われる

採用理由

B. パスベース方式を採用する理由：

UIの一貫性: Miller Columnsの良さ（一覧性、ナビゲーション）を維持できる
OGP対応: Cloudflare Workersで動的OGP画像を生成しやすい
実装効率: 既存のコンポーネントをほぼそのまま活用できる
シェア体験: ランディングした人も同じMiller Columns UIを体験できる

技術的な設計

URL構造

/design-principles/[[...slug]].vue

slug が空の場合: デフォルトのカテゴリー・原則を表示
slug が ['f', '8'] の場合: カテゴリーFの原則8を表示

状態同期の仕組み

// URL → 状態（ランディング時）
const route = useRoute()
const [category, no] = route.params.slug || ['a', '11']
selectedCategoryId.value = category
selectedPrincipleNo.value = parseInt(no)

// 状態 → URL（ナビゲーション時）
watch([selectedCategoryId, selectedPrincipleNo], ([cat, no]) => {
  router.replace(`/design-principles/${cat}/${no}`)
})

OGP動的生成

既存のCloudflare Workers OGP生成の仕組みを活用：

/design-principles/f/8 → OGP画像に「No.8 直接操作」を表示

シェアボタン

各原則の詳細表示エリアにシェアボタンを追加：

Twitter/Xシェア
URLコピー

実装計画

Phase 1: ルーティング変更

design-principles.vue を design-principles/[[...slug]].vue に移動
URLパラメータのパース処理を追加
ナビゲーション時のURL更新処理を追加

Phase 2: シェアボタン追加

シェアボタンコンポーネントを作成
GoodBadWrapper または詳細表示エリアに配置
Twitter/X、URLコピー機能を実装

Phase 3: OGP動的生成

Cloudflare Workers のOGP生成ロジックを拡張
/design-principles/[category]/[no] パターンに対応
原則名・カテゴリー名をOGP画像に含める

Phase 4: テスト・調整

各原則へのディープリンクテスト
シェア後のランディング確認
OGP画像のプレビュー確認（Twitter Card Validator等）

参考

現在のデザイン原則ページ: /design-principles
実装対象コンポーネント: apps/web/app/pages/design-principles.vue

UIデザイン原則ページのURL同期・シェア機能 実装計画

UIデザイン原則ページのURL同期・シェア機能実装計画