BRAID OS UI/UX 設計書

0最重要原則

本 OS の価値は、装飾ではなく「課題を刺す確実性」にある。

BI 画面として岩田社長が毎週 5 分開き、3 課題が確実に解けていること。それ以外の体験は不要。

設計判断の単一ルール

1削ったもの（v1.1 → v1.2）

2デザインシステム

2.1 カラー — 4 色のみ

2.2 タイポグラフィ — 2 フォント

タイトル・中見出しの明朝多用はやめる。明朝は数字だけに絞り、本文は Noto Sans JP に統一。

2.3 スペーシング・角丸

• 4px グリッド
• カード角丸: 8-10px（v1.1 の 12-16px から控えめに）
• シャドウ: 使わない（境界は 1px 線で）

3レイアウト骨格

┌─────────────────────────────────┐
│ BRAID OS     ① ② ③     三星グループ │ ← テキストとナビだけ
├─────────────────────────────────┤
│ [課題タイトル（画面見出し）]       │
│ ───────────────────────           │
│                                   │
│  [1 画面完結のコアコンテンツ]      │
│                                   │
│ ───────────────────────           │
│  (数字クリックで根拠ドリル)       │
└─────────────────────────────────┘
        ┌ Drill Panel ─┐
        └──────────┘

ヘッダー

• 高さ: 56px（v1.1 の 64 → 56）
• 背景: indigo 単色（blur なし）
• 左: 「BRAID OS」テキストのみ
• 中央: ① ② ③ の丸ボタン
• 右: 「三星グループ」テキスト

ロゴ SVG / backdrop-filter / gradient は使わない。

4画面別 UI

4.1 Scene ① Group

❶ 事業ポートフォリオの投資配分が不透明
─────────────────────────────────────

      BRAID 84 / 100    ▲ +3 前週比

      ┌───────────────┐
      │ 三星毛糸       91 │
      │ 三星染整       73 │ ← 73 だけ fire 色
      │ 三星ケミカル   88 │
      │ ウラノス       65 │ ← 65 だけ fire 色
      │ TAKIBI        94 │
      └───────────────┘

      （任意で補足）
      MIX 68 / Speed +14% / 創造性 42M

4.2 Scene ② Community

❷ 地方・産地の人材／共創の停滞
─────────────────────────────────────

       今週のクロッシング

   ┌───────────────────────┐
   │  尾州の紡績 × 香川の醤油蔵  │
   │  "菌と対話する" 老舗        │
   └───────────────────────┘

   根拠:  TK-018 | TK-023 | Vol.79

• 装飾グラデーションのカード → シンプルなボーダー付きカード
• 根拠カード 3 枚は小さく、文字だけ（「売上+32%」等の補足は削除）
• 「マッチングではなく、クロッシング」フッター文 → 削除（思想はドリル内）

4.3 Scene ③ Individual

❸ 現場・経営の属人化
─────────────────────────────────────

 佐藤さん (染整 3 年目):
 「BRAID2026、僕は何をすればいいですか？」

 ─────

 AIShingo (Vol.108 / 107 / 83):
 ① 染整×毛糸×TAKIBI で "色"の共創を 1 本起こす
 ② あなたの「仕事の地図」を 1 枚、自分で描く
 ③ 叩き台は 60% で OK、Slack で相談

 ─────

 仕事の地図:
   A. 日報を"発見"で書く
   B. 新素材 A4 叩き台 〜5/2
   C. TK-023 に染料知見を渡す 〜5/15
   D. 山田部長とランチ 今週

• 3 カラム → 1 カラム縦並び（左 AIShingo プロフィール削除、右 地図カラム削除）
• AIShingo プロフィールカード → ドリル内に移設
• 仕事の地図: 単純なリストで表示、ブロックカード装飾なし
• チャット風バブル装飾 → シンプルなセクションに

5コンポーネント（5 種類）

1. 数字（クリックでドリル）
2. シーン見出し（課題文）
3. ナビ丸ボタン（① ② ③）
4. ドリルパネル
5. ドリル内テキスト要素（算出式 / 表 / 注記）

削除コンポーネント

• 数字カードの color variant (red/gold/sky の 3 種) → 2 種に削減（fire は低スコアのみ）
• スパークライン / 螺旋図 / プリセットピル
• タブナビ / 段階展開ボタン
• ブランドロゴ SVG
• 課題バッジ（❶❷❸ は画面見出しに統合）

6インタラクション（4 種類のみ）

これ以外のインタラクションは置かない。

7ドリルパネル

[タグバッジ]   SAMPLE / REAL / ESTIMATE / DESIGN / MIXED
[タイトル]     数字の名前
[定義]         1-2 行
[算出式]       code 風
[データソース]  key-value 表
[取れると言える理由]  問題 → 解決
[注記]

幅 560px、右スライドイン。v1.1 から変更なし。

8マイクロコピー

シーン見出し（課題文そのまま）

9モーション

削除

• translateY のカード浮上
• 段階 fadeIn / reveal アニメ
• チャート書き出しアニメ

10レスポンシブ

Scene ② と ③ は常に 1 カラム（シンプル維持）。iPad 1024px で確認必須。

11レビュー観点

12変更履歴