Justine feedback 「app-me/C を基礎として role 跨って同じ雰囲気に」 を受け、 旧 app-ceo/C の narrative aggregate card + 4 drill-down hubs + sparkline section を 全廃止。 app-me/C と token / typography / shell / inbox archetype を 100% 共有 し、 CEO role 固有の adaptation (nav 内容 / Role boundary banner 文言 / inbox item 7 件の content / filter chip set) のみ差し替え。
最大の trade-off:
narrative aggregate card 廃止により 「一目で org 全体の trend を把握する」 機能が下がる。
これは Round 2 で gateKanonSparkline() 実装後に inbox item 内 mini-sparkline を追加するか、
Overview tab に集計 view を焼き直すかを判断する。
旧 app-ceo/C は 「narrative card (固定テンプレ)」 + 「4 hubs grid」 + 「3 sparklines section」 の 3 ブロック構成で、 app-me / mirror-me / admin / reviewer と完全に異質な IA だった。 regen 版は app-me/C の単一 inbox timeline 構造をそのまま継承 し、 CEO role 固有 metric は inbox item の content として配置。
根拠: Justine feedback 「role 跨って同じ雰囲気に」 · cross-surface IA 統一は app-me/C 内の 「未解決 1」 (cross-surface IA 分裂) を解消する方向 · canon: permanent-ui-principles §9 (no narrative diagnosis, no single org-health score)
app-me/C は (Inbox / Reflection / Settings) の 3 items。 CEO 版は (Inbox / Overview / Settings) の 3 items で nav の slot 数・位置・activeness 表現を完全一致。 Overview は 「Round 2 実装」 placeholder で、 Plan C 集計 / Positive 集計 / governance ステータス / longitudinal trend chart 等を集約する想定 (narrative card 廃止の代替)。
brief 明示指定 · app-me/C との visual parity 維持のため slot 数同一
旧 app-ceo/C は max-width 1280px の 4-column grid (hubs-grid) を使用していたが、 regen 版は
app-me/C と同じ main.page { max-width: 860px; } single-column を採用。
cross-surface で同じ画面幅・余白で読めるようにし、 「Kashi はどの role でも同じ読み体験」 という連続性を出す。
canon: app-me/C 継承 · permanent-ui-principles §7 (1 H1 + 1 banner + 3-5 cards visible)
app-me/C の fold 上 (Privacy banner + Filter chip + 今週 3 件) と同等の上半身。 Role boundary banner は H1 直下に配置 (brief 要件)、 同じ emerald-50 背景 + evergreen-deep ボーダー archetype で Privacy banner と視覚的に一対関係を成す。
brief 要件 「Role boundary banner H1 直下」 · app-me/C banner archetype を visual parity 維持
app-me/C と同じ grouping を採用。 CEO 用 inbox は 1 週間 0-2 件ペース (member よりさらに低頻度) なので 3 段で十分。
app-me/C 完全継承
| Token | Surface (本 mockup) | app-me/C と共通 |
|---|---|---|
--color-kashi-evergreen-deep #1F4A33 | page-title / role-badge / btn-primary / focus ring | YES |
--color-kashi-evergreen #2F6B4A | nav active border / unread dot / link / kind-review dot | YES |
--emerald-50 #ECFDF5 | Role boundary banner bg / aggregate-pill bg / boundary-copy bg | YES |
--cream #F5F0E6 | btn-secondary hover | YES |
--paper-tint #F7F8FA | is-read / filter-chip / window-chip / suppression-footer bg | YES |
--kashi-grade-stable #2F6B4A | STABLE pill (Positive item) | YES |
--kashi-grade-emerging #2563EB | EMERGING pill (Plan C item) / kind-trend dot | YES |
--kashi-grade-weak #D97706 | kind-governance dot | YES |
--kashi-grade-blocked #6B7280 | SUPPRESSED pill | YES |
--text-h1 40px / Fraunces 600 | page-title (1 H1 only) | YES |
--text-body 16px / IBM Plex Sans | inbox-item-title | YES |
--text-caption 12px / IBM Plex Mono | kicker / group label / reason code / ts / grade pill | YES |
--space-8 48px | page top padding | YES |
--radius-md 8px | inbox-item / Role boundary banner / filter chip | YES |
--shadow-sm / --shadow-focus | resting card / a11y focus ring | YES |
新規トークン: 0 件。 aggregate-pill は既存 token (--emerald-50 + --color-kashi-evergreen) のみで構成、 新しい変数定義なし。 これにより app-me/C と完全に同じ視覚的トーンで CEO surface が成立する。
| Grade / Marker | Mockup 内 使用箇所 | Color · Text label |
|---|---|---|
| AGGREGATE / k-anon clear | Review Candidates item · Longitudinal trend item · HR escalation item | #ECFDF5 bg + #1F4A33 text + 「AGGREGATE / k-anon clear」 (新規 aggregate-pill、 CEO 固有の 「これは集約値です」 marker) |
| STABLE | Positive count item | #d9ebe0 bg + #14532d text + 「STABLE」 |
| EMERGING | Plan C progress item | #dbeafe bg + #1e3a8a text + 「EMERGING」 |
| SUPPRESSED | k-anon suppressed item | #e5e7eb bg + #4b5563 text + 「SUPPRESSED」 + verbatim suppression footer |
どれも color + text 両方 を表示 (design_system_v1.md §1 a11y rule 「never color-only」 遵守)。 grade pill の dot は更に visual reinforcement (color-blind 安全)。
旧 narrative card には 「固定テンプレート」 marker pill があったが、 narrative card 自体を廃止したため
新しく 各 inbox item レベルで「これは集約値です」 を明示する aggregate-pill を導入。
Member surface には不要 (Member の inbox 内容は元々 self-data) だが、 CEO は §4 の Y(k-anon) 制約上、
「個人 data ではなく集約 data」 を毎回確認できることが信頼担保に直結。 aggregate-pill は
既存 token のみで構成しており、 新規 token 追加ではない (= app-me/C の design 言語を破らない)。
旧版の主役だった narrative card は 「固定テンプレに集計値を差し込んだ headline 文」 を演出していたが、 brief 指示 「narrative card は廃止して inbox style に」 に従って完全廃止。 該当する 3 つの主要 metric (review-candidate count / Plan C aggregate / governance state) は inbox item 1 件ずつに分解して timeline に配置。
理由: app-me/C と異質な card type 増加を防ぐ · 「narrative ≒ AI diagnosis」 と CEO に誤解される P-04 リスク回避 · canon §9 「no narrative diagnosis」 強化
旧版 4-column hubs grid (Review Candidates / Plan C / Positive / Governance) は廃止。 4 hub の機能はそれぞれ inbox item として配置し直し (Review Candidates → item 1、 Plan C → item 2、 Positive → item 3、 Governance → item 4)。 「詳細を見る」 の遷移先は item 内 btn-primary/btn-secondary で個別に明記。
理由: app-me/C と同じ single-column timeline に統一 · 4-col grid は app-me/C には存在せず cross-surface 分裂源
旧版で gateKanonSparkline() の挙動 (cleared 2 つ + suppressed 1 つ) を 3 枚のカードで visualize していた
sparkline section を廃止。 brief 指示 「sparkline は今回省略、 Round 2 で gateKanonSparkline() 後に検討、
mockup 内 inbox item で trend 言及まで」 に従う。
代わりに inbox item 6 (Longitudinal trend alert) で 「7 週で 2 → 3 に小幅増」 を文章 + aggregate-pill で示し、
実 sparkline は Round 2 で gateKanonSparkline() 実装と同時に inbox item 内 mini-sparkline として再導入する。
brief 明示指定 · canon: permanent-ui-principles §9 (suppress / missing-data state を見せる UI は必須、 ただし demo 目的だけで sparkline を出すのは P-04 risk)
旧版の breadcrumb は廃止。 app-me/C は breadcrumb を持たず、 portal nav の active state で現在地を示す 設計なので、 CEO 版もそれに合わせる。
app-me/C との visual parity
旧版の page-eyebrow 横の Enterprise バッジ廃止。 app-me/C の kicker (「/app/inbox · Member private timeline」) と同じ単一行 kicker (「/app/ceo/inbox · Executive aggregate timeline」) に統一。
app-me/C との visual parity
旧版の audit-footer (org_id + snapshot_id + build hash + 「narrative card は AI 生成ではない」 disclaimer) は廃止。 app-me/C の page-footer trust note (既読/未読 client-local 説明 + Kashi は何をしないか) と同等の archetype に統一し、 org_id / snapshot_id は CEO 用 footer に含めない (mockup を Justine が共有する際に、 共同創業者・メンターから 「これ何の ID?」 と聞かれる無用なノイズになるため)。
app-me/C との visual parity · footer は 「trust note」 単機能に絞る
新規追加 (旧版にも role-boundary-note は存在したが、 banner archetype が異なっていた)。
Privacy banner と同じ emerald-50 + evergreen-deep border + svg-icon archetype を使用、
内容のみ CEO 適応: 経営層として閲覧中 | 集約データのみ | 個人識別情報なし | k-anon 5 名未満は抑制 verbatim。
Member 版にない 「これは集約値です」 marker。 grade-pill と同じ shape / size / typography で、 色だけ emerald-50 + evergreen-deep に統一。 用途: Review Candidates / Longitudinal trend / HR escalation の 3 件で 「個人 data ではない、 aggregate のみ」 を visual reinforce。 narrative card 廃止に伴う代替信頼担保。
canon: DATA_VISIBILITY_MATRIX §3 row 「Org-level executive aggregates: Y(k-anon)」 補強
app-me/C の chip set (All / Unread / Patterns / 1on1 prep / Notices / Disputes) は member specific。 CEO 版は 7 chip (Review / Plan C / Positive / Governance / Suppressed の 5 専門 + All / Unread)。 vanilla JS filter logic も拡張 (Review chip = review + trend、 Governance chip = governance + escalation、 等)。
旧版に存在した 「観察ウィンドウ内でチーム規模が比較可能になると更新されます」 verbatim copy は維持。 ただし narrative card 内の独立ブロックではなく、 inbox item (k-anon suppressed) の中の suppression-footer sub-component に組み込み。 visual: paper-tint bg + 1px dashed border + italic + monospace 「SUPPRESSION」 label。
canon: DATA_VISIBILITY_MATRIX §5 + WORKER_FACING_TRUST_CANON §6.2 (executive-facing canonical suppression footer verbatim) 完全準拠
Positive count item に専用 boundary-copy block を追加: 「これは観測されたポジティブな構造パターンです。 別の問題の不在を意味しません」 (brief 要件 verbatim)。 emerald-50 bg + evergreen 3px left border で banner と同じ archetype を踏襲、 italic / monospace ではなく Sans 本文体で 「読ませる文言」 として強調。
brief 要件 verbatim · canon: permanent-ui-principles §6 (no-signal rule、 「all clear」 連想 禁止)
旧 narrative card は 「今週、 demo株式会社 全体で 14 teams 中 3 teams が reviewer 対応待ち window に入りました」 のような 1 文 headline で fold 上一目で全体像を把握できる設計だった。 regen 版は inbox item 1 件目で 同等の情報を提供するが、 視覚的なインパクトは headline 文 → 通常 item に弱化。
緩和策 (Round 2):
gateKanonSparkline() 実装後に
Longitudinal trend item の中に 12-16px sparkline を埋め込み (window-chip と同列)。 inbox archetype を破らずに trend 表現追加。推奨: (C)。 ただし Overview 設計は本 round では未着手なので Round 2 で translator と相談。
§4 employer-exposure 防止ドクトリンを守るため、 既読状態は DB に書かず localStorage に保存。 結果、 端末跨ぎ (PC / iPhone) で既読状態が同期されない。 CEO は member よりも複数端末で 確認する頻度が高いと想定されるため、 この制約の影響は CEO surface の方が大きい可能性。 実装時には Round 2 で encrypted client-side state (E2E) 導入を検討するか、 「既読」 概念自体を廃止して 「最新 N 件表示」 に倒すかを判断。
CEO の post-login 着地 URL が /app/ceo 等から /app/ceo/inbox に変更。
既存 bookmark / muscle memory に影響。 redirect を 6 ヶ月維持 (gradual deprecation) 推奨。
member 側の /app/me → /app/inbox 変更 (app-me/C 提案) と同じ migration window で並走させると影響を 1 リリースに集約可能。
regen 版 nav に Overview tab を新設したが、 中身は placeholder。
「narrative aggregate card + Plan C 集計 + Positive 集計 + Governance ステータス + longitudinal trend chart」 を
まるごと焼き直すのか、 一部だけにするのかを Round 2 で決定。
Justine 判断点: 「Overview tab は必要か、 inbox 1 本に倒すか」。
member + CEO が inbox archetype で揃ったが、 mirror-me (Manager) / admin / reviewer の 3 surface が まだ dashboard archetype のまま。 Round 2 で全 5 surface inbox 化するか、 段階適用するかを Justine が決定する必要。 推奨: mirror-me を先に inbox 化 (Manager の daily check-in persona は inbox metaphor が完全 fit)、 admin / reviewer は dashboard 維持 (operational tooling のため inbox metaphor が合わない可能性)。
| Canon item | 判定 | 実装場所 |
|---|---|---|
| §2 forbidden wording (健康スコア / 監視 / at-risk / all clear / 離職予測 / manager ランキング) | 0 hit | grep 0 件確認済。 footer disavowal で 「does not」 構文で 5 種の forbidden 行為を明示否認 |
| §3 role boundary | PASS | CEO 専用。 Role boundary banner で 「経営層として閲覧中 | 集約データのみ | 個人識別情報なし | k-anon 5 名未満は抑制」 を H1 直下に明示 |
| §4 visibility per role (DATA_VISIBILITY_MATRIX) | PASS | Org-level executive aggregates = Y(k-anon) のみ。 全 inbox item が team_id 集約レベルで止まり、 manager / member 個人特定への drill-down 一切無し |
| §5 evidence semantics | PASS | 各 inbox item に grade-pill or aggregate-pill + reason-code + window-chip + not-a-verdict disclaimer |
| §6 no-signal rule | PASS | 「all clear」「安全」 一切不使用。 k-anon suppressed item は SUPPRESSION footer verbatim copy。 empty-state も reason-code 付き |
| §7 progressive disclosure | PASS | 1 H1 + 1 banner + 1 filter bar + 4 inbox item (今週) visible by default。 drilldown は item 内 btn-primary 経由 |
| §8 cognitive load | PASS | 4 hubs grid + 3 sparkline section を廃止して inbox 1 本に統合、 「すべて同じ重さに見える」 問題を根本解決 |
| §9 dashboard rules (no narrative diagnosis / no org-health score / no rank people) | PASS | narrative card 廃止 = X-04 (AI narrative diagnosis) 完全排除。 X-03 (org health single score) / X-01 (個別離職スコア) / X-02 (manager ランキング) も該当 UI 一切無し |
| §11 internal screen rules | PASS | role label + visibility boundary + grade + reason + empty state + suppression footer すべて含む |
| §12 a11y | PASS | 1 H1, sane heading order, focus-visible (3px evergreen ring), semantic nav/main/article, pill = color + text + dot (三重 reinforcement) |
| §13 visual system | PASS | off-white + dark evergreen, calm badge, surveillance icon / eye / red-alert 一切無し |
| Forbidden pattern | Hit 数 |
|---|---|
¥[0-9]+,[0-9]{3} (金額) | 0 |
90 ?日 / 60 ?日 / 180 ?日 (期間で30日以外、 ただし90日は observed window 用語として例外、 価格・契約期間としては 0) | 0 (90 日は 「window: 直近 90 日」 = observed window として canon 内、 forbidden 「契約 90 日」 とは別概念) |
Google Meet / Microsoft Teams / Webex | 0 |
SSO / SAML / OIDC / SCIM | 0 |
SOC 2 / ISO 27001 / 27018 / 30414 | 0 |
専任 ?CS / ソリューションエンジニア / カスタマーサクセス | 0 |
離職率.{0,3}[0-9]+ ?% / ROI ¥ / 生産性.{0,3}[0-9]+ ?% | 0 |
健康スコア / 健康度 | 0 |
離職予測 / at[-_ ]risk | 0 |
監視 / surveillance | 0 |
all clear / 問題なし | 0 |
ランキング / ranking | 0 |
AI narrative / AI 診断 / narrative diagnosis | 1 (footer disavowal 「does not generate AI narrative diagnosis」 = canon doctrine reinforcement、 違反ではない) |
Note on the 「90 日」 hit: canon facts whitelist は 「pilot 期間 90 日」 (架空) の禁止を意味するもので、 本 mockup の 「window: 直近 90 日」 は observed window 用語 として canon 内の概念 (pattern_summary の集約期間)。 これは forbidden 「契約期間 90 日 fabricate」 とは別系統で正当。
| Pattern | 該当 UI |
|---|---|
| X-01 個別離職スコア | 無し (individual identity 一切無し、 全 inbox item が aggregate-only) |
| X-02 manager ランキング | 無し (manager 名 / 順位 / per-manager metric 一切無し) |
| X-03 org health single score | 無し (1 つの 「健康度」 数字なし、 各 metric は独立 reason-code 付き) |
| X-04 AI narrative diagnosis | 無し (narrative card 廃止 = 旧 「14 teams 中 3 teams が reviewer 対応待ち window に入りました」 headline 文も廃止、 inbox item は事実列挙のみ) |
| X-05 silent k-anon suppression | 無し (k-anon suppressed item は explicit suppression footer verbatim copy で 「観察ウィンドウ内でチーム規模が比較可能になると更新されます」 を明示) |
本 mockup を React に実装する場合の注意:
kashi/src/app/app/ceo/inbox/page.tsx ·
旧 kashi/src/app/app/ceo/page.tsx は kashi/src/app/app/ceo/overview/page.tsx に
移行 (narrative card / 4 hubs / sparkline は Overview に焼き直すか廃止かを Round 2 で判断)PortalHeader.tsx (CEO nav を 3 items に統一) ·
portal routing (CEO post-login redirect を /app/ceo/inbox へ)InboxList / InboxItem / InboxGroupLabel / FilterChip / InboxEmpty
を CEO surface で 再利用。 加えて CEO 固有:
AggregatePill (新規、 既存 grade-pill primitive を流用) ·
RoleBoundaryBanner (member の PrivacyBanner と同 archetype の variant)test/i18n-r17-forbidden-marketing.test.ts に safe-wording assert として追加 (改変防止)gateKanonSparkline() 実装 → inbox item 内 mini-sparkline 追加 ·
(3) cross-surface IA 統一 (mirror-me / admin / reviewer の inbox 化判断)