Educare members — UI Refresh Proposal
パープル基調 → すきま予備校本体と同じ「白×爽やかな青」への全面移行案。配色・文字の太さ・ヘッダー・マイページ構成の4点を、実物の見た目で比較できるようにした。モックは現行コードのスタイル値を忠実に再現している。
設計: sol (gpt-5.6) × Claude司令官 ／ 2026-07-19本体サイト（educarelog.net）の primary は #2563eb。membersだけが紫系（#4f46e5/#7c3aed）に乖離していた。全363箇所を機械置換し、置換漏れ0をチェックコマンドで保証する。
目の疲れ対策: 青のベタ塗りは1ブロックに主ボタン1つまで／ナビの選択状態はベタ塗りをやめ淡青地＋青文字へ／紫の色付き大シャドウは全廃し無彩色の淡い影に統一。
現状は最太の font-black（W9相当）が276箇所、10pxの小ラベルにまで使われている。これが「潰れ」の正体。書体は変えず、太さを「見出し700／操作600／本文400」に再配分する。下は同一文言の実寸比較。
BEFORE — 全部 極太 (900)
自己分析からES添削まで進める
志望自治体を登録すると、あなたに合わせた案内の準備が進みます。
SPI模試・Webテスト・適性検査が受け放題。まずは体験からどうぞ。
AFTER — 見出し700 / ラベル600 / 本文400
自己分析からES添削まで進める
志望自治体を登録すると、あなたに合わせた案内の準備が進みます。
SPI模試・Webテスト・適性検査が受け放題。まずは体験からどうぞ。
| 役割 | 太さ | サイズ |
|---|---|---|
| ページ見出し | 700 (bold) | 24px／PC 30px |
| カード見出し | 600 (semibold) | 16px |
| ボタン・ナビ | 600 (semibold) | 14〜16px |
| 本文・説明 | 400 (normal) | 14〜16px |
| 小ラベル | 500〜600 | 最小12px（10px廃止）・入力欄は16px |
Zen Kaku Gothic New（本体の見出し書体）は今回は見送り推奨 — membersのセキュリティ設定(CSP)が外部フォントを遮断しており、潰れは太さの再配分だけで解消できるため。導入するなら次段でフォント同梱方式。
現行は8項目フル表示のため、1280px未満でロゴが折れ・ラベルが2行に潰れる（敏のスクショで発生していた状態を下に再現）。5項目＋右端アバターに整理し、どの幅でも折返しゼロにする。
プロフィール・設定・ご意見箱・使い方ガイドはアバターのメニューに収納（上のポップアップ）。モバイル下部タブは ホーム/計画/模試/履歴/AI対策 の5個にし、360pxでも各タブの幅を確保する。
左が現行の再現、右が改修案。紫グラデのヒーローは、新規ユーザーには 0/0/0 の統計と会員ID(UUID全桁)を見せているだけだった。改修後は「次に何をすべきか」を出す。
① 志望先を登録する ② 模試を受けてみる ③ GoogleやLINEを連携する ④ AI面接対策を使ってみる
| 整理項目 | 改修内容 |
|---|---|
| 会員ID (UUID) | マイページから撤去。設定の会員情報で末尾6桁＋コピーで全桁取得 |
| 0/0/0 統計 | 利用実績ゼロの間は非表示にし、開始導線を出す。実績が付いたら白カードで表示 |
| 二重オンボーディング | 「4ステップカード」とモーダルツアーを、3項目チェックリスト1本に統合 |
| 右カラムCTA 3本並列 | 主ボタンは「模試・Webテストを受ける」1本だけ青。他は控えめに |
| 影・角丸 | 紫の大影を全廃、無彩色の淡い影と角丸ルールに統一 |
紫を旧画面に残すと二重メンテになる。機能・ルート・文言は一切変えず、見た目だけ揃える。
見た目だけでなく体験の変更（上の右モック）。会員情報の掲示をやめ、受験生が次にやるべきことを示す場所にする。
(a) ご意見箱の大カードを廃止しヘッダーメニューへ収納 (b) モバイル下部タブから「設定」を外して5タブ化（設定はアバターメニューから）。
敏修正5点（承認時指示・反映確定）: ①ロゴ=「公務員すきま予備校」 ②ヘッダーはアイコン+ラベル構成 ③「受験」→「無料模試」 ④「AIサポート」→「AI選考対策」（書類+面接の両柱を包含・製品名と一致） ⑤将来拡張は「学習」タブ+1本まで現設計で吸収、コミュニティ追加時にIA再編。
進め方: P0=配色・文字の機械置換 → st.members に配備し before/after 実機確認 → P1=ヘッダー・ヒーロー改修 → P2=細部統一。各段階でビルド・テスト全緑と360〜1280px折返しゼロを出荷条件にする。