進学支援ナビ 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 が禁止しています。
新しく追加する
program か guide かを決める- 対応する雛形（
_TEMPLATE-program.json または _TEMPLATE-guide.json）をコピーして、07-好きな名前.json のように保存する
- 公式サイトを開き、そこに書いてあることだけを写す
- 分からない項目は
null のままにする（推測で埋めない）
npm test を実行する。書き忘れがあれば日本語で教えてくれるnpm run dev で画面を確認する
これだけです。 他のファイルを書き換える必要はいっさいありません。ファイルを置けばアプリが自動で読み込みます。
既存の制度を更新する
data/programs/ の中の該当ファイルを開いて直すcheckedAt を今日の日付に更新する（いちばん忘れやすいので注意）npm run check を実行する
各項目の意味
| 項目 | 意味 | 例 |
|---|
recordType | program（制度）か guide（案内）か | program |
id | データを区別する名前（半角英数字） | mext-shugaku |
aliases | 別の呼び名（探すときの手がかり） | ["給付奨学金"] |
replaces | まとめた古いデータの id | ["jasso-kyufu"] |
sources | 根拠にした公式ページの記録 | 下で説明します |
variants | 1つの制度の中の種類（無ければ null） | 第一種／第二種 |
cautions | 申し込む前に知っておきたい注意（画面に出ます） | 併給調整の注意 |
nextSteps | 「確認のしかた」の手順（画面に番号つきで出ます） | 1. 検索する 2. 公式を見る |
name | 名前（guide は「〜を確認する」という行動の形にする） | 高等教育の修学支援新制度 |
provider | やっているところ | 国（日本学生支援機構） |
type | 種類（guide は null） | 給付型 貸与型 減免 減免＋給付型 |
educationStage | 対象となる教育段階 | ["大学", "専門学校"] |
summary | 1〜2文のかんたんな説明 | |
whyCheck | 確認するとよい理由（画面に出ます） | |
mainConditions | 主な対象条件 | |
incomeConditions | 所得などの条件 | |
otherConditions | その他の条件 | |
supportContent | 支援の内容 | |
applicationPeriod | 募集の時期 | |
officialUrl | 公式ページの住所 | https://... |
officialText | 公式情報を確認するときの案内文 |
matching の書き方 — 確認する順番を決める設定
このアプリは**「受けられるかどうか」を判定しません。** matching が決めるのは
**「確認する順番」**だけです。2つの部分に分かれています。
"matching": {
"excludeIf": { "careBackground": ["no"] },
"signals": [
{
"when": { "familySupport": ["difficult", "unknown"] },
"reason": "学費を家の人に出してもらうのが難しいと答えたため、最初に確認しておきたい制度です。",
"strength": "strong"
}
]
}
excludeIf（除外）— とても慎重に使ってください
公式サイトに書かれた条件と回答を照らして、明らかに当てはまらないときだけ制度を消します。
使ってよい例：施設で暮らした経験のある人だけが対象の制度に対して、{"careBackground": ["no"]}
使ってはいけない例：
- 「分からない」「答えない」で消す ← 絶対にしない
- 公式に書いていないことを想像して消す
- 迷ったから消す
原則は「迷ったら残す」です。 情報が足りないことを理由に制度を消すと、いちばん情報が
届きにくい人に、いちばん届かなくなってしまいます。除外条件が決められない制度は
"excludeIf": {} のままで構いません。
signals（シグナル）— 確認する価値がある手がかり
| 項目 | 意味 |
|---|
when | どの質問に、どう答えた人か |
reason | 確認するとよい理由。この文章がそのまま画面に出ます |
strength | strong か normal |
strength の意味をまちがえないでください。
strong は「受け取れる見込みが高い」という意味ではありません。
「その人の回答から見て、特に確認する価値がある」という意味だけです。
reason は画面にそのまま出るので、次の書き方を守ってください。
| 書き方 | 判定 |
|---|
| 「〜と答えたため、確認しておきたい制度です」 | ✅ よい |
| 「〜と答えたため、確認する価値があります」 | ✅ よい |
| 「あなたは条件を満たしています」 | ❌ 資格の判定になってしまう |
| 「対象になる可能性が高いです」 | ❌ 同上 |
npm test が、断定的な表現を自動で見つけて止めてくれます。
null の意味 — とても大切です
null は「まだ分からない」という意味です。「条件が無い」ではありません。
"incomeConditions": null
分からない項目を、想像で埋めないでください。 間違った所得基準や締切が載ると、高校生が「自分は対象外だ」と誤解して、受けられたはずの支援をあきらめてしまうかもしれません。
null の項目は、画面にそもそも表示されません。「情報なし」とも出ません。空欄を見せると「条件が無い」と誤解されるためです。
draft と verified の違い（program の場合）
| 意味 | 画面での見え方 |
|---|
"status": "draft" | まだ公式サイトで確認していない | 「サンプルデータ」の札が付く |
"status": "verified" | 公式サイトを見て内容を確認した | 札が付かない |
guide の場合は draft と checked を使います。checked は「確認先と探し方が妥当だと確認した」という意味で、「制度の内容を公式確認した」という意味ではありません。
verified に変えてよいのは、あなたが公式サイトを実際に開いて、書いてある内容と一致することを確かめたときだけです。そのときは次の3つが必要です。
checkedAt に確認した日を入れるofficialUrl に公式ページの住所を入れるsources に、見たページをすべて記録する
これらが無いまま verified にすると、npm test が失敗して教えてくれます。
sources（根拠の記録）
verified にする制度には、どのページを見てこの内容を書いたのかを残します。半年後に見直すとき、どこを見ればよいかがすぐ分かります。
"officialUrl": "https://www.mext.go.jp/kyufu/outline/index.html",
"sources": [
{
"title": "制度の概要（文部科学省）",
"url": "https://www.mext.go.jp/kyufu/outline/index.html",
"checkedAt": "2026-09-16",
"note": "制度の目的、構成、対象教育機関、支援内容"
}
]
officialUrl は利用者に見せるリンク1本（カードのボタン）sources は根拠のすべて（複数可）
npm test が次を確認します。
verified の制度に sources が1件以上あるofficialUrl が sources のどれかのURLと一致するcheckedAt が sources のどれかの日付と一致するsources のURLが公式ドメイン（.go.jp .ac.jp .lg.jp .or.jp）である
まとめサイトやブログを根拠にできないようにするためです。
variants（1つの制度の中の種類）
同じ制度の中に種類があるときに使います。別のカードに分けないでください。 申し込み窓口も時期も同じものを分けると、別々の制度に見えてしまいます。
"variants": [
{ "id": "first", "name": "第一種奨学金", "interest": "無利子",
"summary": "返す必要はありますが、利子は付きません。" },
{ "id": "second", "name": "第二種奨学金", "interest": "有利子",
"summary": "返す必要があり、利子も付きます。" }
]
種類が無い制度は null にしてください。
cautions（申し込む前の注意）
画面に黄色い枠で表示されます。 知らずに申し込むと困ることを、短く書きます。
"cautions": [
"給付奨学金と第一種奨学金を併せて利用する場合、第一種の貸与月額が調整されます。"
]
書いてよいのは、公式情報で確認できたことだけです。「あなたの場合はいくら減ります」のような個別の計算はしません。
nextSteps（確認のしかた）
画面に番号つきの手順として表示されます。 「どこを確認すればよいか」が分かるように、
3つ程度の手順を書きます。
nextSteps: [
JASSOの検索ページで、志望校の名前を検索してみる,
志望校の公式サイトで「奨学金」「学生生活」「学費」などのページを見る,
分からないときは、志望校の奨学金・学生支援の担当に問い合わせる
]
案内（guide）を checked にするときは、この項目が必須です。
確認先が分からなければ、案内になっていないためです。
replaces（まとめた記録）
2つのデータを1枚にまとめたときは、消えた側の id を記録します。
"replaces": ["jasso-kyufu"]
例：給付型奨学金は「高等教育の修学支援新制度」の一部なので、別カードにすると同じ支援を二重に見せてしまいます。そのため1枚にまとめ、元の id をここに残しました。
この記録があると、「Ver.0 で見えていた情報が消えていないか」を確認するテストが、まとめた先で見つけてくれます。
checkedAt（情報確認日）の更新
公式サイトを見て内容を確かめたら、毎回この日付を今日に更新してください。
"checkedAt": "2026-09-15"
形式は 年-月-日 で、月と日は2桁です（2026-9-5 ではなく 2026-09-05）。
この日付があると、情報が古くなったことを自動で気づけます。 npm test は、確認から12か月以上たった制度を見つけると、こう教えてくれます。
確認から12か月以上たった制度があります:
- jasso-kyufu（最終確認 2025-09-15）
まだ確認していない制度（draft）は対象外です。確認日が無いのに「古い」と言うのはおかしいためです。
雛形ファイルの使い方
新しく作るときの雛形が2つあります。雛形自体はデータとして読み込まれません（ファイル名が _ で始まるものは読み飛ばします）。
| 雛形 | 使うとき |
|---|
_TEMPLATE-program.json | 実施主体がはっきりしている1つの制度を追加するとき |
_TEMPLATE-guide.json | 学校・地域・民間など、内容が相手によって変わる案内を追加するとき |
コピーして使ってください。中身は空の状態です。
JSON にはコメント（説明の書き込み）を入れられません。 // や /* */ を書くとファイルが壊れます。分からなくなったら、この README に戻ってきてください。
制度データを変えたら
npm run check
制度データも自動で検査されます。
- 項目の書き忘れ
officialUrl が https:// で始まっていないcheckedAt の日付の形が違うstatus が draft でも verified でもない- 「受給できます」のような断定的な表現が入っていないか
最後のものは特に大切です。制度データに書いた文章も、画面に出る以上は安全性の検査対象になります。
ファイル構成
index.html ページの入れ物
package.json 使っている部品と、実行できるコマンドの一覧
vite.config.js ビルドとテストの設定
eslint.config.js コード検査の設定
vercel.json 公開（Vercel）の設定
playwright.config.js スマホ表示テストの設定
CLAUDE.md Claude Code 向けのプロジェクト説明
public/favicon.svg ブラウザのタブに出るアイコン
data/programs/ ★制度データ（あなたが主に触る場所）
data/programs/_TEMPLATE-program.json 制度を作るときの雛形
data/programs/_TEMPLATE-guide.json 案内を作るときの雛形
src/main.jsx アプリの起動
src/index.css 背景と高さだけの最小限のCSS
src/ShingakuNavi.jsx アプリ本体（画面と質問）
src/lib/loadPrograms.js 制度データを自動で読み込む仕組み
src/lib/schema.js 制度データの決まりごとと検査
src/lib/matching.js 確認する順番を決める処理
tests/setup.js テストの下準備
tests/screens.test.jsx 画面と操作のテスト
tests/data.test.js 制度データの検査
tests/matching.test.js 確認する順番の決め方の検査
tests/empty-programs.test.jsx 制度が0件のときのテスト
tests/all-collapsed.test.jsx シグナルが1つも当たらないときのテスト
tests/collapse.test.jsx 折りたたみと確認状態の札のテスト
tests/safety.test.js 危険な表現が混ざっていないかのテスト
tests/helpers/dangerousPhrases.js 危険な言い回しを見つける仕組み
tests/fixtures/ Ver.0 の記録（比較用・書き換えない）
tests/e2e/flow.spec.js スマホ表示のテスト
結果画面の見せ方（Ver.1）
制度は3つのグループに分けて表示します。どれも「確認する順番」の目安であって、
受け取れる見込みを表すものではありません。
| グループ | 入る条件 | 画面 |
|---|
| 特に確認したほうがよい制度 | strong のシグナルが1つ以上 | 開いて表示 |
| 確認する価値がある制度 | シグナルが1つ以上（strong は無い） | 開いて表示 |
| 知っておくとよい制度 | シグナルは無いが、対象外とも言えない | 折りたたみ |
シグナルが当たらない制度も、消さずに折りたたみへ入れます。 「関連を判断できなかった」
だけであって、「対象外」ではないからです。スマートフォンで読みやすい長さに保ちつつ、
必要な人が開いて確認できる状態にしています。
案内（guide）は別のまとまりへ
guide は上の3グループには入れず、**「学校・地域・民間の支援も確認する」**という
別のまとまりで案内します。特定の1つの制度と同じ並びに混ぜると、実在する制度のように
見えてしまうためです。
案内のカードには次の違いがあります。
- 「確認先の案内」という札が付く（給付型・貸与型などの分類は付けない）
- 「サンプルデータ」の札は付けない（制度データではないため）
- カード名が「〜を確認する」「〜を相談する」という行動の形になっている
公開する（Vercel）
高校生にスマートフォンから使ってもらうために、インターネットへ公開します。
Vercel は個人利用なら無料で、GitHub と繋ぐだけで公開できます。
初回だけの作業（10分ほど）
-
このコードを GitHub に置く（すでに置いてあります）
-
https://vercel.com/ を開き、GitHub アカウントでログインする
-
「Add New...」→「Project」を選ぶ
-
このリポジトリを選んで「Import」を押す
-
設定画面が出ます。何も変えずに「Deploy」を押してください
vercel.json に設定を書いてあるので、Vercel が自動で読み取ります。
| 項目 | 自動で入る値 |
|---|
| Framework Preset | Vite |
| Build Command | npm run build |
| Output Directory | dist |
| Environment Variables | 何も設定しません（このアプリは秘密情報を使いません） |
-
1〜2分待つと、https://（プロジェクト名）.vercel.app のようなURLが表示されます
このURLを知っている人だけが開けます。 検索で見つかるわけではありません。
コードを更新したあと（2回目以降）
特別な操作は要りません。 GitHub に push するだけで、Vercel が自動で作り直します。
git add .
git commit -m "変更内容を書く"
git push
push してから1〜2分で、公開URLの中身が新しくなります。
push する前に必ず npm run check を実行してください。 失敗したまま push すると、
公開サイトが壊れるか、Vercel のビルドが止まります。
公開をやめたいとき
Vercel の管理画面で、プロジェクトの Settings → 下のほうにある
「Delete Project」を押すと、URLが使えなくなります。
公開サイトは、答えた内容を保存も送信もしません
これは約束や設定ではなく、そういう作り方をしていないということです。
| 状態 |
|---|
| サーバー（バックエンド） | ありません。HTML・CSS・JavaScript を置いているだけです |
| 入力欄（氏名・住所・メール等） | 1つもありません。選択肢を押す形式だけです |
localStorage / Cookie / データベース | 使っていません |
| 外部へのデータ送信 | ありません |
| アクセス解析（Google Analytics 等） | 入れていません |
| Claude API などの外部API | 使っていません |
答えた内容はスマートフォンの画面の中だけにあり、画面を閉じると消えます。
送る先が存在しないので、あとから誰かが見ることもできません。
実際に公開用のファイルをブラウザで動かして、
外部への通信が0件であることを確認しています（npm run test:e2e でも検査しています）。
vercel.json に書いてあること
{
"framework": "vite",
"buildCommand": "npm run build",
"outputDirectory": "dist",
"headers": [ ... ]
}
headers は、安全のための3つの設定です。
| 設定 | 何のため |
|---|
X-Content-Type-Options | ファイルの種類を勝手に判断させない |
X-Frame-Options | 他人のサイトに埋め込んで、別のサービスのように見せられるのを防ぐ |
Referrer-Policy | 公式サイトへ移動したときに、どこから来たかを伝えない |
3つ目は、利用者が奨学金のページを見たことを外部に知らせないための設定です。
手元で公開用ファイルを確認したいとき
npm run build 公開用ファイルを作る
npm run preview それをブラウザで確認する
