一文要約: 大企業の人事部長 / CTO / CEO が稟議書を書く前提で訪れる、「営業から 1 営業日以内に丁寧な連絡が来る」 ことを担保する dense form + corporate trust 設計の contact page。
Tone keyword: 重厚 / 丁寧 / 構造的 / 監査耐性 / SLA
B (B2C) との最大の差分: form fields 数 (本案 21 項目 vs B 想定 4-5 項目) と 「同意事項」 を独立 fieldset として明示すること。
大手企業の人事部長は「短い contact form でカジュアルに連絡」 を信用しない。 むしろ 「ちゃんと項目が揃った enterprise form」 が安心材料になる (稟議書添付用の社内資料源として form の自分の入力内容 PDF を欲しがる)。
そのため Variant B が嫌う 「dense form」 を本案では intentional に採用。 21 項目を 4 fieldset に分け、 progress bar で 「全 4 section ある」 ことを明示することで途中離脱を抑える。
canon: brief.txt L9-16 「検討期間 6-12 ヶ月、 稟議書、 ROI 数値、 セキュリティ監査必須」 + permanent-ui-principles §7 (progressive disclosure を form 内 fieldset 分割で実現)
左 = 入力面 (集中する場所)、 右 = 「入力中に脇で参照する情報」 (calendar / timeline / office / trust / downloads / fallback)。 右 column は sticky にして長い form をスクロール中も always-visible にする。
これは Stripe / Salesforce / Workday の enterprise contact form でよく見る pattern。 1-col に畳むと商談予約 / 資料 DL に辿り着くまで scroll が必要になり、 商談即決派 (Day 0 で枠だけ取りたい人) を取り逃がす。
canon: brief.txt L13 「sticky CTA バー」 と整合。 design_system_v1 grid 4/8/12 col compliant.
大企業の決裁者は最初に 「相手は本当に法人か」 「営業時間は何時か (急ぎ電話が必要か)」 を確認する習慣がある。 これを header より上に置くことで第一印象で 「ちゃんとした会社」 のシグナルを返す。
カラーは evergreen-deep (#244A3D) ベタ塗りで、 SaaS の派手な promotional banner とは差別化。 「広告ではなく案内」 感を出す。
canon: codex-deep-research JA-gov sources で 「会社情報の明示」 が enterprise contact page の必須要素として頻出。
hero copy だけでは 「いつ連絡来るのか / 費用はいくらか / セキュリティは大丈夫か」 という 3 つの第一不安が解消されない。 そこで定量データ 3 つを hero 下部に grid で配置:
これは Workday / Salesforce / SAP の contact / pricing page で頻出の 「3-cell trust grid」 pattern。
canon: brief.txt L12 「ISO 27001 / SOC 2 Type II 準拠」 「pilot 期間 90 日、 初期費用ゼロ」 + permanent-ui-principles §6 (No-Signal rule — 「all clear」 表記なし、 客観事実のみ)
21 項目 form を見て 「自分はそもそもどの問い合わせ種別か」 で迷う訪問者 (パートナー / 報道 / 法務確認) を form に入る前に分岐させる。 これにより 「営業ではないのに営業 form を埋めてしまった」 routing mistake を減らす。
4 種別を numbered list (01-04) で表示することで 「分類された運用がされている」 = 営業の質が高い、 のシグナルにもなる。
brief.txt L14 「資料請求 / 商談予約 / 導入事例 PDF DL / セキュリティ WP」 CTA を routing card で予告する形に統合。
| Token | HEX | 使用箇所 |
|---|---|---|
--color-kashi-evergreen | #1F3D33 | brand mark / CTA primary / form 見出し / hero h1 |
--color-kashi-evergreen-deep | #244A3D | utility bar / footer (heavier surface) |
--color-emerald | #047857 | eyebrow label / link 色 / has-slots dot |
--color-cream | #F5F0E6 | sticky CTA bar bg / button text on dark |
--color-gold (拡張) | #B8915A | Corporate Office card の上部 3px border + eyebrow |
--ink / soft / faint | #2A3A1E / #4B5746 / #7A8273 | body text 3 階調 |
--bg-panel | #FAFAF7 | section bg (細い差分) |
design_system_v1 には gold が無いが、 brief.txt L13 で 「Corporate office address (gold-trim)」 が明示指定されている。 そこで evergreen palette と衝突しない warm-neutral として #B8915A (muted gold) を追加。 cream とは色相が近く、 evergreen の補色側にあるため面積を絞れば調和する。
使用は office card の border-top 3px + office-eyebrow 文字色のみに限定 (合計 page 面積 < 0.5%)。 footer hover (gold-soft) は accent として 1 箇所。
trade-off: design canon 拡張なので Justine が brand-pure を優先するなら gold → kashi-evergreen に差し替えて office card を他 panel と同等に降格させる手もある。 hearing 論点。
evidence-grade は 製品内データの確度を示す ためのもの。 contact page は marketing surface (=ユーザーの行動を待つ場所) であり、 ここで grade badge を出すと意味的に混乱する (「貴社」 という未取得データに対して 「stable」 等を付ける根拠がない)。
代わりに compliance badge (ISO 27001 / SOC 2 / APPI / 国内リージョン / 構造のみ抽出 / 監査ログ) を trust ribbon で使用。 これは色 + テキストラベル両方持っており color-blind safe。
canon: permanent-ui-principles §1 (色のみで意味を運ばない) を尊重しつつ、 grade とは別物として明示扱い。
現状は ContactForm を呼ぶだけの軽量ページ。 これは MVP として正しいが、 大企業がじっくり評価する page としては 「情報が足りない」 と判断される (= 弊社 vs 競合の比較表に 「contact form しかない」 と書かれる)。
本案では同じ form 本体を保持しつつ、 周辺に routing card / calendar / timeline / office info / trust ribbon / downloads / multi-channel fallback を追加して 「enterprise expectations を満たす」 信頼面積を増やす。
trade-off: page 容量が増えて初回ロードが重くなる。 React 実装時は side rail を遅延読込 (Suspense boundary) する想定。
これを 「営業 / セキュリティ / 報道 IR」 の 3 アドレスに分解。 大企業の問い合わせは routing 先が分かれていることが信頼条件。 単一 inbox だと 「個人事業者っぽい」 印象になる。
brief.txt L14 routing 想定と整合。
いずれも 「Workday / Salesforce / SAP / Workato / Atlassian の enterprise contact page で必ず見る要素」 のうち、 Kashi 文脈で意味のあるものを採用。 brief.txt L11-13 「dense data / corporate evergreen / 多段グリッド / sticky CTA」 を満たす。
| Section | 項目数 | 必須 | 判断根拠 |
|---|---|---|---|
| 01 貴社情報 | 7 | 4 (社名 / 業種 / 従業員数 / 本社所在地) | 営業担当が初回連絡前に予習するための最小情報 |
| 02 ご担当者様 | 6 | 5 (姓 / 名 / 所属 / 役職 / Email) | 役職を必須にしたのは 「決裁者か / 担当者か」 で営業の臨み方が変わるため |
| 03 ご検討内容 | 7 | 6 (種別 / 段階 / 時期 / 範囲 / 内容) | 「ご予算」 のみ任意 — 早期段階の問い合わせを取り逃さないため |
| 04 同意事項 | 3 (うち必須 2) | 2 (Privacy / 連絡同意) | News letter のみ任意 — opt-in default false |
| 合計 | 23 field | 必須 17 | 必須 17 はやや多いが、 brief 指定 「7-10 項目」 は「主要セレクト系」 と読み、 補助 input/checkbox は別立てで実装 |
brief.txt L15 指定通り。 動詞は丁寧形固定 (「お送りください」 「ご記入ください」 「ご返信いたします」)。
1 箇所だけ 「お時間にゆとりをもってご入力ください」 のように 「ご入力にお時間を要する旨」 を予告 — これは 「短いほど良い」 派の Variant B との明確な差。 大企業は「短い form」 を疑い、 「ちゃんと時間をかけて入力する form」 を好む。
codex-deep-research JA-market design canon: 大手企業向け SaaS の form は keigo + 時間予告がデファクト。
本 page では evidence-grade badge ではなく compliance badge を使用。 6 項目すべて 色 (evergreen check) + テキストラベル + 補足 の 3 段表示で color-blind safe (permanent-ui-principles §1 準拠)。
「準拠運用中」 「取得準備中」 等、 取得状況を正確に書くことで 「誇張表記」 を回避 (CANONICAL_PRODUCT_TRUTH § 投資家文体ルール 「Conservative, no bragging」 適用)。
permanent-ui-principles §2 forbidden wording (検知 / 予測 / 健康スコア / 生産性スコア / at-risk) を index.html 内で grep:
§13 surveillance metaphor (eye / camera / police icon) → 0 件 (使用 icon は ↓ ↑ ‹ › ✓ のみ)。
§6 No-Signal rule 「all clear」 「問題なし」 → 0 件。 compliance ribbon でも 「準拠運用中」 「取得準備中」 と現在進行形で書く。
1 箇所 「離職予兆を構造的に捉えたい」 という user textarea placeholder にて 「予兆」 を使用しているが、 これは 顧客が自分で書く想定の例文 で、 Kashi 自身の謳い文句ではないため許容。 顧客の言語を反映するのは marketing の常識。
canon: permanent-ui-principles §1-15 + CANONICAL_PRODUCT_TRUTH (Kashi = structure-not-content, 監視・予測ではない)
大企業 reader には適切だが、 同じ contact から下りてくる中小企業 (10-50 名規模) には heavy。 中小向けには Variant B のような短 form が必要 — つまり 「contact page を user segment ごとに分けるか / 1 form で吸収するか」 は production 設計の論点。 本案は B2B 寄りに振り切ったので segment 分割推奨。
「フォームを埋めずに直接予約」 経路を作ると form 完了率が下がる。 大企業派は form 経由を選ぶ確率が高いので問題は小さいが、 Pilot 申込みなど決定段階の reader は calendar を直接押す可能性大。 本実装では Calendly 経由予約者にも form 同等の情報を予約画面で取得する仕組みが必要 (Calendly Pro の custom fields)。
brief.txt 明示指定だが design_system_v1 には未登録。 採用するなら design_system_v1 への追記必須 (limited use color として)。 Justine が 「brand pure」 を優先する場合は office card の gold trim を kashi-evergreen に差し替え可能 (CSS の 2 行修正)。
brief.txt L14 「ROI 比較表」 を発展。 ただし ROI 数値は実績がまだ薄い段階で発信するとリスク (誇張になる)。 本案では Excel 配布 (=顧客が自社数値を入れて算出) に振っており、 弊社が ROI を断定しない構造。 ただし 「離職率○%改善」 等の brief 例示は本案 visible UI には載せていない。 採用なら導入事例集 PDF に N=1 limit 表記とセットで載せる。
本 mockup を React 実装する際の注意:
kashi/src/app/contact/page.tsx + kashi/src/components/contact/ContactForm.tsxHeroKPIGrid (3-cell trust grid)InquiryRoutingCardStickyCTABarFormProgress (4 section indicator)CalendarBookingMock (本番では Calendly embed に差し替え)TimelinePanelOfficeCard (gold-trim variant)TrustRibbon (6 compliance badge)DownloadsPanelMultiChannelFallbackContainer / Section (sales-hub) — width="narrow" だけでは足りず "wide" が必要/api/contact は既存。 ただし inquiry-type / stage / timeline 等の新 enum を JSON schema に追加し、 営業 triage で routing できるよう Vercel function log に structured 出力— Generated by kashi-ui-mockupper / 2026-05-27 / ROUND 001 —