BRAID OS UI/UX 設計書

最終更新: 2026-04-25 版: v2.0（議論のホワイトボード / 仮説ユニット UI）

v1.2 からの根本的な転換: 「3 シーンの BI 画面」→「3 仮説ユニットを並べたホワイトボード」。各ユニットに [1]-[5] の 5 要素 + 「ここ違う？」記入欄を持つ。商談中に岩田氏のズレ発言をその場で書き込み、5 要素が連動して書き換わる UX を実現する。

0. 最重要原則

BRAID OS は「議論のホワイトボード」である。 商談中に岩田氏が発言したズレを、その場で書き込み、仮説を進化させる道具。

0.1 設計判断の単一ルール

「それがないと仮説ユニットの 5 要素のどれかが議論できなくなるか？」 → YES → 残す → NO → 削る（例外なし）

0.2 v1.2 から継承する原則

装飾ゼロ（背景グラデーション・スパークライン・装飾アニメなし）
ブランド SVG ロゴなし（テキストのみ）
4 色のみ（Indigo / Gold / Fire / Wool）
明朝は数字のみ（本文は Noto Sans JP）

0.3 v2.0 で新たに加える原則

5 要素は縦に流れる（[1] → [2] → [3] → [4] → [5]、矢印で繋ぐ）
「ここ違う？」は右側に常時表示（ドリルパネルではなく、ユニットの一部）
3 ユニットは縦並び（タブで切り替えない、スクロールで全部見える）
記入は即時保存（オンチェンジで localStorage、Phase 2 で D1 連携）

1. デザインシステム（v1.2 を継承）

1.1 カラー（4 色のみ）

役割	色	HEX	用途
背景	Indigo	`#0E1420`	body 背景、唯一
強調	Gold	`#D4A574`	数字の主要部・ナビ active・「ここ違う？」フォーカス枠
痛み	Fire	`#E85A4F`	低スコア・警告のみ・記入があったユニット
文字	Wool	`#F5F1E8`	本文・タイトル

「ここ違う？」記入欄の枠は、未記入時は 1px wool / 30%、記入されたら 1px gold。これだけで「埋まった / 埋まってない」が一目で分かる。

1.2 タイポグラフィ（v1.2 を継承）

用途	フォント	サイズ
大数値（BRAID / 5 社スコア）	Shippori Mincho 900	2-6rem
ユニット番号（❶❷❸）	Shippori Mincho 900	2.5rem
見出し（要素名 [1]-[5]）	Noto Sans JP 700	1.0rem
本文・補足	Noto Sans JP 400	0.84rem
「ここ違う？」textarea	Noto Sans JP 400	0.9rem

1.3 スペーシング・角丸

4px グリッド
ユニット間の縦余白: 80px（明確な区切り）
要素間（5 要素の縦並び）の余白: 32px
要素 ↔ 「ここ違う？」欄の横間隔: 24px
カード角丸: 8px
textarea 角丸: 4px
シャドウ: 使わない（境界は 1px 線で）

2. 画面構造

2.1 全体レイアウト

┌──────────────────────────────────────────────────────┐
│ BRAID OS  議論のホワイトボード v0.1     三星グループ   │ ← ヘッダー固定
├──────────────────────────────────────────────────────┤
│ ❶ 投資配分  ❷ 共創  ❸ 属人化              [履歴]      │ ← ユニットナビ
├──────────────────────────────────────────────────────┤
│                                                        │
│  ┌─ ユニット ❶ ──────────────────────────────┐  │ ← 1 ユニット
│  │                                                  │  │
│  │  [1] 課題                  │ ここ違う？        │  │
│  │  ─                          │ ─                 │  │
│  │       ↓                                          │  │
│  │  [2] 解決策                │ ここ違う？        │  │
│  │  ─                          │ ─                 │  │
│  │       ↓                                          │  │
│  │  ... [3] [4] [5] と続く                          │  │
│  │                                                  │  │
│  └─────────────────────────────────────────┘  │
│                                                        │
│  （80px 余白）                                          │
│                                                        │
│  ┌─ ユニット ❷ ──────────────────────────────┐  │
│  │  ...                                              │  │
│  └─────────────────────────────────────────┘  │
│                                                        │
│  （80px 余白）                                          │
│                                                        │
│  ┌─ ユニット ❸ ──────────────────────────────┐  │
│  │  ...                                              │  │
│  └─────────────────────────────────────────┘  │
│                                                        │
└──────────────────────────────────────────────────────┘

2.2 ヘッダー

