本ドキュメントは contact ページ Variant A の設計判断・採用 token・canon-purity 維持のために削った要素・Justine 確認判断点を、 後続の実装フェーズ担当者および共同創業者レビュー担当者向けに記録するものです。
前回出力で 「弊社営業担当より 1 営業日以内にご返信」 「ISO 27001 / SOC 2 Type II 取得済」 「専任 CS 1 名併走」 「法人番号 1234567890123」 「gold accent #B8915A による corporate-trust signal」 等を、 enterprise SaaS の典型 UI pattern として creative fabricate しました。 これらはいずれも canon source で確認できない claim で、 共同創業者共有前に Justine が catch して redo 判断となりました。 本 v.2 では /tmp/site_canon_facts.txt のホワイトリストのみを根拠とし、 不明な値は明示的に [DEMO] / 「準備中」 / 「ご相談ください」 placeholder に統一しています。
根拠: B2B 極の買い手 (大企業 人事部長 / CTO / 法務 / 調達 / セキュリティ部門) は 「自分が誰として、 何のために連絡しているか」 を最初に分類しないと正しい窓口に届かない不安を持つ。 4-card routing matrix で目的別の入口を視覚化し、 fold 内で 「フォーム / 商談予約 / セキュリティ問い合わせ」 のいずれに行けばよいか判断可能にした。
根拠: 大企業の購買部門・人事部長・法務部門は 1 ページに 「自分が必要とする情報」 が全部入っていないと社内で稟議に回せない。 dense + multi-rail で 「商談予約 / メール / 必要書類 / pilot slot 状況」 を rail に分け、 form をスクロールしても rail が見える sticky 配置で、 何度も上に戻らずに済む。 mobile では rail を解除して縦積み + bottom sticky CTA bar に切替。
Section 0X / 英字ラベル の eyebrow + Fraunces 大きな番号を配置。根拠: B2B 大企業向け資料 (IR / 監査報告書 / 投資銀行 deck) で頻出する 「章番号」 「節番号」 メタファ。 「契約書を読むモード」 で訪れた読者に 「この資料は構造化されている」 という安心感を与える役割。 同時に Fraunces を見出し以外でも 「番号」 として再利用することで brand の typography 一貫性を保つ。
| Token | Hex | 使用箇所 |
|---|---|---|
--color-kashi-evergreen |
#1F3D33 | brand mark / h1-h3 / primary button / sticky-cta / focus ring / section-num / fieldset-legend / footer |
--color-kashi-evergreen-deep |
#244A3D | utility bar / process timeline band / primary button hover |
--color-emerald-700 |
#047857 | inline link / anchor CTAs (「フォームへ」 ↓) |
--color-cream |
#F5F0E6 | badge-status (月 3 枠) / dark-on-light text / footer brand mark |
--ink / --ink-soft / --ink-faint |
#2A3A1E / #4B5746 / #7A8273 | 本文 / 副次テキスト / placeholder / DEMO mark |
--surface / --surface-alt |
#FFFFFF / #F4F4F2 | カード / 補助背景 (form section / breadcrumb / 引用 box) |
--border / --border-strong |
#D6D8D2 / #B7B9B2 | カード境界 / 入力 hover / dashed separator |
Fraunces / IBM Plex Sans / IBM Plex Mono / Zen Kaku Gothic New の 4 family、 Evergreen / Emerald / Cream の 3 brand color、 ink scale 4 段、 stone surface 3 段、 全て kashi/src/app/globals.css + design_system_v1.md の canonical token 範囲内です。 前回 Variant A の gold accent #B8915A は本 v.2 では使用していません (judgement §「gold accent 判断点」 参照)。
contact ページは evidence-grade を表示する surface ではない (= signal を示すページではなく、 connect するページ) ため、 grade badge は配置していません。 代わりに以下の neutral status 表現のみ使用:
*: form field に #B45309 (amber-700 系) で配置。 form 上の validation marker としての慣用で、 evidence-grade とは無関係。hello@zetrix.jp リンクのみ。 v.A では right rail の独立カードに格上げし、 form を使わない大企業ご担当者にも素早く目に入るように。[DEMO 表示] tag + 注釈 「現状はフォームで希望日時 3 候補をご連絡」 を明記。[DEMO] マークで明示的に placeholder 化。| 書きたくなった内容 | 削除理由 (canon source) | 代替表現 |
|---|---|---|
| 「弊社営業担当より 1 営業日以内にご連絡」 | Kashi の team はまだ小規模、 専任営業 / SLA 約束できる体制無し | 「Kashi 担当者よりご連絡いたします」 / 「内容により、 ご回答にお時間をいただく場合がございます」 |
| 「ISO 27001 / SOC 2 Type II / ISO 27018 取得済」 | canon に取得状況の記述無し | 「セキュリティ要件は pilot 担当者と協議」 + [DEMO PLACEHOLDER] note |
| 「セキュリティ白書 PDF / DPA 草案 PDF ダウンロード CTA」 | canon source 不明、 PDF も存在未確認 | 「詳細仕様および契約書面 (DPA 草案を含む) は、 個別にご請求ください」 |
| 「専任 CS 1 名 + ソリューションエンジニア 1 名が併走」 | canon に dedicated role 言及無し、 Kashi 早期スタートアップ | process step 02-03 で 「Kashi 担当者」 「ご担当者」 のみ言及 |
| 「Google Meet / Microsoft Teams 対応」 | canon は Zoom Pro plan のみ運用可 | FAQ Q4 で 「現時点では Zoom (Pro plan) での運用に対応」 + 「その他は個別案内」 |
| 「本契約 月額 ¥240,000」 等の具体金額 | canon に公開価格無し | FAQ Q1 「公開価格はございません。 個別お見積もり」 + form 内 budget select で 「個別見積もり希望」 を選択肢化 |
| 「離職率 15% 改善」 「ROI ¥xxx 万」 等の成果保証 | canon doctrine 「Kashi は予測しない / 成果保証しない」 (FORBIDDEN_CLAIMS_REGISTRY) | FAQ Q6 で disavow pattern: 「Kashi は個人を対象とした予測や成果保証を行うプロダクトではありません」 |
| 法人番号 (例: 1234567890123) | 運営会社確定情報が canon に無い | org section で 「準備中」 + [DEMO PLACEHOLDER] mark |
| 「90 日 pilot」 等の期間 | canon は 30 日固定 | 全箇所 「30 日間」 で統一 (hero meta / routing card 01 / process step 04 / FAQ Q2) |
| SSO / SAML / OIDC / SCIM 言及 | canon に実装状態の記述無し | security section で 「認証連携は導入時にご相談」 (= 言及せず) |
mockup 完成後、 /tmp/site_canon_facts.txt §「Forbidden patterns」 全 10 種を grep で検証。 全 0 件 PASS。
[DEMO 表示] tag 付き静的カレンダー。 実装段階で Calendly embed iframe 等への置換が必要。 現状フォールバック (フォームから希望日時 3 候補) を併記しました。
前回 v.A では 「corporate-trust signal」 として gold accent (#B8915A) を hero / 認証バッジ / 章番号に配置していました。 v.2 では canon-purity 優先で 削除し、 全アクセントを evergreen / emerald / cream の 3 brand color に統一 しました。 結果として 「B2B 大企業らしい高級感・別格感」 は減り、 「Kashi らしい evergreen 統一の硬派 SaaS」 に近づいています。
判断ポイント: gold accent を corporate signal として再導入したい場合は brand palette への正式追加が必要 (canon: project_kashi_brand_palette.md = 「ワイド緑系 + 白 + 黒」 が canon、 gold は範囲外)。 共同創業者 hearing で 「Kashi らしさ」 vs 「大企業向け差別化」 のどちらに振るか確認したい点。
会社名 / 姓名 / メール / ご検討段階の 4 項目を required に設定。 業種 / 規模 / 役職 / 部署 / 関心領域は任意。 B2C 寄り (B variant) では会社名すら任意化する選択もありますが、 v.A は大企業の窓口振り分け前提のため会社名を必須化。 「フリーメールでも連絡可だが法人ドメイン推奨」 は help text に降ろし、 reject pattern にはしていません。
これも 「1 営業日 SLA」 と同様に 「team の応答能力を約束」 と取られないか境界の表現です。 「営業時間」 = 連絡が届く時間帯の説明であり、 「この時間内に返信する」 commit ではないと解釈して残しました。 もし共同創業者から 「営業時間も書きたくない」 という意見が出たら、 hero meta から外して utility-bar の info-text に降ろす方針で対応可能。
お問い合わせ前段階の FAQ で、 surveillance 懸念を anticipate して先回り回答しています。 「Member / Manager / Org Admin の役割ごとに可視範囲制御」 「発言内容そのものは DB に保存されない」 と canon 表現で書きました。 ただ contact ページで深く触れすぎると 「やはり監視ツールなのでは」 という不安を逆に喚起する可能性もあります。 共同創業者から 「ここまで先回りせず product ページに任せる」 という意見が出たら Q5 を削る方針も検討余地あり。
本 mockup を Kashi コードベースに移植する際の注意:
kashi/src/app/contact/page.tsx — 現状は hero + ContactForm の 2 セクション。 v.A 移植時は 7 セクションに拡張kashi/src/components/contact/ContactForm.tsx — 現状の inquiry_type / name / email / message から、 fieldset 5 + field ~22 に拡張kashi/messages/ja.json の contactPage namespace — hero / form label / placeholder / FAQ 答えを translation key 化kashi/src/app/api/contact/route.ts — 追加 field の JSON shape を Vercel function 側で受信Section, Container (sales-hub) — そのまま流用可JapaneseProse — h1 / lede / FAQ answer で再利用PortalHeader は app shell 専用、 公開サイトの header は別 (Header.tsx 等)RoutingMatrix (4-card grid)FormMetaRail (sticky right rail with Direct Contact / Required Documents / Pilot Slot Status cards)ScheduleMock (Calendly 連携が来るまで placeholder) → 連携後は CalendlyEmbed に置換SecurityCardGrid (Architecture / Compliance / Tenant Isolation / Data Lifecycle の 2x2)ProcessTimeline (dark band, 5 step)FAQList (HTML <details> ベース、 JS なしで accordion)OrgInfoTable + DemoPlaceholderBadge (確定情報が埋まるまで Demo マーク表示)