現状の /pilot は Hero / Form / 5-card recap / Alt-CTA という B2B 寄りの流れ。
Variant B では Hero → Sign-up → Calendar → Testimonial → FAQ → Final CTA の 1 列縦長スクロールに restructure し、
「個人の Manager / 若手が 5 分で sign-up」 ジャーニーに最適化。
Sign-up を 2 番目に上げる ことで 「思い立ったらすぐ」 を可能にし、 Calendar (3 ヶ月の流れ) と Testimonial で 「安心して push する」 心理的バックアップを後ろに置く。
canon: brief「衝動的、 共感ベース、 5 分で sign-up、 friction 嫌い」 / permanent-ui-principles §7 (progressive disclosure)
B2C tone なので 「dense data 多列グリッド」 (Variant A) を避け、 1 列でゆったり読める構造に。 Hero だけ 2 カラムで、 右側は warm illustrated scene (coffee / laptop / plant / notebook) を SVG で描画。 現実の写真が用意できないため、 photography の代替として SVG illustration を採用 — brief「illustration (柔らかい線画)」 仕様に整合。
canon: brief「1 列縦長スクロール、 hero に short message、 photo grid、 illustration (柔らかい線画)」
Kashi canon の evergreen #1F3D33 / emerald #047857 / cream #F5F0E6 を維持しつつ、 新規 token として cream-deep (#EDE5D3) / peach (#F5E4D7) / peach-deep (#E8C9B0) / sand (#FAF6EE) を 派生色として 追加。 これらは canon palette の cream family の延長線上にあり、 brief 「warm colors (cream + peach、 emerald 控えめ)」 に整合する。
Emerald は CTA でも primary に使わず (primary は evergreen)、 hero accent text / form focus ring / eyebrow tag のみで使用。
canon: design_system_v1.md (warm palette family) / brief「emerald 控えめ」
現状の Kashi UI (B2B oriented) は rounded-md (6-8px) 中心。 B では radius-pill (999px) を button / proof badge / form-eyebrow tag に、 radius-lg (20px) を form card / testimonial card に統一適用し、 「角が柔らかい = 親しみやすい」 という B2C の暗黙ルールを採用。
research mirror: Linear, Cal.com, Posthog, Notion landing 2025 全て pill CTA を採用 (B2B-for-individuals)
| Token | 使用箇所 | Canon |
|---|---|---|
--color-kashi-evergreen #1F3D33 | Wordmark / Primary button / H1-H3 / Footer bg | ✓ canon |
--color-kashi-evergreen-deep #244A3D | Button hover | ✓ canon |
--color-emerald #047857 | Accent text (italic), eyebrow tag, form focus ring, link | ✓ canon |
--color-cream #F5F0E6 | Hero gradient top, footer text, button text on dark | ✓ canon |
--color-cream-deep #EDE5D3 | Laptop screen gradient | 派生 (cream family) |
--color-peach #F5E4D7 | Final CTA gradient, sticker accents | 派生 (warm pair) |
--color-peach-deep #E8C9B0 | Quote marks, dot accents, avatar gradient | 派生 (warm pair) |
--color-sand #FAF6EE | Body bg, form card bg, FAQ section | 派生 (cream lighter) |
--ink, --ink-soft, --ink-faint | Type hierarchy | ✓ canon |
Fraunces / IBM Plex Sans / Zen Kaku Gothic / Plex Mono | Per design canon | ✓ canon |
| Type scale (--fs-display / --fs-h1 / --fs-lede など) | clamp-based fluid そのまま | ✓ canon |
※ 派生色は canon の cream family を温度方向に拡張したもの。 design_system_v1 を violate せず、 Justine 確認待ち。 NG なら peach/sand を cream/cream-deep に折りたたみ可能。
Evidence-grade は社内 dashboard 用 (insufficient / weak / emerging / stable / high-confidence-stable) で、 公開 marketing page には登場しない。 Social proof 「すでに 12 チームが pilot 中」 は数字 + 4 + 1 avatar stack (D / M / N / S / +8) で示し、 permanent-ui-principles §6 (No-Signal rule) に抵触しないよう 「all clear」 系の表現 (順調 / 問題なし) は一切使わない。
canon: permanent-ui-principles §6 / DATA_VISIBILITY_MATRIX (公開ページに evidence-grade は不出現)
現状はテキストだらけの 5 列 card grid (B2B 寄り情報密度)。 B では同等情報を 4-week calendar (Week 1-2 / 3-4 / 5-8 / 9-12) に置き換え、 「いつ何が起きるか」 を時間軸で視覚化。 Cheerful icon (☕ 🌱 🔍 🌿) と pastel strip で 「楽しそうな旅」 として再パッケージ。
Trade-off: 「pricing」 「scope」 などの単独情報点は Calendar / FAQ / bullet list に分散して回収。
B2C 流入では 「迷ってないでまず sign up」 を最優先するため、 dark ink band の 「他のページも見ますか?」 という分岐を削除。 代わりに Final CTA を warm peach gradient で配置し、 「無料で試す / まず話だけ聞く」 の 2 択に絞る。
Brief 仕様の social proof。 B2C で最も効くのは 「他の人もやってる」 という peer signal。 具体的な実数 (12) を提示することで誇張感を排し、 avatar はイニシャル (D/M/N/S) のみで実在企業を匿名化。
research mirror: Linear "join thousands of teams", Cal.com "trusted by", Notion "millions use"
Hero visual の右上に rotate(4deg) で配置した手書き風 sticker。 「気軽さ」 「人間味」 を一目で伝える wearable design pattern (Calm, Headspace, Patreon marketing で頻出)。 Mobile では非表示 (980px 以下)。
現状の /pilot は時間軸の流れが文字情報のみ (PilotTimelineStrip コンポーネント + 5-card)。 B では color-coded strip + pastel icon background (peach / sage / blue / lavender) で「色の旅」 として表現。 Brief 「pilot 中に何が起きるか」 を 1-week 単位の calendar 視覚化 (cheerful)」 を直接実装。
Brief 仕様の 「warm photo + 顔写真 testimonial」。 実写真は用意できないため、 SVG illustrated portrait (soft, friendly) で代替。 Quote は Fraunces italic + emerald で 「言葉の質感」 を高める。
匿名性: 仮想 manager 田中部長 (営業 8 名) は brief dummy data 通り。 実在の人物名・写真は一切なし。
B2C 流入で最も効く 「不安解消」 を accordion で。 本当に無料か / メンバーへの説明 / 途中で止められるか / 大企業じゃないとダメか / カジュアル相談 OK か。 Trade-off: ページ長が伸びるが、 縦スクロール式 B2C パターンに整合。
現状の PilotRequestForm は別 client component で field 数不明。
B では brief「email + チーム名のみで sign-up」 に従い 3 field (email 必須 / team 必須 / name 任意) に削減。
`autocomplete` 属性を全 field に付与し、 mobile での入力負荷を最小化。
| Principle | Check | 結果 |
|---|---|---|
| §1 surveillance feel NG | eye/camera/police icon, 「監視」 「見張る」 wording 検査 | ✓ Pass |
| §2 forbidden wording (検知 / 予測 / 健康スコア / 生産性スコア / at-risk) | 本文全文 grep 想定 | ✓ Pass — 「気づく」 「眺める」 「対話の構造」 のみ使用 |
| §6 No-Signal rule (all clear / 問題なし NG) | 「順調」 「健康」 「問題なし」 排除 | ✓ Pass |
| §7 progressive disclosure | FAQ accordion + Calendar week-card で詳細を後ろに | ✓ Pass |
| §13 surveillance metaphor NG | icon 一覧: ☕ 🌱 🔍 🌿 ♡ — 全て warm/neutral | ✓ Pass — 🔍 は「眺める」 metaphor で監視ではない |
| Evidence-grade text label rule | 該当 badge 不出現 | N/A |
| 個人名 (real people) | 田中部長 / demo株式会社 / 山田さん 系 dummy のみ | ✓ Pass |
| Color + text label rule | Calendar week-card は color strip + week tag + title + body 全部 text 付き | ✓ Pass |
| CANONICAL_PRODUCT_TRUTH (structure-not-content) | 「内容ではなく構造」 不明示だが reframe 不要 (sign-up page スコープ) | △ 暗黙 — Hero 「対話の構造」 で軽く触れる |
本 variant は Manager 個人を target にしているため、 「導入検討の決裁者」 が CIO / CFO の組織には響かない。 Variant A (B2B 極) がカバーする想定で、 6 ページ全体の portfolio として並存させる前提。
FAQ 1 番で 「pilot は無料、 続けるかは 3 ヶ月後に話す」 と説明したが、 価格表は意図的に削った。 B2C tone を貫くため。 ただし 「価格が見えない = 信用できない」 という JA 商習慣との衝突は懸念。 → Justine 判断: Pricing tier ページへの footer link を追加するか、 FAQ で範囲だけ明示するか?
Brief は 「large photography (laptop / コーヒー / 横顔)」 を希望。 Mockup フェーズで実写真は調達不能のため、 SVG illustration (coffee + laptop + plant + notebook) で代替。 実装フェーズで Pexels / Unsplash の license-free photo に差し替える前提。 Photo の温度感 (cream + peach 系) は brief 通り。
Brief 「emoji 使用 (控えめに)」 に従い、 Calendar week icon と sticker の heart のみ。 JA enterprise context で emoji がフォーマル感を損なう懸念はあるが、 Variant B は B2C 極なのでむしろ tone match。 Variant A (B2B) では emoji 0 個で対比。
現状の /api/pilot-requests は実装済みだが mockup は static HTML のため接続不能。
実装時に PilotRequestForm.tsx から field を email/team/name の 3 つに削減 + autocomplete 属性追加 が必要。
このモックアップを実装する際の注意:
kashi/src/app/pilot/page.tsx + kashi/src/components/pilot/PilotRequestForm.tsxmessages/{ja,en}.json の pilotPage.* セクション。 本 variant は Hero copy / FAQ 5 件 / Calendar 4 週 / Testimonial / Final CTA を新規追加する必要あり。Container — width="narrow" / "default" に加えて B 用の縦長 1 列 layout が必要。 流用可。Section — tone="stone" / "white" / "ink" に加えて "warm-gradient" "sand" tone を足すか、 inline gradient を使うか判断。PilotTimelineStrip — B では 4-week card grid に置換のため使わない。JapaneseProse — ja-atoms 対応のため そのまま使用 (atom wrap で 「3 ヶ月」 「30 分」 を nowrap 化)。SocialProofBadge — avatar stack + count 表記 (再利用可能)WeekCalendarCard — 4-week color-coded cardTestimonialCard — portrait + quote + attr の standard patternFaqAccordion — details/summary ベース (semantic HTML preferred)/api/pilot-requests の payload schema 変更を伴う。 zod schema 更新必要。aria-hidden="true" 付与済み (装飾扱い)本 variant では cream family を温度方向に拡張した派生色 4 つを追加。 Variant B のみで使うか、 design_system_v1 に明示的に格上げするかを confirm 必要。
B2C 極なので意図通り。 ただし最終的に 「pilot は B2B が決裁する」 ことを考えると、 個人 manager がこのページを上司に見せたとき 「ちゃんとしてない」 感が出ないか?
FAQ で 「pilot 無料 / 続けるかは後で話す」 と明示したが、 価格 anchor がない分 「結局いくら?」 の不安が残る可能性。 Pricing footer link 追加 vs 「pilot に集中」 で意図的に削るかの選択。
B2C UX の常套は CTA 1 つに絞ること。 ただし 「カジュアル相談」 の窓口があった方が踏み出しやすい層もあるため、 2 つ並べた。 A/B test 余地あり。