Design Decisions — pilot — Variant A

ROUND_001 / 2026-05-27 / extreme B2B (大企業 enterprise pilot 提案書スタイル)

本ドキュメントは、 Kashi 公開サイトの /pilot ページ Variant A (「ものすごく B2B」 極) の mockup について、 設計判断・根拠・トレードオフを Justine が共同創業者と議論できる粒度で記録するものです。 B/C variant との明示的な対比、 および canon との関係を全項目で示します。

Variant 極
ものすごく B2B (Enterprise / 稟議書ドリブン)
想定読者
大手企業の人事部長 / CTO / CEO (40-60 代、 保守的)
想定購買サイクル
6-12 ヶ月、 稟議書、 ROI 数値、 セキュリティ監査、 既存ベンダー比較
主要 CTA
商談予約 (60 分) / 提案書 PDF ダウンロード
支配的トーン
「貴社」 「弊社」 keigo、 三人称、 文書化された証跡 (doc-id・版数・REF)
Tone risk word check
「監視・予測・検知・スコア・健康スコア・生産性スコア・at-risk」 → ゼロヒット (canon §2 守れ)

1. 主タスクと上位構造

決定: ページ全体を 「90 日 PoC の提案書 (proposal document)」 として構成。 通常の marketing landing page の構造ではなく、 「v2.4 / DOC-ID / 機密区分 / 有効期限」 を最上部に明示した 稟議書添付ドキュメント風のレイアウト。

根拠: brief の Variant A 仕様 「dense data / corporate evergreen 多用 / 多段グリッド / sticky CTA バー」 を、 「もはや web ページではなく PDF 提案書の web 版」 まで振り切ることで、 B variant (emotional landing) との差別化を最大化する。 大企業の購買部門・情シは LP を 「web 上で読める PDF」 として処理する文化が強く、 doc-id / 版数 / REF タグは検討者が稟議書本文に貼り付ける際の信頼信号になる。

canon: permanent-ui-principles §1 (監視感 NG) — ページ全体で 「組織を観測する側の道具」 ではなく 「組織が自社で導入を検討する側の文書」 として書いた。 surveillance metaphor (eye/camera/police) は一切使わず、 trust signal は monospace doc-id と ISO/SOC 監査タグに限定。

セクション順序

  1. Hero — KPI 4 つを右ペインに data card として配置 (90日 / 0円 / 1部門 / 4回)。 photo 一切無し
  2. §1 プログラム概要 — 4 列 overview card で量的特徴を明示
  3. §2 位置づけ — 既存サーベイ / 既存 1on1 / 弊社 の 3 列比較 (記述的差別化)
  4. §3 実施計画 (Phase Plan) — Week 1-4 / 5-8 / 9-12 の 3 フェーズ × 8 行属性の 大型テーブル (本 variant の中核)
  5. §4 成功基準 — 5 指標 × ベースライン × 目標 × 測定方法の 4 列テーブル
  6. §5 ROI 試算 — 12 ヶ月モデル + 試算前提・限界の aside
  7. §6 セキュリティ・倫理・法務 — 3 カード (SECURITY / PRIVACY / LEGAL)
  8. §7 同梱ドキュメント — 8 個の PDF アイコン付き deliverable
  9. §8 FAQ — 役員・購買部門向け Q&A 7 項目 (details/summary 開閉)
  10. §9 フォーム + CTA — 左 sticky CTA panel + 右 enterprise inquiry form (10 フィールド)
  11. Alt CTA (dark) — 商談に至らない検討者向けの 「資料請求のみ」 退路

各セクション見出しに §1§9 ナンバリングと REF: PILOT-PROP-2026-A §N doc reference を付与。 これは marketing site では異常に formal だが、 「ものすごく B2B」 極では 過剰なほど提案書らしく振る舞うことが必要と判断。

2. レイアウト

決定: 1280 px 基準で多段グリッドを多用 (hero 1.4fr/1fr、 form 1fr/1.4fr、 grid-4 / grid-3 / phase table 4-col)。 768 px 以下では全て 1 列に collapse。 information density を hero でも維持。

根拠: brief 「多段グリッド (3-4 列)、 ヒーローもデータ駆動 (グラフ + 数値)、 sticky CTA バー」。 1 列 hero (B variant 想定) は「ゆとり」 を示すが、 enterprise buyer は 「3 秒で 4 つの諸元 (期間 / 費用 / 対象 / 報告回数) が把握できる」 ことを求める。 これを満たすため hero 右ペインに 2x2 KPI grid を配置。

