• #design-principles
  • #refactoring
  • #planning

デザイン原則 番号振り直し計画

背景

現在のデザイン原則は、元の書籍の番号（1〜100）をそのまま使用しているため、実装済みの原則が飛び飛びの番号になっている。

問題点：

  • 番号が飛び飛びで分かりづらい（例: F カテゴリーが 8, 63, 64, 65, 79, 90）
  • 独自の事例を追加する際に、元の連番を維持する意味が薄れている
  • カテゴリー内での順序が直感的でない

解決策：

  • カテゴリー別の連番（A-1, A-2, B-1, B-2...）に振り直す
  • 旧番号との対応表を維持して履歴を残す
  • 旧URLから新URLへのリダイレクトを設定

現在の構造

URL形式

/design-principles/{category}/{no}
例: /design-principles/f/8

カテゴリー一覧

カテゴリー名称説明
Aテキスト変更のみUIコンポーネントは同じ、テキストの書き方だけでGood/Badを示す
B単一コンポーネントボタン/コントロール単体でGood/Badを示す
Cフォーム系フォームコンポーネントでGood/Badを示す
Dレイアウト/配置系要素の配置やグルーピングでGood/Badを示す
Eナビゲーション系ナビやメニューUIでGood/Badを示す
Fインタラクション/アニメーション系動きやタイミングでGood/Badを示す
Gモーダル/確認系ダイアログやモーダルでGood/Badを示す
H情報表示系データや状態の表示方法でGood/Badを示す

番号対応表

カテゴリーA: テキスト変更のみ（5件）

新番号旧番号原則名旧URL新URL
A-111ユーザーの言葉を使う/design-principles/a/11/design-principles/a/1
A-233ナビゲーション項目は名詞にする/design-principles/a/33/design-principles/a/2
A-344選択肢の文言は肯定文にする/design-principles/a/44/design-principles/a/3
A-447デフォルトボタンには具体的な動詞を用いる/design-principles/a/47/design-principles/a/4
A-555エラー表示は建設的にする/design-principles/a/55/design-principles/a/5

カテゴリーB: 単一コンポーネント（7件）

新番号旧番号原則名旧URL新URL
B-14シグニファイア/design-principles/b/4/design-principles/b/1
B-248ラジオボタンは単数選択、チェックボックスはオンオフ/design-principles/b/48/design-principles/b/2
B-349フリップフロップ問題を避ける/design-principles/b/49/design-principles/b/3
B-472肯定/否定ボタンの順序/design-principles/b/72/design-principles/b/4
B-574ハイライト表現は構成要素をひとつだけ変化させる/design-principles/b/74/design-principles/b/5
B-678タッチ操作する要素の大きさは7mm以上/design-principles/b/78/design-principles/b/6
B-793ホットスポットを広げる/design-principles/b/93/design-principles/b/7

カテゴリーC: フォーム系（7件）

新番号旧番号原則名旧URL新URL
C-139整合性を損なう操作を求めない/design-principles/c/39/design-principles/c/1
C-242よいデフォルト/design-principles/c/42/design-principles/c/2
C-343制限コントロールを活用する/design-principles/c/43/design-principles/c/3
C-445値を入力させるのではなく結果を選ばせる/design-principles/c/45/design-principles/c/4
C-546入力欄を構造化する/design-principles/c/46/design-principles/c/5
C-650ユーザーに厳密さを求めない/design-principles/c/50/design-principles/c/6
C-751入力サジェスチョンを提示する/design-principles/c/51/design-principles/c/7

カテゴリーD: レイアウト/配置系（7件）

新番号旧番号原則名旧URL新URL
D-110視覚ゲシュタルト/design-principles/d/10/design-principles/d/1
D-230ペンは紙の近くに置く/design-principles/d/30/design-principles/d/2
D-340入力フォームにはストーリー性を持たせる/design-principles/d/40/design-principles/d/3
D-441操作の流れを作る/design-principles/d/41/design-principles/d/4
D-566操作の近くでフィードバックする/design-principles/d/66/design-principles/d/5
D-684色やフォントを使いすぎない/design-principles/d/84/design-principles/d/6
D-785整然とレイアウトする/design-principles/d/85/design-principles/d/7

