Mapboxで理想のハザードマップを考えた

本投稿の内容は国土交通省国土政策局「国土数値情報（浸水想定区域データ平成24年）」をもとに作者がかなりざっくり編集・加工したものです。本投稿に含まれる災害情報は一切の保証をいたしませんので、気になる地域があればご自身で自治体様等が発行する公式情報をお調べ下さい。災害に対する皆様の考えを深める一助になれば幸いです。

#仮定・ハザードマップの情報が一番必要な人
危険度の情報を知り、有事に備える。これが特に必要なのはお歳を召した方や子供などの災害弱者という仮定をしました。津波・洪水被害の事例でも逃げ遅れた高齢者の方を取り上げる報道が有ります。

【図解・社会】東日本大震災・被災３県死者の年齢別内訳（2011年4月19日）
https://www.jiji.com/jc/graphics?p=ve_soc_jishin-higashinihon20110419j-02-w380

それに対して各自治体様が発行しているハザードマップで多く見かけられる書式は、色づかいとか文字がバラバラで凡例の参照が前提になっており、災害弱者の方は凡例の小さな文字を読むのが大変な方の割合が、そうでない世代より多いことが考えられます。

**せっかくハザードマップを手にしてくれても危険度が伝わる前に読まなくなることが考えられます(離脱)。多くの人に危険情報を伝えることがハザードマップの目標(KPI)だとすれば、これはどれだけユーザを理解し寄り添えているか（UX）の問題に他なりません。**

