Design Decisions — why-now / Variant A (canon-strict rebuild)

Generated by kashi-ui-mockupper ／ Round 001 ／ 2026-05-28
Picked variant: A — ものすごく B2B (大企業向け極)
Status: v2 (REBUILD) — v1 が canon-fabrication で reject、本版で再生成

0. なぜ v2 (rebuild) なのか

v1 (2026-05-27) の問題点 — 共同創業者共有前に Justine が catch:

「first-mover ROI calculator」 widget で ¥xxx,000 削減 等の fabricated 数字を埋め込み (Kashi canon 「成果保証しない / 予測しない」 doctrine 違反)
「今月導入の場合 ROI 試算」 sticky aside で 12 ヶ月後の削減額を fabricated 計算
文書 ID + 版数「v3.2」で過去履歴を fabricate (架空の版番号は OK だが、内容の数値が canon-verified でない限り誤誘導)
SOC 2 Type II 取得済 / ISO 27001 等の認証取得状況を fabricate (canon source 不明)

v2 (本版) の禁則: 上記 4 パターンを全て除去。規制 timeline は公的 source からの引用のみで構成。 ROI calc widget 全廃。 sticky aside 全廃。 Pilot 仕様は canon `pilotCtaSubline` に一致。

1. 主タスクと上位構造

決定: why-now ページの主タスクを「2026-2028 年に施行される 6 制度 (3 系統) を、稟議書に貼り付けられる粒度で 1 ページで把握する」と定義。

根拠: brief A「Buying mode = 検討期間 6-12 ヶ月、稟議書、 ROI 数値、セキュリティ監査必須」。大企業 HR 部長は「これ 1 枚で社内説明できる」が決定的価値。

構造: (1) Hero + 規制サマリ表 / (2) 3 系統 timeline / (3) 共通圧バンド / (4) 4 制度詳細カード / (5) 機能 × 規制マッピング表 / (6) Pilot CTA。現行 Kashi why-now/page.tsx と章立て同期 (実装フェーズ移行時に低 friction)。

canon: permanent-ui-principles §7 (progressive disclosure) — 上から下に detail 深化／引き継ぎ先: kashi/src/app/why-now/page.tsx (現行は同章立て、本案は「共通圧バンド」を追加)

2. レイアウト — B2B 極の表現

決定: Hero を 2 カラム (タイトル+lead ／規制サマリ表)。 fold 内に「6 制度 + 各施行日 + 残月数」が全て見える dense layout。

根拠: brief A「Visual = dense data、 typography 硬め (Plex 中心)、 information density 高」。個別の感情ヒーロー画像はゼロ、 fold 内に 9 行の規制表を置くことで「これは sales artifact」と一瞥で伝える。

tablet (≤1024px) では Hero 2-column を 1-column 縦積みに切替。 mapping table は overflow-x: auto で横スクロール可能。

design_system_v1: Plex Mono を「数値・期日・eyebrow」に集約／ Fraunces を見出しのみ／ Zen Kaku/Plex Sans を body

決定: 上端に Document Meta Bar (paper-3 背景、 Plex Mono 0.7rem) を sticky nav 直下に配置。

根拠: brief A 「動詞は丁寧形、 3 人称」 + 稟議書 raw material 位置付け。「文書 ID: KASHI-WHYNOW-2026Q2」と書くことで これは公開営業資料ではなく稟議書に添付できる reference 文書である と framing できる。

v1 との違い: 版数 (v3.2) は除去。過去履歴を匂わせる演出は fabrication になるため、文書 ID + 位置付け + 本文出典のみで止めた。

canon site_canon_facts.txt 「文書 ID は架空でも問題なし、中身の値が canon-verified ならば」

3. 採用したトークン

カラー:

--color-kashi-evergreen #1F3D33 = nav 背景、セクション見出し、 highlight marker
--color-emerald-700 #047857 = eyebrow、 link、「Kashi が提供する」 indicator (▲)
--color-cream #F5F0E6 = primary CTA ボタン (nav 右、 pilot 内)
#B45309 (B2B 規制色) = 「法律が求める」 indicator (▼)。 design_system の amber と整合する補助色。
--paper / paper-2 / paper-3 = stone 系階段 (背景 layer 表現)

意図: Evergreen+Emerald を主軸、 amber を「義務／法律／強制力」の secondary signal に限定使用。赤系は alert 連想 (surveillance NG) で除外。

design_system_v1 + globals.css に準拠、 #B45309 は補助 amber として登場 (alert ではなく categorization 用)