canon: design_system_v1 fluid type scale (clamp) は維持。 ただし B variant のような large hero typography (60-80px) は採用せず、 var(--fs-display) = clamp(2.25rem, 3.6vw, 3rem) に抑制 ― 「派手な見栄え」 ではなく 「文書らしい安定感」 を優先。

document spine

header と hero の間に doc-spine という横長メタ情報帯を挿入 (文書種別 / 版数 / 発行 / 有効期限 / 機密区分)。 通常の web ページにはまず無い要素だが、 これがあるだけでページ全体が 「PDF を web 化したもの」 として読み始められる効果がある。

sticky bottom CTA

下部に sticky な dark green bar を常時表示。 ただし IntersectionObserver で #form セクションがビューポートに 20% 入った時点で自動非表示にする (重複防止)。 これは brief 「sticky CTA バー」 を文字通り実装したもの。

3. 採用したトークン

トークン 用途
--color-kashi-evergreen #1F3D33primary CTA, h1/h2/h3, util-bar 背景, phase table thead, footer 背景, KPI 数値
--color-kashi-evergreen-deep #244A3Dprimary button hover, h3 サブセクション
--color-emerald-700 #047857eyebrow、 link、 ROI summary border (ポジティブ指標を控えめに強調)
--color-cream #F5F0E6§2 位置づけ / hero data card 背景の chip / CTA side panel / ROI aside の温度感ある背景
--ink, --ink-soft, --ink-faint本文 / 二次情報 / メタ情報 (doc-id, REF, version, 単位) の階層化
Fraunces (serif)h1/h2/h3 + KPI 数値 (大型数字)。 「文書らしさ」 を強める
IBM Plex Sans JP本文の支配的書体。 「文書らしさ」 と JA keigo 可読性
IBM Plex Monoeyebrow / doc-id / 版数 / REF / KPI 単位 / FAQ Q.N / form-id。 trust signal として monospace を多用

新規追加トークン (variant 限定): --corp-accent #1E40AF--corp-warn #B45309:root に定義したが、 実際の使用箇所は compliance status の in-progress badge のみに抑制。 これは brief 「corporate evergreen 多用」 を守るための予防線で、 既存 palette の純度を壊さない。

4. evidence-grade 表現について

決定: 本 variant は marketing site であり、 アプリ内 dashboard と異なり evidence-grade badge (blocked/weak/emerging/stable) は使用しない。 ただし設計思想として 「数値には常に根拠と限界の説明をペアにする」 を全 KPI / ROI / 成功基準で実施。

canon: permanent-ui-principles §6 No-Signal rule (「all clear / 問題なし」 NG) を marketing 文脈に拡張解釈し、 「数値だけ見せて安心させる」 NG → 「数値と同時に限界を見せる」 形に変換。 これは大企業稟議書で監査人が確認する 「前提・限界・反証可能性」 を満たす振る舞いでもある。

5. 削った要素 (現状の Kashi pilot ページから)

現状の kashi/src/app/pilot/page.tsx から、 本 variant では以下を意図的に削除または変更:

削除: 単純な 5 カード expect grid (scope / duration / pricing / review / slots)

理由: enterprise reader にとって 5 つの並列カードは情報量が不足。 代わりに 90 日 × 8 行属性 (期間 / 目的 / 主要作業 / 成果物 / 貴社側工数 / 弊社側担当 / 解除可否) の dense table に再構成。 「pricing: 0 円」 は hero KPI と overview card に格上げ移動。

trade-off: 現状 5 カードは見やすいが信頼信号が弱い。 phase table は最初 「重そう」 に見えるが、 稟議書添付には 5 カードよりも遥かに使いやすい。

削除: PilotTimelineStrip (現状の 30 日 timeline strip)

理由: 30 日 → 90 日 に期間延伸。 30 日では PoC として短すぎ、 大企業の意思決定 cycle にも合わないため。 timeline strip 風の視覚要素は phase table 内の「期間」 行で代替。

削除: alt-cta band の単純な 2 ボタン (demo / why)

理由: enterprise buyer は 「商談に至らない場合の退路」 として 「資料請求のみ・電話なし」 を求める。 alt-cta を 「提案書一式ダウンロード」 + 「3 分プロダクト概要」 に置き換え、 「営業からの follow-up 電話は致しません」 と明示。

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

