国道・都道府県道を閲覧できる地図を作った

日本全国の国道・都道府県道を閲覧できるWeb地図「国道マップ」を制作しました。

Web上で閲覧できる地図は数多くありますが、この国道マップの特徴は 重用区間 の重視です。

• 国道と都道府県道に特化
  • 重用区間（重複区間）の強調
  • 任意の路線のみに絞り込み表示
  • 起点・終点を共用している地点の表示
  • 一部の計画・工事・旧道区間の表示

もともとは国道のみを掲載していましたが、制作途中で都道府県道にも対応しました。そのため名前が「国道マップ」のままになりました。

きっかけ

夏に長野から只見の 六十里越 経由で東北へ旅行しました。その道中、新潟県魚沼市にておにぎりが4つも重なっている標識を発見しました。長野県内でも標識が2つ重なっているのは見たことがありますが、ここまで多いのは初めての遭遇でした。

ところが、地理院地図 で該当箇所を参照しても 252 号しか記載がありません。Google マップ では 291 号と 352 号のみが記載されている状態で、4つの国道までは表示されていません。標識が誤っているとは考えづらいため、地図側が表示しきれていないのだと考えました。

地図に掲載する都合上、どんなに国道が重複していても若い国道番号にマージされるなどして省略されるようです。しかし、国道が重複している区間を純粋に知りたいがそのような地図がほとんど存在しない¹ ことに気がつき、それでは自分で作ってみようと考えました。

制作

旅行から帰って Claude Code と実現可能性から調査し、数時間ほどで原型ができました。1 ページきりで認証などは必要ないためフレームワークを利用していません。中身も HTML, JavaScript, CSS の組み合わせです。

ただし、路線の情報の抽出・判定・検証は Python を、タイルデータのような配信データの準備には Node.js も併用しています。

技術背景

下記で仕組みを解説していきます。

データソース

道路の情報は OpenStreetMap のデータを利用しています。ただし直接利用するのではなく、Geofabrik² 経由でデータを取得して利用しています。

このデータは .osm.pbf という圧縮ファイルに格納されており、下記の情報が含まれています。

• node: 緯度・経度を持つ地点
• way 情報: 地点と地点を繋いだ道路を表す線のこと
• ルートリレーション: way 情報の集合で路線を表す

way 情報については紛らわしいので国道マップ上では アーク（＝弧）と呼んでいます。これらの情報を使って国道と都道府県道を抽出していきます。

国道の判定と番号の特定

基本的に、国道かどうかは以下の方式で判定を行っています。

• ルートリレーションの種類が「国道」である
• way 情報の名称が「国道N号」である
• 国道に相当する trunk または motorway を持つ
• ほかにもいくつかの細則を適用

次に、国道何号かを判定します。これは以下の情報から収集を行います。

• ルートリレーション
• 名称（国道N号）
• ref タグ

これより最終的に用意したいアークとその番号が決定でき、重用区間も同時に判明します。

しかし、これだけでは過剰に国道を判定することがあり、裏取り として県の範囲内³に、その番号の国道のルートリレーションが実際に存在するかどうかも判断材料にしています。

重用区間

制作の動機にもなった重用区間ですが、151,004 本の全アーク⁴のうち 14.6% にあたる 22,107 本が 2 重用以上の国道に指定されています。14.6% という数値は、現実の重用区間がそこまで珍しい存在ではないということを暗示させます。

ただし、重用の数が増えるほど該当アークは急減し、3 重用以上では 2,345 本、4 重用以上ではわずか 354 本となります。あくまでアークの数ベースでの話なので実際の道路長とは異なりますが、私が通ったあの 4 重用以上の区間は全国で 0.23% しかない道路の一部だったということになります。

道路の「状態」

といっても、この 151,004 本の全アークが通常の国道というわけではありません。

国道においては 海上国道、点線国道、階段国道 が存在します。さらに、工事中のような区間、自動車専用道路となっている区間も存在します。OSMではこのような道路の「状態」も抽出できますので、それもアークの種別として国道マップに表示させてみました。

都道府県道の事情

都道府県道については国道と同様にルートリレーションが情報源として使えます。しかし、名称が「国道N号」のような決まったフォーマットになっておらず、これを情報源としては使えません。

さらに、国道と重なる区間では、都道府県道の指定がルートリレーションにしか残らないという問題もあります。

また、都道府県道における一般道と主要地方道の区別も今回の国道マップに取り込みましたが、いくつかの県では 例外ケース が存在します。

都道府県	主要地方道の条件
（基準）	1 ～ 100 号
北海道	101 ～ 199 号も主要地方道（主要道道）
東京都	301 〜 319 号も主要地方道（特例都道）
福岡県	151 号も主要地方道
大分県	57 号は主要地方道ではない
沖縄県	7、10、23、29、38、70〜75、77〜79、81〜91 号のみ主要地方道

残っている限界

データ抽出と種々の例外ケースなどを考慮しても、道路統計年報⁵や実際の道路と異なる部分が残っています。以下は一例です。

