マイページ設計プラン rev2 — 「3秒で今日の一手」

Fable起草→sol敵対検証8件全採用→統合版。文脈CTA 6ルール・視覚仕様・v1.5ワイヤー込み。実装はβ公開前のv1.5便。2026-07-22

FABLE_MYPAGE_DESIGN_20260722 — マイページ設計プラン（Fable起草・sol視覚パス待ち）

敏指示「マイページデザインはマジで重要。Fableも入って最高のプランに」への回答。sol設置設計v1（案A・実装中）を土台に、その上の設計思想と進化線を定める。

0. 設計哲学 — この画面は何に答える画面か

マイページは「今日、何をすればいいか」に3秒で答える画面である。

根拠: ①マイナビ一次調査 — 受験生の離脱要因1位はスケジュール不安19.4%・情報ギャップ43.4%（=「何をすればいいか分からない」が敵） ②UIUX調査が特定した3欠落の筆頭「入口の迷いゼロ化」 ③ドクトリンD5「困った瞬間に、1つだけ次の手を出す」 ④敏のユーザー像「つまみ食い勉強」— まとまった学習計画でなく、今この隙間時間に何をやるかの即決を支える。

従って最上位の設計原則は 「1画面1判断」: ファーストビューに置く判断は常に1つ。選択肢の陳列はその下。

1. 情報設計（上から順・ユーザーの認知順）

順	ブロック	内容	状態
1	試験日カウントダウン帯	「あなたが入力した試験日まであとN日」— R-2ドクトリンの帰属明示話法をここにも適用（入力導線・公式確認リンク併設）。閉じられる（既存挙動維持）	既存改修・小
2	ヒーロー=今日の一手	「◯◯さん、おかえりなさい」+ 文脈で1つだけ出すCTA。カルテ不要の決定論ルール4本で実現: ①志望先未登録→受験計画 ②診断未実施（WP-1.7後）→診断 ③直近誤答単元あり→その単元の対策1つ ④いずれもなし→AI問題演習。「選ばせる」のはこの下から	v1.5（本プランの本丸）
3	筆記試験対策β	単元対策（一体型・仮称）＋AI問題演習＋診断近日	v1・Terra実装中
4	積んだ量の帯（D7）	今週の学習時間・解いた問題数を小さく。0なら非表示（既存原則維持・0を突きつけない）。付き始めた人にだけ「積んでいる」実感を返す	v1.5・小
5	既存ブロック	無料模試・AI選考対策・お知らせ・コース — 現配置維持（動線を壊さない）	不変

2. 進化線（v1 → v1.5 → R3）— 作り直しでなく「育つ」設計

v1（実装中）: 設置=筆記対策βセクション。ヒーローは現状のまま。
v1.5（本プラン・βリリース前に入れる）: ヒーローの文脈CTA化＋カウントダウン帰属明示＋量の帯。全て決定論・カルテ不要・実装小〜中。
R2: 論文カードがβセクションに加わるだけ（構造不変）。
R3（WP-3.5）: ヒーローがカルテ駆動になり（「今日の一手」の決定源が診断・週次プランへ）、科目マス目マップ（=診断の出口画面）がブロック3の主役に昇格。v1.5の骨格はそのまま決定源だけ差し替わる — 捨てる実装がない。

3. コピー原則（Fable管轄・固定）

命令形でなく提案形（「〜しましょう」でなく「ここから始められます」）。急かさない・脅さない（D7/ギルトトリップ禁止と同根）。
日程は必ず帰属明示（「あなたが入力した」）＋「公式要項で確認」導線。
0の日の文言は否定を含まない（「まだ〜していません」禁止）。

4. solへの視覚パス発注条件

上記IAを前提に、ヒーロー文脈CTA・量の帯・カウントダウン帯の視覚仕様（v01青系・カード階層・モバイル優先・情報密度を上げない）を起こす。
敵対検証観点: 1画面1判断が崩れる箇所・視覚重量の逆転・「今日の一手」ルール4本の穴（該当なし時の挙動等）。

5. 敏レビュー論点（プラン確定用）

設計哲学「3秒で今日の一手」への合意
ヒーロー文脈CTAの決定論ルール4本の順序（特に③誤答単元優先の是非）
v1.5をβ公開前に入れるか（推奨=入れる。βの第一印象がこの画面で決まる）

rev2 — sol敵対検証の全採用裁定（Fable・2026-07-22）

solパス指摘8件を全採用。主要な設計変更:

