本書は、 /why ページの Variant A (大企業向け極) における設計判断と、 その根拠 (canon・brief 出典・代替案との比較) を網羅的に記録するものでございます。 共同創業者および将来の React 実装担当が、 各選択の意図を traceback できるよう設計しております。
brief で定義された Variant A の Target Reader (大手企業の人事部長 / CTO / CEO 40-60 代、 検討期間 6-12 ヶ月、 稟議書ベース) に対し、 1 ページで以下を完結できる構造としました:
canon: brief Variant A 「Tone: 「企業の対話健全性を構造的に可視化する SaaS」「ROI 数値」「ISO 27001 / SOC 2 Type II 準拠」」 + 「Buying mode: 検討期間 6-12 ヶ月、 稟議書」
現状の /why (kashi/src/app/why/page.tsx) は 「Hero → Problem → WhyNow Teaser → Comparison → Architecture → Talkable → Numbers → Philosophy → Pilot」 の 9 セクション構成でした。 Variant A では、 大企業稟議の決裁順序 (背景 → 比較検討 → 仕様 → ROI → リスク → スケジュール → Q&A) に沿うよう、 数値・比較・コンプラを前半に再配置しました。 「Philosophy (経営理念)」 セクションは Variant A では除外しました — 大企業バイヤーは哲学より仕様・ROI を求めるためでございます (brief: 「危険信号: warmth, emotion」)。
canon: brief Variant A 「Visual: dense data (KPI 表 / グラフ)、 ROI 比較表」 + 危険信号 「warmth, emotion, first-person」
brief 「Visual: information density 高 / 多段グリッド (3-4 列)」 に従い、 単独で意味のある最小情報単位 (data card・KPI tile・compliance card) を 1 cell として 3-4 列で並べる方針としました。 ヒーローも片側にエグゼクティブサマリー (KPI 4 つ + 13 週 sparkline) を sidecar として配置し、 「ヒーローもデータ駆動」 (brief) を実装しております。
canon: brief Variant A 「Layout: 多段グリッド (3-4 列)、 ヒーローもデータ駆動 (グラフ + 数値)」
「資料請求」「商談予約」「セキュリティ仕様書」 の 3 アクションを画面上部に固定しました。 大企業のリードジェネレーションでは、 ページ離脱前にコンバージョン経路が常に視認できる必要があるため、 brief 「Layout: sticky CTA バー」 を厳守しました。 sticky bar 内には 「残り枠 3 社」 という urgency 表示も入れております (稟議スケジュール意思決定圧力)。
canon: brief Variant A 「Layout: sticky CTA バー」 + permanent-ui-principles §7 (progressive disclosure 適用外: B2B では主要 CTA は常時可視が原則)
brief には明示されていない要素ですが、 大企業 SaaS の B2B サイト典型として「現在の稼働状態」 を 1 行で示すことが標準化されております (Stripe・Salesforce・ServiceNow 等)。 稼働率 99.92% / 東京リージョン / PoC 残り枠 3 を表示することで、 「実運用中の信頼性」 「データレジデンシ」 「機会希少性」 を 3 秒で伝達できます。 評価運用中であれば実値で差し替えてください。
参考: B2B SaaS 産業の defacto pattern (Stripe status, Vercel status bar, Atlassian incident banner)
brief 「typography 硬め (Plex 中心)」 「information density 高」 に従い、 fluid type scale の上限を canonical 値から約 12-15% 縮めました:
| token | canonical | 本ページ採用値 |
|---|---|---|
--fs-display | clamp(2.5rem, 4vw, 3.5rem) | clamp(2.25rem, 3.2vw, 3rem) |
--fs-h1 | clamp(2rem, 3vw, 2.75rem) | clamp(1.75rem, 2.4vw, 2.25rem) |
--fs-body | 1rem | 0.9375rem (15px) |
これは新トークンの追加ではなく、 同一トークン名の値を Variant A 内で再定義したものです。 実装フェーズで React 化する際は、 component-level の dense モードを CSS variable で切替える設計をお勧めします。 Body 15px は B2B SaaS (Linear, Notion docs, Stripe docs) の defacto。
canon: brief 「typography 硬め (Plex 中心)」 + design_system_v1.md (フォントファミリは Fraunces/Plex/Zen Kaku 維持)
brief 「typography 硬め (Plex 中心)」 を厳守。 Fraunces (serif) はページタイトル + セクション見出しのみに限定し、 表中・KPI 数値・eyebrow・badge ラベルは全て Plex Mono の tabular numerals で統一しました。 これにより 「数値が縦に揃う」 「監査・財務ドキュメントの体裁に近い」 効果が得られます。
canon: design_system_v1.md (Fraunces = brand display / Plex Sans = UI / Plex Mono = code・data)
brief・canon の 6 段階 (Blocked / Insufficient / Weak / Emerging / Stable / High-Confidence Stable) のうち、 4 層カードでは Emerging (個人) / Stable (チーム) / Weak (マネージャー) / Insufficient (組織) を展示用に配置しました。 これは:
Blocked / High-Confidence Stable は本ページ内では本文中に言及のみ。 全 6 種類を載せると evidence-grade セクション自体が必要になり、 ページが冗長化するため省略しました。
canon: globals.css --kashi-grade-* 6 トークン + permanent-ui-principles §13 + design_system_v1.md (色ラベル併記原則)
brief 「corporate evergreen 多用」 + permanent-ui-principles §11 (色彩制限) に従い、 主構成色を以下のように配分しました:
| 色トークン | 用途 | 使用箇所 |
|---|---|---|
--color-kashi-evergreen #1F3D33 | brand identity / 重要数値 / CTA | wordmark, KPI 数値, primary button, sticky bar background, final CTA |
--color-kashi-evergreen-deep #244A3D | hover state | primary button hover |
--color-cream #F5F0E6 | warmth accent (最小限) | 1 つの pill (Edition 2026) と final CTA hover のみ |
#fafaf7 (bg-base) | page background | 全体 |
#f5f5f1 (bg-stone) | セクション交互背景 | 2/4/6 セクション |
#1a2118 (bg-ink) | final CTA + 引用部 | 最終 CTA セクションのみ |
Cream を最小限に絞ったのは brief 「warmth は危険信号」 のため。 一方で完全な無味な工業デザインを避け、 brand DNA を保つために 1-2 箇所のみ cream を残しました。
canon: brief 「危険信号: warmth, emotion」 + permanent-ui-principles §11 (色彩抑制原則) + design_system_v1.md (Evergreen = brand primary)
現状ページは 「予防 vs 改革」 という哲学的フレーミングを ink-tone セクションで提示しております。 Variant A は emotion・narrative を危険信号としているため、 哲学セクションを丸ごと削除し、 代わりに「FAQ」 と 「Reference Architecture」 に置換しました。 哲学的な根拠は別途 Variant C (記事主体) で表現されます。
canon: brief 「危険信号: emotion, first-person」 + 「言葉: keigo、 動詞は丁寧形、 3 人称」
現状ページの「退職」「ハラスメント」「サーベイ」 の 3 ストーリーは narrative 形式 (登場人物に感情移入させる) でした。 Variant A では同じ 3 領域を 「数値 + 出典 + 構造的説明」 の data card に変換しました。 物語性は完全排除しております。
canon: brief 「Visual: photography 少なめ / illustration 不使用」 + 「危険信号: storytelling」
現状 3.5 は 「人事の課題」 を会話調で列挙しておりますが、 Variant A では同等の機能を 「8 件の FAQ」 + 「ROI 試算」 に置換しました。 大企業バイヤーは個別の感情的課題ではなく、 体系的に整理された 「想定 Q&A」 を求めるためでございます。
canon: brief 「Buying mode: 稟議書、 ROI 数値」
SaaS のオペレーション透明性を 3 秒で示す業界 defacto pattern。 大企業バイヤーは「すでに本番稼働しているか」 「データレジデンシは満たすか」 を最初に確認するため、 ヘッダーより上に配置しました。
「ヒーローもデータ駆動」 (brief) の実装。 demo株式会社の 4 KPI (リードタイム 86日 / カバレッジ 94% / 初期費用 ¥0 / 外部送信 0件) + 13 週推移を SVG sparkline で提示。 大企業バイヤーは「数値の輪郭」 を 30 秒で把握する必要があるため。
現状の Comparison は 3 カラム (examples / when / why) でした。 Variant A では大企業の比較稟議で必要となる 「測定対象」 「リアルタイム性」 「構造的兆候捕捉」 「プライバシ・監視性」 の 4 軸 × 5 カテゴリのマトリクスに拡張。 cell-pill (bad/partial/ok 3 値) で視覚的差別化を実装しました。
canon: brief 「Visual: ROI 比較表」 + permanent-ui-principles §13 (色のみによる区別禁止 → cell-pill は色 + ラベルテキスト併記)
brief 「ROI 数値」 「離職率○%改善」 の中核実装。 4 項目の現状コスト・導入後コスト・削減効果を ¥ 単位で提示。 大企業の稟議書 「投資対効果」 欄に直接転載できる体裁としました。 「前提条件」 を左に分離し、 「貴社固有のパラメータで個別試算可能」 と明示することで、 過度な数値主張に見えないバランスを取りました。
canon: brief 「ROI 比較表」 + investor_positioning メモ 「Conservative, no bragging」 (試算は提示するが保証しない明示)
大企業の情シス・セキュリティ部門が必ず求める 「データフロー図」 を ASCII-art 風の box-and-arrow 構造で実装。 「音声・発言文字列は貴社境界を越えない」 を 1 図で証明しました。 PDF にしても劣化しない設計でございます (印刷想定)。
canon: brief 「セキュリティ監査必須」 + permanent-ui-principles §2.1 (surveillance 排除を構造的に証明)
brief 「ISO 27001 / SOC 2 Type II 準拠」 を起点に、 日本企業の取締役会・監査役会が問う 6 つの追加軸を網羅。 ESG / 人的資本開示 (CSRD・SASB・GRI) と日本固有の枠組み (人材版伊藤レポート 2.0・APPI・パワハラ防止法) を併記することで、 グローバル・国内両方の稟議に対応可能としました。
canon: brief 「ISO 27001 / SOC 2 Type II 準拠」 + ja_market_design_canon (国内コンプラ枠組みの重要性)
「PoC 期間 90 日、 初期費用ゼロ」 (brief) を時系列で可視化。 各フェーズに deliverable (MSA/DPA/ベースライン算出書/初期インサイト等) を明示することで、 稟議書 「スケジュール」 欄への流用を容易にしました。 PoC 中止時の削除証明書・SLA まで明記。
大企業の調達 (procurement)・法務・情シスから事前に来る質問を網羅:
最初の項目を open 属性で展開しているのは、 監視懸念が大企業バイヤー最大の質問だから (canon 上の最重要懸念) でございます。
canon: permanent-ui-principles §2.1 (surveillance 反論を製品レベルで構造化)
大企業の稟議は複数部門の同時並行確認が必要なため、 1 つの問合せ窓口ではなく 4 つの専門窓口を明示しました。 情シスは CAIQ/SIG/SOC 2 対応、 法務は MSA/DPA、 調達は稟議書ひな型と、 各窓口が次のアクションを 「即時提供」 できる体裁にしております。
brief 「言葉: 「貴社」 「弊社」 「ご検討ください」 「導入事例」 keigo、 動詞は丁寧形、 3 人称」 を全文に厳守しました。 具体的には:
FAQ 部分のみ、 質問は質問者目線 (Q&A 体裁) で 「〜のではないか」 と書きつつ、 回答は完全敬語に保ちました。
canon: brief 「言葉: keigo」 + 「危険信号: warmth」
「大幅に削減」 「大きく改善」 等の漠然表現を排し、 全数値に単位を付与しました (例: ▲ ¥27,440,000 / 86 日 / 99.92%)。 これは大企業稟議書の慣行に従ったものでございます。
本ページで「年間 ¥27,440,000 削減」 と試算結果を明示しております。 これは brief 「ROI 数値」 を最も実装した部分ですが、 同時に「保証ではない」 「弊社所定の前提」 と明記しております。 もし数値そのものを伏せたい (パートナー個別開示が良い) 場合は、 ROI セクションを 「個別試算依頼」 のシングル CTA に置換可能でございます。
brief には「ISO 27001 / SOC 2 Type II 準拠」 と書かれていたため、 実際の現状を踏まえ ISO は「CERTIFIED」、 SOC 2 は「在審査中」 として並べました。 もし「両方とも取得済み」 と表示したい場合 (商談時のクロージング目的) は CSS class を差替えるだけで対応可能でございます。 ただし誇大表示リスクがあるため、 弊社の現実に合わせた表記を推奨いたします。
Hero sidecar の数値 (リードタイム 86日 / カバレッジ 94%) は「demo株式会社」 という仮想企業を背景としております。 brief 指定の dummy data でございますが、 大企業バイヤーが「これは事例か仮想か」 を即座に判定できないため、 sidecar header に「demo株式会社 (300名規模 / IT サービス業)」 と明示しました。 もし「仮想事例」 と明記したい場合は header に「仮想ケース」 ラベル追加で対応可能です。
競合の固有名 (モチベーションクラウド・wevox・OpenWork 等) を載せると、 (a) 法的リスク、 (b) 競合からの即時反撃、 (c) 比較表が古びる、 という 3 つの懸念があるため、 カテゴリ名 + 「主要 3 ベンダー」 等の抽象記述としました。 もし固有名で対決姿勢を見せたい場合 (営業同行資料としての強さを求める場合) は実名版を別途生成可能でございます。 ただし pubic site では推奨いたしません。
Variant A は意図的に「冷たく、 dense で、 keigo」 でございます。 これを温める・柔らかくする方向の改善要望が出た場合は、 Variant A の改修ではなく Variant B/C の方向で対応すべきです (極が混ざると brand identity が曖昧になります)。
本 variant は意図的に大企業ターゲットに極振りしているため、 「うちはまだ 30 名のスタートアップで...」 「うちはトップダウンの稟議文化はなくて...」 という訪問者を即座に zone out させる可能性が高うございます。 これは設計通りでございますが、 サイトのトップページから /why へ来る導線に「中小企業の方は別ページへ」 という分岐を設けるか、 Variant B との切替 toggle を top に置く必要があるかもしれません。
ROI セクションの「離職 -15% / 訴訟 -40% / サーベイ補完 -100%」 は、 PoC 実績が未だ蓄積されていない現状では仮の改善率でございます。 投資家・取締役会向けには「想定試算」 と明示しておりますが、 第一号顧客の実績が出るまでこの数値が一人歩きするリスクがございます。 商談時にエビデンスファイル提供と明記しておりますが、 そのファイル自体が「想定」 にとどまらないよう、 PoC 第一号案件で実測値の積み上げが急務でございます。
Trust strip に「PoC・本契約合計 12 社 (2026 年 5 月時点)」 と書きましたが、 これは brief で指定された仮想前提でございます。 実数と乖離している場合、 公開前に必ず実数値で更新する必要があります。 「上場企業 4 社 / 公的機関 1 機関」 も同様。 公開前 lint チェックの必須項目としてご認識ください。
「貴社の対話健全性は構造的に可視化されておりますでしょうか」 のような検索クエリは存在しないため、 SEO 観点では弱いタイトルでございます。 meta title・h1 と body の表記を分離するか、 構造化データで補完するかの対応が必要でございます。 本 mockup では実装フェーズでの判断とし、 SEO 最適化は意図的に保留しております。
kashi/src/app/why/page.tsx — 本 mockup の置換対象kashi/src/components/sales-hub/ — 既存 Section / Container / Card / ComparisonTable / LayerCard / StatCallout / PainStory / PersonaColumn / PilotCTA / StickyAnchorNav / HeroSparkline / IndividualRiskBar / TeamHealthStacked / ManagerMirror / OrgHeatmap を流用可能kashi/messages/{ja,en}.json — salesHub namespace に本 mockup の全 copy を追加 (現状の copy はカジュアル寄り、 Variant A 採用時は keigo に全置換)NoticeBar — ヘッダー上の 3 項目 status バー (新規)StickyCTABar — Evergreen 背景の常時表示 CTA (新規)HeroSidecar — KPI 4 件 + sparkline の sidecar (既存 HeroSparkline を組込)KPISidecarRow — sidecar 内の 2x2 KPI セルTrustStrip — logo 5 placeholder + 説明テキストROITable — 4-col 試算表 + tfoot + disclaimerROIAssumptions — definition list 型の前提条件パネルReferenceArchDiagram — box-and-arrow データフロー図ComplianceCard — 8 種 + status pillImplementationTimeline — 5 phase 横並びカードProcurementFAQ — <details> 8 件のリストFinalCTASection — dark 背景 + 4 窓口 dlComparisonMatrix (既存 ComparisonTable を 5×6 拡張)JapaneseProse — 本 mockup では使用していないが、 React 化時は typography v1 を踏襲しつつ keigo 専用 prose スタイルを追加する必要ありglobals.css の --fs-* を直接書換えるのではなく、 page-scoped CSS variable で上書き (Variant A だけ dense mode)--bg-stone / --bg-ink / --bg-paper 等は既存 tokens で代替可能 (bg-stone-50 / bg-stone-900 / bg-white)certified に)| file | size 目安 | purpose |
|---|---|---|
site/why/A/index.html | 約 45-50 KB | 動く mockup (single file, 自立) |
site/why/A/DESIGN_DECISIONS.html | 本書 | 設計判断トレース |
END OF DESIGN DECISIONS / kashi-ui-mockupper / round 001 / /why variant A