白地図 Studio

「都道府県別の実績を地図で見せたい」という要望は、資料づくりの定番でありながら、いざやろうとすると手が止まります。フリー素材の白地図を画像編集ソフトで塗るのは手間がかかり、修正のたびに同じ作業が待っています。白地図 Studioは、この塗り分けをブラウザだけで完結させ、そのまま資料に貼れる形式で書き出すWebアプリです。

解決する課題

地図の塗り分けには、地味に難しい点が3つあります。まず境界データです。47都道府県ならまだしも、市区町村まで正確な形を用意するのは個人の手作業では現実的ではありません。次に配色です。5段階の色分けを見やすく作るには、色覚の多様性や白黒印刷まで考える必要があります。最後に出力形式です。画像で貼ると、あとから1県だけ直したいときに詰みます。

白地図 Studioは、国土交通省の国土数値情報(行政区域データ)を加工した境界データを同梱し、都道府県から市区町村、政令指定都市の行政区までをクリックで塗り分けられるようにしました。配色には色覚に配慮したプリセットと白黒印刷プレビューを用意し、書き出しは「あとから編集できる形式」を優先しています。

主な機能

塗り分けの入力は3通りあります。地図上でクリックして塗る方法、地方単位や検索でまとめて選ぶ方法、そしてExcelやCSVの2列(地域名と値)を貼り付ける方法です。貼り付けでは、数値なら5段階に自動分類し、カテゴリ名なら重複しない色を自動で割り当てて凡例にします。適用前のプレビューと、名前が一致しなかった行の一覧が出るので、表記ゆれにもその場で対処できます。

アートボードは16:9、4:3、A4横から選べ、スライドの安全領域や、東京都の本土を大きく保つ離島インセットも用意しています。凡例と出典表記、プレゼン品質チェックまで含めて、「そのまま会議に出せる見た目」を編集画面の中で確認できます。

書き出しは4形式です。透過PNG、ベクターのままのSVG、レイヤー分けされたPSD、そしてPowerPoint(PPTX)です。PPTXでは都道府県や市区町村が個別のネイティブ図形として出力されるため、貼り付けたあとにPowerPoint上で1県だけ色を変える、といった修正ができます。

開発の背景

このアプリの原点は、「Excelにはもうデータがあるのに、地図にするだけで一仕事になる」という違和感でした。地域別のデータを扱う仕事は多く、塗り分け地図はその最も伝わりやすい見せ方なのに、作る手段だけが専門ツールか手作業に偏っています。

データを持っている人がそのまま地図を作れること、そして作った地図が資料の中で生き続けること(あとから編集できること)。この2つを軸に設計しました。

技術と設計

Next.jsとTypeScriptで実装し、Vercelで静的配信しています。APIサーバーやデータベースはなく、地図の編集もPNG・PPTX・PSD・SVGの生成も、すべてブラウザ内で完結します。編集内容や貼り付けたデータがサーバーへ送信されることはありません。

境界データは軽さと正確さの折り合いに気を使っています。編集画面は最初に全国の軽量な境界だけを読み込み、市区町村の詳細な境界は選んだ県のぶんだけ遅延取得します。データの取得元、加工手順、ライセンス表記はアプリ内とリポジトリのドキュメントに明記し、推奨する出典表記もアプリから確認できます。

現在の状態と既知の課題

機能とコードの自動テストは一巡し、現在はv1のリリース候補という段階です。自動検証はChromiumとWebKitで通していますが、iOS SafariやAndroid Chromeでの実機確認と、スクリーンリーダーでの確認には残件があります。

用途の限界も明記しておきます。同梱の境界は説明資料向けに簡略化してあるため、法的判断や測量の用途には使えません。PSD書き出しの日本語ラベルはラスターレイヤーで、Photoshopのネイティブ文字レイヤーにはなりません。

PowerPointでの使い方と権利面の注意は、ガイド「白地図をパワポ資料に使う方法」にまとめています。フローチャートを同じくネイティブ図形でPowerPointへ渡す「MermaidLayoutFinisher」と合わせて、資料づくりの道具として育てていきます。