Variant C の why-now ページは、 6 ページ通しの物語のなかで 第 2 章 「いま気づける時代がきた」 を担う essay。 第 1 章 (末期症状) を受けて、 「ではなぜ早く気づけるのか」 を 3 つの発想 (構造 / アービトラージ / longitudinal) で答え、 第 3 章 (Kashi が見せるもの) に渡す。 1 CTA、 約 1700 字、 7 分の読み物。
従って 「資料請求」 「導入事例 PDF」 「無料で試す」 のような能動 CTA は 1 つも置かない。 唯一の出口は 「次章へ進む」 だけ。 物語の続きを読むかどうかを読者に委ねる。
canonpermanent-ui-principles §6 No-Signal 原則の精神 (urgency の捏造をしない) を marketing tier にまで延長。 brief Variant C 「conversion ではなく共感と理解が目的」。
38rem (≈680px) の essay レイアウト。 サイドバー、 TOC、 関連記事、 シェアボタン、 progress bar——全て排除。
note / Medium / Stripe Press / Linear Manual に通底する 「読み物は読み物として完結する」 という思想。 副次要素は読書体験を細切れにする。 chapter ナビは上部 sticky nav に 1 行だけ残し、 本文中には侵入させない。
researchnote / NEW MODEL / Stripe Press / Ribbonfarm の long-form essay 慣例。 canondesign_system_v1 §6 「読み物体験を優先する」 (Lede tier)。
masthead で 「これは第 2 章である」 という位置情報 を最初に与える。 6 ページ通しの物語であることが分からないと、 essay 単体としては 「で、 結局何を売っているの?」 という焦りを生む。 「chapter 02 / 05」 「reading time 7 分」 「continues from 第 1 章」 の 3 つのメタを冒頭で置くのは note や Stratechery の慣例。
briefVariant C 「序章 / 第 1 章 / 第 2 章 ... の 6 ページ全体で 1 つの物語」。
「3 + 1」 構成。 3 つで発想を立て、 4 つ目で 「だからいま」 をまとめ、 次章へ。 §タグを Plex Mono で打って論文っぽさを少しだけ匂わせる (essay の信用補強)。 各 § のあいだに • 区切りの ornament break を挟んで 沈黙 を作る。
canonCANONICAL_PRODUCT_TRUTH 「structure-not-content」 → § 01 の核に直結。 brief「ナラティブのアービトラージ」 「longitudinal」 は user supplied core concepts。
| トークン | 値 | 採用箇所 |
|---|---|---|
--color-cream | #F5F0E6 | body 全域 background。 紙のぬくもりを essay tier で最大化。 |
--color-kashi-evergreen | #1F3D33 | masthead h1、 essay h2、 strong, 強調傍線、 chapter-end 背景。 |
--color-kashi-evergreen-deep | #244A3D | masthead h1 後半 (italic 部分)、 strong 文字色。 |
--ink | #2A3A1E | 本文 paragraph 既定。 |
--ink-soft | #4B5746 | subtitle、 caption の本体、 em タグ。 |
--ink-faint | #7A8273 | meta データ、 chapter-tag、 figure label、 footer colophon。 |
Fraunces 500 | display + h1 + h2 + pull quote | essay tier の最強の差別化点。 H1 は clamp(3rem, 7vw, 5.25rem) でデスクトップ ~84px まで。 |
Zen Kaku Gothic New | JA 本文 (font-family の 2 番目) | 本文の JA 漢字・かなレンダリングを担保。 Plex Sans JP の代替として CDN 軽量。 |
IBM Plex Mono 500 | § ナンバー、 chapter tag、 meta dt、 timeline date | essay 内の装置感を担当。 全体の serif/sans に対するアクセント。 |
Variant C は essay tier — 認知の濃淡が 1 色 (緑) + 1 紙 (cream) + 1 アクセント (mono) の 「3 色 + 3 書体」 で完結することが 静けさ の証になる。 emerald を入れると 「サービスサイト」 っぽさが立つ。
canonkashi/docs/design/design_system_v1.md emerald は data viz 用の補助色という解釈。 essay tier では abstain。
why-now は marketing essay であり、 product surface ではない。 evidence-grade は実データ (1on1 構造ログ) の確からしさを示すもので、 概念紹介ページに badge を撒くと 意味のインフレ が起きる。 product 第 3 章 (B/C 別作業) で初めて登場させるのが正しい順序。
canonpermanent-ui-principles §11 「evidence-grade は always color + text label、 装飾としては使わない」 = essay tier では完全に手前。
| 現状の要素 | 削除可否 | 理由 |
|---|---|---|
| RegulatoryTimeline (3 lane × marker plot、 視覚中央) | 削った | essay tier では timeline は 引用 として § 04 closing 本文の中で言及するに留めた (「ハラスメント防止法改正、 SSBJ 開示義務、 ストレスチェック対象拡大が同時期に揃った」)。 Visual centerpiece の地位は essay 自身に譲る。 Variant A/B では timeline を残す想定。 |
| 4 LawDetailBlocks (kasuhara / disclosure / stressCheck / psychologicalSafety) | 削った | 同上。 制度詳細は essay の流れを止める。 「もっと知りたい」 読者は 第 3 章 (product) で具体に降りる前提。 |
| MappingTable (規制 × Kashi 機能の交差表) | 削った | 表は essay の rhythm を断ち切る。 「規制への対応」 を売り言葉にしない、 という Variant C の tone とも矛盾する。 |
| CTA pair (Pilot CTA + PDF download) | 1 つに削減 | 「次章へ進む」 が primary、 「直接話したい」 が secondary (本文 link 1 行)。 PDF DL は撤去。 |
| 追加要素 | 根拠 / 出所 |
|---|---|
| Chapter masthead (chapter-tag + Reading time + Continues from) | note / Stratechery / Stripe Press の essay opening pattern。 6 ページ通しで読む読者に位置情報を返す。 |
| Drop cap (本文最初の文字を Fraunces で大きく) | 長文 essay の冒頭装置。 NEW MODEL / The Browser Company manifesto / Stripe Press のいずれにも採用例あり。 Variant C のみの装飾で、 A/B では使わない。 |
| Pull quote 2 つ (Fraunces italic 大、 evergreen ストライプ) | essay の 息継ぎ を作るための慣例装置。 章の核を本文外で再提示することで読者の記憶に残す。 |
| Fig 1 (構造 vs 内容 2 列比較) | § 01 の言葉だけでは pure abstract になる箇所を、 art piece としての data viz で受ける (写真ではない、 ということが Variant C の旨)。 中身は mock データ (発話量の bar)。 |
| Fig 2 (longitudinal timeline: 田中部長 × 山田さん 1on1 質問往復 5 回分) | § 03 の核 「縦に重ねる」 を 1 図で示す。 dummy 顧客 (demo株式会社) の dummy data。 「12 → 9 → 6 → 4 → 2」 という減少曲線で 静かに減っている 感覚を視覚化。 |
| •型 chapter break (Fraunces ドット) | 長い essay の sectioning に使う伝統的 typographic ornament。 hr の代わりに 沈黙 を担当。 |
| Chapter-end (evergreen 背景の闇セクション + 1 CTA) | 「物語の継続」 を視覚で区切る。 cream のなかに緑の終止符が立つ印象。 Variant A の 「sticky CTA バー」、 Variant B の 「無料で試すボタン連発」 とは真逆の体験。 |
permanent-ui-principles §2 forbidden wording 7 語 (「検知」「予測」「健康スコア」「生産性スコア」「at-risk」「監視」「リスク判定」) は本文に 0 件。
明示的に 誠実 「中身に踏み込まない」 「申告ではなく流れ」 という反監視ステートメントを本文に組み込んだ (§ 01, § 02)。 Variant C の自由度のなかでも、 ここは canon を能動的に強化する書き方を選んだ。
canonpermanent-ui-principles §1 §2 §6 §13。 canonCANONICAL_PRODUCT_TRUTH 「structure-not-content」 を § 01 の見出しに直接昇格。
田中部長 (営業マネージャー)、 山田さん (営業メンバー、 2 年目) のみVariant A (大手企業) と比べて、 商談化までの行動誘導は最弱。 「資料請求」 「ホワイトペーパー DL」 のような中間 CTA がないので、 sales hub への流入導線として弱い。 これは 仕様 としてそう設計している (brief 通り)。 評価軸として 「次章クリック率」 「読了率」 「コンタクトフォーム最終到達率」 を別立てで持つ前提。
scrolling 中断率は high。 Reading time 7 分の essay は読者を選ぶ。 ペルソナ仮説 (思考好きの founders / VC / メディア / デザイナー) と合致する読者には強く刺さるが、 大手 HR 部長は読み終わらない可能性がある。 Variant A が補完すべき領域。
現行 page の RegulatoryTimeline は why-now の最大の sales artifact だが、 Variant C では § 04 closing で 3 行に圧縮した。 規制を 「売り言葉」 にしないという tone のためだが、 「結局いつまでに何をすれば」 という商談者の問いには答えられない。 Variant A/B で timeline を残す前提でこそ成り立つ分業。
「山田さんの 1on1 質問が 12 から 2 に減った」 という data point を essay 本文の図で開示すること自体に、 「個人を時間軸で監視している」 という読まれ方の余地が残る。 mitigations として:
canonpermanent-ui-principles §1 §13 surveillance metaphor NG。
このモックアップを React/Next.js 実装する際の注意:
kashi/src/app/why-now/page.tsx (現行はデータ駆動 sales artifact。 Variant C 採用なら完全別 route または同 route 内 layout switch)@/components/sales-hub — Variant C では Section/Container を使わないので、 essay 専用の薄い Wrapper を新規追加 (EssayChapter, EssayPullQuote, EssayFigure, ChapterEnd)@/components/why-now (RegulatoryTimeline / LawDetailBlock / MappingTable) — Variant C ではすべて非利用。 削除ではなく Variant A 用に保持。<ChapterMasthead chapter={2} of={5} readingTime={7} continuesFrom={"/why"} /><EssayBody> (max-width 38rem、 drop cap optional)<EssayPullQuote cite={...}>...</EssayPullQuote><EssayFigure label="Fig 1" caption="...">...</EssayFigure><ChapterBreak /> (• ornament)<ChapterEnd nextChapter={3} nextTitle={...} body={...} />whyNow.essay.section01.paragraphs[0..N] のような配列 schema を新設する。 既存の whyNow.hero / whyNow.timeline / whyNow.blocks / whyNow.mapping は Variant A 用として保留。 verbatim test pinning が 39 ファイル走っているので (LESSONS 参照)、 新 namespace 追加時は pre-commit hook で全 reader を auto-discover する仕組みに乗せる。{ paragraphs: [...] } array を維持するか、 別途設計判断要 (Justine の翻訳・改修サイクルの頻度次第)。::first-letter 3.6em + float) は JA 漢字に対して安全だが、 句読点 「、 」 から始まる段落では崩れる。 lede 段落の冒頭が必ず漢字またはカタカナで始まることを実装時保証。05 は brief の 5 章構成 (top=序章, why=第1, why-now=第2, product=第3, pilot=第4, contact=第5) に整合。 もし top が 「序章」 でカウント外なら 「02 / 04」 に直すこと。 現状 brief の 6 ページを 「序章 + 4 章」 で数えた。