カテゴリーE: ナビゲーション系（6件）

新番号旧番号原則名旧URL新URL
E-159ウェイファインディング/design-principles/e/59/design-principles/e/1
E-260エスケープハッチ/design-principles/e/60/design-principles/e/2
E-373メニュー項目の位置を変化させない/design-principles/e/73/design-principles/e/3
E-480ドリルダウンは上→下、左→右/design-principles/e/80/design-principles/e/4
E-581左が戻るで右が進む/design-principles/e/81/design-principles/e/5
E-682モバイルでは包括的より階層的に/design-principles/e/82/design-principles/e/6

カテゴリーF: インタラクション/アニメーション系（6件）

新番号旧番号原則名旧URL新URL
F-18直接操作/design-principles/f/8/design-principles/f/1
F-263画面の変化をアニメーションで表す/design-principles/f/63/design-principles/f/2
F-364トランジションは両方向につける/design-principles/f/64/design-principles/f/3
F-465ユーザーの操作に対して0.1秒以内に反応/design-principles/f/65/design-principles/f/4
F-579ジェスチャはコマンド式ではなく直接操作式/design-principles/f/79/design-principles/f/5
F-690UIをロックしない/design-principles/f/90/design-principles/f/6

カテゴリーG: モーダル/確認系（5件）

新番号旧番号原則名旧URL新URL
G-132前提条件は先に提示する/design-principles/g/32/design-principles/g/1
G-254フールプルーフよりフェールセーフ/design-principles/g/54/design-principles/g/2
G-357黙って実行する/design-principles/g/57/design-principles/g/3
G-462回答の先送り/design-principles/g/62/design-principles/g/4
G-567プログレッシブ・ディスクロージャ/design-principles/g/67/design-principles/g/5

カテゴリーH: 情報表示系（6件）

新番号旧番号原則名旧URL新URL
H-125オブジェクトは自身の状態を体現する/design-principles/h/25/design-principles/h/1
H-228データよりも情報を伝える/design-principles/h/28/design-principles/h/2
H-331視覚的に何であるかを示し文字で説明する/design-principles/h/31/design-principles/h/3
H-452スクロール画面では続きがありそうに見せる/design-principles/h/52/design-principles/h/4
H-553プロパティの選択肢でプレビューを見せる/design-principles/h/53/design-principles/h/5
H-696色に依存させない/design-principles/h/96/design-principles/h/6

変更対象ファイル一覧

1. データファイル

  • apps/web/app/components/design-principles/data/principles.ts
    • 各原則の no プロパティを新番号に変更

2. Vueコンポーネント（49ファイル）

カテゴリーA

旧ファイル名新ファイル名
Principle11UserLanguage.vuePrincipleA1UserLanguage.vue
Principle33NounNavigation.vuePrincipleA2NounNavigation.vue
Principle44AffirmativeLabel.vuePrincipleA3AffirmativeLabel.vue
Principle47ConcreteVerb.vuePrincipleA4ConcreteVerb.vue
Principle55ConstructiveError.vuePrincipleA5ConstructiveError.vue

カテゴリーB

旧ファイル名新ファイル名
Principle4Signifier.vuePrincipleB1Signifier.vue
Principle48RadioCheckbox.vuePrincipleB2RadioCheckbox.vue
Principle49FlipFlop.vuePrincipleB3FlipFlop.vue
Principle72ButtonOrder.vuePrincipleB4ButtonOrder.vue
Principle74Highlight.vuePrincipleB5Highlight.vue
Principle78TouchSize.vuePrincipleB6TouchSize.vue
Principle93Hotspot.vuePrincipleB7Hotspot.vue

カテゴリーC

