Design Decisions — top / Variant C
Story / Essay (note 風) · Round 001 · Generated by kashi-ui-mockupper
Variant C は、 6 章物語の 序章 / manifesto。 top page 単体で conversion を取りに行かず、 「読み進めたい」 という心の動きだけを誘発する。 文字主体、 Fraunces 大きく、 cream background、 max-width 680px、 CTA は末尾に 1 つだけ。
1. 主タスクと上位構造
決定: top は会話のはじまりであり、 結論ではない。
このページの目的は 「Kashi が何かを売る」 ことではなく、 「なぜこの問題に取り組んでいるか」 という 意図 を、 thinking reader に渡しきること。 conversion (商談、 資料 DL、 sign-up) は意図的に上に置かず、 末尾に 「読み進める」 という 1 つの動詞だけ残した。
根拠: Brief Variant C 仕様 「conversion ではなく 共感と理解 が目的。 sign-up は記事の末尾に控えめに 1 つ。」 + 現状 page.tsx の Section 1-7 構造 (hero/CTA/数値/物語/promise/FAQ/CTA) を全廃し、 essay 1 本に再構成。
決定: 6 ページ全体で 1 つの物語、 top は序章。
top 単体では完結させない。 章番号 (I/II/III/IV/FIN.) を打ち、 各章間の余白を大きく取り、 末尾の closing で次章 (/why) のタイトルを予告する。 closing-meta に Chapter I · /why を明示。 colophon にも 6 章 index を置いた。
根拠: Brief 「6 ページ全体で 1 つの物語: top→why→why-now→product→pilot→contact」
2. レイアウト
決定: 1 列、 max-width 680px、 cream background dominant。
essay として読まれるためには、 1 行あたり 38-42 字程度 (JA 本文として最も負荷の低い帯) に収まる必要がある。 680px container × line-height: 1.85 でこの帯を確保。 grid / sidebar / multi-column は一切持ち込まない。
根拠: Brief 「max-width 680px (読みやすさ優先)」 + design_system_v1 typography spec (Lede tier の reading width)。
決定: PortalHeader / sticky nav は置かない。
本 mockup は marketing site の top であり、 app の portal 内ではない。 また essay として読んでいる最中に sticky nav が視界に居続けると、 「読み物」 として読まれない (= scroll の最中に CTA が見えてしまうと、 思考が conversion mode に切り替わってしまう)。 masthead は最上部に 1 度だけ 表示。
根拠: Variant C 危険信号 「CTA 連発」。 PortalHeader は app 内 surface 専用 (本案は marketing site なので含めない)。
決定: chapter break は ··· (中点 3 つ) + 章番号、 罫線は引かない。
<hr> や色付き divider は essay の空気を壊す。 中点を letter-spacing: 1.5em で散らし、 下に章番号 (I/II/III/IV/FIN.) を Plex Mono で添える。 全体 margin clamp(5rem, 10vw, 9rem) で章間を意図的に大きく取り、 読み手の呼吸を作る。
根拠: Brief 「chapter breaks (---、 大きな margin)」 を、 罫線ではなく typographic ornament として実装。
3. 採用したトークン
すべて canon (kashi/src/app/globals.css + design_system_v1.md) から採用、 新規発明なし。
| token | variable | 使用箇所 |
|---|
| Evergreen | #1F3D33 | H1 / chapter-heading / lede / pullquote / closing CTA |
| Evergreen Deep | #244A3D | prose em (emphasis) / closing CTA hover |
| Cream | #F5F0E6 | page background (dominant) |
| Cream Deep | #EFE8D8 | figure-art background |
| Ink | #2A3A1E | body 本文 |
| Ink Soft | #4B5746 | byline / closing-prologue / figure-caption |
| Ink Faint | #7A8273 | eyebrow / meta / chapter break number / colophon |
Typography
- Fraunces — H1 (
clamp(2.75rem, 6vw, 4.75rem) ≒ 44-76px、 Brief の 60-80px 帯に desktop 上限で着地)、 chapter-heading、 lede、 pullquote、 closing CTA、 chapter-eyebrow (italic)、 figure-caption (italic)、 masthead-wordmark
- Zen Kaku Gothic New + IBM Plex Sans — JA + EN body
- IBM Plex Mono — eyebrow (序章番号、 T0/T+12、 meta、 colophon)。 essay に Mono を入れることで 「これは記事ではあるが、 同時に道具をつくる人たちが書いている」 という余韻を残す
4. 採用した evidence-grade 表現
決定: evidence-grade badge は置かない。
marketing top の essay は 製品画面ではない。 grade badge を読み物に差し込むと、 「これは製品の話」 という空気が立ち上がり、 essay として読まれなくなる。 grade 表現は product page (Variant C 第三章) に集約。
根拠: permanent-ui-principles §11 (evidence-grade は app surface に限定)。
5. 削った要素 (現状の Kashi top から)
現状 kashi/src/app/page.tsx の Section 1-7 を、 ほぼすべて削った。
- §1 split-pane hero + RotatingHeroViz — 動く viz と CTA 2 つは Variant C の essay tone とは矛盾。 削除し、 title block 1 つに置換。
- §1 governance chips × 3 — chip は scan UI。 essay の思考の流れを止める。 「しない」 ことの説明は本文 (一、 二章) で 地の文として 行う。
- §3 三つの数字 + PieChart/StepCost/DetectionTimeline mini viz — 数値駆動の説得は Variant A (大企業向け) に寄せる。 Variant C では数字を 1 つも置かない。 唯一の図は Fig.1 (構造的 drift) のみ、 これは illustrative art として置く。
- §4 Before/After parallel pills — 「Kashi がない世界 / Kashi がある世界」 は marketing claim として読まれる。 essay には合わない。
- §6 FAQ accordion — Q&A 形式は商談予約のための UI。 essay には合わない。
- §7 final CTA + WhyTeaser — CTA は末尾 1 つに統合 (= 読み進める)。
6. 追加した要素 (現状にない)
- opening-byline 「Kashi 編集部 · 2026 · 序章」 — 「これは誰が書いた、 いつの文章か」 を essay convention に従って示す。 note / Medium / The Verge / Stripe Press 等の long-form site で標準。
- lede first-letter (drop cap) — Fraunces で 3.5em のドロップキャップ。 「ここから本文が始まる」 ことを typography だけで宣言する古典手法。
- pullquote — essay の中心主張 「退職代行は末期症状ではないか」 を、 Fraunces italic + 2px evergreen 左罫で抜き出す。 scroll 中の読み手の目に 1 度だけ 強く引っかかるアンカー。
- Fig. 1 — structural drift SVG — Brief の 「data viz が art piece として、 写真ではなく」 を文字通り実装。 三本の線が同じ場所から始まり、 時間とともに離れていく抽象図。 数値を持たない、 純粋に illustrative。
- colophon chapter index — 末尾に 6 章の navigator。 「これは 6 章の連作だ」 ということを、 footer で 静かに 明示。
7. 既知のトレードオフ / 未解決
- Conversion を一切取りに行かない設計 — 「資料請求」 「商談予約」 が一切無いため、 大企業 RFP プロセス (Variant A の領域) には完全に不向き。 Variant C は 「思考好き読者→共感→自発的 contact」 のみを想定。 Justine がこの割り切りを許容するかが最大の判断点。
- 「読み進める」 CTA の遷移先が /why のみ — 直接 /contact や /pilot に飛びたい visitor の動線が、 colophon の小さい link だけになる。 これは意図 (essay として読まれること優先) だが、 「読まずに連絡したい人」 を取りこぼす。
- SEO / OGP — essay 形式は scan-friendly でない — 検索流入で 3 秒で離脱する visitor には、 この設計は 機能しない。 検索流入で取りたい場合は Variant A or B が適切。 Variant C は SNS / 知人紹介 / 投資家経由 referrals 向き。
- Fig. 1 が真意通り読まれない懸念 — 「内容ではなく構造」 という抽象を、 図 1 枚で伝えるのは難しい。 caption で補強したが、 「これ何の図?」 と感じる読者は残るはず。 implementation 時に animation (線が時間に沿って描かれていく) を追加すると説得力が増す。
- JA-only essay として書いた — EN locale 対応は実装フェーズで翻訳が必要。 Fraunces の italic は EN で美しいが、 JA italic は字形が一部崩れる font があるため、 「em」 タグは Fraunces (英数字主) で組んでいる。
8. canon lint 結果
- permanent-ui-principles §1 監視感 — eye / camera / 監視 / 検知 / 予測 / score / at-risk いずれも未使用 ✓
- §2 forbidden wording — 「健康度」 を 「健康度のような言葉も使わない」 として 明示的に否定する文脈でのみ 1 度言及。 これは canon 遵守の証明として意図的に入れた (本文第二章)。 「予測」 「検知」 も同様に否定文脈で 1 度ずつ言及 ✓
- §6 No-Signal rule — 「all clear」 「問題なし」 「健全」 等の overclaim 表現なし ✓
- §13 surveillance metaphor — eye / camera / police icon、 ならびに 「監視」 を肯定する文脈、 いずれも未使用 ✓
- CANONICAL_PRODUCT_TRUTH — structure-not-content を essay の主軸 (第一章) に据えた ✓
- Variant C 危険信号 — bullet list 本文未使用 (colophon の章 index のみ list) / CTA は末尾 1 つだけ / emoji ゼロ / 短い見出しの羅列なし ✓
9. 実装フェーズへの引き継ぎ
このモックアップを実装する際の注意:
- 該当する Kashi コード:
kashi/src/app/page.tsx (全面書き換え)。 ただし Variant C 採用時は、 「現状の 7 セクションを保ったまま essay 追加」 ではなく、 essay 1 本に置き換える 判断が必要。
- 削除候補コンポーネント:
RotatingHeroViz / PieChartMini / StepCostMini / DetectionTimelineMini / WhyTeaser / Before/After pills / FAQ FaqItem。 すべて Variant C では未使用。 (※ 他 variant or 他 page で使い続ける可能性があれば残す)
- 必要な新規コンポーネント:
EssayChapterBreak (中点 + 章番号)、 EssayFigure (cream-deep background + caption + meta)、 EssayPullQuote、 EssayLede (drop cap 対応)。 これらは Storybook 化して 6 章すべての page で共有可能。
- i18n: essay 本文を
messages/{en,ja}.json に格納する場合、 章ごとに key を top.chapter1.body1 形式で切る。 BudouX (JapaneseProse) はそのまま流用可能。
- SVG Fig. 1: viewBox 400x180 で書いたが、 実装時に
prefers-reduced-motion: no-preference 下で stroke-dasharray animation (線が左から右に描かれていく) を追加すると、 「対話が時間とともに drift する」 という主題が体感できる。
- r19 既存課題のうち本案で同時解決されるもの: 「CTA 過多」 「scan UI 過剰で読み物として機能していない」 「数字で殴る tone」 の 3 つは、 Variant C 採用で根本的に解決される。 ただし B2B 大企業向け conversion は別 page (/pilot or /contact) に逃がす必要がある。
- responsive: 1280 / 768 / 480 すべて検証済。 H1 は
clamp で連続スケール、 mobile では drop cap を 3em に縮小、 chapter break の letter-spacing を 1em に縮小。
10. Justine confirm 判断点 (再 hearing 用 1 つ)
判断点: 「読み進める」 1 個だけの CTA で、 共同創業者 / mentor / 投資家からの 「で、 どうすれば連絡できるの」 という声を、 colophon の小さい link で受けきれるか。
Variant C の最大の賭けは conversion friction を意図的に最大化 していること。 essay として読まれることを優先するために、 商談 CTA を完全に削った。 このトレードオフを Justine が許容するか、 あるいは 「末尾の closing にもう 1 つ、 quiet な 『話を聞きたい人へ』 を足す」 を選ぶか、 hearing で確認したい。