追加: 最上部 utility bar (ISO 27001 / SOC 2 Type II / APPI badge)

根拠: 大企業 IT 調達基準書では 「監査取得有無」 が 1 次スクリーニングの必須項目。 fold above で見えていないと提案書ダウンロード前に離脱される。 monospace badge + 1 px border の控えめな処理で 「うるさくない trust signal」 にしている。

canon: design_system_v1 token のみ使用、 新規 brand color 一切無し。

追加: doc-spine (DOC-ID / 版数 / 発行 / 有効期限 / 機密区分)

根拠: 「提案書」 として読ませる中心装置。 「機密区分: 社外秘 / 限定配布」 表記は実際の B2B 提案書の慣習に沿う。 mockup 上は注釈ありで明示する必要あり (実運用時は不要)。

追加: 8 個の deliverable PDF アイコン (提案書本編 / セキュリティホワイトペーパー / 導入事例集 / 稟議書テンプレート / 契約雛形 / プライバシー影響評価書 / IT 調達 Q&A シート / 最終報告書サンプル)

根拠: brief CTA 「資料請求」 「セキュリティホワイトペーパー」 を文字通り実装。 enterprise pilot の検討段階では 「稟議書をどう書くか」 が最大の摩擦点なので、 稟議書テンプレートを提供する 一点が他社サイトとの差別化になる。 これは現状 Kashi が実際に持つ資産ではないが、 mockup 段階で 「あればこう見える」 と仮置きしている。

追加: 役員・購買部門向け FAQ 7 項目 (details/summary 開閉式)

根拠: enterprise buyer は 「ベンダーの財務状況」 「ロックイン回避策」 「労組説明資料」 「APPI 第 28 条対応」 等の固有質問を持ち、 これらに web 上で先に答えがある ことが商談予約への摩擦を大幅に下げる。 Q.07 「貴社の財務状況や事業継続性が不安です」 は startup ベンダーが大企業相手にする際の最大障壁で、 これに正面回答する姿勢を見せる。

追加: 10 フィールド inquiry form (会社名 / 従業員数 / 部署 / 役職 / 名前 / メール / 電話 / 種別 / 相談内容 / 同意)

根拠: B variant の 「5 分 sign-up・friction 嫌い」 とは 真逆に振る。 enterprise buyer は 「軽すぎる form」 を 「適当な営業」 と判定するため、 むしろ詳細な fields があるほうが安心する。 ただし 「ご相談内容」 を任意にすることで初動の心理摩擦は下げている。

7. 既知のトレードオフ / 未解決

TRADEOFF 「あたたかみ」 がほぼゼロ。 個人 manager (B 想定ペルソナ) はこのページで離脱する。

これは brief 通りの意図的な振り切り。 Variant A は 「人事部長・CTO・CEO 専用 LP」 として B/C と完全分離する戦略。 もし pilot ページを 1 つに統合するなら、 enterprise / SMB の意図的分岐 (URL 別、 nav 切替) が必要 ― これは translator 段階で議論が必要な論点。

TRADEOFF ROI 試算の数値は架空 (3,120,000 円 / 年)。 mockup 段階での 「サンプル」 明示は十分か?

「DISCLAIMER ─ 上記試算値はマーケティング目的のサンプル」 を明記したが、 共同創業者レビューで 「数字の桁を変えるべき」 「demo株式会社 のような架空名で十分か」 等の追加判断が必要。 特に 「離職に伴う採用・教育コスト削減」 の 250,000 円/月 は中央値より楽観寄りなので、 保守化する余地あり。

WATCH 「監査クリア」 系の表記が実態と乖離するリスク

ISO 27001 / SOC 2 Type II / APPI 完全準拠表記は、 現状 Kashi の実態とは異なる (mockup の架空設定)。 共同創業者レビュー時に必ず注釈を入れる必要あり ― これは canon §2 forbidden wording ではないが、 「実態を超えた信頼信号」 を実装した場合のリーガル/エシカルリスクは別途存在する。

対処: mockup レビュー会では 「これは A 極の到達目標」 として位置づけ、 ロードマップ化議論にリンクさせる。

CANON OK 「離職率○%改善」 を hero に出さなかった判断

