進学支援ナビ Ver.1

高校生が、進学にかかるお金の支援制度を知り、次にやることを整理するためのWebアプリ。

いまの状態：Ver.1 — pre-user-validation complete（2026-09-16 時点）

Ver.1 の開発はここでいったん止めています。

公開したうえで、人を使わない事前検証（想定シナリオ10件）まで終わりました。 安全性・制度情報・確認順の決め方に、修正が必要な問題は見つかっていません。 事前検証で見つかった表示上の不整合2点は修正済みです。 経緯は docs/pre-user-validation-v1.md にあります。

実際に高校生に使ってもらって反応が得られるまで、次のことはしません。

しないこと	理由
質問を増やす・変える	いまの6問で答えにくい所がどこかは、使ってもらわないと分からない
制度データを増やす	画面がさらに長くなる。長さの評価が終わる前に増やすと、長さの問題か件数の問題か切り分けられない
確認順の決め方（matching）を変える	公式条件に根拠のない区別を、想像で作ることになる
画面を大きく作り替える	「長い」「分かりにくい」と感じる人が実際にいるかを確かめてからにする

明らかな不具合の修正、公式情報の更新（checkedAt の更新を含む）、 テストの追加は、この方針の対象外です。ふつうに行ってかまいません。

次にやるとよいのは、機能を足すことではなく、高校生に実際に触ってもらうことです。

動かすまで（初めての人向け）

1. Node.js を入れる

まだ入っていなければ https://nodejs.org/ から LTS 版をダウンロードしてインストールする。 入っているか確かめるには、ターミナル（Windowsなら PowerShell）で次を実行する。

node -v

v20.x.x のような数字が出れば入っている。

2. このフォルダに移動する

zipを展開した場所に合わせてパスを書き換える。

cd ~/Downloads/shingaku-navi

3. 必要な部品を取ってくる（初回だけ）

npm install

数十秒かかる。node_modules というフォルダができるが、これは自動生成されるものなので中身を触らなくてよい。

4. 起動する

npm run dev

http://localhost:5173 のようなURLが表示されるので、ブラウザで開く。 コードを保存すると、画面が自動で更新される。止めるときはターミナルで Ctrl + C。

スマホでの見え方を確認したいときは、ブラウザの開発者ツールでスマホ表示に切り替える（Chromeなら Cmd/Ctrl + Shift + M）。

変更したあとの確認（とても大切です）

コードを変えたら、次のコマンドを実行してください。これ1つだけ覚えれば大丈夫です。

npm run check

これは3つのことを順番に実行します。1つでも失敗したら、そこで止まります。

順番	内容	何を見ているか
1	npm run lint	書き間違い、使っていない変数、スマホで使えなくなる書き方
2	npm test	画面が正しく動くか、危険な表現が混ざっていないか
3	npm run build	公開用のファイルが作れるか

個別に実行したいとき

npm run lint       コードの検査だけ
npm test           テストだけ（数秒で終わります）
npm run test:watch テストを開きっぱなしにする（保存するたび自動で再実行）
npm run build      公開用ファイルを作るだけ

スマートフォン表示の確認

本物のブラウザを動かして、スマホでの見え方を確認します。

npm run test:e2e

初回だけ、ブラウザのダウンロードが必要です。

npx playwright install chromium

このテストが見ているのは、ふつうのテストでは測れないことです。

• 画面が横にはみ出していないか
• ボタンが指で押せる大きさ（高さ44px以上）か
• 公式サイトへのリンクが安全な設定になっているか
• 読み込み時にエラーが出ていないか

テストが失敗したら

テストを消して通すことは絶対にしないでください。 テストは「前はできていたこと」を覚えている記録です。失敗したということは、何かを壊した可能性が高いということです。

エラーメッセージは日本語で、どこが問題かを説明するように書いてあります。まずそれを読んでください。

安全性のテストについて

tests/safety.test.js は、「受給できます」のように受け取れることを断定する表現がコードやデータに混ざっていないかを自動で検査します。

単語で禁止しているのではなく、言い回しで判断しています。

書き方	判定
「必ず公式サイトで確認してください」	✅ 問題なし（むしろ書くべき文章）
「必ずもらえます」	❌ エラー（受け取れると断定している）
「対象になる場合があります」	✅ 問題なし
「あなたは対象です」	❌ エラー（言い切っている）

ルールを追加したいときは tests/helpers/dangerousPhrases.js を編集し、 tests/safety.test.js の「危険な文章の例」と「安全な文章の例」の両方に文例を足してください。 両方に足すことで、新しいルールが正しい文章まで巻き込んでいないかを確認できます。

想定シナリオによる事前確認（人を使わない検証）

