Design Decisions — why-now Variant B (ものすごく B2C)

現状の /why-now ページは大規模規制タイムライン (RegulatoryTimeline + LawDetailBlock + MappingTable) を中心に組まれており、 これは A 「ものすごく B2B」 極の素材として極めて優秀です。 B variant ではこれを 180° 反転させ、 「個人 Manager の生活感」 に寄せました。

Hero 一文目を 「あの 1on1 を、 もう一度やり直したいと思ったこと、 ありませんか」 にしたのは、 brief の variant B 仕様で指定された core copy をそのまま採用したものです。 法律や数字ではなく、 「金曜の夜の後悔」 という個人の感情記憶を最初の hook にすることで、 target reader (個人として 「自分のチームをよくしたい」 と思う Manager) の衝動的 buying mode に合わせています。

trace: brief.variant-B (target reader / tone / hero copy) ・ canon: permanent-ui-principles §7 (progressive disclosure) を story-arc 化で適用

brief の B 仕様 「1 列縦長スクロール、 hero に short message、 photo grid、 testimonial 引用」 を素直に展開。 多段グリッド (A 極の特徴) を一切使わず、 max-width 760px の読み物カラム + 1000px の small-moment grid のみ。

trace: brief.variant-B.layout

brief で 「large photography (laptop / コーヒー / 横顔)」 「warm photo」 が指定されているため、 hero に visual を据え置く必要がありました。 実際の photography は mockup 段階では準備できないので、 CSS gradient で 「夕方の机、 ノート PC とコーヒー、 manager の silhouette」 を抽象的に suggestion してあります。

実装 phase では、 ここに実写写真を入れる必要があります (推奨: 横顔 / 背中越し / 手元のショット、 顔正面は B2C overpromise の典型なので避ける)。

trace: brief.variant-B.visual (large photography) ・ canon: permanent-ui-principles §13 surveillance metaphor NG → 顔正面の凝視ショットは避ける指針も同居

B2C 極の特徴である 「friction 嫌い」 「衝動的」 buying mode に応えるため、 hero を抜けた瞬間に右下に固定 CTA が浮かびます。 これは A 極の 「sticky CTA バー (top)」 とは 意図的に違う形を選んでいます — A は heads-up「商談予約」 で常に視界、 B は story を邪魔しない位置で 「思い立ったら押せる」 状態。

Final CTA に交差したら自動で隠す (= 同じ画面に同じ CTA を 2 つ並べない)。

trace: brief.variant-B.buying-mode (衝動的、 5 分で sign-up) ・ JS は IntersectionObserver 1 つだけ

B 極は warmth と続き感が大事。 各セクションは背景色 (cream-warm / cream / gradient) を切り替えるだけで、 水平線や hard border は使わないことで、 「読み物がゆるやかに続いていく」 印象を出しています。

trace: brief.variant-B.visual (ample whitespace)

• --color-kashi-evergreen: #1F3D33 — nav CTA、 final CTA 背景、 link、 accent text
• --color-kashi-evergreen-deep: #244A3D — heading 色、 hover state
• --color-cream: #F5F0E6 — section background (why-today)
• --ink / --ink-soft / --ink-faint — 3 段階の本文色

• --color-cream-warm: #FAF5EC — cream をさらに 1 段明るく、 body 全体の背景
• --color-peach: #F4D3B8 — hero accent highlight、 story-moment の left border、 quote mark
• --color-peach-soft: #FAE5D2 — reason 番号バブル、 small-moment icon 背景
• --color-blush: #E8B89A — avatar gradient の deep 側

brief は B 極で 「warm colors (cream + peach、 emerald 控えめ)」 を明示的に許可しているため、 design_system_v1 の core palette を拡張する形で peach 系を追加しました。 これらは A 極では使わない (= 役割を明確化)。

trace: brief.variant-B.visual (warm colors cream + peach) ・ design_system_v1 cream を base に warmth を拡張

Hero は clamp(2.75rem, 6vw, 4.75rem) と通常より 1 段大きく取り、 letter-spacing を -0.015em で詰めて 「雑誌の見出し」 感を演出。 引用句 (story-moment, testimonial) は Zen Kaku Gothic New 400 + line-height 1.95 でゆったり、 日本語の余白を活かしています。

