BLOG

降水量にまつわるGUIのお話とか。

Iwasaki

降水量にまつわるGUIのお話とか。

ヒトを守るお仕事のこと。

こんにちは、デザイナーの岩崎です。

常に煩悩的なことしか考えていないのですが、普段はGUIデザインを主体とした業務に携わっております。 今回はモフではこんなお仕事もやっていますということを少しでも話できればと思いながらブログを書こうかなと思いました。

モフの案件は広告的なWebやスマートフォンのデバイスに特化したUIとは少し異なり、行政や企業などでつかわれる業務用システム画面デザインが多くなっています。その中でも防災情報にまつわる案件はヒトの命に関わる身の引き締まるお仕事です。

防災の画面のこと。

防災情報などを取り扱った画面デザインって何をするのでしょうか。岩崎は信号機のようなものだと思っているのですが、大きな影響を与えるのが「警戒レベル」の設計とデザインです。今回は特に「降水量」について考えてみました。

そもそも降水量ってなんだろう

そもそも「降水量」ってなんなんでしょう。 降水量は雪とか雹とかも含む空から降ってくる水分全般のことを指すようです。(降雨量・降雪量といったモノもあるんですね) 日本各地にある観測地点にある「雨量計」と呼ばれる、直径20cmの筒状の容器に一定の時間にどのくらい水が溜まったかで計測します。

2016-IwBlog-002

雨の強さと体感

たとえば1時間あたりどのくらいの降水量だと体感としてどのくらいの印象なのか?
気象庁にある時間雨量(mm/h)の目安だとすると、

10mm/h以上〜20mm/h未満傘必須。地面からの跳ね返りで足元が濡れる。
20mm/h以上〜30mm/h未満土砂降り。傘さしても濡れる。カッパを着たほうが良い。
30mm/h以上〜50mm/h未満バケツをひっくり返したような雨。道路が川のようになる。
50mm/h以上〜80mm/h未満滝のような雨。視界が悪くなり車の運転が危険レベル。
80mm/h以上恐怖を感じる雨。大規模な災害が発生するおそれあり。

※mm/h = 前述する雨量計に1時間(hour)にどのくらい水が溜まったかの単位です。
※mm/10min = 10分間降水量や、mm/24h = 24時間(1日)もあったりするので単位は大事!

(出典:気象庁ホームページ)

いろんな事例のこと。

モフでは「サンプリング」と呼ばれる情報収集にかなりの時間を使います。デザインをする前に、思いつく限り類するものを探し、列挙し、参考にするフェーズです。岩崎はこのフェーズが一番面白く感じます。
たとえば日本では気象庁からの基本指針があるようです。(あくまで指針のようです。)

ホームページにおける気象情報の配色に関する設定指針

※出典:気象庁ホームページ

以下、気象庁からの基本方針資料から抜粋。

  • 危険が低ければ青系
  • 危険が高ければ赤紫
  • その中間は黄色〜橙色
  • 陸地は緑もしくは灰色
  • 海は水色 or 濃い青系
  • 一般の方へのアンケートで決まった

続いて日本の気象庁以外にも他のサービスや海外などの事例をざっくり分析してみました。

様々な降水量の凡例

気象庁(Japan Meteorological Agency)

いちばん見慣れています。テレビニュースなどでもよく見られます。降水量が低いときは刻みの細かい閾値ですが、一気に50ミリ〜80ミリという数値にステップすることが危険度の高さを意識させているのかもしれません。

※あと降水量は、ほとんどの場合1mm/h以下だからでしょうか。

Yahoo! JAPAN

気象庁とは低降水量〜降水量まで細かい粒度でまんべんなく閾値が設定されています。緑系の配色が組み込まれているのもの気象庁と違うようです。またマップを拡大すると陸地がグレーになりコントラストの配慮も見られます。

※陸地を緑系とするというレギュレーションから、緑系を外す傾向にあります。

アメリカ国立気象局(National Weather Service)

配色はyahooに似ています。そもそも日本と違い降水量がinchのようです。1インチ=25.4mmなのでたとえば…

  • ニューヨークの年間降水量は 1268.1ミリ ≒ 49.93インチ
  • 東京の年間降水量は 1528.8 ミリ ≒ 60.19インチくらい。

※ちなみにinchを採用しているのはアメリカ、カナダ、リベリア、ミャンマーぐらいらしいです。完全にアメリカの国内向けという気がします。

オーストラリア気象局(Bureau of Meteorology)

タイムコントロールはよく見られますが、河川・鉄道・道路をフィルタするマップ機能など、他の国の行政にはあまり見られないタイプです。マップへの各項目の配色の影響もあるせいか警戒レベル配色も少し個性的。

イギリス気象庁(Met Office)

何故か警戒レベルの配色が独特(というか変?)。降水量のMaxが32mm/hということで日本より降水量が低いことがわかります。ロンドンの年平均降水量は750.6mm。東京の半分くらいですね。youtubeやtwitter、スペースウェザー(!)なども配信。

※年間降水量の出展:気象庁、ウィキペディア

いろんな情報や事象と向き合うということ。

いろいろな事例を見ましたが、その国特有のサービスや気候の個性によって様々な配色/ステップ数/閾値にローカルルールがありました。ステップ数や閾値は低降水量はバラバラですが、恐怖・危険度が高まるにつれて赤紫色へ向かっていく配色どのサービスでも同じだったりします。

実案件ではステップ数や配色設計はケースバイケースですが各ステップ間の配色はWCAG2.0推奨のコントラスト比(レベルAA以上)維持を意識しております。しかもモフにはかっちょいい配色になる秘伝のノウハウがあるとか無いとか…!(Adobe Kulerをつかったりします。)

2016-IwBlog-004

枯れた技術の水平思考

今回は日常的によく耳にする降水量について調べましたが、世の中の警戒レベルには上記以外にも地震・津波・大気・水質・交通…などなど。(世に言うデータヴィジュアライゼーションといった分野になるのでしょうか。)

岩崎は故横井軍平氏の「枯れた技術の水平思考」という言葉が大好きです。

日常的によく目にしている些細な情報も分析することによって他案件への水平展開が容易になります。たとえば生産管理や企業経営のKPIのビジュアライゼーションなどにもこういった設計やデザインの分析・調査は十分に役に立ちます。

世の中にはいろんなデータや情報にあふれています。中には専門知識やリテラシーを持たなたいと、分かりにくい表現ばかりです。弊社ではそんな情報や事象をやさしく伝えるべく日々のお仕事と向き合っています。明日は晴れると良いですね、といった気持ちを込めるように…。

ご覧いただきありがとうございました。

おわり。

  • SHARE