UXガイドラインとインターフェイス標準
1）原則
美しさの前の明快さ。意味と行動は1-2秒で明らかです。
1画面につき1つのターゲット。他のすべては二次または非表示です。
一貫性。同じパターン=同じ期待値。
デフォルトの可用性。コントラスト、フォーカス、キーボード、音声演技。
コンテクストチュアリティ。ヒントとテキストは、まさに必要な場所です。
ローカリゼーションファースト。線の長さ、フォーマット、文化-最初のデザインで。
リバーシビリティ。危険な行為はキャンセル/確認することができます。
測定可能性。各ルールにはメトリック（ステップ変換、時間、エラー）があります。
2）格子、インデントおよびリズム
格子：4/8 ptピッチ；列：12（デスクトップ）、6（タブレット）、4（モバイル）。
内部コンポーネントのインデント：4の倍数；外部-8/ 12/16/24。
縦のリズム：タイトル→字幕→→アクションコンテンツ（CTA）。
境界と仕切り：経済的です。「空気」とタイポグラフィの階層を好む。
3）タイポグラフィ
ピンスケール：12/14/ 16/20/24/32/40（ボディ16）。
行の高さ：1。4–1.6テキストの場合、1。2–1.タイトルのための3。
線の長さ：45-75文字（デスクトップ）、35-55（モバイル）。
強調表示：セマンティックアクセントの太字；キャップ-ラベルのみ。
読みやすさを声に出して：テキストは自然に聞こえるはずです。
4）色および対照
意味：'success/info/warning/error/neutral'。
コントラスト：WCAG最小2。1 AA（テキスト/背景≥ 4。5:1;大きい≥ 3：1）。
色≠唯一の信号です。アイコン/テキスト/フォームを追加します。
フォーカスリング：常に表示されます（CSSでは無効にしないでください）。
5）ナビゲーションと情報アーキテクチャ
ユーザーパス："私はどこにいるのですか？何があるの？次は何ですか"-明らかに。
メニュー階層：メインナビゲーションで2つのレベルを≤します。
パン粉：深いセクションのため。
検索：複雑なディレクトリでグローバルに利用可能。ホットキー'/'。
ナビゲーション状態：アクティブなタブ/ページがトークンでハイライトされます。
6）部品およびパターン
デザインシステムのコンポーネントを使用します（「手作り」なし）。
スクリーンごとの1つのprimary-CTA；他は二次/三次です。
States： default/hover/focus/active/disabled/loading-各インタラクティブに必須。
空の状態：context+value+CTA（+セカンダリリンク）。
一般的なアラート：画面ごとに1つのページアラート+ローカルインラインプロンプト。
7）フォーム、検証、エラー
ラベルは必須です。プレースホルダはフォーマットの例であり、置換ではありません。
ぼかしのインライン検証、送信するためのサマリーエラー。
エラーメッセージ：何が問題か++制約/フォーマットを修正する方法。
オートスクロールし、最初のエラーにフォーカスします。'aria-invalid'、 'aria-descripedby'。
マスクとフォーマット：プロンプトですが、入力を壊さないでください（paistは可能です）。
データの安全性：再起動/エラー中に何も失わないでください。
8）条件およびフィードバック
成功：トースト2-4 s、ニュートラル-ポジティブなトーン、CTA「次は何ですか」。
情報/通知：ソフトバナー/タイプ、ストリームをブロックしません。
警告/エラー/クリティカル：視覚的/意味的に階層；critical-モーダル/バナーと明示的なアクション。
ローディング：スケルトン>スピナー；待ち時間の評価>3 s。
9）内容およびマイクロコピー
三つの答えのルール：何が起こっているのか→なぜ→次に何をすべきか。
CTA：アクション動詞+オブジェクト（「Save changes」、 「Pass verification」）。
数字/日付/通貨：ローカルフォーマット。
調子：友好的；ストレスの多いステップで（支払い/セキュリティ）-中立。
10）空室状況（A11y）
フルキーボードナビゲーション；論理的なタブオーダー。
トースト/ステータスのインタラクティブなライブ領域のための役割と'aria-'。
コントラスト、フォーカスリング、インタラクティブサイズ≥ 44 × 44 px。
アイコン/画像のテキストの代替；'th'/'scope'を持つテーブル。
チェック：自動（linter/scanner）+スクリーンリーダーの手動スクリプト。
11）ローカリゼーションと国際化
すべての文字列はコンテキストi18nキーです。
「長い言語」（DE/TR）、 RTLモードのテスト。
数字/通貨/時刻-書式設定ユーティリティ。
トーンマップ：シナリオによる形式/感情の程度（オンボーディング/支払い/セキュリティ）。
12）レスポンシブネス（Responsiveness）
ブレークポイント：360/768/1024/1280+。
モバイルファースト：片手で利用可能なクリティカルパス、親指領域のCTA。
ジェスチャーとキーボード：ジェスチャーはボタンで複製されます。デスクトップ上-ホットキー。
密度：デスクトップ上-「空気」、モバイル上-クリック可能性を損なうことなく垂直節約。
13）暗いテーマ
WCAGによる対照は維持されます；背景（濃い灰色）のために「純粋な黒」を避けて下さい。
輝き/影-弱体化；フォーカスリングの対照。
イラストとロゴ-逆バージョンで。
移行ポリシー：ユーザーの選択肢（システム/ライト/ダーク）を保存します。
14）アニメーションとモーション
デュレーション：120〜200ミリ秒（小）、200〜300ミリ秒（遷移）。
加速関数は自然である（わずかな減速を伴う立方ベジェ）。
アニメーションはフローをブロックし、読みやすさを損なうべきではありません。
リスペクト'prefers-reduced-motion'。
15）パフォーマンス
LCP ≤ 2。5sの緑のTTI/TBT；コードスプライシング；遅延メディアの読み込み。
長いリストの仮想化；データキャッシュ。
速度の知覚のための骨格；レイアウト「junk」を最小限に抑えます。
16） UIのセキュリティとプライバシー
要求の理由の明確な説明（カメラ、KYC、地理）。
透明な締め切り/手数料/制限；遅延が可能な場合は「瞬時」なし。
機密データ-マスキング、明示的な「表示/非表示」。
取り返しのつかない行為の確認;アクティビティログ/ログイン通知。
17） UX品質指標
ステップ変換と完了までの時間。
フィールド/ステップとTime-to-Fixによるエラーレート。
CTAとシナリオの再現性によるCTR。
エラー/ロード後のドロップオフ>N秒。
トピックごとのサポートコール（変更前/変更後）。
リリースのA11y-defects （target-0 critical）。
18）チェックリスト
プレリリース画面
- 1つのプライマリターゲットと1つのプライマリCTA。
［The］ナビゲーションとwhere-I-amステータスは明らかです。
- 短い内容：1ブロックあたり1〜2文。
- States： loading/empty/error/successがカバーされています。
- A11y：対話型のAAコントラスト、フォーカス表示、'aria-'。
- ローカライズ：文字列の長さ/フォーマット/RTLチェック。
- パフォーマンス：不必要に「重い」ブロックはありません。
プレリリースフォーム
- ラベルとサンプルフォーマットがあります。
- インライン検証+送信するサマリー。
- 最初のエラーにスクロールし、ボックスにフォーカスします。
- メッセージ：what/how/why；ユーザーのための500/400コードなし。
- エラー/再起動でデータが失われることはありません。
19）アンチパターン
セマンティックステップのCTAとして「OK」。
ラベルの代わりにプレースホルダ。
唯一の状態信号として色。
時間の見積もりも代替もないスピナー。
フォーカストラップとESC閉じることのないモーダルウィンドウ。
スタイル/アイコンのミキシング、設計システム外のコンポーネントの複製。
重要なシナリオ（支払い/セキュリティ）でのユーモア/絵文字。
20）例の前後
フォームエラー
前： 「エラー400」
後： "無効な日付形式。DDを使用します。MM。 YYYY"
空の状態
前： 「ここは空です」
後： "最初の補充後の操作の履歴がここに表示されます。［トップアップ］"
サクセスメッセージ
To： 「完了」
後： "支払いが受け入れられます。バランスを更新しました。［閲覧履歴］"
ナビゲーション
前： ユーザーがどこにいるかは不明です
後： アクティブなタブ+パン粉+明示的なページタイトル
21）デザインレビュー用テンプレート
スクリーンフレーム
タイトル→短い説明→コンテンツ/リスト→フィードバック/ステータス→アクション。
金型フレーム
ヘッダー→プロンプト→フィールド（ラベル+ヘルパー+エラー）→CTA→セカンダリアクション→ノート。
マイクロコピーテンプレート
タイトル（例）
1-2文： コンテキスト+次のステップ
CTA： アクション+オブジェクト
セカンダリリンク： ヘルプ/ルール
22）標準のプロセスとメンテナンス
Done （UX）の定義：layout+texts+states+A11y+i18n+metrics。
PRのUXレビュー：セクション18-21のチェックリスト。
ドキュメント：各機能はWiki/Storybookのガイドを追加/更新します。
四半期に一度監査：コンテンツ、A11y、パフォーマンス、一貫性。
最終チートシート
1つのターゲット、1つの主要なCTA。
状態とフィードバックは事前に設計されています。
A11yとローカライズ-ゼロから、「後」ではありません。
より少ない色-より多くの意味論とリズム。
測定：変換、エラー、時間、逆転。
設計システムを通して：同じルール→同じ期待→予測可能なUX。
私はあなたの主要なシナリオ（登録/CUS、入金/出金、ボーナス/トーナメント）のための既製のテンプレートでこのガイドを補足し、あなたのレビュープロセスのためのチェックリストを収集することができます。