旧ファイル名新ファイル名
Principle39DataIntegrity.vuePrincipleC1DataIntegrity.vue
Principle42GoodDefault.vuePrincipleC2GoodDefault.vue
Principle43ConstrainedControl.vuePrincipleC3ConstrainedControl.vue
Principle45ChooseResult.vuePrincipleC4ChooseResult.vue
Principle46StructuredInput.vuePrincipleC5StructuredInput.vue
Principle50TolerantValidation.vuePrincipleC6TolerantValidation.vue
Principle51AutoComplete.vuePrincipleC7AutoComplete.vue

カテゴリーD

旧ファイル名新ファイル名
Principle10Gestalt.vuePrincipleD1Gestalt.vue
Principle30PenNearPaper.vuePrincipleD2PenNearPaper.vue
Principle40FormStory.vuePrincipleD3FormStory.vue
Principle41OperationFlow.vuePrincipleD4OperationFlow.vue
Principle66NearbyFeedback.vuePrincipleD5NearbyFeedback.vue
Principle84LimitStyles.vuePrincipleD6LimitStyles.vue
Principle85AlignedLayout.vuePrincipleD7AlignedLayout.vue

カテゴリーE

旧ファイル名新ファイル名
Principle59Wayfinding.vuePrincipleE1Wayfinding.vue
Principle60EscapeHatch.vuePrincipleE2EscapeHatch.vue
Principle73FixedMenu.vuePrincipleE3FixedMenu.vue
Principle80DrillDown.vuePrincipleE4DrillDown.vue
Principle81LeftBackRightForward.vuePrincipleE5LeftBackRightForward.vue
Principle82MobileHierarchy.vuePrincipleE6MobileHierarchy.vue

カテゴリーF

旧ファイル名新ファイル名
Principle8DirectManipulation.vuePrincipleF1DirectManipulation.vue
Principle63AnimateChanges.vuePrincipleF2AnimateChanges.vue
Principle64BidirectionalTransition.vuePrincipleF3BidirectionalTransition.vue
Principle65ResponseTime.vuePrincipleF4ResponseTime.vue
Principle79DirectGesture.vuePrincipleF5DirectGesture.vue
Principle90NoUILock.vuePrincipleF6NoUILock.vue

カテゴリーG

旧ファイル名新ファイル名
Principle32PreconditionFirst.vuePrincipleG1PreconditionFirst.vue
Principle54FailSafe.vuePrincipleG2FailSafe.vue
Principle57SilentExecution.vuePrincipleG3SilentExecution.vue
Principle62DeferDecision.vuePrincipleG4DeferDecision.vue
Principle67ProgressiveDisclosure.vuePrincipleG5ProgressiveDisclosure.vue

カテゴリーH

旧ファイル名新ファイル名
Principle25ObjectState.vuePrincipleH1ObjectState.vue
Principle28DataToInfo.vuePrincipleH2DataToInfo.vue
Principle31IconPlusText.vuePrincipleH3IconPlusText.vue
Principle52ScrollHint.vuePrincipleH4ScrollHint.vue
Principle53PreviewOptions.vuePrincipleH5PreviewOptions.vue
Principle96ColorIndependent.vuePrincipleH6ColorIndependent.vue

3. ページコンポーネント

  • apps/web/app/pages/design-principles/[category]/[no].vue
    • principleComponents のマッピングを更新

4. リダイレクト設定

  • apps/web/public/_redirects ファイルに旧URL→新URLのルールを追加
  • Cloudflare Pagesの _redirects 形式を使用
# デザイン原則 旧番号→新番号リダイレクト（301 恒久的）

# カテゴリーA
/design-principles/a/11 /design-principles/a/1 301
/design-principles/a/33 /design-principles/a/2 301
/design-principles/a/44 /design-principles/a/3 301
/design-principles/a/47 /design-principles/a/4 301
/design-principles/a/55 /design-principles/a/5 301

