設計システムとそのドキュメント

1）設計システムとは何ですか、なぜそれが必要なのですか

デザインシステムは、UXの予測可能性、開発スピード、スケーラビリティを提供するトークン、コンポーネント、プラクティス、およびドキュメントのセットである、インターフェイスのための単一の真実のソースです。

• すべての製品における視覚的および行動的レイヤーの一貫性。
• スピード：コンポーネントの再利用、レビューコストの削減。
• 品質：一般的なA11yパターン、ローカリゼーション、テスト、コンテンツ標準。
• 管理可能性：明確な責任、リリース、ロードマップ。

2）設計システムアーキテクチャ（レイヤー）

1.デザイントークン（基礎）：色、タイポグラフィ、寸法、半径、影、インデント、状態、セマンティックトークン（'color。表面。警告'、'スペース。xs'）。
2.UIコンポーネント：ボタン、入力フィールド、モーダルウィンドウ、ドロップダウン、テーブル、トースト、バナー、アラート、空の状態、スケルトン。
3.パターンと構成：KYCフォーム、支払いフロー、ゼロ結果、ステップマスター、コンテンツカード。
4.コンテンツガイド（マイクロコピー）：トーン、用語辞書、エラー/成功パターン、プッシュ/バナー。
5.インフラ：A11y、テスト、ローカリゼーション、バージョン、貢献者（貢献）へのガイド。

3）デザイントークン： 原則

Semantics> 「raw」スタイル。'color'を使用します。テキスト。'#6B7280'ではなく'muted'です。
テーマ化とプラットフォーム。ソーストークン→プラットフォームマッピング（Web、 iOS、 Android、電子メール）。
トークンレベルでのライト/ダークテーマとWCAGコントラスト。
グローバルおよびコンテキストスケール：'space。2'、'半径。MD'、'高度。1'、'不透明度。無効になっています。
トークンのバージョン管理：変更-廃止ポリシーと移行ノートを通じて。

4）コンポーネント： ドキュメント内のページの要件と構成

• 説明と目的。使用する/使用しないとき。
• バリエーション/状態。寸法、タイプ（プライマリ/セカンダリ/ゴースト）、無効、ロード、破壊。
• アクセシビリティ。役割、キーボードナビゲーション、'aria-'、コントラスト、フォーカスリング。
• マイクロコピーのテキストと例。有効なラベル/プレースホルダ、間違い、ヘルプ。
• コード例。最小のAPI、制御/制御なし。
• フォームとi18nとの統合。ロングラインケース、数字/通貨/日付。
• アンチサンプル。誤った使用パターン。
• テストマトリックス。ビジュアルスナップショット、ユニット/インタラクション、スクリーンリーダー。

5）組成パターン（レシピ）

登録フォーム/CUS：ステップバイステップウィザード、進行状況、検証インライン+サマリー、エラーパターン。
支払の流れ：方法の選択、料金、日付、同じ方法規則、確認および状態。
空の状態：context+value+CTA、検索結果ゼロ。
成功/エラーメッセージ：ステータス階層、ビジュアルトークン、トースト/バナー/モーダル。
ナビゲーションとフィルタ：グローバル検索、クイックプリセット、タグ。
パターンページには、コピーの準備ができたコンポーネントの構成が、マイクロコピーとA11yノートで表示されます。

6）内容ガイド（声及び調子、microcopy）

声：明確な専門家；トーンはコンテキスト（オンボーディング、支払い、セキュリティ）に依存します。
用語の統一された辞書：支払い、ボーナス、制限、KYC-製品ごとに1つの値。
テンプレート：CTA、エラー、警告、成功、空の状態、通知。
Localization-first：地域ごとの行、数字/通貨/日付の長さの在庫。
A11y-vocabulary：明確なラベル、アリア説明、あいまいさなし。

7）システム標準としてのアクセシビリティ（A11y）

基本的な基準：WCAG 2。コントラスト用の1 AA、フォーカスは常に表示されます、キーボードナビゲーション。
役割と属性：コンポーネントは'role'、 'aria-label'、 'aria-describby'、トースト/アラートのライブ領域を記述します。
画面上の読者：フレーズの例、読書順序、正しいステータス（'assertive/polite'）。
テスト手順：自動チェック+手動スクリプト。

8）ローカリゼーションと国際化

コンポーネントコード+コンテキスト説明の横にあるi18nキー。
フォーマットユーティリティを通じた数値/通貨/日付；テンプレートでテキストをハードコードしないでください。
長さテスト：「長いドイツ語」、「狭いモバイル」、RTLバリアント。
言語のトーン：重要なステップ（支払い/セキュリティ）のトーンマップ。

9）ドキュメント： 構造とナビゲーション

1.はじめに：使命、原則、責任の分野。

2.トークン：色、タイポグラフィ、グリッド、寸法、影、状態、テーマ。

3.コンポーネント：フィルタ付きカタログ（役割別、プラットフォーム別、A11y単位）。

4.パターン：シナリオ（フォーム、支払い、空の状態、成功/エラー）。

5.コンテンツガイド：音声とトーン、辞書、マイクロコピーのテンプレート。

6.アクセシビリティ：標準、チェックリスト、テストケース。

7.ローカリゼーション：原則、例、市場別の用語集。

8.統合とコード：インストール、バージョン、例、移行方法。

9.貢献：貢献プロセス、デザインレビュー、コードレビュー、完了の定義。

10.ChangelogとRoadmap：リリース、非推奨、開発計画、既知の問題。

10）ガバナンスとプロセス

役割：システムオーナー（DesignOps/UX Platform）、メンテナ（design/FE）、コンサルタント（BE、 A11y、ローカリゼーション）。
変更委員会：リクエスト評価、優先順位付け、API/トークン調整。
プロセス：新しいコンポーネントのRFC、内部課題フォーム、バグのSLA。
Doneの定義：design （Figma） ↔ code （UIパッケージ）↔ dock （example+guide） ↔テスト。