• 海上国道
  • 年報の 1,953 km に対して OSM では 1,757 km
• 旧道
  • OSM 上でルートリレーションも名称も外されている場合は掲載不能
  • 都道府県道の場合はさらに厳しく、年報の 1,892km に対して現状は 39km 分しか抽出できず、現道として表示されている
• 東京都道
  • 38路線の一般都道が特定できず
  • 主要地方道は年報と一致している

配信データ

マップとしてクライアントにデータを配信するにはベクタタイルデータが必要です。実際に下記のファイルを生成して配信サーバに格納しています。

配信ファイル	中身	サイズ
national-routes.pmtiles	国道のベクタタイル	55.9 MB
prefectural-routes.pmtiles	都道府県道のベクタタイル	100.3 MB
national.meta.json	集計データ用のJSON	0.61 MB
pref/{県名}.meta.json	集計データ用のJSON（計 47 個）	計 3.54 MB
pref/index.json	都道府県と番号の対応表（絞り込み用）	14.4 KB
pref/summary.json	都道府県道の全国集計データ	57 バイト
regions.json	地域の一覧データ	5.7 KB

実際には、PMTiles ファイルはファイルの一部だけを読めばよいので、上記のサイズのファイルがそのままダウンロードされるわけではありません。206 Partial Content のレスポンスとして読み取られます。

当初は GitHub Pages だけを使って実現しようとしました。しかし GitHub Pages の CDN である Fastly では、クライアントで指定された Range を圧縮前ではなく圧縮後に適用している上、content-encoding を付与せず返しているため、正しい情報としてダウンロードができません。

やむなく、上記配信データだけ Cloudflare R2 から配信し、圧縮はルールで無効にしています。R2 の無料枠は 10GB ですので、格納だけならば料金はかかりません。

UI上の工夫点

データは用意できたので、ここからはフロントエンドのお話です。

ルック

地理院地図のように地図以外の情報がUI要素としてなるべく表示されないよう、表示しているボタン類は少なくしています。初期状態で出ている文字情報は地図を除けば「国道マップ」と凡例と出典表示だけです。

Claude Code で最初に試作した画面には文字通りのサイドバーがありました。途中で 江戸時代の経路検索 というサイトを知り、国道マップからサイドバーを廃してフローティングパネルに移行した経緯があります。フォントも LINE Seed JP を使って堅苦しいイメージの解消を図りました。

路線の配色についても、背後の地理院地図と調和するような色彩を選んでいます。
濃すぎると浮いて見え、薄すぎると見づらくなります。この点に関しては 紙の地図帳を実際に購入して、どのような配色の工夫を行っているのかを観察し参考にしています。
目立たない程度の道路の縁取りが工夫点です。これにより背後の地理院地図に沈まず読み取れます。

フィール

ワンクリックで国道・都道府県道を非表示にできるボタンを作りました。背後の地理院地図を見ながら確認したいというニーズを感じたためです。

同一地点を外部の地図サイト・アプリで開ける機能もあります。

また、スマートフォンでの閲覧の可能性を考え、拡大・縮小ボタンは長押しでも動作するようにしました。私はよくバイク旅で ツーリングサポーター を使うのですが、アプリ版では同様のボタンと挙動がありこれを参考にしました。バイク用のグローブをしたままだとうまくタップ・ズームできないことが多く、長押しできると大変重宝します。

これから

ほぼ毎日というレベルでさまざまな地図をWebでも紙媒体でも読むのですが、「これなら毎日眺めても飽きないな」と思える地図に仕上がったと思います。

重用区間を表示するだけのはずが、計画中の道路の線形なども表示できたことで、道路の将来像も俯瞰できるようになりました。これは良い副作用でした。

国道・都道府県道にフォーカスを当てて閲覧したいという需要は決して多くないと思いますが、改良を重ねながら末永く管理していくつもりです。

👇️リポジトリ

---

先駆者

地図を公開してから記事に気がつきました（実話）

こちらも路線の絞り込みや都道府県道の表示機能があります。しかし重用区間は経路をホバーしたときのみ表示するようです（閲覧サイト）。

1. 厳密に言えば OpenStreetMap では4つの国道が重複していることが掲載されています。ただしこの区間のみを表示・強調表示することはできません。 ↩

2. ドイツ・カールスルーエの会社。OSM の全世界のデータを大陸・国・地域ごとに切り分け、毎日更新して無償で配布しています。日本の領域では約 2.5 GB のデータ量です。 ↩

3. 計算上の範囲は県の境界線ではなく、県を囲むバウンディングボックスです。 ↩

4. 数値は 2026 年 8 月 27 日時点（日本時間）の OpenStreetMap のデータに基づきます。© OpenStreetMap contributors（ODbL） ↩

5. 『道路統計年報2025』（国土交通省）（https://www.mlit.go.jp/road/ir/ir-data/tokei-nen/2025/nenpo02.html ）の「道路の現況」表8・表11・表12 を加工して作成。令和 6 年 3 月 31 日現在の値です。 ↩