単一のインターフェイス言語
1）単一のインターフェイス言語は何であり、なぜそれが必要であるか
Unified Interface Language （NEI）は、デザイナー、エンジニア、アナリスト、コンテンツ作成者が共有する概念、視覚的規則、および相互作用の共通システムです。
目的：- 一貫性-製品とチーム全体で同じコンポーネントと用語。
- スピード：クイックビルド、ホリバー数が少なく、オンボーディングが高速です。
- 品質：一貫したUXパターン、「デフォルトで」可用性。
- スケーラビリティ：「UI動物園」に分けることなく、安全に進化します。
2）単一の言語のレイヤー
1.トークン（色、タイポグラフィ、寸法、影、インデント、半径、アニメーション）。
2.コンポーネント（ボタン、入力フィールド、表、グラフ、モーダル、トースト、タブ）。
3.パターン（フォーム、検証、ステップバイステップのウィザード、リスト/テーブル、通知）。
4.コンテンツ（マイクロコピーライティング、用語、エラーメッセージ）。
5.図像とイラスト（家族、スタイル、寸法と線）。
6.可用性とi18n/RTL （A11yルール、翻訳性、ロケール）。
7.プロセス（バージョン、ガイド、レビュー、リンター、ショーケース、例）。
3）デザイントークン（表現力の基礎）
トークンは、すべての製品で再利用される名前付きの値です。
3.1トークン構造（例）
json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}3.2ネーミングトークン
一般的なものから特定のものまで：'color。アクセント。'primary'、 'primaryBlue'。
ネーミングでブランドに縛られることなく（ブランドはトピックであり、トークン名ではありません）。
グラデーション：'fg。muted'、'fg。primary'、'fg。inverse'。システムなしで名前（'blue500'）の明るさをエンコードしないでください。
3.3テーマトークン
明るく、暗く、対照的：名前ではなく値を変更します。
テーマ-レイヤーをオーバーライドしても、UIは一貫しています。
4）コンポーネント： 契約、州、可用性
コンポーネント=Visual+Behavior+Props Contract+A11y。
4.1ボタンの契約例
ts type ButtonProps = {
kind: "primary" "secondary" "tertiary" "danger";
size: "sm" "md" "lg";
icon?: "plus" "download" "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};状態：'default/hover/active/focus/disabled/loading'。
可用性：フォーカスリング、ターゲットサイズ≥ 40-48 px、トグル用の'aria-pressed'。
4.2コンポーネント保証
安定した寸法（線の高さ、パディング）。
ボックス外のアクセシビリティ（ロール/アリア、キーボード、コントラスト）。
不変量：フィールド内のエラーは常に下部にあり、'aria-descripedby'があります。
5） UXパターン（反復可能な論理）
フォーム：左/上のラベル、プレースホルダー≠ラベル、並んで+要約エラー、入力マスクとプロンプト。
モーダル：1つのメインCTA、 'Esc'が閉じ、フォーカストラップ、フォーカスリターン。
テーブル/リスト：並べ替え、粘着ヘッダー、ページネーション、エクスポート。
フィルター：明示的な適用ボタン、リセット、保存されたプリセット。
通知：トースト≤ 3-5 s、フォーカスで一時停止、'role=「status/alert」'。
ダッシュボード：トップインサイト→コンテキスト→グラフィックス→CTA。
6）共通の用語およびマイクロコピーライティング
6.1用語集
ビジネス用語とUX用語の単一の用語集を維持します。各インターフェイスの記事はそれを参照します。
ダブルレットの場合-検索の同義語として、1つの単語（「wallet」と「balance」）、 2つ目の単語を選択します。
6.2テキストのルール
簡単にそして事件について；ジャーゴンを避けて。
エラー-何をすべきかを説明します：「YYYY-MM-DD形式で日付を指定します」。
見出しは名詞です。ボタン-動詞（「Save」、 「Cancel」）。
一貫した単位：UTCまたはロケールの日付/時刻、コード付き通貨（EUR、 USD）。
7）図像とイラスト
家族は同型です：単一の角度、ラインの厚さ、格子24 × 24。
ステータスとセマンティクス：色-セカンダリ；図形/アイコン+テキスト-プライマリ。
スケーリング：ピクトグラムは異なる密度（1 ×/2 ×/3 ×）では「浮遊」しません。
8）可用性（A11y）およびローカリゼーション（i18n/RTL）
コンポーネントはWCAG AAを受けます：コントラスト、キーボードナビゲーション、フォーカス、'prefers-reduced-motion'。
翻訳された文字列-リソースで、コードではありません。プレースホルダと数値/日付形式はローカライズ可能です。
RTL：ミラーリングアイコン、正しいタブ順、キーボードからのDnDロジック。
9）数字、日付、通貨、フォーマット
日付/時刻：ISO-8601、 True Time Point-UTC；ユーザー-ロケール。
通貨：マイナーユニット/小数文字列；常にコードを指定します（例："€12。34」または「12。34 EUR"-ロケールによって）。
興味：'12。3％'とポイント'+1。2 pp 'clearly区別します。
丸め：重大な数字に；多数のための「k/m」。
10）ガバナンス： 役割、アーティファクト、チャネル
Design Language Council （DLC）：トークン/コンポーネントの所有者、RFCの主張。
アーティファクト：- コンテンツセンター（Figma/Code）+ライブカタログ。
- ドキュメント：ガイド、パターン、A11y、コンテンツガイド。
- 日付、レベルの変更履歴（追加/変更/削除/削除/固定）。
- チャンネル：毎週のデザインシンク、Slackチャンネル、実装ショーケース。
11）バージョン管理と進化
コンポーネント・パッケージのSemVer： 'MAJOR。マイナー。PATCH'。
MINOR-additive：新しいトークン、デフォルトのprops、新しいコンポーネント。
MAJOR-breaking： propsの削除、セマンティクスの変更→移行ガイド。
Decomments：警告、ウィンドウ≥ 90日、互換性フラグ。
12）リンターおよび自動点検
UI-linter：トークン以外の禁止色、アンチパターン（button-diva、 disabled outline）。
A11y-checks：コントラスト、ロール/アリア、フォーカス、キーボード。
i18n-linter：コード内の「hard」行、間違ったプレースホルダ。
スクリーンショットテスト：コンポーネントの視覚的な回帰。
可視化API契約（もしあれば）：データ型、範囲、署名。
13）部品のショーケース（storybook/sandbox）
プロップコントロール、コード、ステート、A11y-checkerを使用した実例。
「レシピ」：登録フォーム、ステップ3ウィザード、テーブル+フィルタ、modalka+トースト。
「ロケールのサンドボックス」：言語/フォーマット/RTLを切り替えます。
14）名前と構造パターン
14.1コンポーネント（BEM/セマンティクス、 CSS例）
.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/コードで-propsの単調な名前：'size'、 'kind'、' disabled'、'onClick'。
14.2ライブラリファイル構造
/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog15）アンチパターン
トークン以外の「自由な」色/インデント。
重複コンポーネント：「ButtonV2,」 「PrimaryButtonNew」。
唯一のフィールドラベルとしてのプレースホルダ。
アウトラインとdivボタンを無効にします。
予測不可能なホバー/アクティブ/無効。
通常の翻訳の代わりに翻訳用語。
更新中の移行ガイドの欠如。
16）単一の言語品質指標
カバレッジ-コンテンツライブラリを使用するスクリーンの割合。
整合性インデックス：トークンと「手動」スタイルを再利用します。
A11yパスレート-WCAG AAを通過するコンポーネントの割合。
欠陥エスケープ：1kコミット販売におけるUI/コンテンツの欠陥。
Time-to-Ship-DLSの前後に典型的な画面を実装する時間。
採用：DAUのショーケース、部品/パターンが付いているPR数。
17）スクリーンチェックリスト
- 使用済みトークン（色/インデント/半径）、ハード値ではありません。
- ライブラリからのコンポーネント；カスタム-RFCのみ。
- アクセシビリティ：キーボード/フォーカス/コントラスト/ロール/アリア。
- 単位：日付/通貨/パーセンテージ-フォーマットごとのガイド。
- マイクロコピー：ボタン=動詞、エラー=アクションを修正します。
- ロケール/RTLはレイアウトを壊しません。
- States： loading/empty/errorが提供されます。
- 視覚回帰テストを更新しました。
18）実施計画（3回繰り返し）
イテレーション1-財団（2-3週間）
トークン（色/タイポグラフィ/間隔/動き）、基本コンポーネント（ボタン、入力、選択、ツールチップ、モーダル）、コンテンツガイド（トーン、ラベル、エラー）。
ショーケース（ストーリーブック）とA11y-checker、トークンリンタ。
イテレーション2-パターンとローカライズ（3-4週間）
フォーム/テーブル/フィルタのパターン、アイコンパック24 × 24、 RTL/i18nサンドボックス、数字/日付/通貨のルール。
SemVer、 changelog、 RFC/移行プロセス、オートテスト（visual+A11y）。
イテレーション3-スケールと進化（連続）
コンポジション・コンポーネント（ウィザード、DataGrid、チャート・プリミティブ）、テマイズ（ライト/ダーク/コントラスト）、品質指標レポート、定期的なUX監査。
19） ミニFAQ
「一気に」必要なのでしょうか"?
いいえ、そうではありません。トークンとベースコンポーネントから始め、パターンとプロセスを追加します。
チームにYEIを使用するように説得する方法は？
賞金を表示します：スピード、欠陥の少ない、既製のスクリーンレシピと箱からA11y。
レガシースクリーンをどうしたらいいですか？
移行計画、トークンによるブリッジスタイル、優先画面-まず。
合計
単一のインターフェイス言語はコンポーネントライブラリだけではありません。これはルールとプロセスのシステムで、トークンは表現力、コンポーネント-行動と可用性、パターン-意思決定の再現性、ガバナンスとメトリクス-持続可能な進化を設定します。あなたの言語を明確にし、検証可能で拡張可能にします-そして、あなたの製品は、均一に、迅速かつ確実に見て、動作します。