11）貢献： 追加/変更する方法

RFCテンプレート：問題→オプション→選択した決定→A11y→i18n→移行→リスク。
フローPR：デザインレビュー→コードレビュー→UXコピーライター→A11yチェック→リリースノート。
下位互換性ルール：非破壊性のためのマイナー/パッチ、メジャー-廃止および自動移行が可能な場合。

12）バージョン管理、リリース、移行

パッケージ用のSemVer（'@company/ds-core'、'@company/ds-forms'、'@company/ds-charts'）。
リリースノート：トークンの変更、コンポーネントAPI、デフォルトの動作、変更の破棄、移行ガイド。
廃止：ドックマークアップ、リンタルール、大量置換のためのコードモッド。
デザイントークンパイプライン：シングルソース（JSON/YAML）→プラットフォームビルド（CSS vars、 iOS、 Android）。

13）質のテスト

行動と条件のユニットテスト。
ビジュアルスナップショット（テーマ/状態の回帰）。
A11yテスト：スクリーンリーダーの自動+手動スクリプト。
重要なフロー（登録、支払い、KYC）のためのケースをE2Eします。
Perf予算：バンドル/レンダリング制限と重い中毒禁止。

14）設計システム成熟度の指標

採用：％DSを使用したスクリーン/リポジトリ。
速度：レイアウトから配達までの時間。
品質：1リリースにUI/A11y欠陥。
一貫性：DS外の「使い捨て」コンポーネント/スタイルの数。
Docs：ドックコンポーネントカバレッジ、内部オーディエンスNPS（設計者/開発者/アナリスト）。

15）アンチパターン

意味のないパレットとしてのトークン（「just color」）。
ドキュメントなしで、極端なケースの例なしのコンポーネント。
A11yを無視する（フォーカスなし、コントラストが低い、アリアなし）。
廃止および移行ガイドなしでバージョン管理を破ります。
コンポーネント内の隠しロジック（UI動作の代わりにビジネスルール）。
API拡張の代わりに狭いケースのコンポーネントの複製。

16）チェックリスト

• セマンティックな名前と目的。
• どちらのテーマでも対照的です。
• スケールと使用法が文書化されています。

• オプション/状態がカバーされています。
• A11y-description、 'aria-'、フォーカス。
• マイクロコピーの例（ラベル、エラー、ヒント）。
• コードサンプルとエッジケース（長い線、負荷、空）。
• Unit/visual/A11yテストは緑色です。

• before/afterの例を含むノートをリリースします。
• 移行ガイドPUの廃止。
• ストーリー/デモ、ドック内のリンクを更新しました。

17）例の前後

• 異なるプライマリボタン：色/半径/インデントが一致しません。異なるCTAテキスト。

• トークンを持つ単一の'Button'： 'size=md'、 'variant=primary'、 'radius=lg'、 'spacing=md'、 textのスタイル「action+object」。

• 技術的なメッセージ、プロンプトはありません。

• コンポーネント'無効な日付形式です。DDを使用します。MM。 YYYY。'+オートフォーカス。

18）コンポーネントページテンプレート（スケルトン）

名前： ボタン

説明：アクションを開始します。スクリーンごとの1つのメイン。
オプション：プライマリ、セカンダリ、ゴースト、破壊的な；sm/md/lg寸法。
状態：ホバー、フォーカス、アクティブ、ロード、無効。

A11y： キーボードから利用可能。切り替え可能な'aria-pressed'

Microcopy： "Save changes"、 "Continue verification。""OK"は避けてください"

コード（APIの例）：'Button {variant、 size、 icon、 loading}'。
アンチサンプル：同じ階層レベルの二重プライマリ。
テスト：ビジュアルスナップショット、コントラスト、フォーカスリング。

19）設計システム実装Playbook（ロールアウト）

1.インターフェイス監査：色/タイポグラフィ/コンポーネント/パターンのインベントリ。
2.MVPトークンと主要コンポーネント：ボタン、入力、選択、モーダル、アラート、EmptyState、トースト。
3.ドキュメンテーションとストーリーブック：ライブの例、コードスニペット、ガイド。
4.パイロット製品：ウィジェットの交換、フィードバックの収集。
5.移行ガイド：code-mods、廃止規則。
6.セットの拡張：テーブル、ペジネーション、フォームフォーラム、ウィザードステップ。
7.スケーリング：製品パターン（決済、KYC）、アナリティクスおよびA/Bとの統合。
8.サポート：質問チャネル、SLAの内部研修会。

20）クイックドキュメンテーションテンプレート

• 名前：'color。国境だ。warning'
• 目的：警告フレームとバナー通知/警告
• コントラスト：色に対するAA。表面。デフォルト［default］
• しないでください：小さなサイズのテキストに使用します
• Related： 'color。表面。警告'、'アイコン。warning'

パターンパターン： 空の状態（NoResults）

目的： 「間違った」と感じずにクエリを修正する"

構成： 見出し（卸売）、テキスト（1-2文）、CTA、二次CTA、アイコン/イラスト

Microcopy： 「{query}」によって何も見つかりませんでした"フィルタをリセットするか、クエリをリファインする"

A11y： 'role=「status」、' aria-live=「polite」'

最終チートシート

セマンティックトークン+規律A11y=ベース。
フルコンポーネントページ：目的、バリアント、A11y、マイクロコピー、コード、テスト。
パターン=既製のテキストとルールを持つコンポーネントの構成。
ドキュメント-製品：バージョン、リリース、移行、貢献プロセス。
成熟度を測定：採用、速度、欠陥、一貫性、内部コマンドのNPS。