本ドキュメントは、 Kashi 公開サイトの /pilot ページ Variant A (「ものすごく B2B」 極) の mockup について、 設計判断・根拠・トレードオフを Justine が共同創業者と議論できる粒度で記録するものです。 B/C variant との明示的な対比、 および canon との関係を全項目で示します。
根拠: 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 〜 §9 ナンバリングと REF: PILOT-PROP-2026-A §N doc reference を付与。 これは marketing site では異常に formal だが、 「ものすごく B2B」 極では 過剰なほど提案書らしく振る舞うことが必要と判断。
根拠: 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) に抑制 ― 「派手な見栄え」 ではなく 「文書らしい安定感」 を優先。
header と hero の間に doc-spine という横長メタ情報帯を挿入 (文書種別 / 版数 / 発行 / 有効期限 / 機密区分)。 通常の web ページにはまず無い要素だが、 これがあるだけでページ全体が 「PDF を web 化したもの」 として読み始められる効果がある。
下部に sticky な dark green bar を常時表示。 ただし IntersectionObserver で #form セクションがビューポートに 20% 入った時点で自動非表示にする (重複防止)。 これは brief 「sticky CTA バー」 を文字通り実装したもの。
| トークン | 用途 |
|---|---|
--color-kashi-evergreen #1F3D33 | primary CTA, h1/h2/h3, util-bar 背景, phase table thead, footer 背景, KPI 数値 |
--color-kashi-evergreen-deep #244A3D | primary button hover, h3 サブセクション |
--color-emerald-700 #047857 | eyebrow、 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 Mono | eyebrow / 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 の純度を壊さない。
※ 諸元は標準値。 貴社規模・業種・既存システム構成に応じ調整可 を必ず付記canon: permanent-ui-principles §6 No-Signal rule (「all clear / 問題なし」 NG) を marketing 文脈に拡張解釈し、 「数値だけ見せて安心させる」 NG → 「数値と同時に限界を見せる」 形に変換。 これは大企業稟議書で監査人が確認する 「前提・限界・反証可能性」 を満たす振る舞いでもある。
現状の kashi/src/app/pilot/page.tsx から、 本 variant では以下を意図的に削除または変更:
理由: enterprise reader にとって 5 つの並列カードは情報量が不足。 代わりに 90 日 × 8 行属性 (期間 / 目的 / 主要作業 / 成果物 / 貴社側工数 / 弊社側担当 / 解除可否) の dense table に再構成。 「pricing: 0 円」 は hero KPI と overview card に格上げ移動。
trade-off: 現状 5 カードは見やすいが信頼信号が弱い。 phase table は最初 「重そう」 に見えるが、 稟議書添付には 5 カードよりも遥かに使いやすい。
理由: 30 日 → 90 日 に期間延伸。 30 日では PoC として短すぎ、 大企業の意思決定 cycle にも合わないため。 timeline strip 風の視覚要素は phase table 内の「期間」 行で代替。
理由: enterprise buyer は 「商談に至らない場合の退路」 として 「資料請求のみ・電話なし」 を求める。 alt-cta を 「提案書一式ダウンロード」 + 「3 分プロダクト概要」 に置き換え、 「営業からの follow-up 電話は致しません」 と明示。
根拠: 大企業 IT 調達基準書では 「監査取得有無」 が 1 次スクリーニングの必須項目。 fold above で見えていないと提案書ダウンロード前に離脱される。 monospace badge + 1 px border の控えめな処理で 「うるさくない trust signal」 にしている。
canon: design_system_v1 token のみ使用、 新規 brand color 一切無し。
根拠: 「提案書」 として読ませる中心装置。 「機密区分: 社外秘 / 限定配布」 表記は実際の B2B 提案書の慣習に沿う。 mockup 上は注釈ありで明示する必要あり (実運用時は不要)。
根拠: brief CTA 「資料請求」 「セキュリティホワイトペーパー」 を文字通り実装。 enterprise pilot の検討段階では 「稟議書をどう書くか」 が最大の摩擦点なので、 稟議書テンプレートを提供する 一点が他社サイトとの差別化になる。 これは現状 Kashi が実際に持つ資産ではないが、 mockup 段階で 「あればこう見える」 と仮置きしている。
根拠: enterprise buyer は 「ベンダーの財務状況」 「ロックイン回避策」 「労組説明資料」 「APPI 第 28 条対応」 等の固有質問を持ち、 これらに web 上で先に答えがある ことが商談予約への摩擦を大幅に下げる。 Q.07 「貴社の財務状況や事業継続性が不安です」 は startup ベンダーが大企業相手にする際の最大障壁で、 これに正面回答する姿勢を見せる。
根拠: B variant の 「5 分 sign-up・friction 嫌い」 とは 真逆に振る。 enterprise buyer は 「軽すぎる form」 を 「適当な営業」 と判定するため、 むしろ詳細な fields があるほうが安心する。 ただし 「ご相談内容」 を任意にすることで初動の心理摩擦は下げている。
これは brief 通りの意図的な振り切り。 Variant A は 「人事部長・CTO・CEO 専用 LP」 として B/C と完全分離する戦略。 もし pilot ページを 1 つに統合するなら、 enterprise / SMB の意図的分岐 (URL 別、 nav 切替) が必要 ― これは translator 段階で議論が必要な論点。
「DISCLAIMER ─ 上記試算値はマーケティング目的のサンプル」 を明記したが、 共同創業者レビューで 「数字の桁を変えるべき」 「demo株式会社 のような架空名で十分か」 等の追加判断が必要。 特に 「離職に伴う採用・教育コスト削減」 の 250,000 円/月 は中央値より楽観寄りなので、 保守化する余地あり。
ISO 27001 / SOC 2 Type II / APPI 完全準拠表記は、 現状 Kashi の実態とは異なる (mockup の架空設定)。 共同創業者レビュー時に必ず注釈を入れる必要あり ― これは canon §2 forbidden wording ではないが、 「実態を超えた信頼信号」 を実装した場合のリーガル/エシカルリスクは別途存在する。
対処: mockup レビュー会では 「これは A 極の到達目標」 として位置づけ、 ロードマップ化議論にリンクさせる。
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 としては一切使わず。
(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 が懸念しがちな 「監視ツール扱いされるリスク」 を先回りで打ち消している。
「貴社」 を 19 箇所、 「弊社」 を 14 箇所使用。 これは brief 「言葉: 貴社 / 弊社 / ご検討ください / 導入事例 keigo、 動詞は丁寧形、 3 人称」 を厳格に実装した結果。 ただし共同創業者レビューで 「やりすぎ・古臭い」 と判定される可能性があり、 その場合は B variant への振り戻し議論が必要。
このモックアップが Justine + 共同創業者から承認された場合、 React/Next.js 実装の際の注意点:
kashi/src/app/pilot/page.tsx ― 現状ファイル。 セクション 1-4 構造を 1-11 に拡張する大規模改修kashi/src/components/sales-hub/ ― Section, Container, PilotTimelineStrip 既存。 phase table は新規 PhaseTable として追加が望ましいkashi/src/components/pilot/PilotRequestForm.tsx ― 既存 form を 10 フィールド版に拡張messages/ja.json / messages/en.json ― pilotPage.* 配下に大量の新規キー (overview / phases / criteria / roi / compliance / deliverables / faq) を追加。 i18n verbatim test pinning (LESSONS.md 参照) で test 同時更新必須DocSpine ― DOC-ID / 版数 / 発行 / 有効期限 / 機密区分の横長メタ帯UtilityBar ― ISO/SOC/APPI badge 表示の最上部 barPhaseTable ― 90 日 3 フェーズ × 8 行属性の dense tableCriteriaTable ― 5 指標 × 4 列の成功基準表RoiSummaryTable ― 月額/年額 ROI table と前提 aside の組ComplianceCardGrid ― 3 列 (SECURITY/PRIVACY/LEGAL) の compliance cardDeliverableGrid ― 8 PDF アイコン deliverableEnterpriseFAQ ― Q.N + details/summary 開閉StickyEnterpriseCTA ― IntersectionObserver で form 表示時非表示化| canon 項目 | 結果 | 補足 |
|---|---|---|
| §1 監視感 NG (surveillance feel) | PASS | 「個人特定なし」 を 4 箇所明示、 観測する側ではなく検討する側の文書として構成 |
| §2 forbidden wording (検知 / 予測 / 健康スコア / 生産性スコア / at-risk) | PASS | positive claim としてはゼロ。 「予測モデル」 「スコアリング」 は §1 footnote と §8 Q.02 の 提供しない 文脈のみ |
| §6 No-Signal rule (「all clear / 問題なし」 NG) | PASS | marketing 文脈の拡張解釈: 「数値だけ」 NG、 全 KPI に前提・限界の付記あり |
| §13 surveillance metaphor NG (eye/camera/police icon) | PASS | icon は ↓ (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 / 480 | PASS | 3 breakpoint 対応、 phase table は overflow-x: auto に fallback |
END OF DESIGN_DECISIONS — pilot Variant A — ROUND_001 — 2026-05-27