Design Decisions — why-now / Variant A

根拠: ブリーフ Variant A の buying-mode 「稟議書、 ROI 数値、 セキュリティ監査必須」、 既存 page.tsx のコメント 「sales artifact + pitch deck source + 稟議書 raw material」 を採用。 稟議担当者がそのまま 「添付資料」 として扱えるよう、 page を 「Web 上に常駐する文書」 として演出。

文書 ID・版数・更新日を breadcrumb 横に表示することで、 印刷・PDF 保存・社内回覧時の 「最新版確認できますか?」 質問への即答ができる構造としました。

canon: kashi/docs/canon/CANONICAL_PRODUCT_TRUTH.md (構造ベース・事後説明可能性) + page.tsx L3-5 コメント (稟議書 raw material)

既存 PortalHeader (app 内) の 2-row パターンを marketing site にも踏襲。 ただし内容は marketing 用に変更:

• Row 0 (compliance bar): ISO 27001 / SOC 2 / APPI / データ国内保管 を明示。 大企業の セキュリティ監査担当者が page 開いた瞬間に視認できる位置。
• Row 1 (brand row): Kashi logo + tagline 「Enterprise」 + 料金プラン・導入実績・言語のメタ情報。
• Row 2 (nav row): 主要 nav + 「資料請求」 「セキュリティ白書 DL」 「商談予約」 の 3 段階 CTA を同時提示。

canon: kashi/src/components/portal/PortalHeader.tsx (2-row pattern) + permanent-ui-principles.md §1 (no surveillance feel — emerald evergreen 主体、 赤系警告なし)

大企業稟議の典型評価 = 「Why now / Why us / How much / 何が要るか」 を冒頭で並列提示するため、 hero を grid 分割。 left は narrative (法改正起点・推奨検討開始時期)、 right は KPI 4 セル (Compliance Window 18 ヶ月 / 該当法規制 4 本 / 標準導入期間 3-6 ヶ月 / 初期費用 0 円)。 数値は IBM Plex Mono で 「監査可能なファクト」 視覚化。

brief: tone 「dense data / corporate evergreen 多用 / typography 硬め (Plex 中心) / information density 高」

稟議添付文書として印刷した際、 page の 「章立て」 が口頭プレゼン中も参照しやすいよう、 Section 番号を eyebrow に常設。 既存 page.tsx の 5 section 構成 (Hero / Timeline / Blocks / Mapping / CTA) を踏襲しつつ、 First-mover panel を Section 04 として追加。

page.tsx 既存構成: Hero → RegulatoryTimeline → 4 LawDetailBlocks → MappingTable → CTA pair

評価グレード 6 段階 (blocked / insufficient / weak / emerging / stable / high-confidence) を full 採用すると、 競合 SaaS への評価が過剰に微細化され 「比較表の正確性に責任が持てない」 領域に踏み込みます。 対応・一部・非対応の 3 段階に絞り、 disclosure-list の *1 で 「公開資料ベース」 「ご指摘あれば 1 営業日以内に修正」 と明示。

色のみではなく、 必ず日本語ラベル (「対応」 「一部」 「非対応」) を併記。 色覚多様性配慮 (canon §6 No-Signal rule の精神に従い、 色だけに依拠しない)。

canon: design_system_v1.md evidence-grade tokens + permanent-ui-principles.md §6 (No-Signal — 色だけの判定 NG)

3 lane (harassment / disclosure / wellbeing) の色分けキーを最下部に明示。 lane キーには 「ハラスメント関連」 「情報開示関連」 「労働環境・安全衛生」 と日本語ラベル併記。 marker のみで意味判別させない。

canon: permanent-ui-principles.md §13 (icon/色のみで意味伝達 NG)

現状 lead は narrative-only。 Variant A の dense 仕様に合わせ、 hero 右側に KPI panel を追加して 「narrative + 監査可能ファクト」 を並列化。 lead 自体は border-left の引用ブロックとして残し、 「貴社の稟議および取締役会説明に直接利用いただける」 を太字で明示。

brief: 「ヒーローもデータ駆動 (グラフ + 数値)」

現状は CTA section が PilotCTA + 「sales-hub-overview.pdf」 link の地味な 2 つだけ。 Variant A の検討フェーズ別ニーズ (情報収集 / 技術 / 商談 / Pilot) に応える 4 段階 CTA grid に拡張。 すべて 「お申込み」 ではなく 「ご検討フェーズに応じた窓口」 として丁寧な keigo で構成。

