こどもの進路案内所 — 通信制高校選びの意思決定支援ツール

何を作ったか

通信制高校の選択に悩む中学生と保護者のための、意思決定支援ツールを設計・開発しました。

21問の質問に答えると、「通学頻度」「費用」「自己管理」「進路志向」など8つの軸でレーダーチャートが表示されます。特定の学校を推薦するのではなく、「自分は何を優先したいのか」を整理するためのツールです。

サイト: https://kodomo-shinro.jp

クライアントは、フリースクールを運営する中で保護者から繰り返し相談を受けていました。

「学校を紹介してほしい」ではなく、「学校を選ぶための考え方を整理したい」 というニーズでした。

診断の核となる8つの軸は、通学頻度・費用・オンライン適性・自己管理・進路志向・学校生活・メンタルサポート・専門課程です。これらは、進路相談の現場で実際に保護者や生徒が迷うポイントをもとに構造化しました。

保護者と生徒がそれぞれ診断を行い、2つのレーダーチャートを重ねて表示する機能を実装しました。たとえば「保護者は費用を重視しているが、生徒は学校生活を重視している」というズレが一目でわかります。

この機能の目的は、正解を出すことではなく、話し合いのきっかけを作ることです。

教育・進路というテーマでは、表現ひとつで当事者を傷つける可能性があります。

これらは、クライアントとの対話や現場の意見から出てきた判断です。

プロトタイプ公開後、複数の関係者からフィードバックを受けて段階的に改善しました。

フィードバック	対応
「診断の目的を先に説明した方がよい」（行政関係者）	診断開始前に目的説明ページを追加
「日常的な人との関わりに関する項目がほしい」（教育現場の実践者）	質問項目を追加し、17問から21問に拡張
「FAQが通信制だけに偏っている」（大学教員）	全校種に対応する8問構成に改訂
「高卒資格と高卒扱いの区別が不正確」（クライアント）	語彙の整理セクションを追加・修正
「結果をLINEで共有すると最初からになる」（クライアント）	共有URLの生成方式を修正

改善は一度にまとめるのではなく、フィードバックごとに対応しています。このサイクルを回せたのは、クライアントとの関係性と、変更を即座にデプロイできる技術基盤があったからです。

コンポーネント	技術	選定理由
診断アプリ	React + Vite + TypeScript	SPAとして高速に動作。質問→結果の画面遷移が自然
ランディングページ	Next.js 14 (App Router)	SEO・OGP・構造化データに対応。検索流入を狙える
AIアドバイス	Netlify Functions + Gemini API	診断結果に基づく個別アドバイスを生成。サーバーレスでコストゼロ運用
レポート出力	html2canvas + jsPDF	クライアントサイド完結。サーバー不要で運用コストなし

診断サイト（Netlify）とLP（Vercel）はサブドメインで分離しています。それぞれの責務を明確にし、独立してデプロイ・改善できる構成です。

レポートの保存方法をデバイスに応じて分岐しています。モバイルではPNG画像、PCではPDFを生成します。保護者が診断結果を学校の先生との面談資料として持参するユースケースを想定した判断です。

通信制高校を検討するユーザーには、感覚過敏や学習困難を抱える生徒が含まれます。WCAG 2.1 AAの基準を意識し、文字拡大・ハイコントラスト・アニメーション停止の切り替え機能を実装しました。文字拡大時にはイラストを非表示にし、コンテンツ領域を最大化する設計です。