実装前の準備
3つの必須成果物
- Visual Thesis -- 画面の外観（レイアウト、色、スペーシング）
- Content Plan -- 表示テキスト（ラベル、エラー、空状態）
- Interaction Thesis -- 画面の振る舞い（遷移、ローディング、キーボード）
Private / PM Only
Access Protected
UI/UX Canonical Guideline
TATEKANOS 全製品共通の UI/UX 基準。新規画面・大規模改修は本ガイドラインに準拠すること。
正本ドキュメント
canonical guideline は gems-project リポジトリに格納されています。本ページは PM 向けサマリです。
docs/Tatekan/TATEKANOS_UI_UX_Canonical_Guideline.mdCanonical UI/UX Guideline（18セクション・574行）
スコープと優先順位
- 適用対象: Toriteki、Mitsumori、TATEKAN Control、dMemo、TATEKAN Time、将来の全アプリ
- 優先順位: Family canonical > Product supplement > Screen-level decisions
- Product supplement は family ルールを狭めることはできるが、矛盾させてはならない
- 旧 Toriteki UX ドキュメントは product supplement に再分類（family baseline ではない）
デザインデフォルト
App/Admin 画面
- 少ない色数、製品ごとに1アクセントカラー、最小限の装飾
- ダッシュボードカードモザイク禁止、装飾アイコン禁止
- タスクファースト密度: 高密度 OK だがスキャン可能であること
- 画面ごとに1つの明確なプライマリアクション
安全性
セーフバイデフォルト
- 破壊的アクションは視覚的に分離し、確認を必須化
- 削除/キャンセル/拒否の前に結果テキストの表示が必須
- 段階的複雑性: 高度な操作はデフォルトで非表示
成熟度
既存ワークフローの尊重
- リデザインは摩擦の削減が目的。目新しさの強制ではない
- 成熟した画面の既存 UI 言語を保全する
- PM 承認のもとでのファミリー全体クリーンアップは許可
完了ゲート
3つのゲートを全て通過しない限り UI 変更はリリースしない。
- Gate 1:
code_checked-- 有効な HTML、i18n ラップ済み、共有コンポーネント再利用、インラインスタイルなし - Gate 2:
ui_verified_desktop-- 1366x768 で検証済み、視覚階層が明確、プライマリアクションがフォールド上、スケルトンローディング - Gate 3:
ui_verified_mobile-- 390x844 で検証済み、タッチターゲット 44px 以上、単一カラムフォーム、テーブルのカードフォールバック
禁止パターン
- 全画面で禁止: ダッシュボードカードモザイク、装飾アイコン、プレースホルダーのみのラベル、色のみの状態表示、成功モーダル、ホバー専用操作、データテーブルの無限スクロール
- 業務ワークフローで禁止: 希少性演出、デコイ価格、変動型報酬、ゲーミフィケーション（ポイント/バッジ/ストリーク）、ダークパターン
- マーケティング面での例外は PM 明示承認が必要
全文ドキュメントの主要セクション
- 1. Purpose（目的）
- 2. Scope and Precedence（スコープと優先順位）
- 3. Core Principles（コア原則 -- 6サブ原則）
- 4. Screen Types（画面タイプ: app/admin、公開、マーケティング）
- 5. Visual System（色、タイポグラフィ、スペーシング、階層、デザイントークン）
- 6. Information Architecture（ナビゲーション、ページ構造、段階的開示、空状態）
- 7. Forms and Data Entry（ラベル、バリデーション、保存/キャンセル、破壊的操作）
- 8. Table and List Ergonomics（ヘッダ、フィルタ、行アクション、モバイル、ページネーション）
- 9. Interaction Rules（ドハティ閾値、スケルトン、フィードバック、キーボード、クリックターゲット）
- 10. Status and Workflow Visibility（状態認識、ステップ表示、ステータスバッジ）
- 11. Copy Rules（i18n、トーン、用語一貫性）
- 12. Accessibility and Responsiveness（WCAG 2.1 AA、ブレークポイント、モバイル/デスクトップ）
- 13. AI-Assisted UI Design Rules（AI支援UIデザインルール）
- 14. Completion Gates（完了ゲート）
- 15. What To Avoid（禁止パターン）
- 16. Product-Specific Supplements（製品固有補足）
- 17. Canonical Adoption Notes（導入ノート）
- 18. Summary（サマリ）