文脈CTAは6ルールへ改訂（sol優先表を採用）: ①締切/試験日衝突が近い→受験計画 ②7日以内の未解消誤答→その単元見直し ③診断公開済み未実施→診断 ④志望先が確実に未登録→/profileへ登録（受験計画でなく登録画面直行・行き先修正） ⑤training公開中→AI演習 ⑥データ不明/取得失敗→受験計画を見る。「取得失敗」と「未登録」を絶対に同一視しない（fail-safe原則）。
判定データの配線を先に: 志望先=getAccountProfile()のtarget_municipalities_v2を正とする（通知API代用の脆弱判定を廃止）。誤答/学習量はマイページ用読み取りAPIの新設が必要=v1.5実装WOに含める。
「1画面1判断」の定義修正: 固定ナビ5項目は画面移動として例外。原則は「ファーストビューのコンテンツ領域に塗りつぶし主CTAは1つだけ」。βカードのCTAは青文字+矢印へ弱め、青塗りはヒーローのみ（視覚重量の主役一意化）。
カウントダウン帰属表示は段階導入: 現行データに source/official_url が無いため、v1.5は安全側コピー「登録中の志望先の日程」とし、source属性+公式URLのAPI拡張をR-2実装バックログへ（帰属明示話法の完全適用はその後）。
0件表示の否定文を根絶: 「まだ利用履歴はありません」→「最初の対策はここから選べます」（コピー原則の既存違反を是正）。
オンボカードはファーストビュー外へ（ヒーローと同目的CTAの同時視認を防ぐ）。

視覚仕様

基本トークン

新色・新フォントは増やしません。

Primary blue：#2563EB
Deep blue：#1D4ED8
Cyan accent：#06B6D4
Soft blue：#EFF6FF
Ink：#0F172A
Body：#334155

見出し、本文、数字とも既存system-uiを使用。数字のみtabular-numsを付けます。
固有表現は、ヒーローだけに青→シアンの「一手レール」4pxを置くことです。βカード側の上辺アクセントはv1.5で外すか1pxへ弱めます。

ファーストビュー領域

カウントダウンとヒーローを一つの判断領域として包みます。

className="
  grid content-start gap-3
  min-h-[calc(100svh-9.75rem-env(safe-area-inset-bottom))]
  lg:min-h-[calc(100svh-8rem)]
  lg:grid-rows-[auto_1fr]
"

これにより、βセクションは原則スクロール後に現れます。固定ナビは残りますが、コンテンツ内の主CTAは1つです。

カウントダウン帯

カードではなく、静かな情報帯にします。

className="
  relative rounded-xl border border-blue-100 bg-blue-50/70
  px-4 py-3 pr-12 shadow-none
  sm:flex sm:items-center sm:justify-between sm:gap-4
"

構成：

text-[11px] font-semibold text-blue-700：登録中の志望先の日程
text-sm text-slate-700：試験名・日付
text-xl font-bold tabular-nums text-slate-950：あと 42 日
「公式要項で確認」はtext-xs underlineの補助リンク
閉じるボタンはh-11 w-11。現在の28pxよりタップ領域を広げる
アンバー・赤は使わない。期限警告は別のcritical通知が担当する

ヒーロー文脈CTA

className="
  relative grid content-center overflow-hidden
  rounded-[var(--hero-radius)] border border-blue-200 bg-white
  p-5 shadow-[var(--brand-shadow)]
  lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center lg:gap-10 lg:p-8
"

上辺：

className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-600 to-cyan-500"

文字階層：

挨拶：text-sm font-medium text-slate-500
文脈ラベル：text-xs font-bold tracking-[0.12em] text-blue-700
今日の内容：text-xl font-bold leading-snug text-slate-950 lg:text-2xl
補足：mt-2 text-base leading-7 text-slate-600

CTA：

className="
  mt-6 inline-flex min-h-12 w-full items-center justify-center
  rounded-xl bg-blue-600 px-5 text-base font-semibold text-white
  shadow-[var(--cta-shadow)] transition
  hover:bg-blue-700
  focus:outline-none focus:ring-4 focus:ring-blue-100
  motion-reduce:transition-none
  sm:w-auto lg:mt-0
"

コピー例：

誤答時：この前のつづき／「割合」を1単元だけ見直せます／割合を見直す
診断時：今の位置を知る／20問で、次に見る単元を絞れます／診断を始める
通常時：今日の一手／10問だけ、今の力を試せます／AI問題演習を始める

積んだ量の帯

既存の「総相談数・ES添削・自治体分析」と混ぜず、学習専用の別データにします。

表示条件：

