Design Decisions — product (Variant C)

ROUND 001 · STORYTELLING / NOTE-STYLE · CHAPTER 03 / 05 · GENERATED BY kashi-ui-mockupper

Picked variant: C (全く別の記事主体 / ストーリー型サイト / note 風)。 6 ページ全体で 1 つの物語を構成するうち、 本 page は 第 3 章 「Kashi が見せるもの: 内容ではなく構造」 にあたる。 ターゲットは思考好きの読者 (オピニオンリーダー、 投資家、 メディア、 デザイナー、 founders)、 conversion ではなく 共感と理解 が目的。 全体で 約 2,300 字 (要件 1500-2500 字に合致)、 末尾に 1 CTA のみ。

1. 主タスクと上位構造

決定: ロングフォーム essay 1 列、 max-width 680px、 構造を 「膜 (membrane)」 として比喩する物語形式で書く。

機能リスト・スクリーンショット羅列ではなく、 「Kashi が 何を見せ、 何を見せないか」 を 設計者の独白 として綴ることを選んだ。 既存 /product/page.tsx は カード × 9 セクション (kicker / 数値 KPI / 失敗 3 カード / demo 分岐 / 評価 / 信頼境界 3 カード) という構造主導の SaaS 文法だが、 Variant C ではそれを完全に逆転 — 同じ情報量を 「散文」 として再構成 する。 これは brief §C 「思考的、 narrative、 長くても読み切られる」 への忠実な実装。

記事構成: (1) 内容/構造の定義 → (2) Fig.01 「膜」 図 → (3) なぜ内容を見せないか (倫理 + 実用) → (4) 引用 (顕微鏡ではなく体温計) → (5) Fig.02 「層」 図 — 誰がどこまで見えるか → (6) 段階表現の話 (evidence-grade label) → (7) 設計上の境界 (boundary block) → (8) 結語。

canon: permanent-ui-principles §1 (監視感 NG) / §6 (No-Signal rule) / §13 (surveillance metaphor NG) — 「監視感」 という現代の不安 を、 essay 内で 「膜 (membrane)」 として再フレーミング

2. レイアウト / タイポグラフィ

決定: max-width 680px (本文)、 920px (図のみ bleed)、 cream background dominant、 Fraunces 大見出し 64px。

note / Medium / The Atlantic の長文記事 UI を参照。 1 列縦長スクロール、 chapter break ornament (• • •) を 6 箇所、 H2 前に 80px の縦余白で 「呼吸」 を確保。 H1 は Fraunces regular (weight 400) で italic mixed (「Kashi が見せるもの。 / 内容ではなく、 構造を。」) — タイトルが statement ではなく つぶやき として読まれるように weight を抑えた。

canon: design_system_v1.md typography scale (Fraunces 大見出し許容) / globals.css は厳密遵守ではなく、 brief 「variant ごとに strict 度合いが違ってよい」 に従い long-form essay 用に line-height を 1.85-2.0 まで拡大

決定: drop-cap (Fraunces 64px) を 1 段落目に使用。

note の標準にはないが、 New Yorker / Harper's の長文 essay 慣習。 「これは記事である、 読み物として入ってください」 という signaling。 H1 と drop-cap が一致しているので 「広告ページではなく文章」 という認識が冒頭 1 秒で形成される。

参考: Aspen Institute, Wired long-reads, note 連載エッセイ

3. 採用したトークン

採用カラー

canon: globals.css 完全準拠 (新規 cream-soft / cream-paper は dominant cream の OKLCH 数値内合成 — 新規 token としては export せず、 mockup 限定の派生)

採用タイポ

canon: design_system_v1.md fluid type scale + Zen Kaku Gothic New (JA 本文)

4. 採用した evidence-grade 表現

採用: 全 6 段階のうち、 essay 中で 4 段階を inline で説明 + Fig.01 で 1 段階 (EMERGING) を例示。

