一言で: 「あなたへの、 やさしい個人ツール」 のトーン。
20-40 代の Manager / 若手 が、 朝のコーヒーを淹れながら 5 分でサインアップしたくなる、 warm + emotional + first-person + 1 列縦長 + 大きな photo の B2C コンシューマー型 landing page。
個人 Manager は稟議も比較表も読まない。 「読み続けたい」 「やってみたい」 と感じた瞬間に CTA が目に入ること、 を上位構造とした。 hero / 写真 / 個人的な共感 (story) / 声 / 3 つの感覚 / 30 秒診断 / 物語 (scenario) / FAQ / final CTA の 9 セクション、 すべて 1 列縦スクロール、 max-width 720px (読み物幅)。
brief Variant B 「1 列縦長スクロール、 hero に short message」
情報密度の高い B 案 (大企業向け 3-4 列 dense) と完全に対極。 1 ページ全体で 「読み物」 「写真集」 のリズム。 hero → photo band → story と、 視線が 1 列で進むので、 集中力の低い忙しい Manager でも 「下にスクロール」 で next action がわかる。
brief 「ample whitespace」 + 「emotion-driven」
本来の Variant B 仕様では 「大きな photo」 が中心。 mockup では実在の人物写真を使えないので (real-world person data NG)、 1 セクション専用 「photo band」 を作って、 SVG inline で コーヒーカップ + ノート PC + 朝の机 のシーンを描画。 写真の代理として 「warm imagery」 のテンソンを保つ。
caption: 「朝、 コーヒーを淹れながら、 ふとチームのことを考える時間に」 — シーンの読み手の生活時間を hero に重ねている。
brief 「large photography (laptop / コーヒー / 横顔)」 — placeholder で替えただけで意図は同じ
--cream-soft #FBF7EF — body 全体の base background--cream-deep #F5F0E6 — canon の --color-cream、 ある section に variation として--peach-light #FDE9DA — alt section の背景、 hero blob--peach #F8CFB0 — quote-mark、 アクセント装飾--peach-deep #E89B6F — eyebrow text、 accent inline、 scenario dot--color-kashi-evergreen #1F3D33 — primary CTA、 diagnostic セクション、 footer、 wordmarkbrief 仕様: 「cream + peach、 emerald 控えめ」 を厳格に。 evergreen は 「最後の coversion 行動」 と 「diagnostic セクション全面」 にだけ強く使い、 それ以外は warm tone で占める。
brief 「warm colors (cream + peach、 emerald 控えめ)」 / design_system_v1 evergreen + cream はトークン採用、 peach は variant 内で新規拡張 (B2C 極のため)
canon の typography は維持 (Fraunces + Zen Kaku + Plex)。 一方で:
italic アクセント (「何が起きているか」) — 雑誌的、 個人的なトーンline-height: 1.75-1.85 と通常より広く。 「読み物」 として呼吸させるcanon は守りつつ、 トーンを 「機能的」 から 「文学的・優しい」 にシフト。
design_system_v1 Fraunces + Zen Kaku + Plex 維持。 italic + size 拡大は variant 表現
個人 Manager 向けに 「データ精度のレッテル」 を見せると、 一気に 「監視ツール」 感が出る。 brief 仕様の 「数値少なめ」 「emotion-driven」 と直接対立する。
Variant A (B2B) では grade バッジを多用するが、 B では 完全に外し、 代わりに 「使ってくれた人の声」 「scenario story」 で信頼を作る。 mockup-only スコープで、 もし将来 product 内に進むときは grade バッジを再導入することになるが、 marketing top では出さない。
permanent-ui-principles evidence-grade はあくまで product 内の判断軸。 marketing で投影するのは過剰
現状 top の PieChartMini / StepCostMini / DetectionTimelineMini 3 つの NumberCard をすべて削除。 「presenteeism amount」 「離職コスト」 「Kashi above / others above」 等の数字が、 個人 Manager の感情モードに対してミスマッチ。 数字でなく 「scenario story」 (6 週間前の月曜日に) に置き換えた。
現状の右カラム RotatingHeroViz は構造可視化のデモ。 B2C 案では 「データの見え方」 より 「気持ちの呼びかけ」 を hero に置きたいので削除。 hero は中央寄せ 1 列、 photo band は 1 セクション下に独立させた。
現状の hero 内 3 chip (governance リンク) は 削除。 governance posture は FAQ の 「誰が何を言ったか、 上司に見られますか?」 「個人の評価に使われないか?」 という conversational 形式に変換。 chip 形式は 「セキュリティ訴求」 のトーンで warmth と相性が悪い。
brief 仕様の CTA 「あなたのチームに合うか 30 秒で診断」 を専用セクションに昇格。 メアド不要、 結果はその場で、 と low-friction を強調。 B2C の 「衝動的サインアップ」 mode への入り口。 ここだけ evergreen の dark band を使い、 「全ページで唯一の dark section」 とすることで CTA 集中力を高める。
現状 top には testimonial 無し (Day 6 で削除)。 B 案では 「emotion-driven」 「testimonial 引用」 が brief 必須要素なので、 仮想顧客の dummy 声 2 枚を Fraunces italic で配置。 内容は 「気づかなかった声に気づく」 を実体験として表現する language。
※ 実在の顧客名は使わず、 dummy (田中部長 / 鈴木さん) で。 brief Section 「Dummy data」 規約準拠。
現状 §4 の Kimura/Nao stoy を、 B 案では 「山田さんの 6 週間」 として 1 列縦の物語に。 数字 (3 割減、 2 週間前) は最小限残し、 強調は 「もう少しだけ早く気づけたら、 違う会話ができたかもしれない」 という first-person 仮定形。 個人 Manager が自分のチームに重ねやすい構造。
第一語が 「こんにちは」。 これは B2B 案では絶対に出ない (敬語との衝突)。 B 案では conversational 二人称 + first-person を最初の 3 単語で establish するための signature 表現。
全文 grep して 0 件確認。 keigo 系の語彙は 1 つも使用していない。
主要使用箇所:
permanent-ui-principles §1 §2 §6 §13
main / section / article / nav / footer / h1 1 つaria-labelledbyaria-hiddenrole="img" + aria-label でシーン説明<details> (JS なしでも動く)これは仕様。 B 案は 「個人 Manager 衝動サインアップ」 に振り切ったので、 enterprise CIO / CISO / 人事部長 (大企業) は不適合。 そういう buyer には A 案で接触する。
quote-card 2 枚と FAQ 4 件で信頼を作っているが、 実在 logo / ISO 等のセキュリティ訴求は皆無。 個人 Manager 向けには 「使ってる人」 のほうが effect が大きいと信じている (それが B 案の bet)。
確認ポイント: 共同創業者が 「testimonial 2 枚で十分か」 「ISO / セキュリティバッジが必要か」 を判断。
B2C 衝動買い mode を作るため、 価格テーブル / 比較表は一切出していない (brief 仕様 「dense table NG」)。 「無料で試す」 で sign-up し、 後ろのフローで初めて見せる前提。 価格を上げて欲しい人は A 案。
real-world person data NG なので、 mockup では SVG illustration を photo の代わりに。 実装フェーズでは 「実在感はあるが特定の社員ではない」 stock photo を Cloudinary 等で配信する想定。 photo selection 自体が brand-critical な judgement なので別途確認。
kashi/src/app/page.tsx — 現状 §1-§7 を、 B 案構成 (9 section) に置き換える形になるkashi/messages/{en,ja}.json — homepage キー一式の再設計 (二人称・カジュアル形に書き換え)RotatingHeroViz — top では削除 (B 案)、 別ページで使い続ける可能性ありPieChartMini / StepCostMini / DetectionTimelineMini — top では削除 (B 案)、 /why 等別ページに移管検討Button / Eyebrow — そのまま使えるJapaneseProse / JaAtoms — そのまま使える (BudouX で wbr 注入)QuoteCard — testimonial 用 (avatar + quote + author)PhotoBand — 大型 hero 写真の専用フレームScenarioFrame — 時系列物語の縦並びカードFeelCard — 3 つの感覚 (気づき / 安心 / つながり)DiagnosticCallout — evergreen 全面の 30 秒診断 bandB 案は二人称 「あなた」 を多用するが、 英語版に直訳すると 「you」 が連続しすぎて不自然。 EN は別翻訳ロジック (主語省略 / inviting form) で再構築する必要あり。 i18n verbatim test pinning (LESSONS.md 既知) に従って全 keys のテスト同時更新が必要。