Ameba Ownd

アプリで簡単、無料ホームページ作成

compo031.web

オリジナル震度配色ができるまでの話

2020.12.02 11:56

これは地震界隈 Advent Calendar 2020の2日目の記事です。


私が制作している強震モニタ表示サードパーティアプリ「Kiwi Monitor」において、2020年5月6日のアップデートで表示用の震度配色を新しいものに更新しました。

アップデート告知ページでもある程度は震度配色についての色々を書いているのですが、せっかくアドベントカレンダーを作ったので、改めて制作経緯などを振り返りたいと思います。


策定前のはなし

まず、震度配色でもっとも有名なもののひとつに気象庁地震情報ページのものがあります。この配色は2012年以降に使用されているもので、気象庁ホームページ内でできるだけ使う配色を一致させようという理念のもと、降水ナウキャストページなどとほぼ同じ配色が用いられています。

具体的には、降水ナウキャストにおける降水強度の表示は白→水色→青→黄色→オレンジ→赤の順に雨が強くなっていく配色となっていますが、地震情報においてもこれに沿う形で、震度1が白、震度2が水色、震度3が青……といったように配色が決められています。

2012年の策定当時、自分はこの配色がまったくしっくり来ていなく、その気持ちが2014年の初代Kyoshin EEW Viewerでオリジナル震度配色を作ることに繋がります。



はじめてのオリジナル震度配色

初代Kyoshin EEW Viewerでの配色が自分がはじめて作ったオリジナル震度配色となるわけですが、当時ウェザーニュースのサイトにて24時間配信されていたSOLiVE24内の地震情報における震度配色の影響が強くあり、震度3が緑、震度4が黄色というのは個人的にマストとなっていました。

当時、震度6弱の色をどうするか最後まで悩んだ記憶がありますが、結局これもウェザーニュースにならってピンクになっています。

Kyoshin EEW Viewerではこれらの色の上に白文字を乗せることがあったため、色は全体的に暗めに設定していました。

画像:Kyoshin EEW Viewerでの配色



オリジナル震度配色第2弾

その後、2018年にKiwi Monitorをリリースすることになりますが、ここではカラーユニバーサルデザインの考えを配色に採用することになりました。

Kyoshin EEW Viewerに使用していた配色を、制作開始当時の最新であったカラーユニバーサルデザイン推奨配色セットver.3の配色に置き換える形で震度配色が決められています(このときは考慮していませんが、推奨配色セットを正しく使うためには、見分けやすい色の組み合わせを考慮することが必要です)。

(この配色は下に出てくる画像の「Kiwi初版カラー」に該当)



Kiwi Monitorカラースキーム

Kiwi Monitorは2018年5月に初リリースしていますが、その前の4月にカラーユニバーサルデザイン推奨配色セットver.4が公開されていました。しかし、4月の時点ではすでにKiwi Monitorの制作を開始していたため対応が遅れ、12月のアップデートで推奨配色セットver.4に対応することとなりました。

推奨配色セットver.3を使っていたときと大きな変化は無いのですが、ピンクを少し青みがかった色に設定するなど、見分けやすい色の組み合わせとなるよう検討を行っていました。

(この配色は下に出てくる画像の「Kiwi現行カラー」に該当)



Kiwi Monitorカラースキーム第2版へ

2020年初め頃、Kiwi Monitorカラースキームは「配色の明度が不連続である」という大きな問題に当たりました。

これは別件で震度分布図を描画するアプリの制作中にわかったのですが、特に震度6弱の色がその前後である震度5強、震度6弱の色よりもかなり明るい色になっていて、その連続性がわかりにくくなっていました。なんといっても、地図に震度アイコンを描画したときになんとも言えない不気味さがありました。

その影響で、「明度に連続性をもたせた震度配色を作ろう」という目標を立て、3月頃から4月にかけて新しい震度配色を作ることとなりました(大人しく気象庁配色に合わせれば良いというのはそれはそうなんですが、やはり震度3を緑に、震度4を黄色にしたい思いは今もあるので……)。


その新しい配色の制作過程は以下の画像のようになっています。

まずこれまで使ってきた配色や気象庁配色を参考として上部に置き、目指したい色名を、そして下部に案を置き、改善案をその下に下にと並べています。

画像:Kiwi Monitorカラースキーム第2版の制作過程(左から順に震度1~震度7、一番左下は震度1未満の例)


最終的に決定したのは画像中の「案5版」(といっても6つ目の案)で、結果として、震度1から震度4までは徐々に明度が上がり、震度4から震度7までは徐々に明度が下がるという、震度4を境にした明度連続な配色が完成しました。

また、配色の決定については色のシミュレータを参考にし、目の不自由な方にとっても出来るだけ色の違いを区別しやすいような配色を心がけました。

さらに、暖色系で似通っている震度4から震度6強までについては、震度4、震度5弱/強、震度6弱/強の3カテゴリでそれぞれ区別がつきやすいよう、明度に比較的大きな段階をつけています。これは気象庁配色において震度4と震度5弱の区別がすごく分かりにくいなと自分で思ったのが理由で、比較的大きな区別を必要としないと思われる震度5弱と5強のあいだ、および震度6弱と6強のあいだについては明度の段階を小さくしています。


制作過程におけるいろいろな試行錯誤はここでは触れませんが、もし深く知りたい方がいれば画像から良い感じに想像してみてください。



おわりに

というわけで、すごい雑な紹介となってしまいましたが、オリジナル震度配色の制作についてまとめました。

特に今年に入ってから、Twitter上でオリジナル震度配色を公開されている方を複数見かけています。それぞれの配色にそれぞれのこだわりポイントがあるでしょうから、ぜひ他の方々の同じような話を見てみたいなと思います。