Design Decisions — site/top — Variant A (ものすごく B2B)

決定: 全文 keigo + 三人称 + 「貴社」 を hero から footer まで一貫使用

hero lede 「貴社の人事部門・労務監査・経営層が…議論できる基盤」、 §3 「貴社の現状値との比較は、 商談時に…」、 §6 「貴社固有の試算は…」、 §7 「貴社環境内に留まる構成」 など、 計 9 箇所で 「貴社」 を使用。 「あなた」 「私たち」 「一緒に」 は一切排除。

動詞は 「ご提供します」 「お渡しします」 「ご検討ください」 など丁寧形・尊敬語のみ。 情緒的修辞 (「気づく」 「想い」 「変える」 など) を意図的に排除し、 代わりに 「観測する」 「集計する」 「提示する」 「準拠する」 といった技術的・統制的動詞で統一。

canon: brief.txt §A「貴社/弊社/ご検討ください/keigo」 + permanent-ui-principles §2 (forbidden wording 回避)

決定: 上から utility bar → sticky header → hero (2 column data-driven) → trust band → 8 section 多段グリッド

hero は左カラム copy + 右カラム sample observability panel (発話シェアグラフ + evidence-grade chip + DEMO DATA タグ)。 hero 内に hero-meta として 3 セルの KPI strip (準拠 / Pilot / 規模) を埋め込み、 ファーストビューで data + ROI + 監査基準 が同時に見える構成。 大企業の決裁者が 30 秒で 「これは検討対象として真面目」 と判断できる density を狙った。

全 section が border で囲まれた grid (3 列 / 4 列) を採用。 余白を絞り、 corporate ERP/監査ツール風に。 これは Variant B (1 列縦長 / ample whitespace) との対比軸を最大化するため意図的に dense。

canon: brief.txt §A「dense data / 多段グリッド / ROI 比較表 / sticky CTA バー」

決定: design_system_v1 + globals.css の token を 100% hard-code。 新規 token は作成せず。