tests/scenarios.test.jsx は、想定した10通りの回答パターンでアプリを実際に動かし、 画面に出た内容が設計どおりかを機械的に確かめます。回答のパターンは tests/fixtures/scenarios.json にあります。

npm test -- tests/scenarios.test.jsx

これは利用者テストではありません。 ここで確かめているのは 「想定した状況に対して、アプリが安全・一貫して動くか」だけです。 高校生にとって分かりやすいかどうかは、この方法では確かめられません。

主に見ているのはこの6点です。

確認していること	なぜ大事か
どのパターンでも制度が0件にならない	「何もありません」で終わらせない
制度（program）と案内（guide）が混ざらない	案内を1つの制度だと誤解させない
「分からない」「答えない」で選択肢が減らない	センシティブな質問を飛ばした人が損をしない
貸与奨学金が「特に確認したほうがよい」に入らない	返済が必要なものを強くすすめない
\d+% のような数値や断定表現が出ない	受給可能性を推測しているように見せない
living と researched が制度の絞り込みに使われない	公式条件と関係ない質問で制度を選別しない

シナリオを足すときは tests/fixtures/scenarios.json に回答パターンを1つ追加するだけでよく、 テストのコードは書き換えなくてかまいません。選択肢のラベルは src/ShingakuNavi.jsx の QUESTIONS から実行時に引いているので、 画面の文言を変えてもシナリオファイルを直す必要はありません。

画面に出る情報の量（カードの数、画面の高さなど）を数えたいときは、 本物のブラウザを動かすスクリプトを使います。ターミナルを2つ開いてください。

1つめ: npm run build && npm run preview
2つめ: node scripts/collect-scenario-baseline.mjs

検証の結果と、その時点で見つかった懸念は docs/pre-user-validation-v1.md にまとめてあります。

Claude Code で開発を続ける

このフォルダを指定して Claude Code を起動する。

cd ~/Downloads/shingaku-navi
claude

同じフォルダにある CLAUDE.md を Claude Code が自動で読む。 プロジェクトの目的、守るべき安全上の原則、ファイルの役割が書いてあるので、毎回説明し直さなくてよい。

インストール手順は https://code.claude.com/docs を参照。

制度データを追加・更新する

ここがこのプロジェクトでいちばん大事な作業です。 プログラミングの知識は要りません。

制度のデータは data/programs/ フォルダにあります。1件が、JSONファイル1つです。

data/programs/
├── _TEMPLATE-program.json  ← 制度を作るときの雛形
├── _TEMPLATE-guide.json    ← 案内を作るときの雛形
├── 01-mext-shugaku.json    ← 高等教育の修学支援新制度（公式確認済み）
├── 02-jasso-taiyo.json     ← JASSO 貸与奨学金（公式確認済み）
├── 03-school-genmen.json   ← 志望校独自の支援を確認する（確認済み）
├── 04-local-gov.json       ← 住んでいる自治体の支援を確認する（確認済み）
├── 05-minkan.json          ← 民間団体・財団の奨学金を確認する（確認済み）
└── 06-care-leaver.json     ← 施設等で暮らした経験のある人向けの支援を相談する（確認済み）

ファイル名の先頭の番号は画面に出る順番です。いちばん下に足したいときは、いまある最大の番号＋1（この例なら 07-）にしてください。

いちばん大事な区別：program と guide

データには2種類あります。この区別を間違えないでください。

	program（制度）	guide（案内）
中身	実施主体がはっきりしていて、公式ページで内容を確認できる1つの制度	学校・自治体・民間団体によって内容が変わるため、特定の1制度を指さない案内
例	高等教育の修学支援新制度	住んでいる自治体の支援を確認する
type	給付型・貸与型・減免など	null（1つの型に決まらない）
status	draft / verified	draft / checked
画面	制度として3グループに並ぶ	「学校・地域・民間の支援も確認する」に別枠で並ぶ

guide に verified は使えません。 特定の1つの制度ではないものを「公式確認済みの制度」として見せると、実在しない制度があるように誤解されるためです。npm test が禁止しています。

新しく追加する

1. program か guide かを決める
2. 対応する雛形（_TEMPLATE-program.json または _TEMPLATE-guide.json）をコピーして、07-好きな名前.json のように保存する
3. 公式サイトを開き、そこに書いてあることだけを写す
4. 分からない項目は null のままにする（推測で埋めない）
5. npm test を実行する。書き忘れがあれば日本語で教えてくれる
6. npm run dev で画面を確認する

これだけです。 他のファイルを書き換える必要はいっさいありません。ファイルを置けばアプリが自動で読み込みます。

既存の制度を更新する

1. data/programs/ の中の該当ファイルを開いて直す
2. checkedAt を今日の日付に更新する（いちばん忘れやすいので注意）
3. npm run check を実行する

This is the beginning of the README. Read the rest at the original. Read the full README ↗