トップサービス導入事例強み開発ブログよくある質問会社案内 お問い合わせ
Dev Blog

オープンデータで世界の都市の災害リスクを可視化するサイトを作った話

■概要

洪水・地震・サイクロン・山火事・熱波・大気質の6つのハザード指標を公開データから算出し、世界の都市を100点満点で採点するサイトを作りました。

→ City Risk Score

日本国内向けではなく、最初から世界に向けて英語で発信するサイトにしています。東京、ニューヨーク、ロンドン、シドニー、ドバイ、シンガポールから始め、現在は20都市まで拡大しました。

■背景と目的

  • 国連防災機関(UNDRR)やNASA、WorldPopなど、災害リスクに関する公開データは世の中にたくさんあるが、都市ごとに横比較できる形でまとまっているものは少ない
  • オープンデータだけを使い、算出ロジックも公開した「根拠のある」スコアリングサイトを作りたかった
  • 自社のビジネスとしても、「川崎から世界へ!」の第一歩にしたかった ※ 「川崎から世界へ!」は私が通う川崎新田ボクシングジムのスローガンです。

■技術スタック

  • バックエンド: Python(rasterio、geopandas、shapely、H3で地図上のハザードを六角形グリッドに集計)
  • フロントエンド: 素のHTML/CSS + Bootstrap + Alpine.js(できるだけロジックを持たせず、静的サイトとして生成)
  • 地図: MapLibre GL JS + PMTiles。OSMのタイルサーバーやCARTOなど第三者サービスに頼らず、都市ごとのベクトルタイルを自前で切り出してS3に置いている
  • インフラ: AWS S3 + CloudFront(OAC構成)、Route 53
  • データ: UNDRR、NASA、WorldPop、USGS、NOAA、JRC(欧州委員会共同研究センター)などの公開データセット

■多言語対応

英語・フランス語・スペイン語・アラビア語・日本語の5言語に対応しています。アラビア語はRTL(右から左)表示にもきちんと対応させました。

City Risk Scoreのドバイページ(日本語版) City Risk Scoreのドバイページ(アラビア語版、RTL表示)

■こだわった点

  • スコアの算出根拠は全部公開。「言えないこと」は隠さず、洪水モデルが堤防を考慮していない、地震指標が過去の観測ベースで確率論的ハザードではない、といった限界も明記
  • 地図の基盤タイルを自前ホスティングにして、第三者のレート制限やサービス終了に左右されない構造にした
  • アクセス解析(GA4)は同意バナーで許可を取ってから読み込む方式にして、サイト自身の「トラッキングしません」という説明と矛盾しないようにした
  • Lighthouseスコアはパフォーマンス・アクセシビリティ・ベストプラクティス・SEOの4項目すべて100点

■Claude Codeでの開発

このサイトはPythonのジオ空間処理からAWSインフラ構築、デプロイスクリプト、5言語分の翻訳、テストコードまで、Claude Codeと一緒に作りました。

特に助かったのは、地理空間データ特有の「これはバグなのか、それとも実際の地形の特徴なのか」を切り分ける作業です。 例えばジャカルタやコルカタで洪水スコアが想定より高く出た際も、実際の都市圏の範囲(Jabodetabekなど広域行政圏)まで遡って検証し、バグではなく実データの反映だと結論づけるところまで一緒にやってくれました。都市を1つ追加するたびに検証・翻訳・テストまで一通り面倒を見てもらえるので、20都市規模まで一人で回せています。

■今後

  • 都市数をさらに増やしていく
  • 各都市ページへの広告掲載を検討中。被災地への義援金に出来ないか?