• --color-kashi-evergreen #1F3D33 / -deep #244A3D — 主要 brand 色、 header brand mark、 button primary、 sticky CTA badge、 footer 背景。
• --color-emerald-700 #047857 — eyebrow text、 accent underline、 ROI delta 行、 CASE PDF link。 二次 accent として使用。
• --color-cream #F5F0E6 — sticky CTA 背景、 footer 上の inverse button。 hero と body は #fafaf7 に留め、 cream は warmth 過多を避けるためアクセント限定。
• --ink #2A3A1E / -soft #4B5746 / -faint #7A8273 — 全 body text の 3 階層。 100% canon。
• Evidence-grade colors — hero panel に EMERGING chip (青 #2563EB) を実装。 単色ではなく 色 + dot + 大文字テキストラベル の 3 要素で表示し、 §13 色覚 safety を満たす。

type: 通常 IBM Plex Sans + Zen Kaku Gothic New をベースにし、 見出しも Plex で硬く統一。 Fraunces は KPI の数値 (ROI 表 / case stat / data cell の big number) のみに限定使用 — B2B variant では装飾より計測性を優先したため、 Fraunces を 「heading」 ではなく 「数値書体」 として扱った。 Footer brand wordmark のみ Fraunces。

canon: kashi/src/app/globals.css + kashi/docs/design/design_system_v1.md

決定: hero sample panel に EMERGING chip + reason code ASYM-04 を表示

色 (青) + 塗りつぶしの 7px 円 + 大文字 mono ラベル EMERGING + 補足 「reason: ASYM-04 (turn-take 偏り)」 の 4 要素で構成。 色のみの判定を避けることで色覚 safety を満たす (永続原則 §13)。

hero では 「未来予測」 「at-risk」 ではなく 「観測窓内で繰り返し検出された構造的シグナル」 という framing を panel タイトル + reason code で明示。 これにより 「予測 SaaS」 ではなく 「観測 SaaS」 として位置づけている。

canon: permanent-ui-principles §2 (approved wording: structural signal / evidence grade / reason code) + §13 (色 alone 禁止)

決定: §3 で 6 行の ROI 試算表を掲載、 ただし末尾に大きな「保証ではない」 注記を併記

Variant A target (40-60 代決裁者) は稟議書を書ける数字を要求するため、 ROI 表を省くことは現実的でない。 一方 Kashi は 「離職率を直接保証する SaaS」 ではない (canon §2)。 折衷案として:

• 表は 「参考試算」 「ベンチマーク値による」 を section subtitle と表注に二重明記
• 合計行は 「参考: 年間ネット効果」 と書き、 断定形 「効果」 ではなく 「参考: …効果」 として留保
• 表下の roi-note で 「Kashi は離職率を直接保証する性質のものではなく、 review-support シグナルの精度・再現性を保証する SaaS です」 と明示

数値の出典は §1 で 厚労省・HR 総研・日本生産性本部などの 公開統計に紐づけ済み。 事例 §4 でも 「掲載許諾」 「匿名化」 「個人評価には用いられなかった」 を併記し、 法務レビュー耐性を担保。

canon: permanent-ui-principles §2 forbidden 回避 (「predicts resignation」 は使わず 「review-support」 に置換)

決定: §4 Kimura/Nao の物語 section を削除

現状 page.tsx §4 は架空人物の物語 (「6 週前に…」) を中心に置く構成。 これは Variant C (ストーリー型) でこそ強いが、 Variant A の 40-60 代決裁者には emotional すぎ、 「個人の物語ベースの judgment SaaS」 という誤認リスクが高い。

代わりに §4 は 「Pilot 導入実績 (匿名化)」 として 3 社 (IT 320 名 / 製造 1,200 名 / 金融 2,400 名) の数値ベース CASE グリッドに差し替え。 引用句も人物 (「鈴木氏」「経営企画部」「内部監査室」) ベースで keigo に統一、 顔写真は一切なし。

canon: brief.txt §A「危険信号: warmth / emotion / first-person / smiling photography」

決定: hero の RotatingHeroViz (動画的アニメーション) を削除

現状 page.tsx hero 右ペインは crossfade scene viz。 Variant A では 「動かない、 静的な観測値テーブル」 に置換。 動的演出は SaaS hype 風の印象を与え、 B2B 監査用途の真面目さを損なうため。

代わりに hero panel は 固定の発話シェア棒グラフ + DEMO DATA タグ + EMERGING chip で構成。 「観測値の見え方そのものをファーストビューで示す」 という機能性を優先。

vs Variant B (B2C 極)

A は「衝動的 sign-up」 を完全に犠牲にしている。 sticky CTA も 「商談予約」 で friction 高い (5 分 sign-up はゼロ)。 B が 「個人マネージャーが weekend に発見して翌週試してみる」 を取りに行くのに対し、 A は 「役員会で稟議書を回す」 を取りに行く。 hearing 時は同一 hearing 相手で両 variant を見せ、 「決裁者として」 「個人 user として」 のどちらの心が動くか確認することを推奨。

vs Variant C (記事型)

A は 「読み物として読まれる」 ことを完全に犠牲にしている。 long-form essay は皆無、 chapter 構造もなく、 全 section が「数値 + 表 + 出典」 で構成。 C が 「思想に共感した投資家・編集者が連絡してくる」 を取りに行くのに対し、 A は 「すでに課題を持つ大企業バイヤーが比較検討フェーズで見にくる」 を取りに行く。 ブランド人格としての 「思想性」 は最小化されているため、 A 単独で世に出すと 「企業の評価ツール」 と誤読されるリスクは残る (canon は守っているが tone が硬すぎ)。

判断点 1: hero の右 panel に 「実際の発話シェア」 を見せるか

現状の hero panel は manager_A 68.4% / member_001 11.7% / member_002 9.1% / member_003 6.2% / member_004 4.6% という非対称な発話シェア棒グラフ + EMERGING chip。 これは Kashi が実際に何を可視化するかをファーストビューで提示する 設計判断。

Pros: ファーストビューで 「何を見せる SaaS なのか」 が 3 秒で伝わる。 「貴社の会議でこういう数字が出る」 という mental model を即提供。

Cons: 大企業の人事部長が初見で 「これは個人 (manager_A) を晒しているのでは?」 と読む可能性。 DEMO DATA タグ + placeholder 名 (manager_A / member_001) で明示しているが、 hearing で 「会社の評価ツールに見える」 という声が出る可能性は残る。

代替案: hero 右を 「集計値 only」 (個人別ではなく組織全体の指標 4 つ) にする方が安全という判断もありうる。 Justine の判断を仰ぎたい point。

判断点 2: ROI 表に 「年間ネット効果 +¥58.4M」 を載せるか

「保証ではない」 注記は付与したが、 表中に金額単位の試算が出ること自体が canon (「予測・評価への利用」 禁止) と緊張関係にある。 大企業バイヤー要求と Kashi 自己定義のどちらを優先するかは、 hearing で判断 inputを得たい。

判断点 3: Fraunces を heading から外し、 数値専用にしたこと

Fraunces (serif) を heading で使うと 「読み物」 「文学的」 寄りの印象が出やすい。 Variant A の corporate tone を最大化するため、 heading は全部 Plex sans serif にした。 これは design_system v1 の推奨 (heading=Fraunces) から逸脱する判断。 brand 一貫性とのバランスについて Justine の確認を仰ぎたい。