Design Decisions — Product B (B2C 極) — Round 1

(1) Hero photo + 感情フック、 (2) 30 秒 demo embed、 (3) 3 動詞 (気づける/振り返れる/整理できる)、 (4) 3 場面 UI gallery、 (5) Voice 引用 + boundary + final CTA。 機能名や 比較表は 一切出さず、 「月曜の朝、 7 分」 「水曜の 1on1 前」 「月末、 振り返り会で」 という 時間軸の シーン で再構成。

根拠: brief Variant B 「screenshot mockup gallery + 1-2 sentence explanation で、 機能比較表ではなく experience walkthrough」、 「個人として 自分のチームをよくしたい と思う Manager」 という buying mode。

trace: /tmp/site_mockup_brief.txt L18-26

brief 指定: 「1 列縦長スクロール、 hero に short message、 photo grid、 testimonial 引用、 emoji 使用 (控えめに)」。 zigzag にすることで 縦に流れる中で リズムを作りつつ、 「読ませる」 のではなく 「観ていく」 体験に近づける。

trace: /tmp/site_mockup_brief.txt L23

理由: mockup は スタンドアロンで Justine が ブラウザで開いて 共同創業者に 共有する。 外部画像 (Unsplash 等) を 引いてくると 後で 404 リスク、 著作権ライセンス確認の 手間、 ファイル同梱の 重さ。 「コーヒー + 温かい朝」 を 暗示する 茶系 gradient + Fraunces イタリック の引用文 で 雰囲気を構築。 本実装時に 本物の写真へ 差し替え想定。

trace: mockupper agent constraints「all assets inline or via CDN (fonts only)」

• --color-kashi-evergreen #1F3D33 → CTA、 brand、 hero title (短くする深み)
• --color-cream #F5F0E6 → 30 秒 demo セクション背景、 verb card 背景、 voice/boundary つなぎ
• --color-peach #F4D4B8 + --color-peach-soft #FAE8D6 → hero gradient、 final CTA 背景、 timeline event dot。 brief 指定 「warm colors (cream + peach、 emerald 控えめ)」 に厳格に合わせるため 新規追加。
• --color-warm-white #FBF8F2 → body 既定背景。 design_system_v1 の #fafaf7 より peach 寄り (warmth を 5% 強めた)。
• --emerald #047857 → eyebrow テキスト、 stable badge のみ。 緑色は brand 1 か所しか使わない B2C 流儀。

逸脱の自覚: peach 系 は 公式トークンに 存在しない。 brief で 「variant ごとに strict 度合いが違ってよい、 ただし完全逸脱は NG」 と 明示されている 範囲内で B2C variant にのみ 採用。 A (B2B) / C (story) では 採用しない 想定。

trace: kashi/src/app/globals.css の token + /tmp/site_mockup_brief.txt L22 (warm colors), L53 (variant 個別strict度OK)

B2C 文脈で 「読み物的温かさ」 を 出すため、 hero title と verb card の verb 名、 voice quote、 scene quote すべてに Fraunces italic を 効果的に 使用。 「私たちは あなたに 語りかけたい」 トーン。

trace: design_system_v1 typographic scale + Fraunces opsz 9-144

• 「兆し」 = --kashi-grade-emerging #2563EB 系 (DBEAFE bg / 1E40AF text)
• 「手がかり」 = --kashi-grade-weak #D97706 系 (FEF3C7 bg / 92400E text)
• 「継続観察」 = --kashi-grade-stable #2F6B4A 系 (D1FAE5 bg / 065F46 text)

permanent-ui-principles §evidence-grade に従い、 色だけでなく 必ず JA ラベル を 同伴 (色覚多様性配慮)。 grade 名は production の英語 ID と異なる JA UI 文言で、 これは 既存 demo メールや 既存 me dashboard と トーン整合させたもの。 「blocked / insufficient」 は B2C ヒーロー文脈に そぐわないので 出さない (Justine が深掘りしたければ Scene 1 の card を 追加する判断点)。

trace: kashi/docs/design/permanent-ui-principles.md §13 evidence-grade rules + globals.css grade colors

eye / camera / 監視 icon 一切なし。 photo は 「Manager 視点の 温かい朝」、 UI mockup は 「Manager 自身が見る digest」 で 三人称俯瞰の surveillance 構図を 完全回避。

「検知 / 予測 / 健康スコア / 生産性スコア / at-risk」 を文中で grep し、 ヒットは boundary section で 否定形のみ (「at-risk として 名指しすることは ありません」 「感情スコア や 健康スコア を 出すことは しません」)。 否定形での 言及は production product/page.tsx の explainPara パターンと 整合 (ハラスメント判定を「しない」 と 言うのは OK)。