brief Variant A 仕様には 「離職率○%改善」 とあったが、 これを hero に大きく出すのは canon §2 forbidden wording (「予測」) に滑りやすく、 また §6 No-Signal rule にも反する (90 日では因果特定不可)。 代わりに ROI 試算 §5 内で 「離職に伴う採用・教育コスト削減」 として 削減効果見積もり の枠で扱い、 §5 aside で 「PoC では ROI 数値の検証ではなく観測対象として違和感なく機能するかを主検証項目」 と限界を明示。

canon: permanent-ui-principles §2 (検知 / 予測 / 健康スコア / 生産性スコア / at-risk 禁止) — 「予測モデル」 という単語を §1 footnote と §8 FAQ で 提供しない 文脈でのみ使用、 positive claim としては一切使わず。

CANON OK 個人特定・スコアリングを行わない旨を 3 箇所で明示

(1) hero lede 末尾、 (2) §1 overview の footnote、 (3) §6 compliance の footnote、 (4) §8 FAQ Q.02。 「行いません」 を canon §1 監視感 NG / §13 surveillance metaphor NG の積極的反映として、 enterprise buyer が懸念しがちな 「監視ツール扱いされるリスク」 を先回りで打ち消している。

WATCH 「貴社」 「弊社」 keigo の徹底 ― B variant の 「あなた」 「私たち」 と完全に正反対

「貴社」 を 19 箇所、 「弊社」 を 14 箇所使用。 これは brief 「言葉: 貴社 / 弊社 / ご検討ください / 導入事例 keigo、 動詞は丁寧形、 3 人称」 を厳格に実装した結果。 ただし共同創業者レビューで 「やりすぎ・古臭い」 と判定される可能性があり、 その場合は B variant への振り戻し議論が必要。

8. Justine が共同創業者と必ず議論したい論点 (3 つ)

  1. A vs B の URL 分離: 同じ /pilot URL を 「企業」 「個人 manager」 で出し分けるか? 出し分けるなら ip-detect / segment switch / nav 上のセグメント表記 (「Enterprise」 タグ) のいずれが妥当か。 出し分けないなら、 どちらかの極を捨てる判断になる。
  2. monospace doc-id / 版数 / DOC-ID 表記の許容範囲: 「文書化されすぎ」 「無機質」 のリスク vs 「稟議書添付に使える」 のメリット。 共同創業者の趣味次第で大きく振れる論点。
  3. ROI 試算を hero ではなく §5 に置いた判断: 大企業 buyer は hero で ROI 数字を見たがる傾向もあるが、 hero で数字を出すと canon §2 「予測」 滑落リスクが高まる。 hero は 「期間・費用・規模・報告回数」 のメタ諸元に留めた。 これで十分かどうか。

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

このモックアップが Justine + 共同創業者から承認された場合、 React/Next.js 実装の際の注意点:

該当する Kashi コード

新規コンポーネント候補

r19 既存課題のうち本案で同時解決されるもの

本案で未解決・別途検討

10. canon 自己点検 (Variant A 全体)

canon 項目 結果 補足
§1 監視感 NG (surveillance feel)PASS「個人特定なし」 を 4 箇所明示、 観測する側ではなく検討する側の文書として構成
§2 forbidden wording (検知 / 予測 / 健康スコア / 生産性スコア / at-risk)PASSpositive claim としてはゼロ。 「予測モデル」 「スコアリング」 は §1 footnote と §8 Q.02 の 提供しない 文脈のみ
§6 No-Signal rule (「all clear / 問題なし」 NG)PASSmarketing 文脈の拡張解釈: 「数値だけ」 NG、 全 KPI に前提・限界の付記あり
§13 surveillance metaphor NG (eye/camera/police icon)PASSicon は ↓ (DL) / → (arrow) / ✓ (checkmark) / ● (status dot) のみ。 eye/camera 系一切なし
structure-not-content principle (CANONICAL_PRODUCT_TRUTH)PASS§2 「対話の内容ではなく構造」 を見出しに昇格、 §6 footnote で再強化
design_system_v1 token 完全準拠PASS追加 token は --corp-accent / --corp-warn のみ、 実用は status badge 1 箇所のみで純度維持
dummy data 統一 (demo株式会社 / 仮想 CEO 佐藤さん 等)PASS「demo株式会社 (300 名規模)」 を §5 ROI で使用。 個別 manager 名は本 variant では出さず
responsive 1280 / 768 / 480PASS3 breakpoint 対応、 phase table は overflow-x: auto に fallback

END OF DESIGN_DECISIONS — pilot Variant A — ROUND_001 — 2026-05-27