都道府県の地図をSVGで描く：色分けの決め方と注意

都道府県の色分けの地図は、県の形をSVGで描き、数字の大きさに合わせて県ごとに色の濃さを変えた地図です。コロプレス図とも呼びます。地域の偏りを一目で見せられますが、向かない数字があり、塗り方を間違えると読む人に違う印象を与えます。

棒グラフをSVGで描く基本と、読み上げ用の名前の付け方はグラフをコードで描く⁠に書きました。ここでは、地図に特有の注意を扱います。

色分けの地図に、向く数字・向かない数字

色分けの地図は、面積の大きい区域ほど目に入ります。北海道は、数字が平均的でも、地図の上ではいちばん大きな色の面になります。一方、東京都や大阪府は面積が小さく、濃く塗っても目立ちません。

件数をそのまま塗ると、人口の多い県が濃くなるだけです。「製造業の事業所が多い県」⁠の地図は、ほとんど人口の地図と同じ形になります。件数を見せたいなら、地図ではなく、棒グラフか表で並べます。

順位も、1位⁠と2位⁠の差が大きくても小さくても同じ色の差になるので、地図には向きません。並べ方はランキングページの作り方⁠に書きました。

色の段階は、どう決める？

数字を5つ前後の段階に分け、段階ごとに1色を決めます。段階が多すぎると、隣り合う色の違いが見分けられません。

段階の区切り方は、主に2つあります。

等間隔で区切ると、1県だけ値が大きいときに、残りの46県が全部同じ色になることがあります。等分位で区切ると、どの段階にも県が入りますが、隣り合う段階の値の差が小さくても色が変わります。どちらを選んだかと、区切りの値を、凡例に必ず書きます。

色は、1色の濃さで

割合のように、小さいから大きいへ一方向に並ぶ数字は、1つ⁠の色相の濃さの違いで塗ります。赤から青のように色相を変える塗り方は、全国平均より上か下かのように、真ん中に意味がある数字のときだけ使います。

色の見分けにくい人もいるので、色だけで情報を伝えないようにします。グラフをコードで描く⁠に書いたWCAGの基準と同じです。地図では、県にマウスを載せると数字が出る仕組みより、横に表を置くほうが確かです。

地図のデータは、どこから取る？

県の形は、国土交通省の国土数値情報の行政区域から取れます。2026年10月26日⁠に確かめたデータのページには、次のように書かれています。

• 2025年版は、2025年1月1日時点の行政界と海岸線で囲まれる区域
• 形式はGML、シェープファイル、GeoJSON
• 使用許諾条件はオープンデータ（CC BY 4.0）
• 座標系は世界測地系（JGD2011）⁠の緯度と経度

同じページには、一部の市区町村で境界が未確定の地域があり、境界線を暫定的に設定している、という注意も書かれています。

このデータは市区町村ごとの区域です。都道府県の地図にするには、同じ県の区域を1つ⁠にまとめます。海岸線が細かいので、そのままではSVGが重くなります。形を簡単にしてから使います。

出典と、加工したことを書く

国土数値情報の利用規約では、2026年3月23日施行の版で、公共データ利用規約（第1.0版）⁠が当てはめられています。出典の記載例は次のとおりです。

出典：国土交通省 国土数値情報ダウンロードサイト（当該ページのURL）

市区町村をまとめたり、形を簡単にしたりしたなら、使ったデータの名前と、編集・加工したことを別に書きます。規約は、加工した情報を、国が作ったかのように公表してはいけないとしています。追加の記載例は次の形です。

「国土数値情報（○○データ）」（国土交通省）（当該ページのURL）⁠をもとに○○株式会社作成

地図の下に、この2つ⁠を書きます。取得した日も添えておくと、どの時点の境界かが分かります。データごとの使用許諾条件は、各データのページの欄で確かめます。行政区域は先に見たとおりCC BY 4.0ですが、一部制限のあるデータや、商用利用の条件が違うデータもあります。

オープンデータの規約の読み方はオープンデータの利用規約⁠にまとめました。

SVGで描くと、どうなる？

架空の3県の値で、色を付ける部分だけを書くと次のようになります。県の形のdは、実際には国土数値情報から作った長い座標の列が入ります。

<svg role="img" viewBox="0 0 400 300"
     aria-labelledby="m1-title">
  <title id="m1-title">県別の割合（架空の例）</title>
  <path d="M10 10 L120 10 L120 90 Z" fill="#c6dbef">
    <title>A県 12.0%</title>
  </path>
  <path d="M130 10 L240 10 L240 90 Z" fill="#6baed6">
    <title>B県 18.5%</title>
  </path>
  <path d="M250 10 L360 10 L360 90 Z" fill="#08519c">
    <title>C県 26.3%</title>
  </path>
</svg>

段階の色を決める部分は、区切りの値と色の組を1か所に持ちます。

const steps = [
  { max: 15, color: "#c6dbef" },
  { max: 20, color: "#6baed6" },
  { max: Infinity, color: "#08519c" },
];
const colorOf = (v) => steps.find((s) => v < s.max).color;

凡例も、同じstepsから作ります。地図の色と凡例を別々に書くと、区切りを変えたときに片方だけが古いまま残ります。

緯度と経度をそのままxとyにすると、日本の形は東西に伸びて見えます。日本の緯度では、経度1度の長さが緯度1度より短いからです。経度に、地図の中心の緯度の余弦を掛けてから描きます。

沖縄県と離島の置き方

全国を1枚⁠に収めると、沖縄県や小笠原の島は離れた位置にあり、地図が横に広がります。枠で囲んで近くに寄せる描き方がよく使われますが、寄せたことを地図の上に書きます。読む人が、実際の位置と間違えないようにするためです。

地図の横に、表を置く

色の濃さからは、正確な値は読めません。地図の横か下に、47都道府県の数字の表を置きます。表は、県の番号順か値の順で並べ、地図と同じ時点と出典を書きます。表の組み方は比較表をHTMLで作る⁠にまとめました。

表を先に置いて、地図を補助にしてもかまいません。検索から来た人の多くは、自分の県の数字を探しています。地図はその県の位置を見せ、表は値を見せる、と役割を分けます。データで作るサイトの全体はデータベース型サイトから読めます。

仕様・出典の確認日：2026年10月26日⁠。