新機能の実UI設置設計 v1 — 仮設リンク卒業プラン

sol設計（実コード確認済）＋Fable UIUX調査照合追補つき・敏モックレビュー待ち。推奨=案A「マイページ内・筆記試験対策βセクション」（ヘッダー非改変・プロト枠撤去・WP-3.5を先取りしない）。2026-07-22

SOL_FEATURE_PLACEMENT_V1_20260722

1. 結論

R1βでは、ヘッダー5項目を変更せず、マイページのヒーロー「今日の次の準備」の直後に「筆記試験対策 β」セクションを常設する。

ここに以下を配置する。

  1. /training — 「AI問題演習」を主役として大きく表示
  2. /webtext — 「WEBテキスト」を並列表示
  3. 診断ライト — 未公開中はリンクのない「近日公開」、完成後に有効化
  4. /ronbun — R1では完全非表示、R2でβ解放
  5. /ai-sensei — R1本番では非表示。stagingでのみ静的な器を確認できる状態を維持

現在の「検証中の新機能（プロトタイプ）」枠は撤去する。プロトタイプ一覧をβ公開後も残すと、本体UIと新機能が別サービスに見えるためである。

ヘッダー追加、オンボーディングの4項目化、ヒーローのパーソナライズ化は行わない。これらはWP-3.5で作り直す領域である。

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

機能 現在地 R1での扱い
/training 10問演習、誤答体験、見直し、AI講師まで実装済み βの主役として常設導線を出す
/webtext 83単元索引、単元リーダー、training相互導線あり trainingと並ぶ学習導線として出す
診断ライト WP-1.7が未実装 「近日公開」で予定を伝え、完成後に有効化
/ronbun 問題集・添削経路は存在 R1非表示。R2で初めて入口を出す
/ai-sensei 4入口、5項目フォーム、送信無効の静的器 staging確認専用。R1本番非表示
WP-3.5 未着手 今回は先取りしない

リリース順の正本も、R1＝学習コンテンツ＋診断ライト、R2＝AI論文、R3＝AI先生＋統合UIとしている。WBS_PAID_PRODUCTS_20260722.md

3. 実コード確認結果

3.1 AppShell

現在のヘッダー／モバイル下部ナビは次の5項目で固定されている。

  1. ホーム
  2. 受験計画
  3. 無料模試
  4. 履歴
  5. AI選考対策

デスクトップとモバイルが同じ配列を参照しているため、項目追加は両方へ影響する。AppShell.tsx

モバイルは5項目を均等配置しており、6項目化するとラベル幅とタップ領域が厳しくなる。AppShell.tsx

したがってR1ではヘッダーを変更しない。

3.2 マイページ

現在の新機能入口は、カウントダウンの後、ヒーローより前にある破線枠「検証中の新機能（プロトタイプ）」である。MyPage.tsx

本体ヒーローには以下がある。

MyPage.tsx

オンボーディングは意図的に3項目へ制限されている。

  1. 志望先を登録
  2. 受験計画を確認
  3. 模試またはAI選考対策を開始

実装コメントにも「機能が増えても3項目に留める」とあるため、R1新機能をオンボへ追加しない。OnboardingCard.tsx

3.3 現行flagの問題

現在は以下の構造である。

App.tsx

問題は2点ある。

  1. trainingとai-senseiが同じflagに束ねられている
    trainingをR1公開すると、ai-senseiも同時に公開される。

  2. webtextの入口とルートで条件が違う
    マイページ入口はVITE_WEBTEXT_READERだけを見る一方、ルートはtrainingとの二重条件である。そのため、設定次第では入口が表示されるのに遷移先が404になる。

3.4 v01デザイン

現在のmembers UIは以下で統一されている。

index.css

新設置面でも新色・新フォント・新しいカード体系は追加しない。

4. 設置原則

  1. 既存の「次の行動」を最上位に保つ。
  2. R1で使える機能だけを通常UIとして出す。
  3. 未来機能を大量に並べない。
  4. trainingを主役、webtextを補助教材として視覚的に区別する。
  5. 無料模試とAI選考対策の既存導線は変更しない。
  6. 新機能のためにヘッダーを増やさない。
  7. 入口とルートは同じflag判定を使う。
  8. WP-3.5着手時に撤去しやすい独立コンポーネントにする。

5. 案A — マイページ内「筆記試験対策 β」セクション

推奨

この案を採用する。

モバイルワイヤー

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

[ 試験日カウントダウン ]

┌──────────────────────┐
│ ○○さん、おかえりなさい │
│ 今日の次の準備           │
│ [受験計画を確認する]      │
└──────────────────────┘

筆記試験対策  [β]

┌──────────────────────┐
│ まずはここから             │
│ AI問題演習                  │
│ 10問ずつ、解いて・間違えて  │
│ 見直す                      │
│ [10問の演習を始める →]     │
└──────────────────────┘

