根拠: 現在の kashi/src/app/contact/page.tsx は hero + ContactForm + email fallback の 2 セクション構成。 B2C 極では 「フォーム長すぎ」 が最大の friction なので、 既存構成を踏襲しつつ 項目数を name / email / message の 3 つに絞り込み、 hero 直下に form-card を浮かせて 「いきなり送れる」 状態を作る。
brief: 「最小 form (name + email + 一言、 3 項目のみ)」 + 「friction 嫌い」 を直接実装。
canon: permanent-ui-principles §7 (progressive disclosure) — 不要項目 (会社名 / 役職 / 従業員規模 / 問合せ種別) を完全に削除。 創業者が triage する前提なので構造化は不要。
brief 「1 列縦長スクロール、 ample whitespace、 warm colors (cream + peach)」 を最大限実装。 hero = 760px、 form / social = 580px、 founders = 880px (2 列カードのため広めに)。 1280px 以上でも左右に大きな余白を残すことで、 「商談予約サイト」 ではなく 「個人 blog 的な静けさ」 を演出。
背景 cream warm (#F9F2E4) に対し、 form だけ白でカードに。 角丸 24px は cta button の 999px と並んで 「ソフトに感じる」 視覚効果。 hard edge は B2B 極が担当。 B では角を立てない方針。
design_system_v1: radius scale を活用しつつ、 B 用に大きめ (24px / 18px / 12px) を選択。
brief 「founders の顔写真 + 短い自己紹介」 だが mockup は static HTML のため実写真は使えず、 また現時点で創業者の本名 / 顔写真 を載せると 個人特定可能データ になり mockup 共有時にプライバシー問題が発生する。 そのため 創業者 A / 創業者 B プレースホルダー + ピーチ系 / グリーン系のグラデーション円 + イニシャル文字で 「ここに写真が入る」 ことを Justine と共同創業者に伝える設計。
| token | 値 | 使い所 |
|---|---|---|
--color-cream-warm | #F9F2E4 | body 背景。 標準 cream より僅かに warm に傾けた変種で B2C 極を強調。 |
--color-peach-soft | #FBE9DB | form-intro-icon 背景 + 創業者 A avatar グラデーション基点。 「コーヒー / 朝の光」 感。 |
--color-kashi-evergreen | #1F3D33 | CTA / wordmark / 見出し / focus ring。 ブランドカラーは温度感に関係なく維持。 |
--emerald-700 | #2F6B4A | eyebrow ラベル / promise dot。 アクセントのみ。 |
--ink-soft | #4B5746 | 本文。 純黒は使わない (B 極では特に)。 |
| type: Fraunces 500 | — | h1 / h2 / founder-name / wordmark。 italic は使わず weight 500 のみで warm な印象。 |
| type: Zen Kaku Gothic New | — | JA 本文。 IBM Plex Sans とスタックして全 OS で日本語綺麗に。 |
| type: IBM Plex Mono 0.75-0.8125rem | — | eyebrow / 役職ラベル / footer meta。 アクセントのみ。 |
contact ページは プロダクト内データを表示しない 公開サイトなので evidence-grade バッジを出す必然性がない。 代わりに promise-dot (pulse する小さな emerald 700 の dot) で 「24 時間以内に返信」 という 運用上の約束 を視覚化。 これはデータ grade ではなく 人間の応答約束 なので grade 体系の流用はしない。
canon: permanent-ui-principles §6 (No-Signal rule) — 「all clear / 問題なし」 表現を避ける必要があるが、 「24 時間以内に返信」 は対人約束であり該当しない。
brief 「emoji 控えめに 1-2 個」 を厳格遵守。 3 個以上は B2C でも砕けすぎる判断。
| 場所 | 採用コピー | 意図 |
|---|---|---|
| hero h1 | 気軽に、 話してみませんか ☕ | 命令形 / お願い形を避けた誘い。 「ご連絡ください」 (B2B 的) と対照。 |
| hero lead | どんな話題でも、 まずはお気軽にメッセージをください。 | 枠を狭めず、 「導入検討」 「事例ヒアリング」 のようなラベルを意図的に排除。 |
| form intro | 3 項目だけ。 30 秒で送れます。 あなたからの一言を、 楽しみにしています。 | 所要時間を明示 + 二人称 「あなた」 + 一人称感情 「楽しみにしています」。 |
| label hint | (ニックネームでも OK) / (なんでも) | 本名強制を解除することで psychological safety を演出。 |
| submit button | 送ってみる | 「送信する」 (B2B / 命令形) ではなく 「〜してみる」 (試行 / 軽さ)。 |
| promise line | 24 時間以内に、 創業者からお返事します | 「弊社担当者」 ではなく 「創業者から」 を明示することで個人対応感。 |
| founders section h2 | 返事をするのは、 私たちです | 営業 / カスタマーサポートではないと明示。 一人称複数 「私たち」 を多用。 |
| social-card 副題 | フォーム不要、 一行でも歓迎です / 添付ファイルが必要なときに | 各 channel の正しい使い分けを 説明調ではなく 親しみ口調で。 |
| footer tagline | 対話を、 続けるために。 | brief 第 5 章タイトルと整合 (variant C ストーリー型からの再利用は B でも採用可)。 |
mailto: プレフィックス文 (「メールでのご連絡は」): social card 内に格納し、 説明文を消した。| 項目 | 判定 | 備考 |
|---|---|---|
| §1 監視感 (surveillance feel) | OK | eye / camera / police icon 不使用。 form と founders 中心。 |
| §2 forbidden wording (検知 / 予測 / 健康スコア / 生産性スコア / at-risk) | OK | 該当単語ゼロ。 「対話不全」 のみ canon 内表現で 1 箇所使用 (hero lead)。 |
| §6 No-Signal rule (all clear / 問題なし) | OK | 該当なし。 promise dot は時間約束であり状態シグナルではない。 |
| §13 surveillance metaphor (eye / camera / police icon) | OK | 使用アイコン: hamburger / arrow / X mark / mail envelope / wave hand 絵文字 / coffee 絵文字。 全て対人コミュニケーション系。 |
| CANONICAL_PRODUCT_TRUTH (structure-not-content) | OK | contact ページなのでプロダクト主張は最小限。 hero lead に 「対話不全」 1 回のみ言及。 |
| real-world person data | OK | 創業者 A / B、 デモアカウント @kashi_demo、 hello@example.com、 田中 (placeholder)。 実名なし。 |
| evidence-grade 色単独 NG | N/A | grade 表現を採用していないため非該当。 |
clamp(2.1rem, 8vw, 2.8rem) に。 social card のアイコン縮小。<header> / <nav aria-label="Primary"> / <main> / <section> / <footer> / <form>。<label for> 紐付け。 hint 部分は同一 label 内に span で。aria-label="メニューを開く" + aria-controls + aria-expanded 状態管理。role="status" aria-live="polite" でスクリーンリーダーに通知。#2A3A1E) on cream-warm = 約 12:1、 ink-soft on white = 約 9:1、 button text on evergreen = 約 14:1。 WCAG AAA 達成。hello@zetrix.jp を使用。 mockup では hello@example.com に差し替え (mockup は外部共有想定で zetrix.jp 露出を避けた)。 本番では再度 zetrix.jp に。/api/contact エンドポイントに structured JSON で post (現行 ContactForm と同 backend pattern)。| 軸 | A (B2B) | B (B2C / 本案) | C (記事 / ストーリー型) |
|---|---|---|---|
| form 項目数 | 多い (会社名 / 役職 / 規模 / 問合せ種別 + 詳細) | 3 項目のみ | 記事末尾に 1 つの簡素な link / button |
| SLA 表記 | 「営業日 3 日以内」 「翌営業日対応」 | 「24 時間以内、 創業者から」 | 明示しないか、 文末に控えめに |
| founders 露出 | なし (法人格 / 役職名のみ) | 顔 + 自己紹介 2 段落 | essay の語り手として暗黙的に存在 |
| social channel | 営業窓口 TEL / 代理店経由 | X DM 推奨 | note / Substack へのリンク |
| 採用言語 | 「貴社」 「ご検討ください」 keigo | 「あなた」 「私たち」 conversational | 文学的、 ためらい / 思考の言葉 |
kashi/src/app/contact/page.tsx + kashi/src/components/contact/ContactForm.tsx@/components/sales-hub (Container / Section) — 現行 page は narrow Container 使用、 B 案は max-width 580-880px なので Container variant の追加検討。FounderCard.tsx (avatar / name / role / bio) — 他ページ (about / pilot) でも再利用可。SocialCard.tsx (icon / title / subtitle / arrow) — pilot / why ページの CTA カードと共通化検討。PromiseLine.tsx (pulse dot + text) — 別 form でも再利用可。contactPage.* namespace を拡張。 新規キー: contactPage.hero.title (☕ 含む) / contactPage.form.intro / contactPage.form.labels.name 等 / contactPage.promise / contactPage.founders.* / contactPage.social.*。 verbatim test pinning 注意 (39 readers、 pre-commit hook あり、 MEMORY 参照)。/api/contact の payload を簡素化 (name / email / message のみ)。 後方互換が必要なら old fields を optional に。public/team/founder-a.jpg 等で配信、 next/image 経由。 alt text 必須。 公開前に co-founder の同意確認。