Design Decisions ── contact / Variant C

ROUND 001 · Story-driven (note 風) · 終章

Variant C の contact page は、 申し込みフォームでも商談予約画面でもなく、 6 ページ全体で展開してきた物語の 終章。 ここまで読み切ってくれた読者の時間に敬意を払い、 conversion ではなく invitation で閉じる。 form ではなく 「一通のメールから始まる対話」 を前面に出す。

1. 主タスクと上位構造

決定: 「form を埋める」ではなく「読了の余韻のなかでメールを送る／送らないを選ぶ」を主タスクに据えた

従来 contact page (kashi/src/app/contact/page.tsx) は Hero + ContactForm (typed inquiry routing) + email fallback の 2 セクション構成で、 conversion を最大化する作り。 Variant C はこの優先順位を逆転させ、 終章の本文 (読み物) を先に長く展開し、 contact card を 1 つに統合した。 form は card の中の二段目に置き、 email link を一段目で目立たせている。

canon: permanent-ui-principles §1 (監視感 NG) / §6 (No-Signal rule) / brief「contact = 第 5 章/終章」「form ではなく終章の文」

決定: ページ全体を 1 列縦長 (max-width 680px) の読み物として組んだ

note や Medium の article ページと同じ読みやすさ優先のレイアウト。 chapter rail (上部) → opening (大きな Fraunces title) → prose → pull quote → invitation → contact card → next-steps → closing → thanks → chapter-foot (前章リンク) → site-footer の縦スクロール。 グリッド・カラム分割なし。

brief「1 列読み物、 max-width 680px」「文字主体、 large serif typography」

2. レイアウト

決定: opening title は Fraunces 400 weight, italic を混ぜた 2 行レイアウト「対話を、 / 続けるために。」

brief 指定の「文学的 closing」と「Fraunces 大きく」を受け、 H1 を clamp(2.4rem, 6vw, 4.4rem) で組んだ。 「続けるために。」のみ italic + emerald で、 物語を 「閉じる動詞」 が浮かび上がる構造にした。 letter-spacing は -0.018em で日本語と Latin の混植の詰まり感を出す。

design_system_v1 §typography (Fraunces 5-weight scale) / brief「文学的、 思考的」

決定: 第一段落に drop cap (「こ」を 64px の Fraunces で配置)

note / 文芸雑誌の慣習を踏襲。 読者に「これは記事である、 form ではない」というシグナルを冒頭で送る。 日本語 drop cap は欧文ほど一般化していないが、 Kashi の対象読者 (founders / 投資家 / メディア / デザイナー) は long-form 慣れているので違和感は出ない。

brief「思考好きの読者 (オピニオンリーダー、 投資家、 メディア、 デザイナー、 founders)」

決定: 「§」記号の section break を 2 箇所に挿入 (本文中)

chapter 内の rhythm break。 horizontal rule や見出しではなく、 文学的な節記号 (§) を中央寄せで配置し、 余白 80px を取った。 これにより 「読み手が呼吸する場所」 を物理的に作る。 brief 指定の「chapter breaks (---、 大きな margin)」のうち 「---」 を section dividers として採用。

brief「chapter breaks (---、 大きな margin)」

決定: pull quote を中央寄せ + Fraunces italic で 1 枚挟む

「あなたの組織のことを、 聞かせてください。」 が招きの一文。 brief 仕様の文言。 本文の流れを一旦止めて、 invitation card に視線を遷移させる役割。 emerald の italic で 「あなたの組織のことを、」 を強調し、 サイトのメッセージで最も大事な一語に色を当てた。

brief「あなたの組織のことを聞かせてください」 invitation

3. 採用したトークン

TOKEN USAGE
--color-kashi-evergreen #1F3D33opening title、 wordmark、 contact card top accent (3px bar)、 send button、 closing title、 toast 背景、 site-foot 背景
--color-emerald #047857title 内の italic accent (「続けるために。」)、 invitation eyebrow、 next-list 数字、 button hover、 link focus outline
--color-cream #F5F0E6contact card 背景
#FAF6EC (paper)body 背景 — cream をわずかに明るくした「紙」色。 brief「cream background dominant」を受け、 cream-cream の重なりで階層を作るため
--ink / --ink-soft / --ink-faint本文 / 補足 / meta-data の 3 段階階層
--rule / --rule-softsection break、 input underline、 chapter foot divider

