Design Decisions — app-admin — Variant C (regen) — Round 1

Generated by kashi-ui-mockupper · Picked variant: C (regen on Justine feedback) · output: 03_mockups/app-admin/C/index.html · baseline: 03_mockups/app-me/C/index.html

Regen 趣旨 (Justine feedback)

Justine feedback 「app-me/C を基盤に role 跨って同じ雷囲気に」 を受けて、 旧 app-admin/C (evergreen filled scope banner / inbox-row grid layout / fold-section accordion / state strip 3-up) を すべて捨て、 app-me/C の design language (compact privacy-style banner / vertical inbox item card / filter chip / footer mark) を 1:1 で admin role に送り込んだ

あだ名は admin / nav 3 items / persona / inbox の item 内容 (= operational task のみ、 ミーティング中身に立ち入る item は 0 件)。 (canon-verify discipline: 全 forbidden patterns 0 件、 pilot 「1 チーム / 30 日 / 共同レビュー / 毎月 3 枠限定」 厳守)。

1. 一致度 (app-me/C DNA · admin 固有の違い)

要素app-me/C (baseline)app-admin/C (本mockup)
token blockevergreen #2F6B4A / deep #1F4A33 / cream / emerald-50 / grade colorsVERBATIM 1:1 (ネーフンンフソフソフン導入無し)
typographyFraunces (H1, item title) / IBM Plex Sans (body) / IBM Plex Mono (kicker, ts, reason code) / Zen KakuVERBATIM 1:1
page shellmain.page max-width 860px + --space-8 top paddingVERBATIM 1:1
PortalHeader2-row sticky (brand + nav) / cream sub bg / role-badge monoVERBATIM 1:1 (role label = ADMIN、 nav items のみ違う)
nav3 items: Inbox / Reflection / Settings3 items: Inbox / Members / Settings
personamember 山田さん (営業)admin 鈴木さん (人事部) = manager_A 相当
H1 areakicker (mono uppercase) + h1 (Fraunces 40px deep) + subtitleVERBATIM 1:1 (title text のみ違う)
cross-surface yellow bannerRound 2 IA 判断材料VERBATIM 1:1 (regen 趣旨を明記)
compact banner (H1 直下)Privacy banner: emerald-50 + shield icon + 1 行 summary + 右 2 buttons同じ layout / 同じ token で文言だけ scope boundary に送り込み
filter chip rowAll / Unread / Patterns / 1on1 prep / Notices / Disputes同じ component: All / Unread / Approvals / Notices / Job alerts / Pilot status
group label今週 / 先週 / 過去 30 日 (mono uppercase, dashed border)VERBATIM 1:1
inbox item cardunread dot + kind label (mono caps + dot) + ts (mono) + Title + window-chip + grade-pill + reason-code + desc + not-a-verdict 注釈 + 1 action + mark-as-readVERBATIM 1:1 (item kind taxonomy のみ admin 用、 同じ三重 reinforcement)
grade pillcolor + text + dot 三重 reinforcement (a11y)VERBATIM 1:1 (admin 用は STATUS label: AWAITING APPROVAL / ATTENTION / ON TRACK / INFO を canon grade color に mapping)
archive link + footer mark「もっと前の inbox を見る」 + 3 ブロック governance note (既読 client-local / Kashi はしません 等)VERBATIM 1:1 (admin 用に第 2 ブロックを 「Admin の役割境界」 に置換、 第 1 と第 3 はそのまま)
mark-as-readlocalStorage client-local、 DB write 無しVERBATIM 1:1 (LS key だけ kashi-admin-inbox-read-state-v1 namespaced)
responsive breakpoint768px / 480pxVERBATIM 1:1

結果: CSS は ~95% 1:1 继承。 admin 固有の 追加は .kind-provision / .kind-billing / .kind-config / .kind-job / .kind-quality / .kind-security / .kind-pilot の kind dot color mapping だけ (に流用 canonical grade color のみ使用)。 HTML 骨格 は 100% 1:1 (header / page-kicker / page-title / page-subtitle / cross-surface-warn / privacy-banner / filter-bar / inbox-group-label / inbox-list / inbox-item / archive-link / inbox-empty-note / page-footer の構造を全部一致)。

2. Admin 固有の adaptation (明示変更 list)

a. nav 3 items: Inbox / Members / Settings

