Web デザイントレンドセッション 原の目「緊急情報 2018」Web 版

年末に行なった CSS Nite Shift 12 や、今月大阪で開催された 第38回リクリセミナー「Webデザイントレンド in 大阪 2019」 の「原の目」で話した「緊急情報 2018」を実際のスライドをはさみつつ、お送りします。

Web デザイントレンドセッションに参加されたことがない人向けに「原の目」についてちょっと書きますと、このセッション、長い時には 1 時間 30 分という時間で行われるため、ひたすらトレンドの紹介をするだけだと、どうしてもだれてきてしまいます。そこで何年も前から「〜の目」という数分のコラムを間に挟む感じで行なってきました。

今回取り上げた内容も知っている人は、既知の情報であるし、そうでない人は自治体の緊急情報の出し方って今はこんな風になってきているのかということを知っていただけたらと思います。

自治体サイトにおける緊急情報

僕は毎年いくつかのカテゴリーの Web サイトを定点観測して、傾向をイベントにて発表していますが、そのうちの一つが自治体です。

全国の県市町村は 1700 ほどあり、これらの自治体をクロールし、ちくちくとウォッチするということを 10 年くらいやりつづけております。この 10 年間で自治体サイトをとりまく状況は大きく変わりました。特に 2011 年の東日本大震災が自治体サイトに与えた影響は大きく、緊急情報の発信方法については、毎年改善が進んでいます。

伝統的な緊急情報のスタイル

緊急情報で最もオーソドックスなスタイルは、以下のように、左右のサイドエリアもしくはコンテンツエリアの上部に赤色を基調として掲載されるスタイルです。このスタイルもまた、時間をかけて広まっていきました。

こちらは、雄武町の Web サイトにて掲載されている緊急情報です。雄武町は、緊急情報に限らず様々な要素がバランスよく盛り込まれており、個人的には最も自治体サイトらしい自治体サイトと思っています。緊急情報は、大きく分けて次の2点で展開されていることが多いです。

• いま起きている事象についての情報
• 緊急の際に参照するべき情報

他のよくある緊急情報の表示パターンとしては、ヘッダーエリア上部に緊急情報が追加されるパターンです。こちらは、暫定的に情報が追加されるスタイルであり、上場企業サイトでも不祥事が発生した場合にヘッダーエリアより上に追加の情報が掲載されることがありますが、同様の挿入のされ方です。

シンプルバージョン

近年見られる別のパターンとして、緊急時にシンプルバージョンで表示するというパターンがあります。このパターンでは、通常のトップページへ移動するナビゲーションが用意され、本来のコンテンツは別ページより参照してもらうという形をとります。

緊急時は情報をもとめて殺到する人がいたり、そもそも通信状況が悪い状態になることが考えられるため、必要最低限の情報のみを掲載した簡素な HTML にて提供されています。

2018 年もいくつかの Web サイトにて、シンプルバージョンによるトップページが展開されました。例として高梁市を取り上げました。

高梁市は通常時のトップページは上のように、ビジュアル要素も多く含んだデザインとなっています。これが緊急時では以下のように変化します。

緊急時は必要最低限の情報のみを掲載し、また画像要素も極力少なくしたデザインとなりました。このようなスタイルは東日本大震災以前はあまり見られませんでした。

2018 年に新しく出てきた緊急情報モード

2018 年に新しく出てきた緊急情報のスタイルとして、(おそらく CMS に織り込み済みの) 緊急情報モードを搭載したサイトがあります。緊急情報モードは、前述のシンプルバージョンの延長線上にあるスタイルであると認識していますが、より通常時のビジュアルアイデンティティを保っている点が異なります。

里庄町の Web サイト は、ページ全体が元の意匠を保ちつつも、緊急時は配色がガラリと変わり、緊急状態であることを知らせてくれます。まずは、通常モードの里庄町の Web サイトから。

緊急時は、以下のように緊急情報モードへと切り替わります。緊急時においても元の Web サイトが持っていたアイデンティティが保たれており、里庄町の Web サイトであることが一目でわかります。

ここまでシームレスにモード切り替えを実現している事例は以前は存在しませんでした。またこの緊急情報モードですが、ほかの自治体サイトでも同様のスタイルに切り替えられていることを確認したため、これは CMS に組み込み済みの機能なのだろうなあと思うに至った次第です。

あまり自治体サイトを普段から見るという人は少ないかと思いますが、緊急情報一つとってみても、そこには多様な世界が広がっているのです。