┌──────────────────────┐
│ WEBテキスト                 │
│ 数的処理83単元を例題から学ぶ │
│ [83単元から選ぶ →]          │
└──────────────────────┘

┌──────────────────────┐
│ 実力診断       [近日公開]   │
│ 20問で今の得意・苦手を確認  │
└──────────────────────┘

[利用状況]
[オンボーディング3項目]
[お知らせ]
[AI選考対策]
[無料模試CTA]

┌──────────────────────┐
│ホーム│計画│模試│履歴│AI対策│
└──────────────────────┘

デスクトップワイヤー

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

[カウントダウン]

┌──────────────────────────────────────────────┐
│ ○○さん、おかえりなさい                       │
│ 今日の次の準備          [受験計画を確認する]  │
└──────────────────────────────────────────────┘

筆記試験対策  [β]

┌────────────────────────────┬─────────────────┐
│ まずはここから             │ WEBテキスト      │
│ AI問題演習                  │ 数的処理83単元   │
│ 誤答から見直しまで10問単位 │                 │
│ [10問の演習を始める →]     │ [単元を選ぶ →]  │
└────────────────────────────┴─────────────────┘

┌──────────────────────────────────────────────┐
│ 実力診断　20問で得意・苦手を確認　[近日公開] │
└──────────────────────────────────────────────┘

設置理由

表示コピー

対象 表示名 説明 アクション
training AI問題演習 10問ずつ、解いて・間違えて・見直します。迷った問題はAI講師に質問できます。 10問の演習を始める
webtext WEBテキスト 数的処理83単元を、具体例題と解法の順番から学べます。 83単元から選ぶ
diagnosis 実力診断 20問で今の得意・苦手を確認し、次に取り組む分野を整理します。 未公開時「近日公開」／公開後「20問で診断する」

本番βでは「プロト」「検証中」の文言をユーザー向けUIから外し、「β」に統一する。

デザイン仕様

実装差分の規模感

6. 案B — ヒーロー「今日の次の準備」内へ学習導線を追加

非推奨

ワイヤー

┌──────────────────────┐
│ ○○さん、おかえりなさい │
│                        │
│ 今日の次の準備         │
│ 受験計画を確認しましょう│
│ [受験計画を確認する]    │
│ ──────────────────── │
│ 学習も進める            │
│ [AI問題演習] [WEBテキスト]│
└──────────────────────┘

設置理由

非推奨理由

実装差分の規模感

7. R1〜R3の表示方針

リリース training webtext 診断ライト ronbun ai-sensei
R1公開前 表示 表示 近日公開 非表示 非表示
R1完成後 表示 表示 表示 非表示 非表示
R2 表示 表示 表示 β表示 非表示
R3 表示 表示 表示 表示 本実装後に表示
WP-3.5完了後 placement v1を廃止し、統合UIへ移行

R1のronbunは「coming soon」ではなく非表示を推奨する。診断ライトだけで既に一つの予告枠があり、さらにR2機能まで並べるとβ公開面が未完成品一覧に見えるためである。

8. 本番β向けflag設計

8.1 members側

永続利用する名前に変更し、PROTOを外す。

VITE_FEATURE_TRAINING
VITE_FEATURE_WEBTEXT
VITE_FEATURE_DIAG_LITE
VITE_FEATURE_RONBUN
VITE_FEATURE_AI_SENSEI

すべて未定義・falseをOFFとし、明示的なtrueだけをONとする。

一つのfeature registryを作り、以下が同じ値を見るようにする。

8.2 Worker側

VITE_*はブラウザへ組み込まれる表示flagであり、APIの停止装置ではない。現在のtraining/webtext/ronbun APIはmembersのルート非表示とは別に存在するため、本番運用ではWorker側にも対応するflagを設ける。

FEATURE_TRAINING_ENABLED
FEATURE_WEBTEXT_ENABLED
FEATURE_DIAG_LITE_ENABLED
FEATURE_RONBUN_ENABLED
FEATURE_AI_SENSEI_ENABLED

OFF時は認証済みユーザーからの直アクセスでも、対象APIをfail-closedで拒否する。

VITE_*だけを切って「機能停止済み」と判断してはいけない。

8.3 診断ライトの近日公開

VITE_FEATURE_DIAG_LITE=falseの間はルートを登録しない。

ただしtrainingまたはwebtextがONなら、設置セクション内にリンクなしの「実力診断・近日公開」を表示する。診断flagがONになった時点で同じカードをリンクへ切り替える。

8.4 移行手順

  1. 新feature registryを追加する。
  2. stagingへ新flagを追加する。
  3. legacy flagと新flagを一時的に併記する。
  4. 入口とルートの判定を新registryへ一本化する。
  5. stagingで全組み合わせを検証する。
  6. productionは新flagを明示設定する。
  7. R1公開後、legacy fallbackを削除する。

legacy対応は次のように分割する。