# カテゴリーB
/design-principles/b/4 /design-principles/b/1 301
/design-principles/b/48 /design-principles/b/2 301
/design-principles/b/49 /design-principles/b/3 301
/design-principles/b/72 /design-principles/b/4 301
/design-principles/b/74 /design-principles/b/5 301
/design-principles/b/78 /design-principles/b/6 301
/design-principles/b/93 /design-principles/b/7 301

# カテゴリーC
/design-principles/c/39 /design-principles/c/1 301
/design-principles/c/42 /design-principles/c/2 301
/design-principles/c/43 /design-principles/c/3 301
/design-principles/c/45 /design-principles/c/4 301
/design-principles/c/46 /design-principles/c/5 301
/design-principles/c/50 /design-principles/c/6 301
/design-principles/c/51 /design-principles/c/7 301

# カテゴリーD
/design-principles/d/10 /design-principles/d/1 301
/design-principles/d/30 /design-principles/d/2 301
/design-principles/d/40 /design-principles/d/3 301
/design-principles/d/41 /design-principles/d/4 301
/design-principles/d/66 /design-principles/d/5 301
/design-principles/d/84 /design-principles/d/6 301
/design-principles/d/85 /design-principles/d/7 301

# カテゴリーE
/design-principles/e/59 /design-principles/e/1 301
/design-principles/e/60 /design-principles/e/2 301
/design-principles/e/73 /design-principles/e/3 301
/design-principles/e/80 /design-principles/e/4 301
/design-principles/e/81 /design-principles/e/5 301
/design-principles/e/82 /design-principles/e/6 301

# カテゴリーF
/design-principles/f/8 /design-principles/f/1 301
/design-principles/f/63 /design-principles/f/2 301
/design-principles/f/64 /design-principles/f/3 301
/design-principles/f/65 /design-principles/f/4 301
/design-principles/f/79 /design-principles/f/5 301
/design-principles/f/90 /design-principles/f/6 301

# カテゴリーG
/design-principles/g/32 /design-principles/g/1 301
/design-principles/g/54 /design-principles/g/2 301
/design-principles/g/57 /design-principles/g/3 301
/design-principles/g/62 /design-principles/g/4 301
/design-principles/g/67 /design-principles/g/5 301

# カテゴリーH
/design-principles/h/25 /design-principles/h/1 301
/design-principles/h/28 /design-principles/h/2 301
/design-principles/h/31 /design-principles/h/3 301
/design-principles/h/52 /design-principles/h/4 301
/design-principles/h/53 /design-principles/h/5 301
/design-principles/h/96 /design-principles/h/6 301

実装手順

Phase 1: 準備

  • 本ドキュメントの作成（完了）
  • 現在の状態をコミット

Phase 2: データ変更

  • principles.ts の no プロパティを新番号に変更
  • principleComponents のマッピングを更新

Phase 3: ファイル名変更

  • 各カテゴリーのVueコンポーネントファイルをリネーム
  • import文を更新

Phase 4: リダイレクト設定

  • apps/web/public/_redirects に旧URL → 新URL のルールを追加
  • 形式: /design-principles/a/11 /design-principles/a/1 301（301は恒久的リダイレクト）

Phase 5: 検証

  • 全ページの表示確認
  • リダイレクトの動作確認
  • サイドバーの番号表示確認

注意事項

  1. 元の番号との対応
    • 元の書籍の番号（1〜100）は principles.ts のコメントや本ドキュメントで参照可能に残す
    • 将来、元の番号で検索したい場合に備える
  2. 新規原則の追加
    • 今後は各カテゴリーの末尾に連番で追加（例: A-6, B-8 など）
    • 元の書籍にない独自の原則も追加可能に
  3. リダイレクトの永続性
    • 旧URLで外部からリンクされている可能性を考慮
    • リダイレクトは恒久的に維持する

参考

  • 元のデザイン原則リスト: /2026-01-10/design
  • 実装カテゴリー分類: /dist/_raw/ui-design-principles.md