学習時間、問題数とも0：帯全体を非表示
片方だけ正数：正数の項目だけ表示
API取得失敗：非表示。0として扱わない

className="
  rounded-xl border border-slate-200 bg-white/80
  px-4 py-3 shadow-none
"

内部：

<dl className="grid grid-cols-2 divide-x divide-slate-100">

帯見出し：今週の積み上げ
数字：text-xl font-bold tabular-nums text-slate-950
単位：text-xs font-medium text-slate-500
青塗り、進捗率、連続日数、励まし文は置かない

ASCIIワイヤー

モバイル・v1.5

┌────────────────────────┐
│ す 公務員すきま予備校   ○ │ ← sticky header
└────────────────────────┘

┌ 登録中の志望先の日程 ─ × ┐
│ ○○市  6/14     あと42日  │
│ 公式要項で確認 ↗           │
└────────────────────────┘

┌━━━━━━━━ 一手レール ━━━━━┐
│ ○○さん、おかえりなさい     │
│                          │
│ 今日の一手                │
│ 10問だけ、今の力を         │
│ 試せます                  │
│                          │
│ [ AI問題演習を始める → ]  │ ← 唯一の青塗りCTA
└────────────────────────┘
       ── first view end ──

筆記試験対策  [β]

┌────────────────────────┐
│ 問題集＋テキスト一体型     │
│ 単元対策                  │
│ 例題→解く→苦手だけ学ぶ     │
│ 83単元から始める →         │ ← 青文字
└────────────────────────┘

┌────────────────────────┐
│ AI問題演習                │
│ 横断演習とAI講師で見直す   │
│ 横断演習を始める →         │
└────────────────────────┘

┌────────────────────────┐
│ 診断テスト      [近日公開] │ ← 非リンク
└────────────────────────┘

┌ 今週の積み上げ ──────────┐
│ 学習時間  48分 │ 問題  23問│
└────────────────────────┘

[既存の利用実績／正数時]
[初回オンボーディング／未dismiss時]
[お知らせ・ガイダンス]
[AI選考対策]
[無料模試] [使い方ガイド]
[受講中の講座／flag ON時]

┌────────────────────────┐
│ホーム│計画│模試│履歴│AI対策│ ← fixed、非改変
└────────────────────────┘

デスクトップ・v1.5

┌─────────────────────────────────────────────────────┐
│ Logo   ホーム  受験計画  無料模試  履歴  AI選考対策  ○ │
└─────────────────────────────────────────────────────┘

┌ 登録中の志望先の日程 ──────────────────────────── × ┐
│ ○○市 一次試験 6/14                あと42日  公式要項 ↗ │
└─────────────────────────────────────────────────────┘

┌━━━━━━━━━━━━━━ 今日の判断領域 ━━━━━━━━━━━━━━━━━━━┐
│ ○○さん、おかえりなさい                            │
│                                                   │
│ 今日の一手                                        │
│ 10問だけ、今の力を試せます     [AI問題演習を始める →]│
└─────────────────────────────────────────────────────┘
                  ── first view end ──

筆記試験対策 [β]
┌──────────────────────────────┬──────────────────────┐
│ 問題集＋テキスト一体型       │ AI問題演習           │
│ 単元対策                     │ 横断演習＋AI講師     │
│ 83単元から始める →           │ 演習を始める →       │
└──────────────────────────────┴──────────────────────┘
┌─────────────────────────────────────────────────────┐
│ 診断テスト   得意・苦手から次の単元を整理 [近日公開] │
└─────────────────────────────────────────────────────┘

┌ 今週の積み上げ ────────────────────────────────────┐
│ 学習時間 48分                         解いた問題 23問 │
└─────────────────────────────────────────────────────┘

[既存利用実績]
[初回オンボーディング]

┌────────────────────────────────┬────────────────────┐
│ お知らせ・ガイダンス           │ [無料模試を受ける] │
│                                │ 使い方ガイド       │
│ AI選考対策                     │                    │
│ 受講中の講座／flag ON時        │                    │
└────────────────────────────────┴────────────────────┘

今の進捗を全体像から整理するとこれ

設置v1：プロト枠撤去、ヒーロー直後へのLearningBetaSection設置まで作業ツリー上で進行中
v1構造：Fable案と整合。ヘッダー、下部ナビ、オンボは非改変
v1.5視覚：上記仕様で確定可能
v1.5ロジック：プロフィール、診断状態、直近誤答、週次学習量のデータ契約が未確定
最大リスク：API失敗を「未登録」「0件」と誤判定し、間違ったCTAを出すこと
このレビューではファイル変更・テスト実行はしていない