UI / UX DESIGN
BRAID OS UI/UX 設計書
0最重要原則
本 OS の価値は、装飾ではなく「課題を刺す確実性」にある。
BI 画面として岩田社長が毎週 5 分開き、3 課題が確実に解けていること。それ以外の体験は不要。
設計判断の単一ルール
「それがないと課題が解けなくなるか?」
→ YES → 残す
→ NO → 削る(例外なし)
1削ったもの(v1.1 → v1.2)
| 削除 | 理由 |
|---|---|
| 背景グラデーション(3 色 radial) | 課題解決に無関係 |
| ブランド三つ編み SVG ロゴ | テキスト「BRAID OS」で十分 |
| スパークライン(5 社スコア横) | 数字と ▲▼ で伝わる |
| 「岩田語録メトリクス」副題 | 画面で語らない、ドリルで説明 |
| 「数字も、岩田さんの言葉で」演出文 | 装飾コピー |
| Scene ③ 螺旋成長モデル図 | 既に v1.1 で削除済、再確認 |
.braid-bg クラス全般 | 背景は indigo 単色 |
| Shippori Mincho の多用 | タイトルと数値のみに限定 |
| カードシャドウ(装飾的な glow) | 情報設計に不要 |
2デザインシステム
2.1 カラー — 4 色のみ
Indigo
#0E1420
背景、唯一
Gold
#D4A574
強調・ナビ active
Fire
#E85A4F
痛みのみ
Wool
#F5F1E8
本文
v1.1 から削除した色
gold-bright / thread-gold / thread-blue / thread-red / Sky — 全て使わない
2.2 タイポグラフィ — 2 フォント
| 用途 | フォント | サイズ |
|---|---|---|
| 大数値(BRAID / 5 社スコア) | Shippori Mincho 900 | 2-6rem |
| カード数値 | Shippori Mincho 800 | 1.4rem |
| 見出し(課題文) | Noto Sans JP 700 | 1.3rem |
| 本文・補足 | Noto Sans JP 400 | 0.84rem |
タイトル・中見出しの明朝多用はやめる。明朝は数字だけに絞り、本文は 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
装飾なしの理由
- スパークライン → 数字と ▲▼ で足りる
- 副題「岩田語録メトリクス」 → 画面に出す必要なし(ドリル内で説明)
- fire 色は 低スコア(65, 73)のみ に限定
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 種類)
- 数字(クリックでドリル)
- シーン見出し(課題文)
- ナビ丸ボタン(① ② ③)
- ドリルパネル
- ドリル内テキスト要素(算出式 / 表 / 注記)
NAV
削除コンポーネント
- 数字カードの color variant (red/gold/sky の 3 種) → 2 種に削減(fire は低スコアのみ)
- スパークライン / 螺旋図 / プリセットピル
- タブナビ / 段階展開ボタン
- ブランドロゴ SVG
- 課題バッジ(❶❷❸ は画面見出しに統合)
6インタラクション(4 種類のみ)
| 操作 | 動作 |
|---|---|
| ① ② ③ クリック | シーン切替 |
| 数字・カード・Vol引用 クリック | ドリルパネル スライドイン |
| × / ESC / 背景 クリック | ドリル閉じる |
| キーボード ← → | シーン切替 |
これ以外のインタラクションは置かない。
7ドリルパネル
[タグバッジ] SAMPLE / REAL / ESTIMATE / DESIGN / MIXED [タイトル] 数字の名前 [定義] 1-2 行 [算出式] code 風 [データソース] key-value 表 [取れると言える理由] 問題 → 解決 [注記]
幅 560px、右スライドイン。v1.1 から変更なし。
8マイクロコピー
シーン見出し(課題文そのまま)
| Scene | 見出し |
|---|---|
| ① | ❶ 事業ポートフォリオの投資配分が不透明 |
| ② | ❷ 地方・産地の人材/共創の停滞 |
| ③ | ❸ 現場・経営の属人化 |
削除したテキスト(v1.1 の詩的見出し)
- 「岩田語録メトリクス」
- 「数字も、岩田さんの言葉で。」
- 「マッチングではなく、クロッシング。」
- 「Vol.107「仕事の地図」が、動く」
- 「5社は、いま束ねられている」
- 「TAKIBI から、次の焚き火が生まれる」
これらは画面には出さず、ドリルや提案書で語る。
9モーション
| 種類 | 時間 |
|---|---|
| シーン切替 | 500ms fade |
| ドリルスライドイン | 350ms cubic-bezier |
| カード hover | 100ms 色薄変化のみ(translateY は廃止) |
削除
- translateY のカード浮上
- 段階 fadeIn / reveal アニメ
- チャート書き出しアニメ
10レスポンシブ
| BP | レイアウト |
|---|---|
| 〜640px | 1 カラム |
| 641〜1024px | 2 カラム(Scene ①) |
| 1025px〜 | フル 2 カラム or 1 カラム |
Scene ② と ③ は常に 1 カラム(シンプル維持)。iPad 1024px で確認必須。
11レビュー観点
毎週チェック
- ☐ 画面本体に「課題を刺す以外」の要素がないか
- ☐ 装飾コピー(「岩田語録メトリクス」等)が復活していないか
- ☐ 背景グラデーションが復活していないか
- ☐ スパークライン・装飾アニメが復活していないか
- ☐ 機能追加圧力で何か増えていないか
- ☐ 「本 OS の価値」が装飾で稼がれようとしていないか
12変更履歴
| 日付 | 版 | 変更 |
|---|---|---|
| 2026-04-24 | v1.0 | 初版 |
| 2026-04-24 | v1.1 | minimal(タブ・段階展開廃止) |
| 2026-04-24 | v1.2 | 超 minimal。装飾・副題・ブランド SVG・スパークライン・演出コピーを全削除。色 5+ → 4、フォント明朝多用 → 数字のみ明朝。「課題を刺す確実性」を最重要原則化 |