4. 採用した evidence-grade 表現

決定: why-now ページに evidence-grade badge を出さない。

理由: evidence-grade は「組織で観測された signal」の確度表現に使う tokens。 why-now は 外部 (政府) の規制を扱うため、 grade では無く「施行日まで残月数」を Plex Mono で示す。

代わりに使う signal:

施行済 (灰色 var(--ink-faint)) ／ 残り N ヶ月 (emerald) ／ highlight marker (evergreen + ring) for major milestones
マッピング表は ◎ ／ ○ ／ — 3 段階 (現行 Kashi mapping.legend canon 通り)。 emerald (◎) ／ amber (○) ／ ink-faint (—)。

permanent-ui-principles §2 「監視・予測ではなく構造的観測」 → 規制 = 観測対象ではなく外部圧／ ja.json 「mapping.legend」そのまま採用

5. 削った要素 (v1 → v2 の差分)

v1 にあった、 v2 で完全削除:

First-mover ROI calculator widget — Kashi は ROI を約束しない doctrine。削減額の数値は全て fabrication になっていた。 → 全廃。
「今月導入の場合試算」 sticky aside — 同上。 sticky calc 自体が monthly delay = ¥xx 損失の物語を埋め込む device。 → 全廃。
版数 v3.2 表記 — 架空の改訂履歴を匂わせる演出。削除 (文書 ID のみ残す)。
SOC 2 / ISO 27001 / ISO 27018 / SSAE-18 等の認証取得表記 — canon source 不明 → 全廃。「セキュリティ仕様 (DPA 草案請求)」 footer link でのみ言及。
専任 CS / ソリューションエンジニア等の team composition 約束 — canon source 不明 → 全廃。「Kashi 担当者にご相談ください」で統一。
具体的月額 (¥240,000/月等) — canon に公開価格無し → 全廃。「個別にお見積もり」「公開価格／標準パッケージは設けていません」と明示。
Google Meet ／ Microsoft Teams 対応表記 — canon は Zoom のみ → 全廃。 integration の言及自体を本文から外し、「認証連携 / セキュリティ要件は pilot 担当と協議」に統一。

6. 残した B2B 表現 (canon 抵触なし)

残置: 大企業稟議書 framing を担保する要素は canon 抵触しないものだけ残した。

文書 ID KASHI-WHYNOW-2026Q2 — ID 自体は架空 OK (canon-verify 不要)
「位置付け: 稟議書 raw material / セールス資料 reference」 — 文書性格の declaration、 fabricate 要素無し
「本文出典: 厚生労働省 / 内閣官房 / 金融庁 / 経済産業省」 — ja.json blocks.*.source に既に記載されている canon source の集約表示
3 系統 timeline (lane 表示) — 現行 RegulatoryTimeline component と同じ構造
マッピング表 ◎/○/— — ja.json mapping.rows canon に完全準拠 (6 行 × 4 列)
共通圧バンド (深緑帯) — v1 にあった ROI calc 帯を、「3 系統に共通する問いは 1 つ」という meta-message に置換。数値ゼロ、 doctrine 表現のみ。
稟議書スタイルの硬い書体組み合わせ — Plex Mono を期日 / eyebrow / 文書 ID に集中、 Fraunces を見出しのみ、 Zen Kaku/Plex Sans を本文

7. 追加した要素 (現状にない)

追加 1: Hero 右の 規制サマリ 9 行表。現行 why-now/page.tsx は timeline component に頼って Hero は文だけだが、本案は fold 内に「期日 + 制度名 + 残月数」を 9 行詰め込み、印刷した時に表紙 1 枚で 6 制度概観できる。

根拠: brief A「sales artifact + pitch deck source + 稟議書 raw material」 ← page.tsx top コメント。印刷時の使い勝手を最優先。

追加 2: 共通圧バンド (deep evergreen band)。 timeline の直後に置き、「3 系統に共通する問いは 1 つ」という meta-message を提示。「規制ごと対応」ではなく「一つのデータで複数規制対応」という Kashi の論点を fold 中央で強調。

根拠: ja.json mapping.lead「Kashi は特定の法律のみに対応するツールではありません」。この doctrine を表 (§3) の前に band として宣言することで、表が論証ではなく確認になる。

追加 3: 各 LawDetailBlock 内に ▼ (法律が求める) / ▲ (Kashi が提供する) arrow indicator。 amber と emerald で「外部圧 vs 内部供給」を直感視覚化。