BLOCKED / HIGH_CONFIDENCE_STABLE は essay の流れで言及せず割愛 (説明過多を避ける)。 すべて 色 + テキストラベル 併記 (color alone NG / 色覚配慮 — canon 厳守)。 essay 内の inline pill は globals.css の grade color と一致。

canon: globals.css --kashi-grade-* + permanent-ui-principles §13 (色覚アクセシビリティ)

5. 削った要素 (現状の /product から)

理由: brief §C 「bullet list 多用 / CTA 連発 / 短い見出しの羅列 NG」 + 「conversion ではなく共感と理解が目的」

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

追加: chapter-meta block (CHAPTER 03 / 5)、 byline (読了 8 分)、 drop-cap、 chapter-break ornament、 mid-page illustrative figures (Fig.01 / Fig.02)、 boundary block (設計上の境界)、 closing CTA single、 全章 TOC section。

Fig.01 「内容 vs 構造の膜」 は本章の 視覚的論文。 左に 化された transcript (内容は灰色 + ink-faint で 「見えない」 ことを示すために塗りつぶし)、 右に 4 つの構造指標 + EMERGING grade badge、 中央に縦点線 + 「膜 / membrane」 ラベル。 SaaS 製品ページの慣習 (スクリーンショット) ではなく、 図式化された設計思想 として記事中盤に置く (note 連載で図解が文中央に来る慣習に倣う)。

Fig.02 「層別 visibility」 は permanent-ui-principles §3 (data visibility matrix) の 絵による翻訳。 SELF (個人) → membrane → MANAGER → membrane → HR → membrane → CxO。 「膜」 の概念を反復することで Fig.01 と理論的に接続。 SELF 層だけ cream-soft で highlight (本人の視点から記事が書かれている、 という暗示)。

参考: note / 中央公論 / The Atlantic の挿絵慣習 / Kashi DATA_VISIBILITY_MATRIX (役割別データ可視性)

追加: 「膜 (membrane)」 という独自の比喩語

「データ境界」 「アクセス制御」 のような技術語を意図的に避け、 透けない膜 という生物学的・物理的なメタファーを採用。 essay 体で読者がイメージしやすく、 かつ surveillance icon (eye/camera) を回避できる代替表現として機能する。 Justine 確認候補: 「膜 / membrane」 を Kashi の正式な設計用語として canon 昇格するか?

canon: permanent-ui-principles §13 (eye/camera/police icon 禁止) — その代替として有機的メタファーを提示

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

トレードオフ:

8. canon lint チェック (self-audit)

permanent-ui-principles 全項目 self-audit:

9. Justine 確認候補 (気になりそうな choice)

1. 「膜 / membrane」 を Kashi の正式な設計用語として promote するか?

Variant C で導入した 「会話の内容と構造を分ける透けない膜」 という比喩は、 共同創業者・投資家・デザイナー読者には響くが、 大企業 HR 部長 (Variant A 読者) には抽象すぎる可能性。 → permanent-ui-principles に正式記載するか、 Variant C 限定の語彙にとどめるかの判断が必要。

2. essay 体で 「過去に検討した別案を否定する」 開示はどこまで許されるか?

「初期にはそう考えた時期があった。 けれど、 ふたつの理由で、 そこには戻らないと決めた」 という告白調を採用。 透明性の signaling として強い武器だが、 投資家には 製品の確信のなさ として読まれるリスクもある。 → 共同創業者・投資家ヒアリングで反応を確認すべき。

3. closing CTA を 「第 4 章を読む」 1 個のみに絞った件

「資料請求」 「商談」 「demo を見る」 を一切置かず、 物語の続きを読ませる動線のみ。 これは brief §C 「CTA 連発 NG」 への忠実な実装だが、 製品ページとして 「次の行動 = 第 4 章を読む」 がビジネス的にやりすぎかどうか、 Justine 判断を仰ぎたい。 (Variant A/B では当然 demo / pilot 申込が CTA になる)

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

Variant C を採用する場合、 React/Next.js 実装で考慮すべきポイント:

11. ファイル仕様