コーポレート/企業UI設計ガイド -- "Trust Structure"
コーポレートUIに求められるのは「信頼」と「効率」だ。美しさよりも正確さ、派手さよりも堅実さ。データを正しく見せ、意思決定を助け、組織全体が同じ基準で情報を読み取れるシステマティックなデザインが必要になる。
本テンプレートは IBM Carbon Design System と Microsoft Fluent UI から着想を得た「Trust Structure」設計システムを定義する。ニュートラルグレーの堅実な基盤にコーポレートブルーのアクセントが、プロフェッショナリズムと信頼性を体現する。
核心となる設計思想
データが語り、UIは構造を提供する。グラフの数値、テーブルの行、KPIカードの変化率が主役であり、UIの装飾は最小限に抑える。角丸は 4px、影は使わずボーダーで区切る。システマティックで予測可能な設計がコーポレートの信頼を生む。
1. デザイン哲学 -- 「信頼の構造体」
IBM Carbon のアプローチ -- システマティックな美
IBM Carbon Design System は、装飾を徹底的に排除し、グリッドとスペーシングの厳密さで美しさを達成している。ボタンは角丸 0px（初期）、カードはボーダーのみ、色は機能に紐づく。この「意味のない装飾は存在しない」という姿勢が、エンタープライズ環境での信頼を生む。
Microsoft Fluent のアプローチ -- アクセシビリティファースト
Microsoft Fluent UI は WCAG AA 準拠を設計の出発点としている。コントラスト比 4.5:1 以上、タッチターゲット 44px 以上、スクリーンリーダー対応。アクセシビリティは「後から対応する機能」ではなく「設計の前提条件」だ。
ダッシュボードプレビュー
このテンプレートの適用範囲
| カテゴリ | 適合度 | 具体例 |
|---|---|---|
| BIダッシュボード | 最適 | KPI表示、売上分析、経営レポート |
| 社内ツール | 最適 | 管理画面、承認フロー、人事システム |
| コーポレートサイト | 最適 | 企業HP、IR情報、採用ページ |
| SaaS管理画面 | 適合 | 設定画面、ユーザー管理、課金管理 |
| 医療/金融 | 適合 | 規制産業のダッシュボード |
| ECサイト | 非推奨 | 堅すぎて購買意欲を削ぐ |
| ゲーミング | 非推奨 | GAMING_APP を使用 |
2. ニュートラルグレー配色システム
グレーの4段階 -- 堅実さの階層
NEUTRAL GREY HIERARCHY
コーポレートブルー + データビジュアライゼーション
DATA VISUALIZATION PALETTE
| Token | 値 | 用途 |
|---|---|---|
| accent-primary | #0f62fe | プライマリアクション、リンク、フォーカス |
| accent-hover | #0043ce | ホバー状態 |
| accent-active | #002d9c | アクティブ状態 |
| success | #198038 | 承認、達成、ポジティブ変化 |
| error | #da1e28 | 却下、未達成、ネガティブ変化 |
| warning | #f1c21b | レビュー中、注意 |
データビジュアライゼーションの色数制限
グラフには最大6色まで。それ以上の系列がある場合は、グルーピングで色数を減らすか、パターン（斜線、点線等）を併用する。色覚多様性への配慮として、色だけでなく形状やラベルでも系列を区別すること。
3. KPIカードと上部カラーバー
KPIカードはコーポレートダッシュボードの主役だ。上部に 3px のカラーバーを持つことで、カテゴリを色で瞬時に識別できる。
設計のポイント:
- KPI数値は
48px weight 300（Light）で「読みやすく洗練された」印象 - ラベルは
12px uppercase letter-spacing 0.5pxで構造的 - 変化率バッジは色（緑=ポジティブ、赤=ネガティブ）+ 矢印で即時判読
- 上部カラーバーは data-visualization パレットから選択
4. 使用上の注意
アクセシビリティ（WCAG AA）
コーポレートUIでは WCAG AA 準拠が最低基準。以下を常にチェック:
- テキストのコントラスト比: 4.5:1 以上（通常テキスト）、3:1 以上（大きいテキスト）
- タッチターゲット: 44px x 44px 以上
- フォーカスインジケーター: 2px solid
#0f62feで明確に - スクリーンリーダー: 全てのインタラクティブ要素に aria-label
ダークヘッダーの意図
#161616 のダークヘッダーは単なるデザイン上の選択ではない。ダークヘッダーはアプリケーションの「枠」として機能し、コンテンツエリア（#ffffff / #f4f4f4）との明確な境界を作る。この高コントラストの境界が、情報の構造を即座に把握させる。
テーブルのストライプパターン
偶数行に #f4f4f4 のストライプを入れることで、横方向の視線追跡を助ける。特にデータが多い広いテーブルでは、ストライプなしだと行を見失いやすい。ただし、行数が5行未満の小さなテーブルではストライプは不要。