根拠: 現行 LawDetailBlock も requires/provides の 2 列だが、色分け + 矢印で「向き」を強化することで稟議書添付時の 1 秒判読性を高める。

8. 既知のトレードオフ／未解決

TO 1: 稟議書 framing が強すぎて、中堅企業 (300 名以下) 担当者には硬く感じる可能性。

対応: brief 通り A 極なので意図的。中堅企業向けは Variant B (柔らかい) で別案。

TO 2: timeline lane の marker overlap (Lane 1 で 2026.10 に 2 marker が密集) を、現案は left: 21% / 28% で 7% offset させて単純回避。実装時は overlap detection で動的にずらすかツールチップ化が望ましい。

対応: 実装フェーズに React component 化する際、 ja.json markers をスキャンして同月の marker をクラスター表示 (badge + count) に変える design refinement が必要。

TO 3: 「残月数」が 2026 年 5 月固定。 page.tsx の MARKERS にも記載があるが、静的 mockup では月次 rebuild 必要。実装時に動的算出 (今日 - 施行日) に置換。

TO 4: 「就活生等へのセクハラ防止」 marker を Lane 1 (ハラスメント) に置いたが、同月の他 marker と機能的役割が違う (相手は社外の就活生)。 brief には記載が無いので暫定で同 lane だが、実装時に lane 分離検討の余地あり。

9. Self-audit (forbidden patterns grep result)

結果: 全 10 パターン 0 件 ✓ (本ファイル除外、 index.html のみ対象)

¥[0-9]+,[0-9]{3} (金額表記)0

90 ?日 / 60 ?日 / 180 ?日 (期間 30 日以外)0

Google Meet / Microsoft Teams / Webex0

SSO / SAML / OIDC / SCIM0

SOC 2 / ISO 27001 / ISO 27018 / ISO 304140

専任 CS / ソリューションエンジニア / カスタマーサクセス0

離職率.{0,3}[0-9]+ ?% / ROI ¥ / 生産性.{0,3}[0-9]+ ?%0

first-mover / 先発優位 (¥) calculator0

今月導入 sticky / calculator widget0

v[0-9]+\.[0-9]+ (版数 fabricated 履歴)0

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

該当する Kashi コード: kashi/src/app/why-now/page.tsx (Server Component, next-intl)

章立て同期度: 5/5 章 (Hero / Timeline / LawBlocks / Mapping / CTA) が完全一致。 1 章追加 (共通圧バンド) のみ新規。

必要な新規 component:

<RegulatorySummaryTable /> — Hero 右の 9 行表 (現行は無し、 timeline component のみ)
<CommonPressureBand /> — timeline 直後の deep evergreen band
<DocMetaBar /> — 文書 ID 帯 (これは layout.tsx level に置くべきか page level かは設計判断)

既存 component への影響:

LawDetailBlock — ▼/▲ arrow indicator + 色分け追加 (1 prop 追加で済む)
MappingTable — 列ヘッダに期日 sub-line 追加 (1 prop 追加で済む)
RegulatoryTimeline — overlap marker のクラスター化が必要 (現状 marker が重なる懸念)
PilotCTA — 本案では「数値約束しない」 disavow note を含む。 canon doctrine を明文化する pilot variant を追加する余地あり。

messages/ja.json への追加項目:

whyNow.docMeta.id / docMeta.role / docMeta.sourceCredit
whyNow.summary.headline / summary.foot (Hero 右表のヘッダ + フッタ)
whyNow.commonPressure.eyebrow / commonPressure.title
whyNow.pilot.disavowNote

i18n 同期: en.json 追加分の i18n verbatim test pinning 必要 (memory: feedback_i18n_verbatim_test_pinning_governance.md)。

r19 既存課題: 「marker overlap」については既存課題で記録があるかは未確認、引き継ぎ時に確認推奨。

11. Justine が共同創業者共有前に確認するべき判断点

Q1 (核心): 「数値約束しない」 disavow note (pilot CTA 末尾) を A 案にも残すべきか?

背景: A 極の B2B トーンには、通常「ROI 数値」「KPI 改善」が必須。 disavow を残すと B2B 期待値とぶつかる。一方、 canon doctrine 上は外せない。この緊張をどう解決するかが A の最大の design point。現案では 「義務化対応 + リスク低減」を主訴求にし、 ROI 数値を出さずに「規制対応の必要性」で意思決定を促す構成にした。これが共同創業者にとって B2B トーンとして強度が足りるか否かが review point。