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 枠限定」 厳守)。
| 要素 | app-me/C (baseline) | app-admin/C (本mockup) |
|---|---|---|
| token block | evergreen #2F6B4A / deep #1F4A33 / cream / emerald-50 / grade colors | VERBATIM 1:1 (ネーフンンフソフソフン導入無し) |
| typography | Fraunces (H1, item title) / IBM Plex Sans (body) / IBM Plex Mono (kicker, ts, reason code) / Zen Kaku | VERBATIM 1:1 |
| page shell | main.page max-width 860px + --space-8 top padding | VERBATIM 1:1 |
| PortalHeader | 2-row sticky (brand + nav) / cream sub bg / role-badge mono | VERBATIM 1:1 (role label = ADMIN、 nav items のみ違う) |
| nav | 3 items: Inbox / Reflection / Settings | 3 items: Inbox / Members / Settings |
| persona | member 山田さん (営業) | admin 鈴木さん (人事部) = manager_A 相当 |
| H1 area | kicker (mono uppercase) + h1 (Fraunces 40px deep) + subtitle | VERBATIM 1:1 (title text のみ違う) |
| cross-surface yellow banner | Round 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 row | All / 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 card | unread dot + kind label (mono caps + dot) + ts (mono) + Title + window-chip + grade-pill + reason-code + desc + not-a-verdict 注釈 + 1 action + mark-as-read | VERBATIM 1:1 (item kind taxonomy のみ admin 用、 同じ三重 reinforcement) |
| grade pill | color + 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-read | localStorage client-local、 DB write 無し | VERBATIM 1:1 (LS key だけ kashi-admin-inbox-read-state-v1 namespaced) |
| responsive breakpoint | 768px / 480px | VERBATIM 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 の構造を全部一致)。
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
brief 指定 persona 。 app-me/C は member 山田 (営業) 。 admin 視点を表現するため人事部所属の admin ロール persona に変更。 avatar 文字も 「山」 から 「鈴」 に変更 (同 component)。
brief 明示指定 · demo株式会社 内の admin = HR 役割 (一般的)
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
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 遵守)
brief 指定 6-8 件 , 本mockup は 7 件。 各 item は ミーティングの中身・個別メンバーの発話・人別 risk ・分析 に一切立ち入らない。
逆に 本mockup に一切含まれないもの:
canon: §1 「The UI wins by showing less」 + §4 visibility-by-role + DATA_VISIBILITY_MATRIX §3
admin task には member reflection 的 「grade」 が ない 。 ただし visual 一致のため、 STATUS label を grade-pill component に remap:
.grade-emerging (blue) — 「まだ足りていない / develping 状態」 と等価.grade-weak (amber) — operator に 注意喚起、 alarmingではない.grade-stable (green) — pilot 順調.grade-insufficient (gray) — 「判定不明 / 単に通知」新規 color token = 0 件。 canon §5 evidence-grade color を 流用。 color + text + dot 三重 reinforcement は继承。 これは STATUS を 「per-member risk label」 に 流用しないため (canon §9 dashboard rules + §2 forbidden wording 遵守)。
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
| Token | 本mockup 使用箇所 |
|---|---|
--color-kashi-evergreen-deep #1F4A33 | page-title / role-badge / btn-primary / focus ring / privacy-summary strong / inbox-item-title |
--color-kashi-evergreen #2F6B4A | nav active border / unread dot / link / kind-provision dot / kind-config dot |
--emerald-50 #ECFDF5 | scope boundary banner background |
--cream #F5F0E6 | btn-secondary hover (default uses paper bg) |
--paper-tint #F7F8FA | is-read state / filter chip default / window chip / inbox-empty-note |
--kashi-grade-stable #2F6B4A | ON TRACK pill (pilot) |
--kashi-grade-emerging #2563EB | AWAITING APPROVAL / AWAITING REVIEW pill / kind-billing dot / kind-security dot |
--kashi-grade-weak #D97706 | ATTENTION pill (cron / data-quality) / kind-job dot / kind-quality dot |
--kashi-grade-insufficient #9CA3AF | INFO pill (billing / security audit) |
--text-h1 40px / Fraunces 600 | page-title (1 H1) |
--text-body-lg 18px / Fraunces 500 | inbox-item-title (Title weight、 app-me/C と同じ) |
--text-body-sm 14px / IBM Plex Sans | inbox-item-desc / page-subtitle |
--text-caption 12px / IBM Plex Mono | kicker / group label / reason code / ts / grade pill / role badge |
--space-8 48px | page top padding |
--radius-md 8px | inbox-item / privacy-banner / cross-surface-warn / inbox-empty-note |
--shadow-sm / --shadow-md / --shadow-focus | resting card / hover card / a11y focus ring |
新規 token = 0 件。 全 token は kashi/src/app/globals.css + design_system_v1.md + app-me/C verbatim。
| Grade | 本mockup 使用箇所 | Color · Text label · Dot |
|---|---|---|
| STABLE | Pilot status item | #d9ebe0 bg + #14532d text + ON TRACK + green dot |
| EMERGING | Member provisioning, Org settings review | #dbeafe bg + #1e3a8a text + AWAITING APPROVAL / REVIEW + blue dot |
| WEAK | Cron job alert, Data-quality notice | #fef3c7 bg + #92400e text + ATTENTION + amber dot |
| INSUFFICIENT | Billing 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) 。
旧版は evergreen 背景 + cream text + 「意図的にこの画面から存在しません」 強調 + canon §8 pill。 新版は app-me/C と同じ emerald-50 + shield + 1 行 summary。 文言の強度 (boundary 明示) は守ったが visual aggression を抑え、 design language 一致を優先 (Justine feedback)。
旧版は 3 数値 card stripe。 app-me/C には該当 component なし。 nav badge counter (4 unread) + filter chip counts ((7), (4), (2)...) で count 情報は冗長確保。 inbox 1 本に統合する vertical timeline style に倒す。
旧版は 1 row = priority badge + title + action button の水平 grid。 app-me/C は vertical item card で title が大きく、 grade-pill が meta 行に並ぶ。 統一のため後者に置換。 priority 「高/中/低」 は廃止し、 evidence-grade pill に統合 (上の §4 表参照)。
旧版は 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 直下を占有しない。
旧版にあった demo UI 「populated / empty 切替ボタン」 は app-me/C にない。 empty state は filter chip = 0 件 fold で自然到達 (app-me/C と同じ動作)、 mockup-only UI は削除して visual を clean に。
旧版 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)。
brief 指定: 「pilot 進行状況: 共同レビュー window 残 12 日」。 現状 Kashi admin UI に pilot 進行状況の inbox item 化は無く、 別画面 (pilot dashboard) で見ていた。 Inbox に統合することで admin が pilot 期限 (30 日 / 毎月 3 枠限定) を見落とさず、 canon pilot doctrine が UI に反映。
現状 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
Approvals / Notices / Job alerts / Pilot status の 4 軸。 現状 Kashi admin UI には filter 系入り口無し、 単一テーブル view のみ。 app-me/C の Superhuman split-inbox 風 weak signal を admin operational に流用。
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 案が見えてくる。
§4 employer-exposure 防止ドクトリンを守るため、 既読状態は DB に書かず localStorage 保存。 結果、 端末跨ぎ (PC / iPhone) で既読同期されない。 実装時の選択肢: (A) 現実起点で localStorage だけ / (B) 既読概念を捨て最新 N 件表示 (Linear 風) / (C) E2E encrypted client-side state。 mockup は (A) を継承。
admin の post-login 着地 URL が /app/admin から /app/admin/inbox (or 統一 /app/inbox) に変更。
既存 bookmark / muscle memory に影響、 redirect を 6 ヶ月維持を推奨 (app-me/C と同じ)。
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 を避ける明示制約が必要)。
Billing notice item の action 「契約書原本を見る」 は placeholder。 pilot 期間中の admin に契約書 PDF を surface する flow は別途設計が必要 (Kashi 担当者経由か self-serve か)。
| Canon | 判定 | 実装場所 |
|---|---|---|
| §1 「show less」 | PASS | inbox-empty-note 安全文言、 scope boundary banner で admin role 限界を明示。 「all clear」「問題なし」 系 wording 0 件。 |
| §2 forbidden wording | PASS | 「検知」「予測」「ハラスメント」「at-risk」「all clear」「健康スコア」「エンゲージメント」「離職率」「人気ランキング」 等 0 件。 |
| §3 role boundary | PASS | admin scope = org & usage のみ。 meeting content / per-member content / risk label 0 件。 banner で permanent 明示。 |
| §4 visibility per role | PASS | 既読/未読 localStorage、 audit_log write 0 件 (footer 明記)。 admin click 行為が employer に届かない (admin は employer 側だが、 自分の click も audit には残るが他 role には surface しない)。 |
| §5 evidence semantics | PASS | 各 item に grade-pill (STATUS label) + window chip + reason code + 注釈。 per-member grade 0 件。 |
| §6 no-signal rule | PASS | empty-state = reason code no_pending_operational_task + 「問題無しを意味するものではありません」 と明示。 |
| §7 progressive disclosure | PASS | fold-up = 1 H1 + 1 banner + 1 filter + 上 4 件。 先週 / 過去 30 日 は scroll で到達。 |
| §8 cognitive load | PASS | 3-up state strip 廃止、 1 列 inbox 1 本化。 |
| §9 dashboard rules | PASS | 人を別 ID / 健康スコア / risk 色 / suppress / subordinate-data 表示、 一切なし。 member_032 等は identity claim (招待承認) のみ。 |
| §11 internal screen | PASS | role label + visibility boundary + grade + reason + empty-state + dispute path (権限料大の読み) 全部含む。 |
| §12 a11y | PASS | 1 H1、 nav / main / article / role=region、 focus-visible 3px evergreen、 grade-pill = color + text + dot 三重。 |
| §13 visual system | PASS | off-white + dark evergreen、 calm badge、 surveillance icon (eye / red alert) 0 件。 |
| DATA_VISIBILITY_MATRIX §3 | PASS | admin column = Y(operational metadata only)、 meeting content / per-member content access 0 件。 |
| canon-verify (2026-05-28 LESSONS) | PASS | pilot 「1 チーム / 30 日 / 共同レビュー / 毎月 3 枠限定」 全部 verbatim 言及。 forbidden patterns (90 日 / Google Meet / Teams / Webex / SOC 2 / ISO 27001 / SAML / OIDC / SCIM / 専任 CS / ソリューションエンジニア / 離職率 % / ROI ¥ / 生産性 %) 全部 0 件。 |
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 ?日 | 0 | pilot 期間 「30 日」 のみ言及 |
Google Meet / Microsoft Teams / Webex | 0 | 会議 integration への言及 0 件 (admin scope outside) |
SSO / SAML / OIDC / SCIM | 0 | セキュリティ通知 item は 「認証連携設定変更」 と一般化 wording、 specific protocol 名 0 件 |
SOC 2 / ISO 27001 / ISO 27018 / ISO 30414 | 0 | 認証取得状況の言及 0 件 |
専任 CS / ソリューションエンジニア / カスタマーサクセス | 0 | 専任職種の commitment 0 件、 「Kashi 担当者」 のみ言及 |
離職率.{0,3}[0-9]+ ?% / ROI ¥ / 生産性.{0,3}[0-9]+ ?% | 0 | 成果保証 0 件 |
HR アナリティクス / エンゲージメント / 健康スコア / at-risk / 退職予測 / ハラスメント検知 | 0 | surveillance / 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 の中)。
本 mockup を React に実装する場合の注意:
kashi/src/app/app/admin/inbox/page.tsx · 旧 kashi/src/app/app/admin/page.tsx は /app/admin/overview に移行 (selectively 残存)PortalHeader.tsx (admin nav 2 items ー 3 items, badge counter 追加) · admin post-login redirectInboxList / InboxItem / InboxGroupLabel / FilterChip / InboxEmpty / ScopeBoundaryBanner (= app-me/C と共有可能、 統一実装推奨)/app/admin をアクセスする e2e は /app/admin/inbox へ redirect、 6 ヶ月維持test/i18n-r17-forbidden-marketing.test.ts に safe-wording assert として追加 (「全 forbidden patterns 0 件」 を test layer に永続化)。候補:
推奨: (B)。 (C) は per-member 数字を ranking 化する pattern (カオナビ式) に直結するので避けたい。
本 mockup は inbox item としているが、 「pilot 残 12 日」 は時間進行 progress なので、 別途 H1 横や scope banner 内に 常駐 progress bar として置く案もあり得る。 inbox に混ぜると 「処理待ち task」 と semantics が混ざる懸念。 Round 2 で決定したい。
banner 右の 2 buttons は app-me/C の Privacy banner UX を流用したが、 admin の場合 「監査ログ」 は Settings 配下の dedicated page、 「権限料大の読み」 は doc site への外部 link になる可能性が高い。 Round 2 実装時に link target を確定したい。