Variant A · ものすごく B2B · Round 001 · 2026-05-28
Design Decisions — /why (Variant A)
Kashi 公開サイト /why ページの Variant A 「ものすごく B2B (大企業向け極)」 静的モックアップ。 取締役会・人的資本開示・コンプライアンス担当者向けに、 稟議書・監査資料の根拠として機能する形に組み上げた。
前回 (2026-05-27) の B2B mockup で発生した canon-外数字 fabricate (¥240,000/月、 SOC 2、 ISO 27001、 専任 CS 等) を再発させない目的で、 本ページは /tmp/site_canon_facts.txt ホワイトリスト準拠で書かれている。
1. 主タスクと上位構造
決定: 取締役会資料の付録としてプリントアウトに耐えるレイアウト。 sticky subnav により、 商談中 「規制動向 だけ見たい」 「リスク試算 だけ見たい」 という deep-jump 要請に応える。
canon: salesHub.stickyJump (8 sections) を踏襲、 ただし talkable/philosophy を統合し 8 → 8 セクションを再編 (stakeholders / regulatory / risk-numbers / architecture / governance / comparison / pilot)。
上位構造の組み替え理由
React 版 /why ページの spec は 「hero → problem → comparison → architecture → talkable → numbers → philosophy → pilot」 という 8 section 構成。 これを B2B 極 では:
- 「想定読者」 セクション (stakeholders) を冒頭に追加 — 取締役会・CHRO・法務の 3 view ですぐに 「自分宛か」 を判定可能に
- 「regulatory (規制動向)」 を独立セクション化 — react 版では
/why-now teaser に閉じ込められていたが、 B2B では これが第一の購買トリガー
- 「talkable」 + 「philosophy」 を 「governance (統制設計)」 に統合 — emotion/storytelling は B2B 極では危険信号
- 「numbers」 は維持、 ただし 「ROI Kashi 削減効果」 cell を 「ご相談」 placeholder に — 前回失敗の核心、 ここで fabricate しない
2. レイアウトとビジュアル
決定: 1280px 多段グリッド、 Plex Sans 中心、 photography 一切なし、 dense tables 2 つ (規制動向 / 既存ツール比較)。
brief 「Visual: dense data (KPI 表 / グラフ)、 corporate evergreen 多用、 photography 少なめ、 typography 硬め (Plex 中心)、 information density 高」 直接反映。
主要レイアウト要素
- 2行 sticky header: header-meta (evergreen 帯、 mono font、 「JP / Enterprise」 「会議ガバナンス・プラットフォーム」) + header-main (brand + 6-item nav + dual CTA)
- sticky subnav: 8-anchor jumper、 mono uppercase label。 商談中の deep-link 利用想定
- hero 2-col: 左 = 説明文 + 3 CTA、 右 = 「プロダクト要約」 aside card (8項目 dl)。 enterprise SaaS の defining shape
- stakeholders 3-col grid: 3 ステークホルダー × 4 bullets。 1280 で 3列、 1024 以下で 1列
- compliance table: 7行 × 4列、 dark header (evergreen-ink)、 zebra striping、 残り月数 chip (imminent = amber tint)
- stats grid: 6セル (canon-verified 5項目 + 「ご相談」 placeholder 1項目)、 各セル に出典明示
- architecture 2x2: layer 01-04、 各カードに tech-chip で 「k-匿名化」 「監査ログ」 等の defense tag
- governance 2-col: 左 = Glossary aside (6 terms)、 右 = 4つの 「設計上の境界線」 prose
- comparison table: 5行 × 4列、 Kashi 行は背景色 alt、 既存 4 カテゴリ並べる
- pilot 5-col: スコープ / 期間 / 価格 / レビュー / 枠数
- footer CTA: evergreen 全面、 2-col (cta text + 「次のステップ要約」 dl)
3. 採用したトークン
| トークン | 値 | 使用箇所 |
|---|
--color-kashi-evergreen | #1F3D33 | header bar、 brand mark、 h1/h2/h3、 primary button、 footer-cta 背景 |
--color-kashi-evergreen-deep | #244A3D | site footer、 primary button hover、 stakeholder-role text |
--color-cream | #F5F0E6 | header-meta text、 brand mark text、 footer 全要素 text |
--ink | #2A3A1E | body 標準 text、 stat-label、 table header (dark mode) |
--ink-soft | #4B5746 | section-lede、 nav link、 body 補足、 governance-card-body |
--ink-faint | #7A8273 | section-eyebrow、 source-line、 footer-legal、 「次のステップ要約」 dt |
| typography | Fraunces 500 / Plex Sans 400-600 / Plex Mono 400-500 / Zen Kaku fallback | Fraunces = h1/h2/h3/stat-value/brand、 Plex Sans = body、 Plex Mono = eyebrow/label/tech-chip/source |
| type scale | clamp() 全部 design_system_v1 範囲内 | display 36-52px、 h1 30-40px、 lede 17-19px、 body 15px (B2B らしくやや小さめ) |
B2B 用 helper トークン (canon 範囲内の派生): --b2b-rule (#d1d5db, neutral gray border)、
--b2b-surface-alt (#f4f1ea, cream + 0.5 tint)、
--b2b-table-header (= --ink、 dark table header)。 これらは canon palette の範疇で B2B 「dense data」 visual を実現するための補助 token のみ。 新色 invent はゼロ。
canon: design_system_v1.md 「Wide range of greens + white + black; 中間 neutral OK」 (memory project_kashi_brand_palette.md)。
4. 採用した evidence-grade 表現
決定: 本ページではエビデンス等級 (Emerging / Stable 等) の
実 badge は表示せず、 Glossary (用語定義 aside) で 「エビデンス等級 — 観測されたパターンの確実性を併記する設計。 色のみでの表現を避け、 必ずテキストラベルを伴う」 と
説明のみ 行った。
canon: permanent-ui-principles §13 surveillance metaphor NG、 color-only NG。 本ページは marketing/sales surface で 「実データを見せる」 page ではないため、 badge は実装ではなく説明として扱った。
5. Canon-verify discipline — 最重要セクション
Variant A 設計の最大のリスクは、 「enterprise SaaS 典型仕様で埋めたくなる誘惑」 (brief 引用)。 2026-05-27 の前回失敗 (product/A) で月額 ¥240,000、 SOC 2、 ISO 27001、 専任 CS 等を fabricate したのと同じパターンを再発させないため、 本ページは /tmp/site_canon_facts.txt ホワイトリスト準拠で書かれている。
5.1 数値・固有名の出所マッピング
| 数値・固有名 | 使用箇所 | 出典 |
|---|
| ¥15M – 20M (中堅補充コスト) | risk-numbers | messages/ja.json salesHub.numbers.replacement (canon) |
| ¥5M – 15M (ハラスメント和解金) | risk-numbers | messages/ja.json salesHub.numbers.harassment (canon) |
| 10,000+ (退職代行利用) | risk-numbers | messages/ja.json salesHub.numbers.outsourcedResignation (canon) |
| 3〜6ヶ月 (ハラスメント調査開始まで) | risk-numbers | messages/ja.json salesHub.numbers.harassmentInvestigation (canon) |
| 6% (日本のエンゲージメント率) | risk-numbers | Gallup, State of the Global Workplace 2025 (canon、 social citable) |
| 2022年4月〜 (パワハラ防止法) | regulatory | 厚労省「職場におけるハラスメント対策」 (公的) |
| 2026年10月1日 (カスハラ防止) | regulatory | messages/ja.json whyNow.timeline.markers.kasuhara (canon) |
| 2026年10月1日 (就活セクハラ) | regulatory | messages/ja.json whyNow.timeline.markers.sekuhara (canon) |
| 2027年3月期 SSBJ 3兆円超 | regulatory | messages/ja.json whyNow.timeline.markers.ssbj_3cho (canon) |
| 2028年3月期 SSBJ 1兆円超 | regulatory | messages/ja.json whyNow.timeline.markers.ssbj_1cho (canon) |
| 2028年5月まで (ストレスチェック拡大) | regulatory | messages/ja.json whyNow.timeline.markers.stress_check (canon) |
| 1チーム / 30日間 / 毎月3枠限定 | hero + pilot | messages/ja.json salesHub.hero.ctaSubline (canon) |
| Zoom 稼働中 | hero meta card | memory project_zoom_integration_pending.md (canon) |
| k-匿名化 (5名以上) | hero meta + architecture + governance | messages/ja.json で 「5名以上」 言及多数 (canon) |
| 音声・発言文字列はDB未保存 | hero meta + governance prose | kashi/docs/security/NO_PAYLOAD_ARCHITECTURE.md (canon) |
5.2 「ご相談」 placeholder で代替したもの
- 本契約価格 — hero meta card + footer-cta card で 「個別見積もり (担当者まで)」
- その他会議ツール統合 (Meet / Teams / Webex) — hero meta card で 「その他統合: 導入時にご相談」
- SSO / SAML / OIDC / SCIM 認証連携 — pilot 注記で 「認証連携などの個別事項は Kashi 担当者にご相談」
- 認証取得 (SOC 2 / ISO 27001 等) — 言及しない (footer link は 「セキュリティ仕様 (担当相談)」 で逃がす)
- 専任 CS / ソリューションエンジニアの人数 — pilot で 「Kashi チームが導入を直接サポート」 のみ、 具体人数は出さない
- 本契約での月額・年額削減効果 / 想定 ROI — risk-numbers grid の 6 セル目を 「ご相談」 + 「Kashi は組織固有の状況に依存する成果数値の保証を行いません」 の明示 disavow に使った
- DPA 草案 — 「Kashi 担当者より別途提供」 を 2 箇所で明示 (stakeholders 法務 cell + footer cta)
5.3 self-audit grep 結果 (mockup 完成後実行)
| Pattern | 結果 |
|---|
¥[0-9]+,[0-9]{3} (Kashi 価格) | 0件 PASS |
90/60/180 日 (pilot 期間 fabricate) | 0件 PASS |
Google Meet / Microsoft Teams / Webex | 0件 PASS |
SSO / SAML / OIDC / SCIM | 0件 PASS |
SOC 2 / ISO 27001 / ISO 27018 / ISO 30414 | 0件 PASS |
専任 CS / ソリューションエンジニア / カスタマーサクセス | 0件 PASS |
離職率 X% 改善 | 0件 PASS |
ROI ¥ | 0件 PASS |
生産性 X% 向上 | 0件 PASS |
完全削除証明書 | 0件 PASS |
Bonus: 検知 / 予測 / 健康スコア / 生産性スコア (permanent-ui §2 forbidden) | 0件 PASS |
Bonus: 月額 ¥ / /月 ¥ (価格 fabricate) | 0件 PASS |
6. 削った要素 (現状の React /why から)
- PainStory コンポーネント (problem 3 stories) — 「優秀な社員が退職代行サービスを利用」 のような narrative は B2C 寄り。 B2B 極ではコスト・規制・統制の言葉に翻訳済
- HeroSparkline / OrgHeatmap / TeamHealthStacked viz — 動的データ可視化は 「dummy data 動かさない」 制約のため省略、 代わりに 「アーキテクチャ」 セクションで tech-chip による説明に置換
- philosophy section の 「予防的 / 是正的」 のカード演出 — governance prose に統合、 説明のみ
- persona column 3 (HR / Exec / Manager) — stakeholder grid (経営層 / CHRO / 法務) に再編、 法務視点を追加して compliance angle を強化
- 「監視ではなく評価でもない」 タグライン強調 — governance prose 内に降格、 取締役会向けには静かに defend する
7. 追加した要素 (現状にない)
- 「想定読者と意思決定の論点」 セクション (stakeholders) — 取締役会・CHRO・法務 別の検討論点を明示。 brief: B2B 「稟議書、 ROI 数値、 セキュリティ監査必須」 への直接対応
- 「規制動向」 dense table — react 版では
/why-now teaser だが、 B2B では 「Why now の数字を Why の中で叩き出して見せる」 のが capital sales の慣行
- 「統制設計と用語定義」 セクション — Glossary aside + 4 つの設計上の境界線。 法務・コンプライアンス担当が稟議書に貼り付けられる形式
- hero meta card 「プロダクト要約」 — 8 項目 dl で 「価格 / pilot / 認証 / 統合」 を一望、 営業担当の口頭説明の時間を削減
- 「次のステップ要約」 footer card — 商談予約までの段取りを mono font dl で明示
8. 既知のトレードオフ / 未解決
トレードオフ 1: 大企業が稟議書で求める 「Kashi の ROI 試算」 を提供できない。 競合 (Wevox 等) の営業資料は 「年間 ¥XX 万削減」 の試算表を持っている。 Kashi は doctrine 上提供できない。 → これは
仕様の弱み ではなく
仕様の強み として営業トークで言語化する必要 (「過剰約束しない」 brand positioning)。
canon: CANONICAL_PRODUCT_TRUTH.md + investor_positioning memory (conservative, no bragging)
トレードオフ 2: 認証 (SOC 2 / ISO 27001) 未取得 (canon 不明) の状態で大企業の調達基準を通過しづらい。 footer の 「セキュリティ仕様 (担当相談)」 で逃がしているが、 大手調達では 「認証なし = 検討対象外」 のフィルターを通過できない可能性。
→ 商談プロセスで個別開示、 NDA 締結後に詳細仕様提供という運用前提。 product roadmap として認証取得は別途検討課題。
トレードオフ 3: Zoom のみ対応の現実が、 大企業 (Teams が主流) に不利。 hero meta card で正直に開示しているが、 「貴社の Teams 環境で動かない」 で商談終了するリスク。
→ canon source 上 「ご相談」 一択。 Teams 対応 roadmap がいつか明確になれば、 「2026 年下期対応予定」 等の言及に置き換え可能。
未解決 1: 規制動向テーブルの 7 行は messages/ja.json whyNow から引用したが、 公的官庁の最新公表との突合せ (Justine + 法務確認) は別タスク。 「出典」 はラベル表示で、 リンク URL は href="#" のまま。
未解決 2: hero/stakeholder の 「取締役会」 「CHRO」 「法務」 という想定 persona が canon (CANONICAL_PRODUCT_TRUTH) と一致するか、 共同創業者と要 sync。 現状は brief 「大手企業の人事部長 / CTO / CEO」 から推定して 3-fold persona に拡張した。
9. 他 variant (B / C) との trade-off
| 軸 | A (B2B 極) | B (B2C 極) | C (essay 型) |
|---|
| 主たる読者 | 取締役会 / CHRO / 法務 | 個人 manager / 若手 | founders / 投資家 / 思考家 |
| information density | 高 (dense tables 2 つ) | 低 (whitespace + photo) | 中 (long-form prose) |
| tone | defense / 説明責任 | 共感 / 想い | narrative / open |
| typography | Plex Sans 中心、 dense | Fraunces ぶら下げ、 short | Fraunces 大、 60ch wrap |
| CTA | 「資料請求」 「商談予約」 重複 | 「無料で試す」 single primary | 「もっと話したい人へ」 控えめ |
| conversion 距離 | 遠 (6-12ヶ月稟議想定) | 近 (即 sign-up) | 遠 (まず読み切る) |
| Justine 判断点 | 「これ取締役会で出せるか」 | 「manager 個人が動くか」 | 「ブランドとして恥ずかしくないか」 |
10. Justine が見るとき気になりそうな design 判断
判断点 #1 (中核): risk-numbers grid の 6 セル目を 「ご相談」 + 明示 disavow に使った。 fabricate されがちな 「ROI 試算」 を
意図的に欠席させる 設計。
これが B2B mockup の 「正直さの可視化」 として機能するか、 それとも 「大企業はそれだと買わないよ」 という指摘を受けるか — 共同創業者の判断ポイント。
代替案: 6 セル目を削除して 5 セル grid にする選択肢もあったが、 「欠席させて明示する」 = 「過剰約束しない brand」 を体現する design choice として残した。
判断点 #2: 規制動向テーブルを stakeholders の直後に置いた (3.2 → 3.3)。 react 版は 「problem → comparison → architecture → ... → philosophy」 で、 規制は /why-now 別ページ。 B2B 極では 「なぜ今 (規制圧力)」 を 「Why」 ページ内で完結させた方が、 取締役会資料 1 枚で完結するという判断。
判断点 #3: footer-cta を evergreen 全面、 footer 本体を evergreen-deep にした。 サイト最下部までブランド色で押し切る企業サイト型 (Stripe / Linear 風)。 B 「warmth」、 C 「cream-dominant」 とは対照的。
判断点 #4: compliance table の 「残り月数」 chip で imminent (2026年10月、 2028年5月) を amber tint にした。 brief 「Visual: corporate evergreen 多用」 と矛盾しないか — design canon の amber は evidence-grade weak (#D97706) と一致するため、 token として正当化される。
canon: --kashi-grade-weak: #D97706 (globals.css)
11. 実装フェーズへの引き継ぎ
このモックアップを React 実装する際の注意:
- 該当 Kashi コード:
kashi/src/app/why/page.tsx (既存 8 section 構成)
- 影響を受ける既存コンポーネント:
HeroSparkline, PainStory, LayerCard (Layer 4個), PersonaColumn, StatCallout, ComparisonTable, PilotCTA, StickyAnchorNav, Section, Container
- 必要な新規コンポーネント:
StakeholderGrid — 取締役会 / CHRO / 法務 の 3-col matrixComplianceTable — 規制動向 7 行テーブル (現在 whyNow には timeline viz があるが table 形式は新規)GovernanceCard — tech-chip 付き 4-card layoutGlossaryAside — 用語定義 dlHeroMetaCard — hero 右側の 8項目 dl
- 翻訳キー: 既存
salesHub.* 名前空間を維持しつつ、 stakeholder / regulatory / governance の新規キーを salesHub.stakeholders.*、 salesHub.regulatory.*、 salesHub.governance.* に追加。 whyNow.timeline.markers.* から regulatory table データを参照する形に
- r19 既存課題のうち本案で同時解決されるもの: なし (これはサイトページのため app/me dashboard 系の r19 issue とは独立)
12. 制約遵守チェックリスト
| 制約 | 状態 |
|---|
| pure HTML/CSS/vanilla JS | PASS (subnav scroll-active のみ JS) |
| design token canon 準拠 (新色 invent なし) | PASS (b2b-rule 等は neutral gray / cream tint 派生) |
| real-world person data なし | PASS (dummy 「demo株式会社」 等も brief 想定だが本ページは出さず) |
| evidence-grade 色 only NG | PASS (Glossary で説明のみ、 実 badge なし) |
| surveillance affordance NG | PASS (eye/camera/police icon ゼロ、 個人スコア表示ゼロ) |
| kashi/ 改変なし | PASS (read-only、 messages/ja.json 引用のみ) |
| self-contained (他 page 依存なし) | PASS (全 href は # or 同セクション) |
| DESIGN_DECISIONS.html 同梱 | PASS (本ファイル) |
| HTML (not MD) | PASS (両ファイル HTML) |
| responsive 1280 / 768 / 480 | PASS (3 breakpoints) |
| fabricate 数値ゼロ (10 patterns grep 0件) | PASS (上記 §5.3) |
END OF DESIGN_DECISIONS.html · /why · Variant A · Round 001 · 2026-05-28