Mizumi｜全国ダム貯水率を地図で一覧できる無料ツールを作った

「あのダム、今どれくらい水が入っているんだろう」。ダムの貯水率を調べたいとき、国交省のサイトを開いて都道府県を選んでダムを選んで…という操作をしたことがある人は少なくないはずだ。

その手間を、地図を開くだけで済むようにしたのが Mizumi（水見） だ。

Mizumiとは

Mizumiは、全国786基のダム貯水率を地図上で一覧できる無料Webツールだ。

国土交通省「川の防災情報」のデータを毎日自動取得し、ダークテーマの地図上に貯水率を水滴型のマーカーで表示する。マーカーの中に水が溜まっている量が、そのまま貯水率を表している。

主な機能

貯水率に応じた水滴マーカー

Mizumiの最大の特徴は、水滴型のSVGマーカーだ。貯水率0%なら空っぽ、100%なら満杯。数字を読み取るまでもなく、見た瞬間に状況がわかる。

色分けは5段階。

色	状態	貯水率
赤	危機的	0〜19%
オレンジ	要注意	20〜39%
黄	注意	40〜59%
緑	正常	60〜79%
青	満水	80〜100%

危機的状態のダムには波紋アニメーションが表示され、遠目でも一発で異常を察知できる。

危機的ダムのアラートバー

画面上部に、貯水率20%未満の危機的ダムが一覧表示される。ダム名をタップすると地図がそのダムにフォーカスする。渇水期に「今どこが危ないか」を即座に把握できる。

ダム名検索

フィルターパネルの検索ボックスでダム名を入力すると、名前・ふりがなで即座に候補が表示される。デスクトップでは ⌘K ショートカットで検索欄にフォーカスできる。

お気に入りダム

気になるダムをお気に入り登録すると、次回アクセス時にすぐフィルタリングできる。データはブラウザのローカルストレージに保存されるため、アカウント登録は不要だ。

URL共有

ダムを選択すると、URLに ?dam=ID パラメータが付与される。このURLをそのまま共有すれば、相手のブラウザでも同じダムがフォーカスされた状態で開く。

フィルター

貯水率レベル（5段階）、都道府県、データなしダムの表示/非表示を組み合わせて絞り込める。ズームレベルに応じてマーカーサイズも自動で変わるため、広域表示でも密集して見づらくなりにくい。

データソースについて

Mizumiのデータは、国土交通省「川の防災情報」 が公開しているダム観測データを使用している。

• マスターデータ: 786基のダム位置・名称情報
• 観測データ: 貯水率、水位、流入量、放流量（約150基が対象）
• 更新頻度: 1日1回（毎日JST 15:00）

約150基でも、主要な多目的ダム・水力発電ダムはほぼカバーされている。自分の地域の水源ダムの状況を確認するには十分な範囲だ。

技術構成

開発者向けに、Mizumiの技術スタックを簡単に紹介しておく。

レイヤー	技術
フロントエンド	Next.js 16 + TypeScript + Tailwind CSS v4
地図	Leaflet.js + CartoDB Dark Matter タイル
データキャッシュ	Upstash Redis（Vercel KV）
ホスティング	Vercel（Hobbyプラン）
データ取得	Vercel Cron → 川の防災情報 OBSLIST API

マーカーはCanvas/WebGLではなく、SVGをDivIconとして生成している。clipPathで水面の高さを制御し、貯水率をビジュアルに表現する仕組みだ。この方式はパフォーマンスこそCanvas描画に劣るが、CSSアニメーションやDOM操作との相性がよく、今回のユースケースでは十分に実用的だ。

使い方

1. mizumi.and-and.dev にアクセスする
2. 地図が表示され、データのあるダムが水滴マーカーで表示される
3. マーカーをタップ/クリックで詳細パネルが開く
4. 左のフィルターパネルで絞り込み（モバイルは左上のメニューボタンから）
5. 共有したい場合はURLをコピー、またはダム詳細パネルの共有ボタンを使う

スマホの場合はホーム画面に追加すると、アドレスバーのないアプリ風の画面で使えるためおすすめだ。

まとめ

Mizumiは「ダムの貯水率を、地図を開くだけで確認できる」という一点に集中したツールだ。

国交省のデータを毎日自動取得し、水滴型マーカーで直感的に可視化する。渇水ニュースが流れたときに「自分の地域のダムは大丈夫か？」をすぐ確認できる。そんな実用性を目指して作った。

使ってみて気になる点があれば、X（@dennoukoei_pdm）で気軽にフィードバックをどうぞ。