大企業のセキュリティ監査担当者が page を開いた瞬間に視認できる位置。 brief tone 「ISO 27001 / SOC 2 Type II 準拠」 を CTA への brand promise として常設。

未確認の注意: 現状の Kashi は ISO 27001 / SOC 2 Type II をまだ取得していない可能性があります。 mockup として 「取得済」 と表記していますが、 実装時には実際の取得状況に基づき 「取得予定」 「取得準備中」 等の表現に書き換えが必要です。

timeline の右に常設。 「本日 2026/05 基準で各規制まで何ヶ月?」 を tight (5 ヶ月) / 通常 (11 ヶ月以上) の 2 段階で色分け。 稟議担当者の最大の問い 「いつまでに決めれば良いか?」 への即答。

brief tone 「ROI 比較表」 + 「既存ベンダーとの比較必須」 を反映。 評価軸を 「監査適合 / 記録要件 / データ性格 / 運用負荷 (2 行) / ガバナンス / セキュリティ / データ所在 / 導入期間 / Pilot 費用 / 年間費用」 の 11 行で網羅。 Kashi 列は背景色 + 「推奨」 badge で視覚的に区別。

比較対象は架空の 「サーベイ A 社 / NLP B 社 / 従来型 C 社」 (実名はリスク回避)。 disclosure-list で 「公開資料ベース・ご指摘 1 営業日修正」 明示。

brief tone 「競合参入前 first mover advantage 数値」 を反映。 0 社 / 12 社 / 6-9 ヶ月 / 18 ヶ月 を fm-stat で並列。 SVG 線図で 2026Q2 / 2027Q1 / 2027Q4 着手時の経年蓄積差を視覚化。

「予測スコア」 「将来予測」 ではなく、 「経年蓄積期間」 という事実ベースの差異として表現。 canon §2 (forbidden wording: 予測) 回避済。

canon: permanent-ui-principles.md §2 (forbidden wording 回避) + investor-positioning memory (誇張なし、 fact ベース)

brief 明示要件。 従業員数・Pilot 開始月の 2 入力で 「改正カスハラ施行までの構造ログ蓄積期間」 を即時計算。 開始月が 10 月以降の場合は警告色 (grade-weak) で 「早期着手をご検討ください」 と返す。 結果 + 「この条件で商談予約」 CTA を 1 セット。

折りたたみ可能 (head クリックで toggle)。 reading の邪魔にならないよう head のみ visible で down arrow から展開できる UX。 mobile では全幅近くに展開し、 reading 時は閉じる前提。

brief: 「sticky 『今月導入の場合』 calculator widget」

稟議添付文書として印刷・PDF 保存される前提。 「最新版確認できますか?」 質問への即答ができる構造。 footer にも redundancy 配置。

11 行 11 項目の KPI 比較表は 480px では 12px font + 8px padding に縮退して overflow-x scroll させていますが、 稟議の典型 reader (デスクトップ) を優先した結果、 モバイル UX は二次的扱い。 mobile-first の Variant B との明確な分業。

brief の 「危険信号: warmth / emotion / first-person / smiling photography」 を厳密に守った結果、 page 全体が 「文書」 として完結。 個人 reader (例: 若手 manager) には冷たく見える可能性大。 これは仕様通り、 Variant B/C で warmth を補完する想定。

「12 社 Pilot 中」 「18 ヶ月窓」 「6-9 ヶ月キャッチアップ」 等の数値は mockup demo 用の plausible 値。 実装時には事業実績 + investor-positioning memory の 「conservative, no bragging」 原則に従い、 立証可能な範囲に再校正が必要。

memory: project_investor_positioning.md (conservative, no bragging)

他 3 社の数値推計 (180/300/500 万円) を出している中で Kashi のみ非開示は不自然。 「相見積対応」 とは記載したが、 共同創業者ヒアリングで価格非開示の是非を確認する必要あり。 実装時には公開価格モデルを並列掲載する判断が必要。

mockup では button のみ。 実装時には DL Gate (法人名・部署・役職入力 → メール送信) が必要。 リード化フローと Salesforce/HubSpot 連携要件を別途設計。