trace: brief.font (Fraunces + Zen Kaku Gothic New + IBM Plex Sans JP) ・ design_system_v1 type scale を踏襲しつつ B 極で hero のみ拡大

Evidence-grade (blocked / insufficient / weak / emerging / stable / high-confidence-stable) は、 アプリ内で個人の signal を表示する場面で使うトークンです。 why-now は marketing site なので、 ここに grade badge を持ち込むのは scope 違いであり、 また B 極の 「数値ではなく逸話」 という tone とも矛盾します。

代わりに 「ふんわりした peach の highlight」 「story-moment の左 border」 で 「個人の感情の重み」 を visually 表現しています。

trace: design_system_v1.evidence-grade (アプリ内の signal 表示用) と marketing site の scope 分離

現状ページの visual centerpiece。 B 極では完全に削除しました。 理由: 法規制タイムラインは 「企業の人事部長 / 法務 / 経営層」 が稟議書に貼るための素材であり、 B 極の target reader (個人 Manager / 若手) は 「来月の 1on1 をどうしよう」 という今日の解決を求めています。 法律の話は彼らにとって 「自分事ではない」 ノイズになる。

trace: brief.variant-B.danger-signal (数値だらけ、 ROI、 dense table 回避)

同上の理由で削除。 B 極では、 田中部長と山田さんの個人 story 1 本に集約。 法律名は一切出していません。

最も B2B 寄りの要素。 削除。

Pilot CTA を 「今すぐ無料で試す」 に置換、 PDF ダウンロード secondary を 「カジュアルに 15 分」 に置換。 PDF は B 極の readership にとっては friction なので、 hero の secondary には残さず、 final CTA の補足 link としてのみ存在。

trace: brief.variant-B.CTA (無料で試す / もっと知る / カジュアルに話を聞く)

brief 必須要素。 CSS gradient で 「夕方の机、 ノート PC、 コーヒー、 manager silhouette」 を suggestion。 実装 phase で実写写真に差し替える前提。 alt text に詳細を書いてあるので、 React 実装時に img 要素に置換しやすい。

brief の dummy data (demo株式会社、 田中部長 (営業 8 名)、 山田さん (営業 2 年目)) を使用。 個人名は出さず、 役割 + 仮名 で 「リアルだが匿名」 感を演出。 Story 構造: 「あとから思い返すと、 サインはあった気がするんです」 — 後悔の言語化が hero copy と対応関係になっている。

trace: brief.dummy-data (田中部長 / 山田さん) ・ B 極 tone (storytelling, emotion-driven)

Story と対をなす 「after」。 「監視されてる感じがまったくない、 むしろ自分の聞き方を振り返るきっかけ」 という文言は permanent-ui-principles §1 (監視感 NG) を反映した予防的 reassurance。 B 極の reader が抱きがちな 「これって監視 tool じゃないの?」 という不安を、 testimonial の自然な発話の中で先回りで打ち消しています。

trace: canon.permanent-ui-principles §1 (no surveillance) + B 極の testimonial pattern

B 極の reader は 「機能仕様」 ではなく 「いつ使うのか」 を知りたい。 1on1 のあと、 1on1 の準備、 チーム俯瞰の 3 場面のみ。 line icon は監視 metaphor を避けて 「会話バブル / 時計 / 人型 (背中側)」 の柔らかい線で統一。

末尾に 「※ 個人を採点したり、 メンバーに見せたりする機能はありません」 と明示。 これは canon §2 forbidden wording 領域 (健康スコア / 生産性スコア / at-risk) への先回り防御。

trace: canon.permanent-ui-principles §1 §2 §13 ・ canon.CANONICAL_PRODUCT_TRUTH (structure-not-content)

ページ全体は cream-warm の柔らかい reading 環境。 最後だけ evergreen-deep の暗背景にして 「ここで一旦立ち止まって、 押すかどうか決めよう」 という心理的切り替えを演出。 copy は 「いつかやろう、 を、 今日にしてみませんか」 — pushy ではなく softly nudging。

trace: brief.variant-B (CTA prominent + warm tone) ・ 強い圧迫感は避ける B 極の良識