typeui-fundamentals

デザインの基本原則 — エージェント向け指示

パターンがなぜ機能するのか、どのように正しく適用するのか、そしてどのようなアクセシビリティ要件が譲れないのかを定める、普遍的なデザイン原則です。これらは時代を超え、デザインシステムに依存しない基盤であり、分野やワークフローの段階を問わず、あらゆる画面に適用されます。

読み込み順序

デザインシステム（SKILL.md / DESIGN.md とトークンモジュール）を読み込んだ後に、これらのファイルを読んでください。デザインシステムはどのトークンを使うかを示し、これらのファイルはその判断がなぜ正しいのか、また原則へのよくある違反をどのように避けるかを説明します。

モジュール一覧

ファイル	目的
ui-principles.md	普遍的なビジュアルデザイン原則 — 階層、レイアウトのリズム、タイポグラフィの配置、色彩理論、奥行きとレイヤー、インタラクションデザイン、レスポンシブな適応、コンポーネントの振る舞い
spacing-principles.md	余白に関する原則 — 4ポイントグリッド、近接によるグループ化、内側と外側の間隔、垂直・水平方向のリズム、見出しから段落への間隔、セクションとコンポーネントの間隔の段階
ux-principles.md	インタラクションとコントロールの原則 — UXの法則30項目、ボタンとコントロールの状態仕様（9状態）、ホバー・アクティブ時の手法、タッチターゲット、認知負荷、フィードバックループ
typography-principles.md	タイポグラフィに関する原則 — 文字体系の基盤、スケールとモジュラ比、読みやすさと行長、アクセシビリティ、レスポンシブな文字サイズ、文字によるブランドトーンの表現
accessibility.md	WCAG 2.1/2.2への準拠 — コントラスト比、情報を色だけで伝えないためのルール、フォーカスの可視性、キーボード操作、モーションの安全性、ターゲットサイズ、テキスト間隔、セマンティック構造、ARIA

これらのファイルに含まれないもの

これらのファイルでは、次の内容は定義しません。

• ワークフローの段階（考える → 構築する → 確認する → リリースする）— skills/vertical/SKILL.md を参照
• 品質ゲートや監査 — skills/vertical/inspect.md、review.md、preflight.md を参照
• アンチパターンの一覧 — skills/vertical/anti-patterns.md を参照
• 業界固有のコンテンツ — skills/vertical/team-social-saas.md を参照
• デザイントークンやコンポーネント仕様 — skills/design-system/SKILL.md を参照

競合の解決

情報源の内容が食い違う場合：

1. 具体的な値（色、サイズ、間隔トークン、コンポーネント仕様）は、デザインシステムを優先します。
2. 構造上の原則（階層、アクセシビリティ、モーションのロジック）は、基本原則（このレイヤー）を優先します。
3. プロセスの判断とコンテンツ構成（セクションの順序、必須セクション、業界のトーン）は、分野別の定義を優先します。

アクセシビリティはどのレベルでも譲れません。あらゆる場面で、審美的な好みより優先されます。

デザインシステムに記載がない場合は、これらの原則に従う

システムのトークンやコンポーネントのルールで扱われていないデザイン上の判断には、ここに記載された原則を適用します。デザインシステムに決して反してはいけません。原則とデザインシステムのルールが競合する場合は、デザインシステムを優先してください。競合はレビューのために報告してください。