W-03
こどもの進路案内所
親子の価値観のズレを、会話のきっかけに変える診断
通信制高校を検討する中学生と保護者のための診断 Web アプリです。21 問から 8 軸の価値観バランスを描き、親子の輪郭を重ねて見せます。
課題PROBLEM
通信制高校には偏差値という一本の物差しがなく、情報も散らばっています。親は費用や進路実績を、子は通学のしんどさや居場所を見ていて、「いい学校」の意味がズレたまま話し合いが衝突になりがちでした。
自分の役割ROLE
企画段階からクライアントと協業し、診断設計・UI・実装・PDF 出力・運用まで担当しました。
制約CONSTRAINTS
- 中学生が 3〜4 分で終えられる長さ
- 合否や順位を出さない（正解探しの道具にしない）
- 面談の机に持ち込める紙（PDF）が必要
解決策SOLUTION
21 問・1 問 1 画面の診断 Web。結果は 8 軸の輪郭表示と親子重ね、PDF 書き出しまで。行政・教育関係者の声を反映しながら公開運用しています。
判断の芯 — NARRATIVE
「診断を、正解探しの道具にしない。」
進路選びは点数で順位がつく世界ではありません。診断が「あなたに合うのはこの学校」と答えると、結果が親子のどちらかを説得する材料に変わります。
合否も点数も出さず、大事にしていることの輪郭だけを描きます。差は「どちらが正しいか」ではなく「ここが違うね」という会話の入口になります。
技術的に難しいことはしていません。難しかったのは「正解を出さない診断」を、それでも満足して終われる体験に仕上げることでした。
重要な設計判断DECISIONS
NOTE 01 — 主判断
結果は合否ではなく、8 軸の輪郭
診断を正解探しにしないための判断です。結果が説得の道具ではなく自己理解の材料になります。
NOTE 02
親子の結果を重ねて表示する
ズレを対立ではなく観察対象にします。
NOTE 03
21 問・3〜4 分で終わる長さ
中学生が途中で離脱しない設計を優先しました。
NOTE 04
PDF で相談の場に持ち込める形に
画面の中で完結させず、進路相談の机に置ける紙にしました。
体験への効き方FOR WHOM
大事にしたいことが輪郭になり、「なんとなく嫌」に軸の名前がつきます。
子どもの輪郭と自分の輪郭の違いが見え、質問から会話を始められます。
印刷結果を挟んで面談を始められ、ゼロから聞き出す負担が減ります。
画面SCREENS
結果RESULTS
診断設計
21 問 / 8 軸
想定所要
3〜4 分で完了する長さ
成果物
画面結果 + PDF
振り返りRETROSPECTIVE
最初は「合う学校を勧める」方向にも寄り得ました。現場の声を受け、推薦を削り輪郭表示に寄せたことで、診断が説得材料になるリスクを下げられました。機能を足すより、出さない選択が体験を守った例です。
いまの位置IN OPERATION
公開運用中。フィードバックを段階的に反映しています。
TECH
React ・ TypeScript ・ Vite ・ Tailwind CSS ・ Recharts ・ Gemini API ・ Claude Code