app-me/C は Inbox / Reflection / Settings だった。 admin role は 自分の reflection を持たず、 代わりに org member roster への access が必要。 (Members 画面の上行きは member id + role + provisioning 状況のみ。 完全に identity claim あゆ structural、 插込まれている日時 / メールアドレス 程度。 canon §4 遵守)

brief 明示指定 · canon DATA_VISIBILITY_MATRIX §3

b. Persona: 鈴木さん (人事部) = manager_A 相当

brief 指定 persona 。 app-me/C は member 山田 (営業) 。 admin 視点を表現するため人事部所属の admin ロール persona に変更。 avatar 文字も 「山」 から 「鈴」 に変更 (同 component)。

brief 明示指定 · demo株式会社 内の admin = HR 役割 (一般的)

c. Scope Boundary banner (H1 直下、 app-me/C の Privacy banner と同じ位置 / スタイル)

app-me/C の Privacy banner は 「自分のアクセス履歴を自分が見る」 場合 。 admin role では対応案: 「自分 (admin) は meeting content を 構造上見られない」 を同じ emerald-50 banner で明示。 表示内容は 「過去 24 h ・ 30 日,meeting-content への admin 閲覧履歴 = 構造上存在しません」 よいは自分自身のアクセス履歴を surface させるのと 同根。 右側 actions も 監査ログ / 権限料大の読み (= app-me/C の アクセス履歴 / 異議申し立て と UX 上 equivalent 。 密封する design choice: emerald-50 + shield icon + Fraunces なしの 1 行 summary、 これは Privacy ownership の visual language を そのまま admin scope boundary 用に拡張。

brief 明示指定 「H1 直下に visible / 同じ位置/スタイル / 文言: 「組織と利用状況の管理者・ ミーティングの中身は閲覧できません」」 · canon: permanent-ui-principles §4 (System Admin scope limit) + DATA_VISIBILITY_MATRIX §3, §8

d. Filter chip set (operational task taxonomy)

app-me/C の filter (Patterns / 1on1 prep / Notices / Disputes) は member reflection 用。 admin role では operational task taxonomy に置換: All / Unread / Approvals (member 招待 + 設定変更) / Notices (data-quality + billing + security) / Job alerts (cron 失敗 等) / Pilot status。 (Patterns / 1on1 prep / Disputes 等 member-only taxonomy は admin inbox には存在しない — DATA_VISIBILITY_MATRIX §3 遵守)

e. Inbox は operational task のみ (7 件)

brief 指定 6-8 件 , 本mockup は 7 件。 各 item は ミーティングの中身・個別メンバーの発話・人別 risk ・分析 に一切立ち入らない。

逆に 本mockup に一切含まれないもの:

canon: §1 「The UI wins by showing less」 + §4 visibility-by-role + DATA_VISIBILITY_MATRIX §3

f. STATUS label = canon grade color の再利用 (新 token 0 件)

admin task には member reflection 的 「grade」 が ない 。 ただし visual 一致のため、 STATUS label を grade-pill component に remap:

新規 color token = 0 件。 canon §5 evidence-grade color を 流用。 color + text + dot 三重 reinforcement は继承。 これは STATUS を 「per-member risk label」 に 流用しないため (canon §9 dashboard rules + §2 forbidden wording 遵守)。

g. canon pilot facts 厳守 (LESSONS 2026-05-28 canon-verify)

Pilot 進行状況 item に 「pilot: 1 チーム / 30 日」 「format: 共同レビュー · 毎月 3 枠限定」 を 全部明記。 canon source: kashi/messages/ja.json pilotCtaSubline「1チーム / 30日間 / 共同レビュー — 毎月3枠限定。」 (canon facts whitelist)。 期間 90 日 / Google Meet / Teams / SOC 2 / SSO / SAML / OIDC / SCIM / 専任 CS / ソリューションエンジニア / 離職率 ROI / ¥ 金額 等の forbidden patterns は 0 件

LESSONS 2026-05-28 「canon-verify discipline」 / /tmp/site_canon_facts.txt の Pilot 仕様 section · memory feedback_canon_n1_promotion_discipline.md

3. 採用した tokens (再掲、 全 token は app-me/C 1:1)

Token本mockup 使用箇所
--color-kashi-evergreen-deep #1F4A33page-title / role-badge / btn-primary / focus ring / privacy-summary strong / inbox-item-title
--color-kashi-evergreen #2F6B4Anav active border / unread dot / link / kind-provision dot / kind-config dot
--emerald-50 #ECFDF5scope boundary banner background
--cream #F5F0E6btn-secondary hover (default uses paper bg)
--paper-tint #F7F8FAis-read state / filter chip default / window chip / inbox-empty-note
--kashi-grade-stable #2F6B4AON TRACK pill (pilot)
--kashi-grade-emerging #2563EBAWAITING APPROVAL / AWAITING REVIEW pill / kind-billing dot / kind-security dot
--kashi-grade-weak #D97706ATTENTION pill (cron / data-quality) / kind-job dot / kind-quality dot
--kashi-grade-insufficient #9CA3AFINFO pill (billing / security audit)
--text-h1 40px / Fraunces 600page-title (1 H1)
--text-body-lg 18px / Fraunces 500inbox-item-title (Title weight、 app-me/C と同じ)
--text-body-sm 14px / IBM Plex Sansinbox-item-desc / page-subtitle
--text-caption 12px / IBM Plex Monokicker / group label / reason code / ts / grade pill / role badge
--space-8 48pxpage top padding
--radius-md 8pxinbox-item / privacy-banner / cross-surface-warn / inbox-empty-note
--shadow-sm / --shadow-md / --shadow-focusresting card / hover card / a11y focus ring

新規 token = 0 件。 全 token は kashi/src/app/globals.css + design_system_v1.md + app-me/C verbatim。

4. 採用した evidence-grade 表現 (color + text + dot 三重)

Grade本mockup 使用箇所Color · Text label · Dot
STABLEPilot status item#d9ebe0 bg + #14532d text + ON TRACK + green dot
EMERGINGMember provisioning, Org settings review#dbeafe bg + #1e3a8a text + AWAITING APPROVAL / REVIEW + blue dot
WEAKCron job alert, Data-quality notice#fef3c7 bg + #92400e text + ATTENTION + amber dot
INSUFFICIENTBilling notice, Security audit notice#e5e7eb bg + #4b5563 text + INFO + gray dot

全部 color + text + dot 三重 reinforcement (canon §1 a11y rule 「never color alone」 + color-blind 安全)。 BLOCKED (low diarization 1 件) は本mockup では appear せず (admin scope では per-meeting BLOCKED state を surface する UI 点が無い、 aggregate count only) 。

5. 削った要素 (旧 app-admin/C から)

a. evergreen filled scope banner (max-strength) ー ー emerald-50 compact banner (app-me/C 1:1)

旧版は evergreen 背景 + cream text + 「意図的にこの画面から存在しません」 強調 + canon §8 pill。 新版は app-me/C と同じ emerald-50 + shield + 1 行 summary。 文言の強度 (boundary 明示) は守ったが visual aggression を抑え、 design language 一致を優先 (Justine feedback)。

b. inbox-state strip (処理待ち / 完了 (今週) / 保留) 3-up card

旧版は 3 数値 card stripe。 app-me/C には該当 component なし。 nav badge counter (4 unread) + filter chip counts ((7), (4), (2)...) で count 情報は冗長確保。 inbox 1 本に統合する vertical timeline style に倒す。

c. inbox-row grid layout (priority badge + body + action 1 行)

旧版は 1 row = priority badge + title + action button の水平 grid。 app-me/C は vertical item card で title が大きく、 grade-pill が meta 行に並ぶ。 統一のため後者に置換。 priority 「高/中/低」 は廃止し、 evidence-grade pill に統合 (上の §4 表参照)。

d. fold-section accordion (組織概要 / 設定 8 項目 grid)

旧版は accordion 内に organization overview (チーム 12 / メンバー 47 / 処理 156 等) + settings grid 8 個。 app-me/C には accordion 無し。 設定 8 項目は nav の Settings tab に移行 (= app-me/C と同じ nav 構造)。 「組織概要」 数値は Members tab + 監査ログ から到達可能で、 inbox H1 直下を占有しない。

e. phase switcher (mockup-only populated/empty toggle)

旧版にあった demo UI 「populated / empty 切替ボタン」 は app-me/C にない。 empty state は filter chip = 0 件 fold で自然到達 (app-me/C と同じ動作)、 mockup-only UI は削除して visual を clean に。

f. mockup-meta banner (page 最上部の review context strip)

旧版 page 最上部の dashed-bottom 「Mockup · Round 1 · Surface: app-admin · Variant C」 strip を削除。 app-me/C にない。 Round 2 判断材料は cross-surface yellow banner に集約 (= app-me/C 1:1)。

6. 追加した要素 (現状 Kashi admin にない)

a. Pilot status item type

brief 指定: 「pilot 進行状況: 共同レビュー window 残 12 日」。 現状 Kashi admin UI に pilot 進行状況の inbox item 化は無く、 別画面 (pilot dashboard) で見ていた。 Inbox に統合することで admin が pilot 期限 (30 日 / 毎月 3 枠限定) を見落とさず、 canon pilot doctrine が UI に反映。

b. scope boundary banner (H1 直下、 emerald-50)

現状 admin UI に boundary banner が常駐表示は無し (settings 内に説明文があるのみ)。 app-me/C の Privacy banner を inspiration に、 admin scope (organization & usage、 not meeting content) を 永続 surface 化。 これにより SmartHR / カオナビ 系 HR surveillance UI と 視覚的に明確な差別化

canon: permanent-ui-principles §1 「show less」 + DATA_VISIBILITY_MATRIX §3 / §8

c. filter chip taxonomy (operational task only)

Approvals / Notices / Job alerts / Pilot status の 4 軸。 現状 Kashi admin UI には filter 系入り口無し、 単一テーブル view のみ。 app-me/C の Superhuman split-inbox 風 weak signal を admin operational に流用。

7. 既知のトレードオフ / 未解決

未解決 1: cross-surface IA 分裂 (app-me/C と共通の課題)

member + admin が同じ inbox model になると、 残 3 surface (manager / reviewer / ceo) の方針を Round 2 で決める必要。 推奨: mirror-me (manager) も C 化が最適 (operational + daily check inbox 性が高い)、 ceo / reviewer は dashboard model のまま、 inbox を一部の widget として埋め込む hybrid 案が見えてくる。

未解決 2: 「既読/未読」 client-local 制約 (app-me/C と同じ)

§4 employer-exposure 防止ドクトリンを守るため、 既読状態は DB に書かず localStorage 保存。 結果、 端末跨ぎ (PC / iPhone) で既読同期されない。 実装時の選択肢: (A) 現実起点で localStorage だけ / (B) 既読概念を捨て最新 N 件表示 (Linear 風) / (C) E2E encrypted client-side state。 mockup は (A) を継承。

未解決 3: portal-level routing 変更

admin の post-login 着地 URL が /app/admin から /app/admin/inbox (or 統一 /app/inbox) に変更。 既存 bookmark / muscle memory に影響、 redirect を 6 ヶ月維持を推奨 (app-me/C と同じ)。

未解決 4: Members tab (新 nav item) の設計は Round 1 で未定義

app-admin/C 新設の Members nav item は本mockup で placeholder。 Round 2 実装時に: identity claim (member id, email, role, last active date) のみで、 per-member meeting content や発言 / 健康スコア / 同期率 等の analytics は 絶対に含めない design 制約を明示する必要。 これは canon-verify 上の最大 risk surface (Members 画面が SmartHR / カオナビ 風 surveillance に転落する pattern を避ける明示制約が必要)。

未解決 5: pilot 「契約書原本」 link の destination

Billing notice item の action 「契約書原本を見る」 は placeholder。 pilot 期間中の admin に契約書 PDF を surface する flow は別途設計が必要 (Kashi 担当者経由か self-serve か)。

8. canon 適合チェック (本mockup 上 self-audit)

Canon判定実装場所
§1 「show less」PASSinbox-empty-note 安全文言、 scope boundary banner で admin role 限界を明示。 「all clear」「問題なし」 系 wording 0 件。
§2 forbidden wordingPASS「検知」「予測」「ハラスメント」「at-risk」「all clear」「健康スコア」「エンゲージメント」「離職率」「人気ランキング」 等 0 件。
§3 role boundaryPASSadmin scope = org & usage のみ。 meeting content / per-member content / risk label 0 件。 banner で permanent 明示。
§4 visibility per rolePASS既読/未読 localStorage、 audit_log write 0 件 (footer 明記)。 admin click 行為が employer に届かない (admin は employer 側だが、 自分の click も audit には残るが他 role には surface しない)。
§5 evidence semanticsPASS各 item に grade-pill (STATUS label) + window chip + reason code + 注釈。 per-member grade 0 件。
§6 no-signal rulePASSempty-state = reason code no_pending_operational_task + 「問題無しを意味するものではありません」 と明示。
§7 progressive disclosurePASSfold-up = 1 H1 + 1 banner + 1 filter + 上 4 件。 先週 / 過去 30 日 は scroll で到達。
§8 cognitive loadPASS3-up state strip 廃止、 1 列 inbox 1 本化。
§9 dashboard rulesPASS人を別 ID / 健康スコア / risk 色 / suppress / subordinate-data 表示、 一切なし。 member_032 等は identity claim (招待承認) のみ。
§11 internal screenPASSrole label + visibility boundary + grade + reason + empty-state + dispute path (権限料大の読み) 全部含む。
§12 a11yPASS1 H1、 nav / main / article / role=region、 focus-visible 3px evergreen、 grade-pill = color + text + dot 三重。
§13 visual systemPASSoff-white + dark evergreen、 calm badge、 surveillance icon (eye / red alert) 0 件。
DATA_VISIBILITY_MATRIX §3PASSadmin column = Y(operational metadata only)、 meeting content / per-member content access 0 件。
canon-verify (2026-05-28 LESSONS)PASSpilot 「1 チーム / 30 日 / 共同レビュー / 毎月 3 枠限定」 全部 verbatim 言及。 forbidden patterns (90 日 / Google Meet / Teams / Webex / SOC 2 / ISO 27001 / SAML / OIDC / SCIM / 専任 CS / ソリューションエンジニア / 離職率 % / ROI ¥ / 生産性 %) 全部 0 件。

9. Forbidden patterns self-audit (LESSONS 2026-05-28 discipline)

LESSONS 2026-05-28 「canon-verify discipline」 forward rule に基づく self-audit。 全 forbidden patterns を grep して 0 件確認。

Pattern (grep)件数備考
¥[0-9]+,[0-9]{3} (金額)0「公開価格未設定です」「契約書原本」 placeholder のみ
90 ?日 / 60 ?日 / 180 ?日0pilot 期間 「30 日」 のみ言及
Google Meet / Microsoft Teams / Webex0会議 integration への言及 0 件 (admin scope outside)
SSO / SAML / OIDC / SCIM0セキュリティ通知 item は 「認証連携設定変更」 と一般化 wording、 specific protocol 名 0 件
SOC 2 / ISO 27001 / ISO 27018 / ISO 304140認証取得状況の言及 0 件
専任 CS / ソリューションエンジニア / カスタマーサクセス0専任職種の commitment 0 件、 「Kashi 担当者」 のみ言及
離職率.{0,3}[0-9]+ ?% / ROI ¥ / 生産性.{0,3}[0-9]+ ?%0成果保証 0 件
HR アナリティクス / エンゲージメント / 健康スコア / at-risk / 退職予測 / ハラスメント検知0surveillance / HR SaaS wording 0 件
all clear / 安全 / 問題無し0「無シグナル」 を 「問題無し」 と短絡しない (canon §6)

Canon lint: PASS (全 9 pattern × 0 件)。 pilot 核心 fact 「毎月 3 枠限定」 言及 1 件。 「1 チーム / 30 日 / 共同レビュー」 言及 1 件 (Pilot status item の中)。

10. 実装フェーズへの引き継ぎ

本 mockup を React に実装する場合の注意:

11. Justine への判断質問

Q1. 「Members」 tab を Round 2 で詳細設計する際の制約レベル

候補:

推奨: (B)。 (C) は per-member 数字を ranking 化する pattern (カオナビ式) に直結するので避けたい。

Q2. Pilot status を inbox item にするか、 別の永続 widget にするか

本 mockup は inbox item としているが、 「pilot 残 12 日」 は時間進行 progress なので、 別途 H1 横や scope banner 内に 常駐 progress bar として置く案もあり得る。 inbox に混ぜると 「処理待ち task」 と semantics が混ざる懸念。 Round 2 で決定したい。

Q3. 「監査ログ」 と 「権限料大の読み」 (banner 右側) の destination

banner 右の 2 buttons は app-me/C の Privacy banner UX を流用したが、 admin の場合 「監査ログ」 は Settings 配下の dedicated page、 「権限料大の読み」 は doc site への外部 link になる可能性が高い。 Round 2 実装時に link target を確定したい。

kashi-ui-mockupper · ROUND_001 Stage 3 (regen) · app-admin/C surface · output: workspace/strategy/ui-redesign/ROUND_001/03_mockups/app-admin/C/ · baseline: 03_mockups/app-me/C/