Generated by kashi-ui-mockupper. Picked variant: A (visual / token cleanup only)。
本ドキュメントは、 mockup 内のあらゆる非自明な選択について 「なぜそうしたのか」 の trace を残します。 将来 React 実装担当はここから引き継ぎを開始してください。
根拠: 上流 02_proposals 「Variant A 主タスク (page primary job)」 section 文字通り。 IA を触らない宣言。
trace: 02_proposals/app-me__variants.html Variant A § 「主タスク」 / canon: permanent-ui-principles §9 dashboard rules (interpretation, not judgment)
My Personal Patterns)。 各ブロックは H2 (block-title)。 9 ブロックすべてに eyebrow (§A · Privacy のような section counter) を上に置き、 「どのセクションを見ているか」 を視覚で示す。
根拠: permanent-ui-principles §12 「one H1 per page/screen」 + §8 cognitive load 「sane heading order」。 ただし §7 progressive disclosure (default visible 3-5 cards) は本 variant では PARTIAL のまま (IA 変更しないため — 上流 02_proposals で明示)。
canon: permanent-ui-principles §12 / §8 / 上流 02_proposals 「permanent-ui-principles 適合チェック」 表 PARTIAL 行。
§A → §B → §C → (§D §E §F の 3-up grid) → §G → §H → §I の 9 ブロック垂直積み。 各ブロックは等価 (B のような Today's Reflection 強調なし) で .block primitive に統一。
根拠: 上流 02_proposals 「Variant A レイアウト構造」 wireframe そのまま。 「9 ブロックを そのまま残す こと自体が A の差別化」 (B は 「Today's Reflection 新設 + 3 signal cards 整理 + accordion 統合」 で 5 要素に再構成、 C は inbox 1 本に置換)。
trace: 上流 02_proposals Variant A wireframe / B との対比は本ドキュメント §5 で詳述。
grid-template-columns: repeat(3, 1fr) + gap --space-4。 768px 以下で 1 カラムに折り返し。
根拠: 現状 Kashi /app/me 実装の 3-up grid を視覚的に同等に再現。 IA の最小単位 (3 signal cards を横並び) は保持しないと A は B と区別がつかなくなる。
canon: design_system_v1 §3 spacing (8-point grid) / permanent-ui-principles §12 「no horizontal overflow on common mobile widths」
var(--cream) = #F5F0E6) で trust note 系として視覚的に group 化、 他の paper ブロックと差別化。
根拠: 現状 Kashi 実装でも §G は 「読み物」 系として明示的に他ブロックと色分けされている。 A の趣旨に従い、 その既存パターンを --cream token で正規化するだけ。
canon: design_system_v1 §1 primary palette / 現状 Kashi 実装の既存 visual treatment 継承。
すべて kashi/src/app/globals.css + kashi/docs/design/design_system_v1.md verbatim。 新規 token は 1 つも導入していない。
| Token カテゴリ | 使用箇所 (Variant A) | r19 解消フラグ |
|---|---|---|
--color-kashi-evergreen-deep--color-kashi-evergreen |
H1 / H2 タイトル / role-badge / primary CTA / wordmark dot / privacy banner left-border / nav active underline | §4.7 SOLVED インライン #1F4A33 直書きを撤廃 |
--cream #F5F0E6 |
§G (trust note ブロック) 背景 | §4.7 SOLVED |
--emerald-50 #ECFDF5 |
§A privacy banner 背景 | §4.7 SOLVED emerald-* Tailwind 直書きを token に |
--paper-tint #F7F8FA |
§B role-desc 背景 / empty-state 背景 / reason-code chip 背景 | §4.7 SOLVED |
--ink / --ink-soft / --ink-muted / --ink-faint |
body / block-body / block-eyebrow / source-cite (4 階調すべて Plex Sans + Zen Kaku) | §4.7 SOLVED ink 階調 token 化 |
--kashi-grade-stable / -emerging / -insufficient (+ blocked / weak / high-confidence-stable も準備) |
各 grade-pill の dot color。 background / text color はコントラスト保証ペア。 全 pill に text label 必須 (a11y rule — 色のみは禁止) | §4.7 SOLVED 中核 (grade pill 表現の token 統一) |
--space-5 24px / --space-4 16px / --space-3 12px |
カード内 padding (--space-5) / grid gap (--space-4) / block-actions gap (--space-3)。 8-point grid 厳守。 | §4.3 SOLVED 中核 (visual density 統一) |
--space-8 48px / --space-12 80px |
page top padding (--space-8) / page bottom padding (--space-12) / footer top margin (--space-12) | §4.3 SOLVED |
--radius-sm 4px / --radius-md 8px |
pill / badge / button (sm) / 全カード (md) | §4.3 SOLVED |
--shadow-sm |
すべての .block / .signal-card resting shadow | §4.3 SOLVED |
--shadow-focus (a11y) |
全 a / button / [tabindex] の focus-visible 状態 (3px evergreen ring) | §12 a11y baseline |
Type scale: --text-h1 40px / --text-h2 32px (数値) / --text-h4 20px (block-title) / --text-body 16px / --text-body-sm 14px / --text-caption 12px (meta / reason code) |
全 typography に適用 (Fraunces 600 = H1/H2/H3, Plex Sans 600 = block-title, Plex Mono = eyebrow / pill / reason code, Zen Kaku Gothic New = JA body) | §4.7 SOLVED + design_system_v1 §2 準拠 |
Rule (canon §1): badge は色 + テキストラベルの両方を必須 (a11y — color-only 禁止)。 dot は aria-hidden。
| Grade | Color token | 本 mockup での使用 | label 文字 |
|---|---|---|---|
| STABLE / E2 | --kashi-grade-stable #2F6B4A |
§C Coverage readiness pill, §D Speaking | STABLE + (E2 表記は §C のみ) |
| EMERGING | --kashi-grade-emerging #2563EB |
§E Interruption | EMERGING |
| INSUFFICIENT | --kashi-grade-insufficient #9CA3AF |
§F Ignored (観察ウィンドウ内比較不足) | INSUFFICIENT |
| BLOCKED / WEAK / HIGH_CONFIDENCE_STABLE | 3 token 用意済 (style ブロック内) | 本 mockup で未使用 (将来のデータ状態切替で利用可能) | BLOCKED / WEAK / HIGH_CONF_STABLE |
stable_observable_pattern 等) を pill とは別行で 常に併記。 reason code は paper-tint 背景 + border の chip スタイルで Plex Mono 表示。
根拠: permanent-ui-principles §5 「Every serious signal must show: evidence grade + reason codes + observed window + ...」
A と B の差分を客観的に並べます。 「どこから読めばいいか分からない」 という不満を解決したいなら B (または C)、 「素人臭さだけ取りたい (IA はそのままで良い)」 なら A。
| 観点 | Variant A (本 mockup) | Variant B (sibling) |
|---|---|---|
| 主要 IA 構造 | 9 ブロック垂直積み (§A〜§I そのまま) | 5 要素 fold 上 (banner / Reflection card / 3 signal cards) + 4-section accordion (§G §H §I §B 統合) |
| fold 上の hierarchy | 全ブロック等価 (primary CTA 不明確) | Today's Reflection card が primary surface として明確 |
| 進捗的開示 (canon §7) | PARTIAL — 全ブロックが default visible | PASS — default 5 要素 + accordion で 「3-5 cards」 準拠 |
| P1 today-first hierarchy | 未適用 (現状維持) | 適用 (Today's Reflection card 新設) |
| P3 privacy ownership 強化 | banner 位置・コピー 不変 (現状の static 説明 + audit link 1 本) | banner upgrade (過去 24 時間アクセス数 summary + audit link + dispute link 2 本) |
| P5 empty state actionable | 現状文言を維持 (「あなた害に送られた通知はありません」) | safe wording 雛形を新規策定 (「観察ウィンドウ内に比較可能なミーティングが増えると更新されます」) |
| 解決される推定不満 | (1) PARTIAL / (2) PARTIAL / (3) PARTIAL — r19 §4.3/§4.7 のみ SOLVED | (1)(2)(3) SOLVED / (4) PARTIAL |
| i18n key 影響 | 変更ゼロ (現状 key そのまま) | 新規 5-8 個追加 (canon owner レビュー必要) |
| DB / RLS 影響 | ゼロ | audit_log read-only 集計クエリ 1 つ新規 (write は無し) |
| React コンポーネント新規 | 0 個 (既存 component の className / token 置換のみ) | 2 個 (Today's Reflection card / アクセス数 summary) |
| JS interactive 要素 | 無し (全 static) | accordion toggle + window-toggle (30/90/180 日) |
| 実装工数感 | S 1-2 日 | M 4-6 日 |
現状 Kashi /app/me ではカード padding が 16px / 20px / 24px と mixed、 radius も 4px / 6px / 8px が混在していた (governance / demo / app ページで token 由来が分かれていた)。
本 mockup ではカード padding を --space-5 (24px) で統一、 radius は全カード --radius-md (8px) / pill は --radius-sm (4px) で統一、 shadow は --shadow-sm 1 種類のみで resting state を表現。
trace: 上流 02_proposals 「Variant A 採用する研究パターン」 → r19 §4.3 / canon: design_system_v1 §3 spacing + §4 radius/border/shadow
現状 Kashi では evergreen 系のインライン #1F4A33 / #2F6B4A や Tailwind emerald-* 直書きが残存していた (governance ページとの色差の原因)。
本 mockup ではすべての色を CSS custom property 経由で参照 (var(--color-kashi-evergreen-deep) 等)。 grade pill も --kashi-grade-* token に紐付け。 emerald-* 直書きはゼロ。
trace: 上流 02_proposals → r19 §4.7 / canon: design_system_v1 §1 color tokens
| Canon 項目 | 判定 | 本 mockup での担保 |
|---|---|---|
| §2 forbidden wording | PASS | 検知 / 予測 / 健康スコア / 生産性スコア / at-risk / all clear いずれも未混入。 全コピーは現状 i18n key 範疇 (新規キーゼロ) |
| §3 role boundary | PASS | Member 単独。 role-badge 上部表示。 nav は My Personal / My Audit の 2 項のみ |
| §4 employer exposure (page view 上司見え NG) | PASS | このページは audit_log を 書かない doctrine 維持。 自分が自分のページを見る行為は employer に表示されない (footer trust note に明示) |
| §5 evidence semantics | PASS | 各 signal card に grade + reason code + window + 「not a verdict」 footnote すべて表示 |
| §6 No Signal Rule | PASS | §F INSUFFICIENT / §H 空通知 / §I 空 dispute すべて 「次に期待できること」 で説明、 「問題なし」 「all clear」 は使わない |
| §7 progressive disclosure | PARTIAL | 9 ブロック並びのため default visible 3-5 cards rule 未達。 これは A の意図的トレードオフ (上流 02_proposals で明示済) |
| §8 cognitive load | PARTIAL | 同上。 token 統一で 「ばらつき感」 は緩和されるが、 hierarchy 等価のため 「equally important」 状態は完全には解消されない |
| §9 dashboard rules | PASS | 各カード: what / who / window / grade / reason / not-a-verdict すべて answer 済 |
| §11 internal screen rules | PASS | role label / visibility boundary (§B) / grade / reason / 異議申し立て path / empty state すべて完備 |
| §12 a11y / mobile | PASS | H1 1 つ / semantic header-main-section-footer / focus-visible 3px ring / aria-labelledby / aria-current / badge 色+ラベル / 768px·480px 折返し |
| §13 visual system | PASS | off-white base / dark green accent / cream warm tint / 監視アイコン無し / red alert 無し / gradient 無し |
| DATA_VISIBILITY_MATRIX (Member 列 Y(self) のみ) | PASS | 全 9 ブロックが Member 列 Y(self)。 他従業員データ / マネージャー閲覧情報 / page view 監視 は一切混入なし |
A の趣旨上、 「現状から削除」 した要素は最小限。 視覚的なノイズ要因のみ。
style="color: #1F4A33" 等を CSS custom property に置換 (r19 §4.7 SOLVED)--space-5 / --radius-md 単一値に統一 (r19 §4.3 SOLVED)design_system_v1 §7 iconography 準拠 (1.5px stroke / 16-24px / 監視アイコン無し)A の趣旨上、 「新規追加」 はゼロを目標とした。 ただし以下 2 点だけは token 統一の副作用として視覚的に新規:
permanent-ui-principles §2 Safe refusal examples verbatim。 現状もどこかにあるが、 footer 固定で全ページ共通化する想定。このモックアップを実装する際の注意点:
kashi/src/app/app/me/page.tsx (or kashi/src/app/me/page.tsx — 現状ルーティング確認要)kashi/src/components/portal/PortalHeader.tsx — 触らない (現状 nav 維持)kashi/src/components/CoverageReadinessPill.tsx 相当 — grade pill の token 化が必要kashi/src/components/MetricCard.tsx (or 相当) — padding / radius / shadow を token に置換test/i18n-r17-forbidden-marketing.test.ts): 本 mockup ではコピー追加なしのため CI 影響ゼロ3 PR に分割すれば各 PR が XS サイズに収まり、 レビューしやすく、 revert もしやすい。