「all clear / 問題なし」 は 出していない。 むしろ boundary section で 「『all clear / 問題なし』 という 表示も しません」 と 明示。 Scene 1 digest の 3 つ目 card は 「継続観察」 (= 観察を続ける、 not 問題なし)。

icon は ◐ / ◧ / ◇ の幾何形 + ▶ ❚❚ の 再生記号のみ。 eye / camera / police / 警告マーク 一切なし。

verb card 3 つは すべて 「気づける/振り返れる/整理できる」 (Manager が 行う動詞)、 「Kashi が 検知する/判定する」 ではない。 Scene 1 の digest 表現も 「言葉が少なかった」 「沈黙時間が長め」 「相談 が増えている」 という 構造シグナル のみで、 発言内容 は 露出していない (boundary でも 「誰が何を言ったか、 という 内容そのものを 露出しません」 と 明示)。

数値: 「7 分」 「30 秒」 「3 週連続」 「9 回 · 4 人」 等、 体感的な 数字のみ。 ROI / %改善 / 離職率 系 は ゼロ。 keigo: 「ご覧ください」 「お伝えします」 程度の 軽い 丁寧表現に 抑え、 ですます調 + 「あなた」 「私たち」 conversational。 「貴社」 ゼロ。 dense table ゼロ (代わりに scene zigzag + verb card grid)。

• 「日本市場では既存ツールが届かない 3 つの理由」 fail card 3 つ — B2C 文脈で 競合分析や 否定的根拠 を 並べると 「重い読みもの」 になり、 衝動的 sign-up が 止まる。
• 「内部評価」 evalKicker section — 信頼の裏付けは 必要だが、 voice 引用 1 つ + boundary list で 代替し、 評価データを テキストで 並べる 重い体験を 回避。
• 「資料請求 / セキュリティ ホワイトペーパー」 系 CTA — B2C 極では 一切不要。 「30 秒デモ」 + 「カジュアルに話す」 の 2 つに 絞った。
• 市場ロス 統計の 2 カード grid (lossLabel / costLabel) — 「○○億円損失」 は B2B 上場企業 buying 文脈の signal。 個人 Manager には 「あなたのチームで」 の方が 強い。

• 30 秒 demo player (mock animation) — 5 シーン × 6 秒 で自動切り替え、 IntersectionObserver で scroll-into-view 時に 自動再生。 vanilla JS のみ。 「30 秒で 体感する」 を 文字通り 提示。
• Hero photo (CSS gradient) + イタリック overlay caption — 「今週、 山田さんが いつもより 言葉数 少なかったかも」 という 想起的 monologue を ビジュアルに 内蔵。
• 3 動詞 card grid — 「気づける/振り返れる/整理できる」 を card に。 各 card 1 アイコン + 1 動詞 + 50 字程度の 説明。
• Scene gallery (zigzag 3 場面) — Production にない 「時間軸 storytelling」。 Monday 朝 → Wed 1on1 前 → 月末。 各 scene は copy / UI frame 並列。 UI frame は Chrome 風 dot + URL bar + body の Mac/iOS 風 stripped chrome、 中身は CSS-painted (digest list / timeline track / theme list)。 内部実装と 1:1 ではないが、 「こういう画面が、 こういう時に」 の イメージ。
• Voice quote (Manager の 1 行) — 「manager_A · 営業 8 名チーム · demo株式会社 (架空例)」 と (架空例) 明示。 顧客名・人名 偽装の リスク回避。
• Boundary list (Kashi が しないこと 6 項目) — 「念のため。 Kashi が しないことも、 ちゃんと お伝えします。」 という conversational 見出しで 6 つ提示。 cream box list。 redアラート系 一切なし。

• Photo が CSS placeholder のまま — 本実装時に 本物の温かい写真 (ノートとコーヒー、 オフィスの朝光、 抽象的なシーン) に 差し替える前提。 撮影 or ライセンス購入の 段取りが 別途 必要。 「人の顔」 を 出すかは canon 議論 (個人特定リスク vs 温かさ) で 共同創業者と 要相談。
• 「30 秒デモ」 は mock animation — 本実装は (a) 本物の screen recording を mp4/webm 埋め込み、 (b) Lottie / SVG sequence で 軽量化、 のいずれか。 mockup は キャプション切替の 概念実証のみ。
• Scene 3 「テーマ整理」 UI は 既存 Kashi に 該当画面が薄い — production 側の /me/themes 等は まだ 未実装の 可能性。 mockup が 「製品仕様の 先取り提案」 になっている。 実装可能性は eng 確認が 必要。
• Hero の 「言葉数 少なかった」 引用 — 過剰に 監視っぽく 響くリスク。 boundary で 否定しているが、 hero の inset caption は 1 番目の 印象なので、 共同創業者 reaction を 観察したい (Justine が 一番 気にしそうな箇所)。
• Emoji ゼロ — brief 「emoji 使用 (控えめに)」 だが 安全側 振りで 0 個。 共同創業者 hearing で 「もう少し やわらかさ ほしい」 という reaction が 出たら、 verb card 横や final CTA に 1-2 個 入れる余地あり。

