基礎

判断モデル

システムは プリミティブ → セマンティックロール → コンポーネント契約 の順で使います。プリミティブは材料を提供し、セマンティックロールはテーマが変わっても維持する意図を示し、コンポーネントはその意図を再利用可能な動作にします。プロダクト UI では通常、セマンティック層またはコンポーネント層から使ってください。

1. 画面に必要な関係や意味を決めます。
2. 対応するセマンティックトークン、タイポグラフィ、余白のレシピを選びます。
3. コンポーネント契約を使い、意図的な局所カスタマイズに限り --tr-* フックを上書きします。

基本原則

• 値より意味: パレットの段階ではなく、surface、text、primary、ステータスロールを選びます。
• 装飾より階層: 色で強調する前に、文字の役割と余白で読み取る順序を作ります。
• 関係を示す余白: 狭い間隔は詳細をまとめ、広い間隔はコンポーネント、タスク、セクションを分けます。
• 動作はコンポーネントが担当: 基盤は共通の判断を提供し、コンポーネントは操作とアクセシビリティを担います。

運用画面への適用

4 つの学習ルート

1. 基本の視覚要素: カラーとテーマ、タイポグラフィ、スペーシング
2. レイアウトと操作: レスポンシブレイアウト、形状と境界、コントロールと状態
3. 奥行きと動作: レイヤーとエレベーション、モーション、アクセシビリティ
4. 実装とアイデンティティ: Tailwind リファレンスで実装方法を確認してから、承認済みのロゴとアプリアイコンを選びます。