予備試験学習サイトを（とりあえず）HTML1枚で自作してみた話

2026年3月現在、予備試験の勉強を続けながら「自分が必要だと思うツールが意外と世の中にないな……」と思うことが増えてきました。

特に行政法や憲法など

• 判例の地理的分布が頭に入りにくい
• どの地域の事件がどの論点に紐づいているか一目で把握したい
• 短答・論文の過去問解説もワンストップで見たい

という欲が出てきてしまい、結局 自分で作るしかない となってしまいました。

できたもの（現時点）

日本重要判例地名マップ
→ 行政法の重要判例を地図上にピン留めして、クリックすると判決概要・条文・論点キーワードが見られるインタラクティブな1枚HTML

主な機能（現時点）

• 憲法・民法・行政法・刑法の4分類でフィルタリング
• ピンクリック → サイドパネルに判例詳細表示
• 関連条文チップ（クリックで条文ポップアップ）
• 短答式演習モード（令和7年対応の行政法・憲法短答問題をランダム出題）
• 予備試験過去問（行政法）の優秀答案構成フロー・論点解説・NGポイントまとめ
• 学習ログヒートマップ＆連続日数トラッキング

技術スタック（超シンプル）

• HTML + CSS（変数＋Noto Serif JP / Noto Sans JP）
• 純粋JavaScript（フレームワークなし）
• SVGで日本地図を手書き（pathデータはネットのフリー素材を参考に微調整）
• localStorageで永続化（回答履歴・メモ・学習ログ）
• モーダル・トースト・ツールチップ全部自前実装

依存ゼロで1ファイルにまとめたので、
ブラウザにHTMLファイルをドラッグするだけで動く 状態です。

今後の予定（Vercel / Netlify 化）

このまま1枚HTMLで満足できなくなりつつあるので、近いうちに以下のように進化させるつもりです。

• Vercel または Netlify で静的ホスティング化
• 判例データ・過去問データを別JSONファイルに切り出し（更新しやすく）
• ダークモード対応
• PWA化（オフラインでも使えるように）
• GitHubで公開リポジトリ化（誰かがフォークして判例追加してくれる未来を夢見る）

作ってみてわかったこと

• SVG地図を手で書くのは地獄（でも一度書けば一生使える）
• localStorageだけで意外とリッチなアプリが作れる
• 予備試験生が本当に欲しいのは「一覧性」と「関連付けの視覚化」だと再認識
• 行政法の判例って「北海道の○○事件」「大阪の△△事件」みたいに地名で覚えてる人、実は結構多い

おわりに

まだまだ粗削りですが、自分が毎日使いたい形に少しずつ近づいてきています。
もし「行政法の地名マップ面白そう」「自分も予備試験ツール自作してる」という方がいたら、ぜひコメントやTwitterで絡んでください〜！

近日中にVercel公開版ができたらまた報告します。

それでは、皆さんの勉強が少しでも捗りますように。

（了）