高さ: 56px（v1.2 と同じ）
背景: indigo 単色（blur なし）
左: 「BRAID OS」テキスト + 副題「議論のホワイトボード v0.1」（小文字、wool 60%）
中央: 空（ユニットナビは別行）
右: 「三星グループ」テキスト

2.3 ユニットナビ

高さ: 48px
背景: indigo（ヘッダーより 5% 明）
左: ❶ ❷ ❸ のチップ 3 つ（クリックで該当ユニットにスクロール）
右: 「[履歴]」ボタン（記入履歴を見るパネル）

チップの状態:

未記入のユニット: wool 60%
1 件以上記入のユニット: gold（埋まった証拠）

2.4 1 ユニットのレイアウト

各ユニットは 2 カラム（要素列 + 「ここ違う？」列）。

ユニット ❶ ポートフォリオ投資配分
─────────────────────────────────────────────

┌─[1] 課題（仮説）─────────┐  ┌─ ここ違う？ ─┐
│ 事業ポートフォリオの        │  │ [textarea]     │
│ 投資配分が不透明            │  │                │
└──────────────────┘  └─────────┘
            ↓ これを解くのは？

┌─[2] 解決策（岩田氏の note 由来）┐  ┌─ ここ違う？ ─┐
│ Vol.108 BRAID 2026「束ねる」    │  │ [textarea]     │
│ Vol.91 スピードアップ            │  │                │
│ Vol.97 創造性への投資            │  │                │
│ Vol.84 MAZEる                   │  │                │
└──────────────────────┘  └─────────┘
            ↓ そうすると、何が決まる？

... [3] [4] [5] と続く

カラム比率: 要素列 60% / 「ここ違う？」列 40%（24px gap）

矢印: 各要素の下に「↓ <次の問い>」をテキストで表示（SVG なし、文字だけ）

3. 要素ごとの UI

3.1 [1] 課題

1-2 行のテキスト
フォント: Noto Sans JP 700, 1.1rem
色: wool

3.2 [2] 解決策

複数の Vol 引用を箇条書き
各行: 「Vol.XXX「タイトル」：1 行説明」
Vol 番号は gold、タイトルは wool 700、説明は wool 60%
クリックすると Vol 原文ドリル（Phase 2）

3.3 [3] 決断シーン

1 文 + 補足
フォント: Noto Sans JP 700, 1.0rem
例: 「次期 FCF ¥180M を、どの事業に配分するか（四半期判断）」

3.4 [4] 情報要件

5-7 項目を箇条書き（① ② ③ ...）
フォント: Noto Sans JP 400, 0.9rem
各項目クリックで「これは取れるか？」ドリル（Phase 2）

3.5 [5] 画面

該当機能（GV-01 等）の名前と 1 行説明
各機能行クリックで簡易プレビュー画面が下に展開（accordion）
プレビュー画面は 1 ユニット 1 枚に絞る（v1.2 の Scene 画面を簡略化）
プレゼンスライド化しない

4. 「ここ違う？」記入欄

4.1 UI 仕様

┌─ ここ違う？ ─────────────────┐
│                                │
│  [textarea, 5 行、wool 90%]    │
│                                │
│  最終更新: 2026-04-30 14:23     │
│  記入者: 岩田 → 高木           │
└────────────────────────┘

高さ: 各要素の高さに追従（min 120px）
placeholder: 「岩田氏の発言をそのまま書く（『ここは違う、本当は…』）」
枠: 1px wool 30% → 記入されたら 1px gold
即時保存: onChange で localStorage、500ms debounce

4.2 記入の意味

ズレが書かれたら、画面下部に「この記入で連動する要素」が出る（[3] が変われば [4] [5] も連動、等）
連動候補は薄い fire 色のハイライトで該当要素を囲む
連動を承認すると、他の要素にも修正提案が入る（Phase 2 の AI 機能）

4.3 記入履歴

ヘッダー右の「[履歴]」ボタン → 右スライドパネル
全ユニット × 全要素 × 全記入を時系列で表示
記入者・日時・記入内容を保持

5. インタラクション（最小限）

操作	動作
❶ ❷ ❸ チップクリック	該当ユニットにスムーズスクロール
「ここ違う？」textarea フォーカス	枠が gold に、placeholder が薄く
「ここ違う？」入力	500ms debounce で localStorage 保存
[5] 画面の機能行クリック	accordion でプレビュー展開
「[履歴]」ボタン	右スライドパネル（350ms cubic-bezier）
ESC	開いているパネルを閉じる
キーボード ↓ ↑	スクロール（ブラウザデフォルト）

置かないインタラクション:

タブ切替（3 ユニットは縦並び）
段階展開ボタン（5 要素は最初から全部見える）
カード hover 装飾（translateY 等）
リッチアニメ（fadeIn / reveal 等）

6. レスポンシブ

BP	レイアウト
〜768px	1 カラム（「ここ違う？」が要素の下に）
769〜1024px	2 カラム（要素 60% / 「ここ違う？」 40%）
1025px〜	2 カラム（最大幅 1200px、中央寄せ）

iPad 1024px で確認必須（4/30 商談で使うデバイス）。

7. マイクロコピー

7.1 ヘッダー

「BRAID OS」（メイン）
「議論のホワイトボード v0.1」（副題、小文字 wool 60%）

7.2 ユニット見出し

「ユニット ❶ ポートフォリオ投資配分」
「ユニット ❷ 地方・産地共創」
「ユニット ❸ 属人化・暗黙知」

7.3 5 要素見出し

「[1] 課題（仮説）」
「[2] 解決策（岩田氏の note 由来）」
「[3] 決断シーン」
「[4] 情報要件」
「[5] 画面」

7.4 矢印テキスト

[1] → [2]: 「↓ これを解くのは？」
[2] → [3]: 「↓ そうすると、何が決められるようになる？」
[3] → [4]: 「↓ その決断のために、何が見える必要がある？」
[4] → [5]: 「↓ それを、実データ／UI でどう表す？」

7.5 「ここ違う？」placeholder

「岩田氏の発言をそのまま書く（『ここは違う、本当は…』）」

7.6 削除したテキスト（v1.2 から）

v1.2 で既に削除済のものは v2.0 でも復活させない：

「岩田語録メトリクス」
「数字も、岩田さんの言葉で。」
「マッチングではなく、クロッシング。」
「5社は、いま束ねられている」

新たに追加するコピーは、上記 § 7.1-7.5 の固定文言のみ。演出コピーは置かない。

8. モーション

種類	時間
ユニット間スムーズスクロール	600ms ease
「ここ違う？」枠の色変化	200ms ease
履歴パネルスライドイン	350ms cubic-bezier
[5] プレビュー accordion	250ms ease

置かないモーション:

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

9. アクセシビリティ

観点	対応
WCAG コントラスト	AAA 維持（gold #D4A574 on indigo #0E1420 で 7:1 以上）
キーボード操作	Tab で全要素到達可能、Enter で展開
Screen reader	textarea に aria-label「ユニット ❶ [3] 決断シーンのズレ記入」
フォーカス可視	gold 1px ring

10. 商談での使い方

10.1 4/30 商談の進行

iPad で BRAID OS を表示（1024px、横向き）
岩田社長と一緒に画面を見ながら、ユニット ❶ から開始
[1] 課題を読み上げ → 「ここ違う、と感じる箇所はありますか？」
出た発言を その場で「ここ違う？」textarea に書き込む（高木が打つ）
[2] [3] [4] [5] と進める
ユニット ❶ が終わったら ❷ へ → ❸ へ
全部埋まったら、5 要素が連動して崩れている箇所を確認、優先度を付ける

10.2 商談後

記入内容を D1 に保存（Phase 1 で実装）
仮説の進化として変更履歴を残す
システム要件定義書 v2.1 として再構築（Phase 1 末）

11. レビュー観点（毎週）

画面本体に「議論のホワイトボード以外」の要素がないか
演出コピー・装飾が復活していないか
タブ切替・段階展開ボタンが入っていないか
「ここ違う？」欄が機能しているか（記入できる、保存される、履歴が残る）
[5] 画面欄がプレゼンスライド化していないか
機能追加圧力で 13 機能を超えていないか
解決策に Vol 番号が紐付いているか（Vol なき提案は採用しない）

12. 変更履歴

日付	版	変更
2026-04-24	v1.0	初版
2026-04-24	v1.1	minimal（タブ廃止・段階展開廃止）
2026-04-24	v1.2	超 minimal（装飾・副題・ブランド SVG・スパークライン削除）
2026-04-25	v2.0	議論のホワイトボード化。3 シーンの BI 画面 → 3 仮説ユニット縦並び。各ユニットに [1]-[5] + 「ここ違う？」記入欄。商談中の発言をその場で書き込める UX。装飾原則・カラー・タイポは v1.2 を継承

13. 関連ドキュメント

10_要件/BRAID OS 再定義書.md v0.1（本書の上位文書）
10_要件/システム要件定義書.md v2.0（機能定義）
20_成果物/demo-braid-os/index.html v2.0（プロトタイプ）