Design Decisions — why / Variant C (story · note) — Round 1
surface: why · variant: C (long-form essay / note 風) · round: 1 · author: kashi-ui-mockupper · target: founders / opinion leaders / investors / 思考好きの読者
本ドキュメントは /site/why/C/index.html に書かれた mockup の設計判断を、 future-self (実装担当 React engineer) と Justine (共同創業者 hearing) の両方に向けて trace するためのもの。 全 brand tone は brief で 「全く別の記事主体 / ストーリー型サイト (note / Medium 型)」 と指定された Variant C を採用。
1. 主タスクと上位構造
決定: why page を 「全 6 ページの連作の第 1 章」 として読ませる long-form essay にした。
brief で 6 ページ全体が manifesto → 第1章 (why) → 第2章 (why-now) → 第3章 (product) → 第4章 (pilot) → 第5章 (contact) という章立ての 1 つの物語、 と指定されている。 第 1 章のテーマは 「退職代行という末期症状: なぜ手遅れになるのか」。
従って、 本 mockup は:
- masthead に大きく 「退職代行という、 末期症状。」 を据え、 雑誌の記事扉のような体裁を取る
- conversion ではなく 共感と理解 を目的にし、 CTA は記事末に控えめに 1 つ (= 「→ 第 2 章 へ」) だけ置く
- サブナビや sticky CTA は置かない。 読み物は 「読み切ってもらう」 ことが KPI
brief.txt §C target reader / buying mode / 「conversion ではなく共感と理解」 / 「sign-up は記事の末尾に控えめに 1 つ」
2. レイアウト
決定: 1 列縦組み、 reading column = max-width 680px、 cream 1 色背景、 mid-page だけ full-bleed の data viz を 1 枚挿入。
- 本文 line-length は 680px → 日本語で 約 38-40 字/行、 読書最適
- 背景は cream
#F5F0E6 1 色 (Section ごとに白に切る site/A 案とは明確に差別化)。 雑誌の紙の質感に寄せた
- サブ navigation (sticky anchor) は 意図的に外した — Variant A/B が dense sticky を持つので、 C はその対極として 「最初から最後まで線形に読ませる」
- mid-page の data viz figure だけ
margin: 4rem calc(50% - 50vw) で full-bleed させ、 内側に 880px cream-deep のキャンバスを敷いて 「記事に挟まれた art piece」 として演出。 本文の流れを 1 度だけブレイクする
brief.txt §C 「1 列読み物、 max-width 680px (読みやすさ優先)、 chapter ごとに lede + body」 / 「mid-page illustrative imagery (data viz が art piece として)」
3. 採用したトークン
| token | 値 | 使い所 |
|---|
| --color-kashi-evergreen | #1F3D33 | H1 / H2 / wordmark / pullquote / 強調 strong / chart 主線 |
| --color-kashi-evergreen-deep | #244A3D | title の italic accent (「末期症状」)、 annotation 線 |
| --color-cream | #F5F0E6 | body 全面背景 |
| --color-cream-deep (派生) | #EDE5D2 | viz figure 内側のキャンバス。 cream に対する 1 段深さで art piece 化 |
| --ink | #2A3A1E | 本文文字色 |
| --ink-soft | #4B5746 | subtitle、 quiet paragraph、 caption |
| --ink-faint / quiet | #7A8273 / #9aa093 | chapter-num、 メタ情報、 viz の軸ラベル |
Emerald #047857 は意図的に使っていない。 brief で 「emerald 控えめ」 の guideline、 かつ評価 grade を出さない記事面なので、 evergreen 1 系統 + ink グラデーションだけで色数を絞った。 これにより note / 雑誌的な品位を維持しつつ、 brand 色の 「深い緑」 1 点だけが読者の目に残る設計。
Typography 比率: Fraunces (serif) = タイトル / 見出し / lede / pullquote / italic accent。 IBM Plex Sans = 本文。 Zen Kaku Gothic New = 日本語 fallback (Fraunces には JA 字形が無いので serif h1 でも JA 部分は Zen Kaku が拾う)。 IBM Plex Mono = chapter number / metadata / viz の軸ラベル。 H1 は clamp(2.6rem, 6.5vw, 4.5rem) = 最大 72px、 brief 指定の 「60-80px」 内に着地。
4. 採用した evidence-grade 表現
決定: evidence-grade badge は本 page では 1 つも出さない。
why page は 記事 (説得) であって 製品画面 (観測値) ではない。 evidence-grade trust badge は dashboard / report 画面で signal の確度を示すための情報設計装置であり、 marketing 記事に貼ると逆効果 (= 「数値で説得しに来ている」 と読まれる)。
その代わり、 mid-page の data viz には illustrative · 退職に至るまでの「対話の濃度」 という eyebrow を mono タイポで明示し、 caption にも 「illustrative — Kashi 試作モデルによる構造可視化のスケッチ」 と書いた。 これにより 「これは観測実値ではなく概念図である」 ことを transparent に伝える。
design canon §6 No-Signal rule (色だけでなく label を必ず添える) の精神を、 marketing 文脈に翻訳: 「概念図」 と明記することで「実測グラフ」 と誤読されるリスクを潰す
5. 削った要素 (現状の Kashi /why から)
現状の kashi/src/app/why/page.tsx は 8 sections の sales hub long-scroll (Hero / Problem / Comparison / Architecture / Talkable / Numbers / Philosophy / Pilot) + sticky anchor nav という構成。 これを Variant C は意図的に再構成しないで、 大部分を削った。 削った要素と理由:
- StickyAnchorNav — 削除。 章は線形に読まれることが目的なので、 「飛ばし読み」 装置を最初から提示しない
- ComparisonTable (5 列 × 5 行のサーベイ/360/ONA 比較表) — 削除。 比較は競合検討者向けの装置。 記事読者には不要。 必要なら第 2 章 (why-now) や第 3 章 (product) で別形態 (本文中の対比 1 段落) として再登場させる選択肢を残した
- 4 LayerCard グリッド (Individual / Team / Manager / Org の architecture viz) — 削除。 製品の見え方は第 3 章 (product) の役割
- PersonaColumn 3 列 (HR / Exec / Manager の talkable list) — 削除。 これは Variant A (B2B) のための要素
- StatCallout 5 個のスタッツ大字 (5 件の出典付き) — 削除。 ただし 16.6% という退職代行利用率は本文の中に 「6 人に 1 人だ」 と物語の一節として埋め込んだ。 数値を独立した装置として並べないことで 「説得する記事」 ではなく 「観察を共有する記事」 のトーンになる
- Philosophy ink-tone section (ダーク背景の 2-card) — 削除。 章末の quiet paragraph がこの役割を兼ねる
- PilotCTA banner / 「商談予約」 系 CTA — 削除。 brief 指定通り、 末尾の 「→ 第 2 章 へ」 1 つだけに集約
6. 追加した要素 (現状の Kashi /why に無い)
- 記事扉 (masthead) としての chapter number + serif italic accent — 「第 1 章 / 退職代行という、 末期症状。」 を雑誌の章扉として確立。 italic の 「末期症状」 が視線の起点
- drop-cap (lede の先頭文字を Fraunces で巨大化) — 古典的な記事冒頭の装飾。 「ここから読み物が始まる」 ことを身体感覚に訴える
- full-bleed mid-page data viz (illustrative) — 本文 6 ヶ月分の対話濃度減衰を、 数値ではなく 線の本数と長さ の漸減で表現。 「気づけたはずの長い時間」 + 「もう手が届かない」 の 2 つの annotation を Fraunces italic で添えることで、 グラフ自体が文章のリズムに馴染む。 SVG 直書きで外部依存ゼロ
- pull quote — 「問題は、 サインが弱いことではない。 サインを 「サイン」 と認めない、 その文法の方にある。」 を本文中盤に 1 つ。 雑誌のリズム作り
- 章末 「· · ·」 オーナメント + quiet paragraph 2 段 — 本文の余韻を残してから次章リンクへ繋ぐ。 emotional release のための間
- 次章リンク 1 つだけ (「→ 第 2 章 いま、 気づける時代がきた」) — brief 指定通り、 CTA は 1 つだけ
- colophon (記事末の小さなタグライン) — 「Kashi · 対話を、 続けるために。」 + 「序章へ戻る」 「目次」 の 2 link のみ
7. canon lint (forbidden wording / surveillance / no-signal)
| check | rule source | result |
|---|
| 「検知」 「予測」 「at-risk」 「健康スコア」 「生産性スコア」 を本文に使わない | permanent-ui-principles.md §2 | PASS — 一度も使用していない (退職代行・末期症状・対話不全・関係の細り などの記述に置き換えた) |
| 監視 metaphor (eye / camera / police icon) を使わない | permanent-ui-principles.md §13 | PASS — icon 自体ゼロ。 viz も 「鏡 (見直す道具)」 として明文化 |
| 「all clear / 問題なし」 のような No-Signal 表現を使わない | permanent-ui-principles.md §6 | PASS — 該当無し。 むしろ 「無いことを観察する」 が本文の主題 |
| structure-not-content (内容ではなく構造を見る) を明示する | CANONICAL_PRODUCT_TRUTH.md | PASS — §4 「中身を読まずに、 関係の形を見る」 で 1 段落割いて明示 |
| data viz が 「予測」 ではなく 「観察」 と読める | UI principles 監視感 NG | PASS — viz title 「気づけたはずの時間は、 ずっと長く続いていた」 (= 後から振り返る図、 予測ではない) |
| 個人スコア / ランキング表示無し | permanent-ui-principles.md §1 | PASS — 数値は退職代行利用率 (世論統計) 1 つのみ |
| 役職の二人称呼びかけ / 「あなたを評価」 系の言葉なし | permanent-ui-principles.md | PASS — 視点はマネジャー (田中部長) と本人 (山田さん) の物語、 読者を直接判定する語りなし |
| 仮想顧客 placeholder の使用 (実名なし) | brief.txt dummy data | PASS — 田中部長 / 山田さん / demo株式会社 想定の物語、 実名なし |
canon lint: 全項目 PASS。 ただし 「対話不全」 「末期症状」 「対話の細り」 などは Kashi の forbidden list には入っていないが、 共同創業者 hearing 時に表現の強度をチェックしたい (= §9 参照)。
8. 既知のトレードオフ / 未解決
- SEO / 検索流入が極端に弱い構造: H1 が単一、 sticky anchor 無し、 サーベイ比較表無し、 内部リンクほぼ無し。 オーガニック流入を狙うページではなく、 SNS / メディア / 直接シェアで流入 → 読み切ってもらう設計。 Variant A (B2B) が SEO 担当する想定
- 「16.6%」 以外の数値が本文に無い: 物語性を優先したため、 サーベイ × 360 × ONA の比較や、 5 つの StatCallout は削った。 説得性のある reference として外部記事を読んだ層には響くが、 「数字を見ないと信用しない」 層には弱い。 → Variant A で代替
- 退職代行の利用率 16.6% の正確な出典が本文中に脚注として無い: 雑誌的トーンを保つため脚注は付けなかったが、 実装時には footnote / source ribbon を追加する選択肢を検討すべき。 ROUND 2 で 「出典の出し方」 を Justine と決める
- 本文 1500-2500 字相当の brief 指定に対して、 本文だけで約 2200 字に着地 (lede + body 計、 viz caption / colophon 除く)。 範囲内だが、 読了 8 分のメタ表示は実測してから調整候補
- 「末期症状」 という強い言葉: 物語の起点としての強度はあるが、 共同創業者の中で 「強すぎる / 患者扱いに聞こえる」 と感じる方がいるかもしれない。 Justine confirm 必須 (= §9)
- mid-page data viz の「線の漸減」 表現は SVG 直書き: 実装時に Recharts / D3 で動的化するなら、 「観測実値が無い段階でも illustrative としてどう出すか」 を別途設計が必要。 Recharts の `LineChart` ではこの 「線が減っていく」 表現は難しい (棒 group の方が自然)
9. Justine confirm 判断点 (hearing で聞きたいこと)
- 「退職代行という、 末期症状。」 という title の強度は、 OK か、 強すぎるか。 (代替候補: 「退職代行が、 ふつうになった日」 「電話が鳴る朝」 など)
- 「末期症状」 「対話不全」 という言葉を Kashi の公式語彙にしてよいか。 (もし不採用なら、 本文に登場する語彙の代替を確定したい)
- mid-page の illustrative viz は OK か、 それとも 「実観測の例」 にしたいか。 (実観測ベースにするなら demo tenant の合成データから書き起こす必要)
- 章末の次章リンクが 1 つだけ (= 「→ 第 2 章」) で良いか。 conversion 系 CTA (「pilot 申し込み」 「資料請求」) を末尾に 絶対に 置かなくて良いと再確認したい (brief は控えめ 1 つと指定、 これに従っているが意思決定の最終確認)
- 共同創業者 hearing で 「これは note にそのまま投稿できそうですね」 と反応が出るのが理想。 出ない場合、 何が雑誌っぽさを削いでいるか feedback を取りたい
- 本文中の数値 (16.6%) を残すか、 削るか。 残す場合は出典脚注必須にするか
10. 実装フェーズへの引き継ぎ
このモックアップを React (Next.js) に移植する際の注意:
- 該当する Kashi コード:
kashi/src/app/why/page.tsx (現状 8-section sales hub 構成)
- 影響を受ける共有コンポーネント:
StickyAnchorNav ComparisonTable StatCallout LayerCard PersonaColumn はこの variant では 未使用。 削除ではなく optional 化が望ましい (他の variant や他 page で使うかもしれない)
- 必要な新規コンポーネント:
ChapterMasthead (chapter-num + serif title + italic accent + subtitle + byline meta)ProseDropCap (lede paragraph 用、 first-letter で Fraunces 大文字化。 JA でも動くか要検証 — Zen Kaku の first-letter は CSS 仕様上 1 字を拾うが ::first-letter の挙動は ブラウザ差あり)PullQuote (border-top/bottom + Fraunces italic + 短い水平線アクセント)IllustrativeFigure (full-bleed + cream-deep inner canvas + eyebrow + title + svg slot + caption with `source:` line)NextChapterLink (eyebrow + serif h2 + 矢印、 hover で矢印 transform)
- i18n: 本 mockup は 100% JA。 EN 版を作る場合、 Fraunces 単体で完結するので fonts は簡素化できる。 一方 「末期症状」 「対話不全」 はそのまま英訳しないこと (「terminal-stage symptom」 は強すぎ)。 EN は別の物語の組み立てが要る。 messages/{ja,en}.json で 「whyEssay」 namespace を切り、 prose は配列にしない (HTML/MDX が望ましい)
- typography v1 (Fraunces / Zen Kaku / Plex) は既に landed 済み (memory 参照)、 そのまま使える
- SEO meta: og:image を別 brief で発注 (illustrative viz を OGP 化すると映える)
- パフォーマンス: 本 page は SVG 直書きのみ + 外部画像ゼロ。 LCP は H1 title。 font preload は Fraunces variable のみで十分
- r19 既存課題のうち本案で同時解決されるもの: 「why page が dense すぎて読了率が低い」 という UX 仮説に対するカウンター案として記録される
11. responsive baseline 確認
- 1280px desktop: max-width 680px の reading column が中央寄せ、 余白たっぷり。 viz figure は 880px (内側) で full-bleed
- 768px tablet: reading column が viewport の gutter (2rem) を取って自然に伸縮。 viz の svg は viewBox 維持で縮小
- 540px 以下: nav-links 非表示 (wordmark のみ)、 masthead padding 縮小、 viz inner padding 縮小
- 375px mobile: 本文 line-length 約 36 字、 H1 は clamp で 2.6rem まで縮む、 読みやすさ維持
- prefers-reduced-motion: ホバー transition を全て無効化
end of decisions doc · file: /Users/justineacaylar/Kashi-project/workspace/strategy/ui-redesign/ROUND_001/site/why/C/DESIGN_DECISIONS.html