現行 新flag
VITE_TRAINING_PROTO VITE_FEATURE_TRAINING
VITE_WEBTEXT_READER VITE_FEATURE_WEBTEXT
VITE_RONBUN_PROTO VITE_FEATURE_RONBUN
training flagに同居中のai-sensei VITE_FEATURE_AI_SENSEIへ分離
なし VITE_FEATURE_DIAG_LITEを新設

ai-senseiはtrainingのlegacy fallbackを継承させない。これを継承するとR1で相談室が意図せず公開される。

8.5 環境マトリクス

環境 training webtext diag ronbun ai-sensei
staging・全機能レビュー ON ON 開発状態に従う ON ON・静的器のみ
production R1開始 ON ON OFF OFF OFF
production R1診断完成後 ON ON ON OFF OFF
production R2 ON ON ON ON OFF
production R3 ON ON ON ON ON

8.6 運用上の注意

Vite flagはビルド時に確定するため、切替には再build・deployが必要である。即時kill switchではない。

R1設置v1では、次の二層で扱う。

利用者へ見せるか
    └─ VITE_FEATURE_*（members build）

APIを実行可能にするか
    └─ FEATURE_*_ENABLED（Worker runtime）

9. ai-senseiの境界

R1本番では入口もルートもOFFにする。

stagingでVITE_FEATURE_AI_SENSEI=trueの場合のみ、現在の静的器を確認できる。

維持すべき境界は以下である。

現在の静的境界はテストでも固定されている。ai-sensei-route.test.tsx

10. 既存動線の保護

以下はR1設置v1で変更禁止とする。

特に無料模試をtrainingへ置き換えない。無料模試は現在の受験機能、trainingは反復学習機能であり、利用目的が異なる。

11. アクセシビリティ・モバイル条件

12. 受入条件

  1. R1 productionで表示される新機能はtraining、webtext、診断ライト予定だけである。
  2. ronbunはflag OFF時、入口も全ルートも存在しない。
  3. ai-senseiはR1 productionで入口もルートも存在しない。
  4. trainingとai-senseiを別々にON/OFFできる。
  5. webtextの入口とルートで同じflagを使う。
  6. AppShellの5項目と順序が変わらない。
  7. オンボーディングが3項目のままである。
  8. 「今日の次の準備」のコピーとCTAが変わらない。
  9. 無料模試とAI選考対策の既存リンクが残る。
  10. 375px、768px、1024pxでレイアウト崩れがない。
  11. coming soonカードが操作可能に見えない。
  12. 本番β画面に「検証中」「プロトタイプ」の文言が残らない。
  13. client flag OFFかつWorker flag OFFで、直URL・直APIの双方が停止する。
  14. 全flag組み合わせをテーブル駆動テストで確認する。

13. 実装WO分割案（Terra向け）

WO-FP1 — feature flag分離・route境界

目的: 表示工事より先に、機能ごとのON/OFFを成立させる。

変更対象:

実装内容:

完了条件:

規模: 0.5〜1セッション

WO-FP2 — 案Aのマイページ設置

目的: 仮設プロトリンクを、R1βとして自然な常設UIへ置き換える。

変更対象:

実装内容:

完了条件:

規模: 0.5〜1セッション

WO-FP3 — リリース状態QA・敏モック提出

目的: R1の本番表示状態を固定し、敏レビュー可能な形にする。

実施内容:

完了条件:

規模: 0.5セッション

14. 次のタスクはこれ

最初にTerraへWO-FP1 — feature flag分離・route境界を渡す。

理由は、現在のままMyPageだけを実UI化すると、training公開時にai-senseiも同時公開される境界事故と、webtext入口から404へ進む不整合が残るためである。

WO-FP1が緑になった後、案AをWO-FP2として実装し、WO-FP3のモバイルモックを敏レビューへ出す。

Fable追補 — UIUX大規模調査（uiux-research-20260722）との照合

敏の指摘を受けた明示照合。sol設計は実コード・リリース順ベースで起草されており、調査知見との突合は本追補で行った。

整合している点（fact照合）

  1. 「入口の迷いゼロ化」（調査が特定した3欠落領域の1つ）: 案Aは「ホームの単一セクション・training主役・ヘッダー非肥大」で入口を1つに絞る設計 — 調査の処方と一致。
  2. 未完成品を並べない: 案Aの「ronbunはcoming soonでなく非表示」「診断ライトのみ近日公開」は、調査の轍「予告枠の乱立はβ面を未完成品一覧に見せる」と整合。
  3. WP-3.5の先取り回避: 調査由来のパーソナライズ機構（カルテ・習熟度マップ）はR3の統合UIに送る、という境界も調査のS/A/B優先度整理と矛盾しない。

調査知見からの追補提案1点（v1に入れる価値あり・Fable裁定）

調査知見だが v1 に入れないもの（WP-3.5送り・理由つき）