Round 001 / Marketing Site / why page

Design Decisions Variant B — B2C 極

担当: kashi-ui-mockupper  ·  採用 variant: B (ものすごく B2C)
1 行 tone: 「気づけなかった」 という個人の後悔から入り、 共感→提示→そっと招待で締める warm storytelling。
意図: 共同創業者にこの 「やわらかさ」 が Kashi らしさとして許容範囲か、 それとも 「ふわっとしすぎ」 と感じるか、 hearing する材料にする。

1. 主タスクと上位構造

決定: hero を 「なぜ、 気づかなかったんだろう」 という 1 人称の問いから始めた。

現状 (production /why) の hero は 「対話の構造を、 早期に可視化する」 という機能説明。 B2C 極では、 機能を最初に出すと共感の窓が閉じる。 ので、 reader 自身が 「私もそういう瞬間あった」 と入れる入口に組み替えた。

trace: brief.txt B 「あなたのチームでも、 同じことが起きているかも」 + 一人称・二人称 + emotional storytelling。 site_mockup_brief 18-26 行。

決定: スクロール構造を 5 章の物語にした。
  1. hero — 「気づかなかった」 という後悔
  2. moments — 3 つの 「あのとき」 シーン (退職代行 / ハラスメント / サーベイ)
  3. what-if — Manager / HR それぞれにとって 「気づける」 とは何か
  4. shows — Kashi が見せるもの (やさしい bar 表現)
  5. voice → wondering → invite — 1 人の声 → 不安に答える → そっと招待

現状の 8 セクション (hero / problem / comparison / architecture / talkable / numbers / philosophy / pilot) を bullet/data 駆動で並べる構造を捨て、 「読み物として 5 分で読み切れる」 順に圧縮した。 comparison table / architecture grid / KPI numbers は B 極では削っている (= 6 章 「削った要素」 参照)。

trace: brief.txt B 「1 列縦長スクロール」 「hero に short message」 「testimonial 引用」 + permanent-ui-principles §7 progressive disclosure。

2. レイアウト

決定: 1 列読み物 (max-width 760px) を基本に、 hero と what-if と shows だけ 2 カラム。

B2C 極の核は読みやすさ。 max-width 1080px (現状 production の wide container) は B 極では密度過剰。 760px に絞ることで、 emotional copy が 1 ブロック単位で目に入る速度を確保した。

trace: brief.txt B 「ample whitespace」 + 「hero text は大きく短い」。

決定: hero に sketched coffee + notebook scene (SVG) を inline で描いた。

brief は 「warm photo (横顔 / コーヒー / ノート / 手元)」 を指定。 mockup は self-contained 制約で外部 CDN photo を貼れない (壊れたリンクで shareable 性が崩れる)。 ので、 SVG で 「線画 + 暖色グラデ + 手書きキャプション\"もっと早く、 気づきたかった\"」 という photo の代替物を生成した。 実装フェーズでは差し替え推奨 (8 章参照)。

trace: brief.txt B 「illustration (柔らかい線画)」 を photo 代替として inline 化。 design canon は破っていない (SVG はトークン外だが装飾扱い)。

3. 採用したトークン

Brand canon (厳守):
Variant B 拡張トークン (canon の外、 B 極の warmth 表現用):

正当化: brief.txt B 「emerald 控えめ / cream + peach 」 を満たすために、 design_system_v1 にない peach 系を追加した。 これは B variant 専用の 提案 で、 採用された場合は design_system_v1 への正式追加を Justine + 共同創業者で判断する必要がある (8 章参照)。 A/C 極ではこの拡張は持ち込まない。

trace: brief.txt B 「visual: warm colors (cream + peach、 emerald 控えめ)」 + design_system_v1.md (canon は破らず拡張扱い)。

typography:

trace: design_system_v1.md typography spec + brief.txt B 「hero text は大きく短い」。

4. Evidence-grade 表現の扱い

決定: 厳密な kashi-grade-* badge は出していない。 でも 「色だけでなく必ず説明テキストを添える」 原則は厳守した。

why ページは sales narrative ページで、 in-product の evidence-grade badge 表示面ではない。 B 極では特に 「数字 / バッジ羅列」 を避けるため、 grade 色は使わず、 代わりに shows-bar の sage グラデと 説明テキスト (「少し偏ってきています」 「安定しています」 「少しずつ増えています」) をセットで表示した。

shows-note ブロックで明示的に: 「サインの強さは、 色と言葉、 両方で表しています。 色だけで判断しないために、 必ず説明テキストもつけています。」 と canon §1/§13 の精神を読者に直接伝えた。

trace: permanent-ui-principles §13 (色だけで判断しない) + design canon evidence-grade rule (color + text label セット)。

5. 削った要素 (現状 production の /why から)

削除:

trace: brief.txt B 「危険信号: 数値だらけ、 ROI、 keigo、 dense table」 を全部回避。

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

追加:

trace: brief.txt B 「testimonial 引用」 「hero に short message」 「photo grid」 (3 moments で代用) + Linear/Stripe 風の wondering accordion pattern。

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

トレードオフ A: B2B 大企業 reader が読むと 「ふわっとしすぎ」 と感じる可能性が高い。

300 名 IT サービス業 (demo株式会社) の人事部長 / CEO がこのページを開いたとき、 「ROI どこ?」 「導入事例は?」 「セキュリティは?」 という疑問が即座に立つ。 B 極は意図的にそれを満たさない。 Justine の hearing で、 共同創業者がこの 「不在」 を許容できるかが最重要判断点。

トレードオフ B: peach パレットを design_system_v1 に未登録の状態で導入した。

B variant 採用時は、 peach-50/100/200/300 + warm-bg/warm-card/warm-line + sage-soft/sage-mid の 9 トークンを正式追加するか、 別 namespace (例 --marketing-warm-*) として隔離するかを決める必要がある。 これは brand designer + 共同創業者の判断領域。

トレードオフ C: hero SVG は production photo の代替にすぎない。

実装時は本物の warm photo (横顔 / コーヒー / 手元) を用意する必要がある。 photo の選定 (= モデル / 構図 / 著作権) が B 極の brand tone を 80% 決める。 mockup では illustration で代用したが、 これだけでは tone の最終判断はできない (= 共同創業者には 「photo が入る前提で見てください」 と注釈すべき)。

未解決 D: 「監視ではない」 を text で何回も言うこと自体が、 逆に懸念を強化する効果はないか?

wondering accordion で 「監視じゃない、 と言われても」 と先回りした。 これが 「むしろ怪しい、 認めてる感じ」 に映るリスクがある。 共同創業者の反応を 1 つの指標として hearing する。

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

このモックアップを実装する際の注意:

9. Canon 遵守チェック (self-lint)

permanent-ui-principles 違反: 検出 0 件。

10. Justine が共同創業者に hearing で必ず聞くべき 3 つの問い

  1. この hero copy 「なぜ、 気づかなかったんだろう」 は、 Kashi の自信を弱めて見せていないか? emotional 入口は warmth と引き換えに 「弱気」 に映るリスクがある。
  2. peach パレットを、 Kashi の brand に持ち込む覚悟があるか? 一度入れると brand 全体に波及する。 marketing site だけ別 palette として隔離する方向もある。
  3. 大企業 reader (CFO / 法務 / 情シス) がこのページを開いたとき、 「うちには合わない」 と早期離脱する可能性をどう評価するか? A 極とのページ分け / lang 切替 / role 別 landing 設計まで議論が要る。