Font scale (Fraunces 主役)

4. 採用した evidence-grade 表現

決定: contact page では evidence-grade badge は一切使わない

evidence-grade tokens (--kashi-grade-stable など) は product / dashboard surface 用。 marketing site の終章ページは 「読み物」 であり、 grade 表示の対象データが存在しない。 brief で指定された「contact page にデータ無し」を尊重した。

design_system_v1 §evidence-grade — badge は product surface 専用

5. 削った要素 (現状の Kashi contact page から)

6. 追加した要素 (現状にない)

7. 既知のトレードオフ / 未解決

Trade-off 1: conversion rate は B variant より明確に低くなる

form field を 3 つ (name / email / message) に絞り、 typed inquiry routing を削除した結果、 「pilot 問い合わせ」 と 「press 問い合わせ」 を form 上で分岐できない。 すべて 1 つの inbox に流れ、 founder が手で triage する必要がある。 想定流量が週 10-30 件以下のうちは問題ないが、 月 100 件超えたら typed routing を card 内に再追加する判断が要る。

Trade-off 2: 「読み物として完結している」前提

contact page を最初から検索流入 (Google で「Kashi 問い合わせ」 など) で踏んだユーザーは、 物語の前 4 章を読んでいないので 「いきなり終章の余韻」 を浴びることになる。 chapter-rail と chapter-foot で章構造を可視化したが、 「まず物語を読んでください」 への誘導は強くしていない。 検索流入率が高い場合、 ページ上部に「ご新規の方は 序章 から」 のような nudge が要るかもしれない。

Trade-off 3: form のバリデーション / error UI が控えめ

field の required や error メッセージを視覚的に強く出していない (novalidate)。 文学的トーンと一貫させるためだが、 実装フェーズでは 「メール形式が正しくないときの表示」 「メッセージが空のときの表示」 を Fraunces italic で柔らかく書く設計が別途必要。

Trade-off 4: i18n を想定していない (現状 ja のみ)

本文の文学的トーンは翻訳が極めて難しい。 「対話を、 続けるために。」 を英語にすると「In order to keep the conversation going.」 のような直訳になり、 余白の質感が失われる。 EN 版を出す場合は別の文学者に翻訳発注 (Codex consult 経由) を推奨。

Trade-off 5: SSR / SEO 上の構造化データが薄い

structure data (Organization, ContactPoint schema.org) を入れていない。 marketing page として「お問い合わせ先」 を検索エンジンに渡す機能が弱い。 実装時に JSON-LD で ContactPoint (email: hello@zetrix.jp, contactType: customer support, areaServed: JP) を追加する。

8. Justine confirm 判断点 (共同創業者hearingで聞きたいこと)

  1. 「form を 1 つに統合 + email link を主に格上げ」 という変更を許容できるか。 現状 ContactForm は typed routing で press / pilot / partnership を分けているが、 終章では 「自由記述 1 つ」 に絞った。 founder triage の負荷とのトレードオフ。
  2. 「読んでくださり、 ありがとうございます。」 の closing は temperature 適切か。 共同創業者によっては 「弱すぎる、 商売っ気が無さすぎる」 と感じるかもしれない。 vs. 「読者敬意を守るべき」 という brief 指定。
  3. 「§」 section break は記号として読みやすいか、 邪魔か。 Variant A/B では使わない要素なので、 C 特有の文学性として残すか、 horizontal rule に置き換えるか。
  4. chapter-rail / chapter-foot は 6 ページ全体で揃えるべきか。 これは contact 単体で決められない。 6 surfaces の hearing 後に編成判断。
  5. 「商談ではありません。 デモでも、 ありません。」 のような note 句は B2B 大手向けに通じるか。 brief で 「思考好きの読者 = founders / 投資家 / メディア / デザイナー」 と target を絞っているが、 共同創業者の 1 人が大手企業 IR 出身などの場合、 違和感を持つ可能性あり。

9. 実装フェーズへの引き継ぎ

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

r19 既存課題のうち本案で同時解決されるもの

本案で新たに発生する課題

10. canon lint 自己確認