UXエンジニアリング＆モダンプロダクトデザインシステム は何をしますか？
ユーザーインターフェースエンジニアリング、UXアーキテクチャ、デザイントークン、コンポーネントライブラリ、プロダクトの美的変革のための、厳格で機関級の運用ガイド。
1. 中核となる運用原則
- 情報密度と余白の両立: 高密度レイアウト（Linear、Bloomberg、Stripe、TradingView）は、ビューポートピクセルあたりの最大シグナルを乱雑さなく提示します。これは、意図的なコントラスト、コンパクトなタイポグラフィスケール、1pxの繊細な境界線、一貫したスペーシンググリッド（4px / 8px）によって実現されます。
- 高品質デザインガイドライン: 未完成で一般的なデフォルトを拒否します：
- ❌ 飽和した紫/インジゴのグラデーションは使用しない。
- ❌ 読みにくい低コントラストのグレーオングレーテキスト（白地に
text-gray-400、黒地にtext-zinc-600）は使用しない。 - ❌ 絵文字アイコンを鮮明なベクターSVG（Lucide / Radix）の代わりに使用しない。
- ❌ 巨大な半径（
rounded-3xl）と小さな不揃いなテキストを持つ、巨大な空のフローティングカードを使用しない。 - ❌ キーボードフォーカス状態やマウス専用インタラクションの欠如を許さない。
- ✔️ 意図的なカラーパレット、繊細な1px境界線（
border-slate-800）、等幅表形式数字（font-mono tabular-nums）、鮮明なマイクロバッジ、アクセシブルなコントラスト比（>4.5:1）を使用する。
- ドメイン固有の色彩セマンティクス:
- 金融/定量アプリケーションでは、色は高い重要度を持つセマンティックな意味を帯びます。
- 緑（
#10B981/#22C55E）：正のアルファ、収益性、買いシグナル、上昇成長。 - 赤（
#EF4444/#F43F5E）：損失、ドローダウン、フォレンジックリスク、売りシグナル、負のキャッシュフロー。 - 琥珀/黄（
#F59E0B）：注意、トリアージが必要、中立体制、警告フラグ。 - 青/シアン（
#3B82F6/#06B6D4）：情報状態、フォーカスリング、主要アクションボタン、中立トレンド。 - 色覚障害者向けアクセシビリティ：色のみに依存しないでください。色のインジケーターには常に方向性グリフ（
▲、▼、—）、ステータスバッジ、またはツールチップを組み合わせてください。
- 予測可能な知覚パフォーマンス:
- レイアウトシフトゼロ（CLS < 0.1）：遅延読み込みされるチャートやテーブル用にスケルトンスペースを確保します。
- 楽観的フィードバック：ボタンクリックやフィルター切り替え時に即座のアクティブ状態（<50msのフィードバック）を提供します。
- ページ全体のスピナーよりもスケルトン：データがハイドレートされる間、ページレイアウトとナビゲーションチromeを保持します。
2. デザイントークンアーキテクチャ
堅牢なデザインシステムは、3つの明示的なトークン階層で構成されます：
graph TD
Primitive["1. プリミティブトークン<br>(生の値: slate-900, emerald-500, font-size-14, 8px)"]
Semantic["2. セマンティックトークン<br>(意図: surface-background, text-primary, border-subtle, status-success)"]
Component["3. コンポーネントトークン<br>(スコープ付き: table-header-bg, badge-pill-padding, chart-grid-stroke)"]
Primitive --> Semantic --> Component
2.1 カラートークンマトリックス（インスティテューショナルダーク＆ライトテーマ）
| セマンティックトークン | ダークモード値 | ライトモード値 | 使用箇所 |
|---|---|---|---|
bg-app | #0B0F17（ディープオブシディアン） | #F8FAFC（スレートティント） | ルートビューポート背景 |
bg-surface | #111827（リッチジンク/スレート） | #FFFFFF（ピュアホワイト） | カード、パネル、モーダルダイアログ |
bg-surface-hover | #1E293B（ミュートブルーグレー） | #F1F5F9（ライトスレート） | テーブル行ホバー、メニュー項目ホバー |
border-subtle | #1E293B（1pxクリーン境界線） | #E2E8F0 | カード境界線、テーブル区切り線 |
border-accent | #334155 | #CBD5E1 | フォーカスされた入力、アクティブなタブ境界線 |
text-primary | #F8FAFC（高コントラスト、16:1） | #0F172A | 主要見出し、テーブルデータ値 |
text-secondary | #94A3B8（スレート400、7:1） | #475569 | メトリックラベル、説明、タイムスタンプ |
text-muted | #64748B（スレート500、4.5:1） | #64748B | フッター、無効状態、ショートカットヒント |
accent-primary | #2563EB（ロイヤルブルー） | #2563EB | 主要CTAボタン、アクティブラジオタブ |
status-bullish | #10B981（エメラルド） | #059669 | 利益、買い確信度、正のCAGR |
status-bearish | #EF4444（ローズ/レッド） | #DC2626 | ドローダウン、失格、高負債 |
status-caution | #F59E0B（アンバー） | #D97706 | 古いデータ、レビューが必要、中程度フラグ |
2.2 タイポグラフィスケールと数値フォーマット
/* 金融端末と高密度テーブルに必須 */
.tabular-numbers {
font-family: var(--font-mono), monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
- 見出し（表示/タイトル）: セミボールド/ボールド（600/700）、タイトなトラッキング（
letter-spacing: -0.03em）、行の高さ1.2。 - 本文とコントロール: 13px–14px（
text-sm）、インタラクティブラベルはミディアム（500）、テキストはレギュラー（400）。 - マイクロラベルとバッジ: 11px–12px（
text-xs）、ボールド/セミボールド（600/700）、大文字でtracking-wider。 - 数字とメトリクス: 等幅表形式フォント（
JetBrains Mono、Roboto Mono、またはtabular-nums付きのInter）、すべてのテーブルで右揃え。
3. 高密度金融端末とテーブルUX
データテーブルは、金融および分析ワークフローのコアエンジンです。以下の譲れないルールに従ってください：
- 配置ルール:
- テキスト、シンボル、企業名：左揃え。
- 数値メトリクス（価格、P/E、ROCE、CAGR、スコア、日付）：右揃え。
- ステータスバッジ、アクションフラグ、アイコン：中央揃え。
- 固定列と複数行ヘッダー:
- ヘッダー行は垂直スクロール時に固定する必要があります（
sticky top-0 bg-surface z-10）。 - モバイルおよび超ワイドテーブルの場合、水平スクロール時に識別子列（企業名/シンボル）を固定します。
- ヘッダー行は垂直スクロール時に固定する必要があります（
- 視覚的構造:
- 行の高さ：コンパクト（36px–40px）または標準（44px）。繊細なゼブラストライプまたは鮮明な1px境界線（
border-b border-slate-800/60）を使用します。 - 行ホバー時の即時ハイライト（
hover:bg-slate-800/40 cursor-pointer）。 - インラインバッジピル（
bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold）。
- 行の高さ：コンパクト（36px–40px）または標準（44px）。繊細なゼブラストライプまたは鮮明な1px境界線（
- インタラクティブコントロール:
- ソートインジケーター矢印（
▲アクティブ昇順、▼アクティブ降順、ミュート⇅ソート可能）。 - クリアボタン（
X）付きの即時検索、アクティブフィルターカウントチップ（フィルター (3)）、総数付きページネーションコントロール（1–50 / 1,060 を表示）。
- ソートインジケーター矢印（
4. ユーザビリティとインタラクションアーキテクチャ（ニールセンノーマンヒューリスティクス）
flowchart LR
A["認識より想起<br>(パンくずリスト、固定ヘッダー、保存済みフィルター)"] --> B["ユーザー制御と自由<br>(クイッククリア、Escで閉じる、元に戻す)"]
B --> C["システムステータスの可視性<br>(楽観的UI、ローディングスケルトン、タイムスタンプ)"]
C --> D["使用の効率性<br>(キーボードショートカット、コマンドパレット Cmd+K)"]
- システムステータスの可視性:
- 金融データには常に「[市場日付/時刻] 時点」と表示し、ユーザーが市場が稼働中かクローズしているかを把握できるようにします。
- リクエストに100ms以上かかる場合は、空白の画面やブロッキングスピナーではなく、ローカライズされたスケルトンを表示します。
- ユーザー制御と自由:
- フィルターバーには、デフォルト以外のフィルターがアクティブな場合、ワンクリックで「すべてのフィルターをリセット」ボタンを配置する必要があります。
- モーダルとドロワーは、
Escapeキーと背景クリックで閉じる必要があります。
- 一貫性とコンポーネント階層:
- プライマリアクション: ベタ塗りの高コントラスト塗りつぶし（
bg-blue-600 hover:bg-blue-500 text-white）。ビューごとに正確に1つのプライマリCTA。 - セカンダリアクション: 枠線付き/繊細な塗りつぶし（
bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700）。 - ゴーストアクション: 透明（
hover:bg-slate-800 text-slate-400 hover:text-slate-100）。 - 破壊的アクション: 赤みがかった警告（
bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30）。
- プライマリアクション: ベタ塗りの高コントラスト塗りつぶし（
- アクセシビリティ（WCAG 2.2 AA / AAA）:
- 通常の本文テキストのテキスト対背景のコントラスト比は $≥ 4.5:1$、大きなテキストとUIコンポーネントでは $≥ 3:1$。
- すべてのインタラクティブ要素には、可視の
:focus-visibleフォーカスリングが必要です（ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900）。 - タッチデバイスでの最小クリック可能タッチターゲット：$44 imes 44$px。
5. WCAG 2.2 AA / AAA カラーコントラストエンジニアリングと検証
コントラストは美的嗜好ではありません。それは数学的なエンジニアリング仕様です。低コントラストは、深刻な認知疲労、グレアや低輝度下での可読性の低下、アクセシビリティコンプライアンス違反を引き起こします。
5.1 数学的コントラスト比の仕様
sRGBカラーの相対輝度 $L$ は、CIE公式を使用して計算されます： $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ ここで、各カラーチャンネル $C ∈ {R, G, B}$ は8ビットsRGBから線形化されます（$C_{\text{srgb}} = C_{8\text{bit}} / 255$）： $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{if } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{if } C_{\text{srgb}} > 0.04045 \end{cases}$$
明るい色（$L_1$）と暗い色（$L_2$）の間のコントラスト比は次の通りです： $$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$
5.2 厳格なコンプライアンス基準
| 要素カテゴリ | WCAG 2.2 AA 最小 | WCAG 2.2 AAA 目標 | 検証基準 |
|---|---|---|---|
| 通常の本文テキスト（< 18pt / 24px レギュラー、< 14pt / 18.5px ボールド） | $≥ 4.5:1$ | $≥ 7.0:1$ | 主要データ、ラベル、説明、テーブル行、ボタンラベル |
| 大きなテキストと見出し（$≥ 18\text{pt}$ / $24\text{px}$、または $≥ 14\text{pt}$ ボールド） | $≥ 3.0:1$ | $≥ 4.5:1$ | 表示タイトル、セクションヘッダー、顕著なメトリック数値 |
| UIコンポーネントとグラフィカルオブジェクト（WCAG 1.4.11） | $≥ 3.0:1$ | $≥ 4.5:1$ | 入力境界線、トグル、セグメントタブ境界、アクティブチップの輪郭、フォーカスリング |
| 色の使用（WCAG 1.4.1） | 色以外のインジケーターが必要 | 二重エンコード必須 | 選択やステータスを色だけで伝えないこと。チェックマーク、アイコン、またはテキストの太さと組み合わせてください |
5.3 一般的な5つのコントラストの落とし穴と体系的な修正
1. ダークモードのセグメントタブのブレンド
- 欠陥: アクティブタブが
--tab-bg: #0F172Aに設定されたコンテナ内で--card: #111827に設定されています。コントラスト比は 1.02:1（2ユニットのRGBデルタ）です。選択されたタブはコンテナの背景に完全に溶け込み、ユーザーがアクティブな選択を判断することを不可能にします。 - 修正: アクティブタブの背景を
--card-elevated: #1E293Bに引き上げ、アクティブな1pxセマンティック境界線（1px solid var(--accent)/#10B981）、繊細なグローリング（box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25)）を追加し、アクティブタブのSVGアイコンを一致するように色合いを変更します。
2. ライトモードのミュートテキストコントラスト不良
- 欠陥: デフォルトのセカンダリ/ミュートテキストがスレート400（
#94A3B8）で、白（#FFFFFF）または薄い紙（#F8FAFC）上で使用されています。コントラスト比は 2.57:1 で、WCAG SC 1.4.3（$≥ 4.5:1$）に重大な違反をしています。 - 修正: ライトモードのセカンダリテキストを少なくともスレート500（
#64748B）に暗くします。これにより、#FFFFFF上で 4.77:1、#F8FAFC上で 4.54:1 が得られます。
3. アンバー/警告テキストバッジの不良
- 欠陥: ステータスピルに明るいアンバー（
#D97706/ アンバー600）を純白上で使用しています。コントラスト比は 3.22:1 で、4.5:1のテキスト閾値を満たしていません。 - 修正: ライトモードのテキストバッジをアンバー700（
#B45309）に暗くします。これにより、セマンティックな暖かさを維持しながら 4.82:1 を達成できます。
4. ダークモードの入力とコントロール境界線の不可視化（WCAG 1.4.11）
- 欠陥: 暗いスレート表面（
#111827/#0B0F17）上の繊細な8%–12%の白の不透明度の境界線（rgba(255, 255, 255, 0.08)）は、コントラスト比がわずか 1.2:1–1.4:1 であり、3:1の非テキスト境界要件に違反しています。 - 修正: デフォルトのダークモード入力境界線を少なくとも 18%の白の不透明度（
rgba(255, 255, 255, 0.18)/#334155）に設定し、ホバー状態を 32%（rgba(255, 255, 255, 0.32)/#475569）に設定します。
5. Android Material 3 ダークモードのFilterChipトラップ
- 欠陥: Material 3では、デフォルトの選択済み
FilterChipがsecondaryContainer（#37474F）を暗い表面（#14181E）に対して使用し、わずか 1.83:1 のコントラストしか得られません。アウトラインやグリフがない場合、チップはSC 1.4.11とSC 1.4.1の両方に不合格となります。 - 修正: 以下を明示的に指定します：
selectedBorderColor = MaterialTheme.colorScheme.primary（これにより 9.88:1 のコントラストが得られます）。selectedBorderWidth = 1.5.dp。leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else nullこれにより、色の知覚とは無関係に選択が可視化されます。
6. UI/UX 改修プレイブック（フェーズ別実行）
既存アプリケーションのUI/UXをやり直す、またはモダナイズするタスクが与えられた場合は、以下の4ステップの実行戦略に従ってください：
ステップ1: デザインシステムの基礎とトークン抽出
- CSS/Tailwind（
globals.css/tailwind.config.js）でカラーパレット、タイポグラフィスケール、スペーシング変数、境界線半径の階層を確立します。 - インスティテューショナルなダークモードトークンとセマンティックカラークラスを導入します。
ステップ2: コンポーネントプリミティブのモダナイゼーション
- コアとなる再利用可能なUIプリミティブをリファクタリングします：
Button: プライマリ、セカンダリ、ゴースト、デストラクティブ、ローディングスピナー付き。Badge/Tag: ステータス、ティア、モメンタムのためのセマンティックカラーピル。Card/Panel: クリーンな境界線、角丸（rounded-lgまたはrounded-xl）、繊細な背景。DataTable: ヘッダーソート、右揃えの数字、固定ヘッダー、行ホバー。Modal/Drawer: 背景ブラー、フォーカストラップ、スムーズなエントリアニメーション。Tooltip: 複雑なメトリクス（例：EV/EBITDA、CANSLIMスコア）に関する情報提供の説明。
ステップ3: レイアウトとナビゲーションのオーバーホール
- 明確なアクティブルートインジケーター、企業検索バー、システムステータスインジケーター（例：市場セッション日付、API健全性）を備えたモダンなトップナビゲーションバー/サイドバーへとモダナイズします。
- レイアウトの不安定性とルート遷移時のページジャンプを排除します。
ステップ4: 高価値ページのモダナイゼーション
- ユーザー向けの重要なビューを刷新します：
- ダッシュボード: エグゼクティブサマリータイル、マーケットパルス、トップゲイナー/ローザー、体制ヒートマップ。
- 確信度 / スクリーナー: 高速検索、ソート可能な列、メトリックピル、クイック詳細ドロワーを備えた高密度テーブル。
- 企業ワークスペース / 詳細: 期間ピル（1M、6M、1Y、5Y、MAX）を備えたインタラクティブチャート、注釈、主要指標（P/E、ROE、ROCE、負債/資本、FCF利回り、平均成長率）。
- ポートフォリオ: 資産配分サンバースト、リスクメトリックゲージ、ヒートマップ相関。
このガイドは、デザインとエンジニアリングのチームが、アクセシブルで視覚的に洗練された、パフォーマンスの高いプロフェッショナルグレードのユーザーインターフェースを一貫して構築するための運用基準として機能します。