こどもの進路案内所 - フロントエンド開発のこだわり

プロジェクトの背景

中学生と保護者が通信制高校を選ぶ際、情報が多すぎてどう選べばいいか分からないという課題がありました。特に、親子で優先順位が異なることが多く、話し合いのきっかけとなるツールが必要でした。

診断ロジックの設計

21問の質問を設計し、8つの軸でスコアリングする仕組みを構築しました。

• Knockout質問: 前提条件を確認する質問（例: 通学可能な頻度）
• 通常質問: 8軸（スクーリング頻度、学費、オンライン適性、サポート体制など）にスコアを加算

TypeScriptの型システムを活用し、質問と軸の対応関係を型安全に管理しています。

レーダーチャートの可視化

Rechartsを使い、8軸のスコアをレーダーチャートで可視化しました。親子それぞれの診断結果を重ねて表示することで、価値観の違いを視覚的に把握できます。

PDFレポート生成にはhtml2canvas + jsPDFを使用。ブラウザ上でレンダリングした結果をそのままPDFに変換するアプローチを採用しました。

フロントエンドのデザインへのこだわり

このプロジェクトでは、フロントエンドのデザインに特にこだわりました。

• Tailwind CSS でデザインシステムの一貫性を確保
• モバイルファースト のレスポンシブ設計（スマートフォンでの利用を想定）
• 質問の進捗をプログレスバーで表示し、ユーザーの離脱を防止
• レーダーチャートのカラーリングは、親子で直感的に区別できる配色を選定

ランディングページはNext.js 14（App Router）+ Framer Motionで構築し、スクロールアニメーションを活用した動きのあるデザインに仕上げました。

段階的な開発計画

フロントエンドMVP（Phase 0）を先に完成させ、デプロイすることで、ユーザーフィードバックを早期に収集する方針を採りました。

• Phase 0: 診断サイトMVP（完成・デプロイ済）
• Phase 0.5: ランディングページ（完成・デプロイ済）
• Phase 1以降: バックエンドでのPDF生成、データ永続化、学校マッチング機能（計画中）

仕様書を先に書くドキュメント駆動開発を実践し、実装の方向性を明確にしてから開発に着手しています。