Design Decisions — /app/ceo — Round 001
Generated: 2026-05-27 by kashi-ui-mockupper |
Surface: /app/ceo (ExecutiveBriefPage) |
Picked variant: B (中庸 — Same-Page IA Restructure) |
Mockup: index.html (このファイルと同階層)
このドキュメントの目的: Round 1 Stage 3 mockup の非自明な設計判断を、 Justine の friends/mentor フィードバック取得時の説明と、 Round 2 以降の React 実装担当エンジニアへの引き継ぎ用に残します。 mockup で 「なぜこうした?」 が分かれば、 feedback → revise → implement の loop が短くなります。
Variant B 概要: 既存 ExecutiveBriefPage 内で 「review candidates」 を H1 北極星メトリクスとして昇格、 残り 3 stat を secondary strip に降格、 Plan C / Positive / ロスター全表示を progressive disclosure (折りたたみ) に降格、 ExecutiveAggregateSection を 4 status chips + /app/ceo/governance サブルート teaser に圧縮、 window note を info bar として H1 メトリクス内に昇格。 5 セクション equal-weight 平板 → 北極星 1 つに焦点。
1. 主タスクと IA 採用根拠
決定: 北極星メトリクス = 「reviewer 対応待ち aggregate signal の件数 (3 of 14)」
経営者が 5 秒で 「経営判断に直結する review-worthy aggregate signal は何件あり、 どの window で観測されたか」 を把握する ことを主タスクに設定。 現状の 5 セクション equal-weight は permanent-ui-principles §8 「A screen fails if everything looks equally important」 の典型違反。 「review candidates」 は 「reviewer 対応」 = 経営者がすぐ動作を起こすべき集約 signal で、 longitudinal-aggregated な Kashi の moat (= 構造的、 長期的) を最も symbolize する値。
canon: permanent-ui-principles §8 (equal weight failure)、 §9 (interpretation not judgment) / research: P-01 (Executive 5-8 metric limit、 3 refs: OutSail / F1Studioz / Smashing) / 投資家ポジショニング memory: structure-not-content + longitudinal-across-meetings moat
決定: H1 メトリクスが 0 のときの empty state 文言を canon 仕様化
「review candidates = 0」 を 「all clear」 「問題なし」 と読まれると permanent-ui-principles §6 「no qualifying signal never means no issue」 違反。 mockup では現在 3 件として表示しているが、 React 実装時は 0 件のとき 「本観察ウィンドウ内に review-worthy aggregate signal はありません (詳細は §6 抑制理由参照)」 固定文言を出すことを必須仕様化。 「0」 数字単体を巨大表示してはいけない。
canon: permanent-ui-principles §6 (no qualifying signal NEVER means no issue) / Variant B proposal の最大リスクとして translator 明示 / forbidden wording: 「no issue detected」 「all clear」
決定: 役割境界 note を H1 直下の固定インフォバー化 (画面上端常時 visible)
permanent-ui-principles §3 + §11 が要求する 「Who is viewing this? What are they allowed / NOT allowed to see?」 の merge gate 要件。 「あなたは経営者として閲覧中 | 集約データのみ | 個人識別情報なし | k-anon 5名未満は抑制」 を 4 つの pipe 区切りで一行に明示。 admin / executive を兼任しているユーザーが個別データを期待して clicked-through した瞬間に boundary が見える、 という anti-confusion 機能。
canon: permanent-ui-principles §3 §11 / research: P-05 (3 refs: Stripe / Workday / Lattice) / DATA_VISIBILITY_MATRIX §3 Executive 行 Y(k-anon) のみ
2. レイアウト
決定: 北極星カードに 2px evergreen border + display サイズ数値 (clamp(2.5rem, 4vw, 3.5rem))
視覚 weight を画面内で 明確に 一つだけに集中させる。 secondary strip は同じ stat 形式だが H3 サイズ + 1px ボーダーに demote。 これで F-pattern 上の最初の固視点が北極星に向く (F1Studioz strategic dashboard 設計に基づく)。 数値は Fraunces serif で本文 sans とのコントラストを付け、 「読む数字」 ではなく 「見る数字」 にする。
design_system_v1 §1 (--kashi-evergreen #1F3D33 = primary)、 §2 (--text-display 56px) / fluid clamp で desktop / tablet / mobile 同時対応
決定: window note を info bar として H1 メトリクスカード内に同梱 (separate section にしない)
現状 (kashi/src/app/app/ceo/page.tsx) では CEO_ROSTER_WINDOW_AWARE=false 注記が coverage strip の小テキストに埋没。 「window toggle が動いてないのに気付けない」 が translator が抽出した hypothesis 不満の 1 つ。 北極星カード内に info bar として埋め込むことで、 H1 メトリクスを見れば必ず window 情報が視野に入る。 AC-05 trust gate (連動性が担保できるまで toggle 不可) の 理由 も併記。
research: P-04 (3 refs: Vercel / Stripe / Smashing 「trust through transparency」)、 既存 AC-05 trust gate コンセプト / design_system_v1 --kashi-state-info (#3B82F6) for honest disclosure
決定: ロスターは review candidate teams 3 件のみ default 表示、 残り 9 件は accordion (折りたたみ)
P-06 progressive disclosure を適用。 現状の 12 マネージャーフラットリストは執行判断には ノイズ。 「reviewer 対応待ち」 状態のチームをデフォルト表示し、 全表示は明示的 click が必要。 これは X-02 grade ranking 化を 避けつつ filter (status) で fold できる重要な区別。 sort 順は alphabetical のみ、 grade 順 sort は禁止 (canon-conflict X-02)。
canon: permanent-ui-principles §7 (Governance detail should be discoverable, not dumped)、 §9 (No dashboard may rank people morally) / research: P-06 (3 refs: Workday / Stripe / F1Studioz) / X-02 違反防止
決定: 各 roster card に 「unlock 済」 pill / 「unlock 4 条件未充足」 lock indicator
DATA_VISIBILITY_MATRIX §6 の unlock 4 条件 (pilot phase, evidence grade, no dispute freeze, grace-period) は現状 UI 上 invisible で、 リンクが現れたり消えたりする。 unlock 状態を explicit に出すことで、 「なぜこのカードはクリック不可なのか」 が明確に。 unlock 未充足カードは drill-link を出さず、 lock icon + 「個人 drill-down: unlock 4 条件 未充足」 inline note を表示。
canon: DATA_VISIBILITY_MATRIX §6 (unlock 4 条件) / Variant B proposal で translator が明記
決定: ガバナンスは 4 chip の 1 行サマリー + 「詳細を確認」 → /app/ceo/governance サブルート teaser
現状の ExecutiveAggregateSection は structural lane / semantic lane / reviewer process / labor legitimacy の 4 状態を テキスト詳細付き inline で表示。 経営者 landing 画面としては cognitive load 大。 chip + status のみ landing に残し、 詳細は別ルートへ。 mockup では /app/ceo/governance リンクをクリックすると toast が出る (実装時に実ルートに置き換え)。
canon: permanent-ui-principles §7 / research: P-06 (Workday overview → discovery board model) / Variant B proposal の新規 route 1 つ
3. 採用したトークン (design_system_v1 全数)
| 箇所 | トークン | 用途 |
|---|
| page background | --color-warm-tint #FAFAF7 | off-white base (design_system_v1 §1 anti-pattern: aggressive backgrounds NG) |
| portal header / cards | --color-paper #FFFFFF + --border #E5E7EB | resting card surface (§4 --shadow-sm) |
| 北極星 H1 border | --color-kashi-evergreen #1F3D33 2px | brand accent、 北極星 emphasis (§1 primary palette) |
| H1 数値 | --fs-display fluid clamp / Fraunces serif | 視覚 hierarchy 最上位 (§2 --text-display) |
| secondary stat 数値 | --fs-h2 / Fraunces serif | 北極星より demote (§2 type scale) |
| role boundary note | --color-kashi-evergreen 3px left border | 常時 visible boundary 明示 |
| window info bar | --kashi-state-info #3B82F6 + --info-bg #EFF6FF | 誠実性ゲート可視化 (§1 semantic state) |
| suppression footer | --color-paper-tint + 1px dashed --border + italic | verbatim copy が他コピーと混同しない trust artifact (§1) |
| evidence-grade badges | --kashi-grade-stable #2F6B4A 等 6 token + テキストラベル必須 | color + label の両立 (§1 a11y rule、 §5) |
| governance chip warn | --kashi-state-warning #B45309 | 赤ではなく amber 使用 (§1 anti-pattern: aggressive red) |
| focus ring | 2px outline --color-kashi-evergreen | キーボード a11y (§4 --shadow-focus 代用) |
| radius | --radius-sm 4px / --radius-md 8px / --radius-lg 12px | §4 token 適用 |
| spacing | --space-3 12px / --space-5 24px / --space-8 48px | 8-point grid 厳守 (§3) |
| JP line-height | body 1.75 (1.1× rule) | kanji vertical room (§2 JP rule) |
4. 採用した evidence-grade 表現
design_system_v1 §1 の 6 evidence-grade トークンを以下のように mockup 内に登場させています。 全てに 色 + テキストラベル を併用 (color alone NG)。
| Grade | 色 token | mockup 内出現 |
|---|
| STABLE | #2F6B4A | roster 「管理部」、 全表示折りたたみ内 5 teams |
| HIGH_CONFIDENCE_STABLE | #1F4A33 | 全表示折りたたみ内 「HR部」 「法務部」 |
| EMERGING | #2563EB | roster 「開発部」、 全表示折りたたみ内 「情報システム部」 |
| WEAK | #D97706 | roster 「営業部」 (北極星 review candidate 例) |
| INSUFFICIENT | #9CA3AF | 未登場 (secondary stat strip の 「Insufficient Window: 2」 で集計件数として代替表現) |
| BLOCKED | #6B7280 | 未登場 (mockup data set 内に blocked grade 該当チームなし — 実装時に発生したら表示) |
badge は display: inline-flex + small dot + 大文字ラベルで構成。 colorblind 安全。
5. 削った要素 (現状の Kashi /app/ceo から)
| 現状要素 | 変更 | 理由 |
|---|
| 4-col stat strip (Managers / Review Cands / Insufficient / Adaptation Watch) |
→ Review Cands を H1 北極星化、 残り 3 を secondary 3-col に降格 |
P-01 5-8 metric limit + 北極星 1 つに集中 |
| Plan C 集計 5-col grid (always inline) |
→ accordion 折りたたみ (closed by default) |
P-06 progressive disclosure、 経営判断の主タスクではない |
| Positive 集計 5-col grid (always inline) |
→ accordion 折りたたみ (closed by default) |
P-06 progressive disclosure |
| 12 manager flat roster (all inline) |
→ Review candidate 3 件 default 表示 + 残り 9 件 accordion |
P-06 progressive disclosure + 主タスク (review-worthy signal) に焦点 |
| ExecutiveAggregateSection (4 状態 inline テキスト詳細付き) |
→ 4 status chip + 「詳細を確認」 → /app/ceo/governance |
P-06 + permanent-ui-principles §7 (discoverable, not dumped) |
| coverage strip 内の小テキスト window 注記 |
→ H1 メトリクスカード内の info bar として昇格 |
P-04 honest window disclosure (現在埋没で見えない) |
6. 追加した要素 (現状にない)
| 新規要素 | 採用根拠 |
|---|
| 役割境界 inline note (「あなたは経営者として閲覧中 \| 集約データのみ \| 個人識別情報なし \| k-anon 5名未満は抑制」) |
permanent-ui-principles §3 §11 + research P-05 (3 refs: Stripe / Workday / Lattice) |
| 北極星カード内 inline suppression text (「(うち 2 teams は team_size < 5 のため抑制)」) |
research P-03 + DATA_VISIBILITY_MATRIX §5 + canon-conflict X-05 防止 |
| 北極星カード下 verbatim suppression footer 「観察ウィンドウ内でチーム規模が比較可能になると更新されます」 |
WORKER_FACING_TRUST_CANON §6.2 (canon 要件) + Round 1 brief 明示要求 |
| Window info bar (青系) inside polaris card |
research P-04 + AC-05 trust gate UI 上明示 |
| Roster card 内 「unlock 済」 pill / 「unlock 4 条件未充足」 lock indicator |
DATA_VISIBILITY_MATRIX §6 / Variant B proposal 明示 |
「ガバナンス詳細を確認 → /app/ceo/governance」 サブルート teaser link |
research P-06 + Variant B proposal (新規 route 1 つ) |
| Audit footer (org_id / snapshot_id / build) + 中立 disclaimer 「Kashi は組織問題を自動診断する AI ではありません」 |
permanent-ui-principles §11 audit semantics、 X-04 (AI narrative diagnosis) 防止 |
7. Canon compliance チェック (X-01〜X-05 全 5 pattern)
Round 1 brief 重要制約: 5 canon-conflict pattern (X-01〜X-05) の混入を厳禁。 mockup での自己審査結果:
| Canon | 判定 | 確認内容 |
|---|
| X-01 個別離職スコア NG |
PASS |
個別 manager / 個別 employee に紐づく score / risk 表記なし。 全 metric は aggregate count (N teams / N managers)。 「at-risk employee」 「予測退職」 等 forbidden wording 不使用 |
| X-02 manager ランキング NG |
PASS |
roster sort は alphabetical only 明示。 grade 順 sort 機能なし。 全表示折りたたみ内も同じ。 Review candidate 3 件の inline 表示は 「review-worthy filter」 による状態抽出であり moral ranking ではない (reason code RC-XXX で根拠明示) |
| X-03 org health single score NG |
PASS |
単一の組織健康スコア / Org Health: NN/100 等の集約スコアを表示せず。 全ては independent な count metric。 北極星 「Review Candidates 3」 は count、 score ではない。 Positive 集計 accordion 内に明示的 disclaimer 「組織健康スコアではない」 |
| X-04 AI narrative diagnosis NG |
PASS |
「AI が組織問題を自動検出」 framing なし。 全コピーは固定テンプレート + 集計数のみ。 audit footer に中立 disclaimer 「Kashi は組織問題を自動診断する AI ではありません。 review-support signal のみ提供します」 明記 |
| X-05 silent k-anon suppression NG |
PASS |
k-anon 未満 = 必ず suppression reason verbatim 表示 (北極星カード下 「観察ウィンドウ内でチーム規模が比較可能になると更新されます」 完全一致)。 さらに各 stat denominator に 「of N (M suppressed)」 inline 表示。 silent 0 表示なし |
| 個人 drill-down 動線 |
PASS |
個人 drill-down リンクは一切無し。 「集約詳細」 リンクのみ (= aggregate level)。 「unlock 4 条件未充足」 のカードは drill-link を表示せず lock note のみ |
| Role boundary label visible |
PASS |
H1 直下に常時表示 (sticky でない、 scroll で隠れるが H1 自体が page top に常時固定的に存在) |
| Red alert 禁止 |
PASS |
赤色 (--kashi-state-error #B91C1C) を一切使用せず。 governance 「Labor Legitimacy」 warn は amber (#B45309)、 grade weak も amber、 全 evidence-grade も emerald 系で構成 |
8. 既知のトレードオフ / 未解決事項
トレードオフ: 北極星 「Review Candidates」 = 0 のときの mockup data 未提示
mockup は 3 件で表示しているため、 empty state UI を Justine が直接確認できない。 React 実装時に必須仕様化 (「本観察ウィンドウ内に review-worthy aggregate signal はありません」 固定文言)。 friends/mentor feedback で 「0 のとき UI どうなる?」 質問が出たらこの設計判断を口頭で補足。
trade-off / Variant B proposal の最大リスクとして translator 明示 → mockup では未表現
未解決: sparkline / 前週比 trend は本 mockup に含まれない (Variant B hard-gate)
P-07 sparkline は Round 1 brief で 「hard-gate のため含めず」 と明示。 longitudinal moat の 視覚的 表現は本 mockup では window note 「直近 90 日固定」 とロスターの 「N=8 ミーティング」 表示のみ。 「経営者が trend 見たい」 feedback が出たら、 Variant C (sparkline + k-anon hard-gate 実装) の incremental 追加を Round 2 で検討。
Round 1 brief: 「P-07 sparkline は今回 hard-gate で含めず」 / Variant C proposal で扱い
未解決: /app/ceo/governance サブルートの実体 UI は本 mockup では teaser のみ
Variant B は新規 route 1 つ (governance 詳細) を必要とする。 本 mockup ではリンクから toast を出すだけで、 サブルート自体の UI は未設計。 React 実装時は ExecutiveAggregateSection の現コンテンツをサブルートに移植する想定 (proposal 明示)。 friends/mentor が 「ガバナンス詳細とは具体的に何?」 と聞いた場合の口頭補足が必要。
Variant B proposal 工数感: M (medium) 4-6 day 内訳に含まれる
未解決: Mobile 375px breakpoint の polaris card 値が縦長になる
モバイル 768px 以下で polaris-content が 2-col → 1-col に変更され、 数値 「3」 と descrption 「reviewer 対応が必要な aggregate signal」 が縦に並ぶ。 デザイン上の問題はないが、 数値が独立して上に来るので 「3」 が文脈なしに見える瞬間がある。 React 実装時は viewport 観察で要確認。
responsive baseline: 1280 / 768 確認済み、 375 mobile は bonus 扱い
トレードオフ: 「集約詳細」 リンクは現状 全 unlock 済 (mockup 簡略化)
実際は DATA_VISIBILITY_MATRIX §6 unlock 4 条件 (pilot phase, evidence grade, no dispute freeze, grace-period) を全充足したカードのみ unlock。 mockup では 「営業部」 「開発部」 を unlock 済、 「管理部」 「経理部」 を未充足として表示 (= unlock 状態分岐 UI を見せる目的)。 比率は 真の運用比率と異なる可能性 がある (実運用では未充足の方が多いかも)。
DATA_VISIBILITY_MATRIX §6 / mockup の目的: 「unlock 状態の 2 パターン UI を見せる」
9. 既存実装 (kashi/src/app/app/ceo/page.tsx) からの diff
React 実装担当エンジニアへの引き継ぎ。 mockup を実装する際の対象ファイルと影響範囲。
| 領域 | 影響 |
|---|
| 該当 route |
kashi/src/app/app/ceo/page.tsx (ExecutiveBriefPage) の同一 route で再構築 |
| 新規 route |
kashi/src/app/app/ceo/governance/page.tsx 新設 (governance 詳細移植先) |
| 新規 components |
(a) PolarisMetricCard (北極星 H1 + window info bar + suppression footer 一体) (b) RosterCardWithUnlock (unlock pill / lock indicator 分岐) (c) SecondaryStatStrip (3-col secondary) (d) GovernanceCompactPanel (4 chips + teaser link) (e) RoleBoundaryNote (永続化可) |
| 既存 components 改修 |
ExecutiveAggregateSection → governance サブルートに移植 + landing には compact panel を返す |
| i18n 追加 key (推定) |
(a) app.ceo.polaris.label (b) app.ceo.polaris.empty (= 0 件時の固定文言) (c) app.ceo.windowInfobar.reason (d) app.ceo.boundary.items.* 4 keys (e) app.ceo.suppressionFooter.verbatim (= canon 完全一致文言、 i18n test に verbatim pin 必須 — memory feedback_i18n_verbatim_test_pinning_governance 該当) (f) app.ceo.accordion.roster.label (g) app.ceo.accordion.planC.label (h) app.ceo.accordion.positive.label (i) app.ceo.governance.detailLink (j) app.ceo.rosterCard.unlockPill (k) app.ceo.rosterCard.lockedNote |
| RLS 変更 |
不要 (既存 unlock ロジックと aggregate query 流用) |
| r19 既存課題 同時解消 |
r19 §3.2 background 不統一、 §3.5 card border 不統一、 §4.1-4.2 type scale、 §5.1 evidence grade palette、 §6.3 warning vs error 混同、 §7.4 disclaimer language 不整合 (推定 8-10 件) |
| テスト追加 |
(a) suppression footer verbatim 一致 test (i18n pin) (b) X-02 grade 順 sort 不可 (e2e: alphabetical のみ) (c) X-05 silent suppression なし (k-anon 未満カードは footer + denominator 両方に出る) (d) role boundary note の常時可視性 (e) unlock 4 条件未充足カードに drill-link が出ない |
| 影響を受ける既存テスト |
ExecutiveBriefPage の snapshot / DOM test 全件、 ExecutiveAggregateSection の test (一部は governance サブルートに移動) |
10. Justine confirm / redo 判断ポイント
Justine が friends/mentor 共有時、 以下に着目してフィードバック収集
Q1: 北極星 「Review Candidates 3 of 14」 が 5 秒で経営判断に直結するか?
→ NO のとき: Variant B の主タスク設計を見直す必要あり。 別 metric が北極星候補かも (例: Insufficient Window / Adaptation Watch)。 → redo proposal app-ceo "北極星を XX に変更"
Q2: 役割境界 note 4 項目 (集約のみ / 個人識別なし / k-anon) は 説明的すぎ ないか?
→ YES のとき: pipe 区切り表示を 2 行に折る、 もしくは hover/click で expand する pattern に変更可能
Q3: 折りたたみ (accordion) の default-closed が 「重要情報を隠している」 印象を与えないか?
→ YES のとき: 開閉状態の persist (localStorage) や、 件数の visible 化 (現状でも 「12 of 14」 「aggregate」 を chip 表示) を強化検討
Q4: ガバナンス 4 chip + 「詳細を確認」 サブルートが 「飛ばされる」 リスク
→ YES のとき: chip に直接 inline expand (accordion 化) して別ルート不要にする選択肢あり。 ただし P-06 + landing cognitive load との trade-off
Q5: longitudinal moat (時系列性) が画面から伝わるか?
→ NO のとき: Variant C の sparkline + k-anon hard-gate を Round 2 で incremental 追加検討 (proposal Variant C で詳細)。 ただし RLS 変更 + DD 影響あり
Q6: suppression footer (verbatim) が読まれるか?
→ NO のとき: 配置位置 (現在は北極星カード下) を見直し、 もしくは強調 (icon 付与) 検討。 ただし canon 文言は変更不可 (WORKER_FACING_TRUST_CANON §6.2)
Q7: 「Enterprise」 badge / 「CEO」 role badge / ロゴ周りが 「executive ぽいか」
→ NO のとき: PortalHeader の色 / 密度を Round 2 で見直し。 ただし PortalHeader は全 surface で共有のため複数 mockup と統合判断必要
承認後の流れ: Justine が 「approve app-ceo」 すると、 この mockup を bundle に追加して全 5 surface の bundle review を待つ。 friends/mentor からの feedback がある場合は redo mockup app-ceo "feedback内容" で本 mockup のみ再構築可能。
11. 補足 — mockup 動作の前提
- 本 mockup は 静的 HTML/CSS + vanilla JS のみ。 React / Vue / build step 一切なし。 ブラウザで
index.html を開くだけで動作。
- 外部 CDN は Google Fonts (Fraunces / IBM Plex Sans / Plex Mono / Zen Kaku Gothic New) のみ。 オフラインだとフォント代替表示。
- accordion (3 個) は HTML5
<details> ネイティブ要素を使用。 chevron 回転のみ CSS transform で実装。
- キーボード操作: Tab で focus 巡回、 Escape で全 accordion 閉じる (vanilla JS で追加)。 focus-visible には 2px evergreen outline 適用。
- 「集約詳細」 「詳細を確認」 リンクは click 時に モックアップ用 toast を表示 (実装時の遷移先を予告)。 実 ルート遷移はしない。
- Dummy data: 「代表 佐藤さん」 が 「demo株式会社」 (30 名規模) を俯瞰する想定。 全マネージャー名は実在しない部署名のみ (「営業部」 「開発部」 等)、 個人名は header の 「代表 佐藤」 のみで実データ regress なし。
- responsive baseline: 1280px desktop / 1024px tablet-wide / 768px tablet / 375px mobile で確認済み。