これは B2C 極を 全力で 振った 結果の 一番尖った 表現で、 「個人の 内面を 推測している ように 聞こえる」 risk と 「Manager 自身の 自然な 気づきの 言葉」 として 共感を生む upside が 同居している。 共同創業者の 反応で:

• OK reaction: 「これ、 自分が 月曜の朝に 思うこと そのまま」 → B2C tone は 当たり、 final 案でも 残す。
• NG reaction: 「監視っぽい」 「山田さんに 失礼」 → Variant B の B2C 度を 1 段下げる signal。 caption を 「先週、 チームの 言葉数が ちょっと 少なめだった」 のような 集団主語に 振り替える。

この 1 行の reaction が 全 6 ページの B2C 度合いの 設計指針 になる ため、 hearing 時に 明示的に 聞くと 良い。

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

• 該当ファイル: kashi/src/app/product/page.tsx (全面リライト前提、 r19 §6.x の Container/Section 構造は 維持)
• 影響を受ける共有コンポーネント:
  • JapaneseProse、 JaAtoms — JA 文字組み 維持
  • Section、 Container — width="narrow" だけでは 足りない (hero photo 2 カラム、 gallery zigzag が必要)。 新規 width="wide" or SceneSection 追加検討。
• 必要な新規コンポーネント:
  • Demo30Player — 5 caption auto-cycling animation + IntersectionObserver autoplay。 Reduced motion 配慮 必須。
  • UIFrame — Chrome 風 chrome + URL bar + 中身 slot。 gallery 全 3 scene で 再利用。
  • VerbCard — icon + verb + body の 3 つ。
  • SceneRow — copy / visual 2 カラム、 reverse prop で zigzag。
• i18n: 全文字列を messages/ja.json + messages/en.json に 移行 必須。 mockup の JA 文言を そのまま 翻訳 source に。
• Photo asset: 実写 or 高品質 illustration を 別途 用意。 next/image で 配信。 width 1200, format avif 推奨。
• 30 秒 demo の 本実装: (a) Lottie JSON で 軽量化 (推奨)、 (b) Tailwind ベースの React state 駆動 caption rotator、 (c) 本物の screen recording webm。 mockup の vanilla JS は そのまま 移植可だが、 React の state hook で 書き直すべき。
• r19 既存課題との 同時解決:
  • 「fail card 3 つ」 削除は r19 §6.6 を 解体する 提案。 共同創業者 OK なら r20 で 反映。
  • boundary section は 既存 trustCard 3 つの 代替 (より 親しみやすい 語り口) として 統合可。
• i18n linting: 既存の 39 ファイル verbatim test (PR #327 governance) を 通過する 形で 文字列を 設計する 必要あり。 「30 秒で 体感する」 を test に追加。
• accessibility:
  • Demo30Player は prefers-reduced-motion 検出で auto play を 止める分岐 必須。
  • Hero photo placeholder は decorative なので role="img" + aria-label で 中身説明。
  • focus ring (2px evergreen, offset 2px) は 既に 仕込み済み。

ブラウザで 開く: Finder で workspace/strategy/ui-redesign/ROUND_001/site/product/B/index.html を ダブルクリック (Chrome/Safari/Firefox いずれも 動く)。

30 秒 demo: hero から 1 セクション スクロール すると 自動再生 開始。 6 秒 × 5 シーン。 再生ボタン で 任意の 停止/再開可。

レスポンシブ: 1280 / 900 (タブレット境界) / 768 (タブレット) / 480 (mobile) の 4 ブレークポイントで 検証済み。 Chrome DevTools の Responsive Mode で 確認 可。

共同創業者 hearing 時の 聞き方:

• 「3 つの variant のうち、 これ (B = B2C) は 自分が 個人で 試したく なるか?」
• 「hero の '言葉数 少なかった' 引用、 監視っぽい?」 (§10 を 確認)
• 「30 秒 demo、 観たくなる? 飛ばしたくなる?」
• 「資料請求 / 商談予約 が 消えていることに 違和感 ある?」