![map_family_shinken.png](https://qiita-image-store.s3.amazonaws.com/0/14288/643ae1bf-bdef-6afb-0006-a1442ce725ca.png)
親子でハザードマップ確認が理想。だがなかなか難しい。

#コンセプト・マップに引き算のデザインを
仮設が正しいとすれば、この課題を解決するハザードマップとは、**パッと見て、文字を読まなくても、だいたいの危険さがわかるもの**かと考えました。

伝えたいことを

**「どこに逃げれば生存確率が高まるか」→「相対的に危険度が高いかわかる」**

という点に絞って、今回は浸水深度のマップを作ってみました。単純に**青色が濃ければ想定浸水深度が高い**というマップです。

<img width="558" alt="スクリーンショット 2018-02-13 16.47.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/373be0e9-3625-0355-a195-ffbeadba6458.png">
我が家近辺は真っ青。

#検証・Mapboxでのプロトタイピング

今回ソフトバンクグループの出資で話題になっているMapboxと
https://www.mapbox.com/

国土交通省国土政策局国土情報課発行の国土数値情報浸水想定区域データを用いて簡易プロトタイピングを作成してみました
http://nlftp.mlit.go.jp/ksj/index.html

##浸水想定区域データの入手
まずは浸水想定区域データを入手しましょう。下記に存在します。注意書きをよく理解してご自身の責任でご使用下さい。
http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-A31.html

例えば東京都のデータをきちんと規約を守りダウンロードすると、A31-12_13_GML.zipというようなデータがダウンロードできるはずです。

##Mapboxでの地図作成
Mapboxの概要は先人の素晴らしい投稿をご参照下さい。自分でかなり細かいところまでカスタマイズできる地図サービスです。
https://qiita.com/nazomikan/items/3ad5e53b24901fd82ba7

2018年2月現在　月50,000ビューまで無料で使えるようです。
https://www.mapbox.com/pricing/

今回Mapboxで一通りの初期設定・アカウント登録ができた前提とします。トップページのGet startedを押すとマップの作成の仕方が選べますので、*Design a map style with Studio*を選択しましょう。
<img width="1037" alt="スクリーンショット 2018-02-14 7.47.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/a369b95e-7a96-2295-71cc-44623c5f33b4.png">
　
　
色々とスタイルが選べますのでお好みで選んで下さい。今回の制作では*Mapbox streets*を使いました。
<img width="1138" alt="スクリーンショット 2018-02-14 8.26.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/4d6b798d-6bac-8af9-4fec-abd41038d233.png">
　
　
既にかっちょいい地図が出来上がっていると思います。ここで先程入手したデータを重ねるために、画面左上のボタンをクリックしてホームメニューに戻ります。
<img width="653" alt="スクリーンショット 2018-02-14 8.51.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/c12cf60c-f9b8-7f49-da96-68e3e1835a87.png">
　
　
ホーム画面上のメニューから*Tilesets*を選択し、*New tileset*ボタンを押して先程入手したZIPファイルを**そのまま**アップロードします。
<img width="1142" alt="スクリーンショット 2018-02-14 8.55.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/92901d91-92f7-cccd-3aee-6419d97d06d2.png">
　
　
数分程度の変換時間の後アップロードしたデータがtilesetとして開けるはずです。そうしましたら*Add tileset to style*を押して先程作成した地図にデータを追加します。
<img width="1102" alt="スクリーンショット 2018-02-14 9.01.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/ee2127ed-0781-34dd-eaa1-89da8d163f3c.png">
　
　
SFチックな滾る地図が表示されるかと思います。こんなMapも作れるのかと空想できるところがMapboxの魅力の一つだったりします。フィルタは後できっちり設定するのでとりあえず*Create layer*を選択してレイヤー化します。
<img width="1274" alt="スクリーンショット 2018-02-14 9.01.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/320cae90-5cdf-8d2e-7997-b14d70c5a2ac.png">
 
 
デフォルトだと色が黒くてわかりづらいのでとりあえず仮の色を置きます。ここは完全に好みなので好きな色を設定下さい。αは透明度の設定です。作業段階ではある程度透過していると間違って重なったデータが発見できます。
<img width="898" alt="スクリーンショット 2018-02-14 9.12.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/94bbb04a-91e4-2ad8-ef02-70fb9874fd7d.png">
　
　
さてお気づきだと思いますが、現状の表示ですと浸水予想がされている地域はわかりますが、深さがキチンと反映されておりません。今度はフィルタリングを使い浸水深度で色分けします。

２０１８年２月現在国交省のwebを見ますと浸水深度データは下記のように定義されております。一つのデータの中に５段階と７段階が混在しているため少し整理が必要です。
![A31-1.png](https://qiita-image-store.s3.amazonaws.com/0/14288/1ede6c41-cc68-49a7-e6c9-7c271873b9b4.png)

http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-A31.html

今回はざっくりと下記の基準でデータ整理をしました。
・浸水深度を５段階の基準に寄せ、上表の２４-２６を１4と同等としてマージ
・同じ地域で複数の浸水深度が存在する場合にはより高い方を採用

上記前提の元、例えば2-5mの浸水深度が最大で予想される地域は↓ピンクで囲った枠内のようなフィルタになります。
<img width="1051" alt="スクリーンショット 2018-02-14 9.39.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/14288/7f04f800-9a3b-0ee0-68e8-c3545b099ccd.png">
これらを必要に応じて各浸水深度ごとにレイヤーを複製しそれぞれに色分けを行いました。緑枠のボタンを押せば現在選択しているレイヤーが複製できるので、フィルタリングの条件を変えたそれぞれのレイヤーを青枠のように作成しました。



#結果・気づき
本手法を用いて東京と埼玉のデータを入れて調整し、幾つかの避難所データを追加したMapを下記に公開します。

https://api.mapbox.com/styles/v1/shmyt/cj4dvtopr044m2sn5m86h4ih2.html?fresh=true&title=true&access_token=pk.eyJ1Ijoic2hteXQiLCJhIjoiY2ozbWE0djUwMDAwMjJxbmR6c2cxejAyciJ9.pqa04_rvKov3Linf7IAWPw#11.3/35.715454/139.825545/0

続く検証では更にこの地図を入れてiOSのネイティブアプリ開発を行い、GPS情報を元に現在の位置の危険度をローカルプッシュ通知で知ることができたり、位置情報履歴を重ねて見ることができるようにしました。

**ハザードマップの情報は重要なのですが、自分の生活圏全てのハザードマップを手に入れ調べるという行為は非常に骨が折れます。ユーザが知るべき情報をいい感じで教えてくれる「頑張って読まなくていいハザードマップ」の形を模索しました。**

iOSのネイティブアプリに組み込むことによって通勤経路の危険度や子どもを預けている保育園の危険度なども直感的に把握することができました。また、例えば東京都のマップを眺めていると山手線を堺に浸水深度が大きく変わっていたり、川・河や水が付く地名には由来がありそうなことが見て取れたり、歴史的な背景を容易に透かし見ることができました。

実際にハザードマップを作成されている官公庁様・制作ご担当様の現場には様々な課題があるのかと推察いたします。人の命に関わる話なので間違いがあってはならず、地価に関わることなので誤解があってはならない情報だと理解しております。防災情報の伝達の仕方をご検討される上での一材料となれたならば幸いです。

繰り返しになりますが、本投稿の内容は国土交通省国土政策局「国土数値情報（浸水想定区域データ平成24年）」をもとに作者がかなりざっくり編集・加工したものです。本投稿に含まれる災害情報は一切の保証をいたしませんので、気になる地域があればご自身で自治体様等が発行する公式情報をお調べ下さい。

テクノロジーとデザインの力で大切な命を守りましょう。