白山工業株式会社

Geonavi

地震発生時に各計測地点の地震波形・最大加速度・震度を計測し、ウェブ上の地図にリアルタイムに表示させるだけでなく、過去の地震時のデータをいつでも確認できるなど、地震を見える化するウェブアプリです。

– OUTLINE

計測地点に設置された地震計の計測データを活用し、地震を見える化

iPhone / iPad / iPod touch 用に白山工業様が開発された無料のアプリケーション「i地震」をインストールすると、端末を地震計として使用することができます。すでに全国各地の計測地点に設置・運用されていますが、今回、緊急地震速報などに合わせて取得した各地の計測データをウェブ画面上に表示するフロントエンドと、データを取得するための API の開発を担当しました。

         

POINTフロントの表示や管理画面の操作・閲覧をすべてシームレスに

すでに白山工業様でフロントエンドのプロトタイプを制作されていたので、基本的な機能は継承しつつ、+α の提案と改善を意識して開発しました。操作や機能が制限されて使いにくいものにならないように考慮した結果、フロントの表示や管理画面などもすべてシームレス(※)で操作・閲覧できる、SPA(single-page application)で実装しました。操作に合わせて画面上ではグラフや地図などを複雑に連動させているにも関わらず、非常に使い心地のよいアプリに仕上がりました。
※シームレス:それぞれの機能が区切られることなく一貫して操作することができる状態

POINT決められたゴールがないからこその、こだわりの UI 設計

地震情報を客観的な視点で見るツールであるため、どの画面がゴールとは定まっていない点が UI 設計をする上で難しいポイントでした。メインとなる地図をできるだけ大きく表示するために、可能な限りパネルをたためる構成にしています。さらに、ユーザーによってはどの表示状態も有用となり得るため、個別に展開した場合に不整合や不自然さがないように工夫しました。

デザイナーの声

大量の情報を、それぞれの用途に合わせて表現したレイアウト

大量の情報を扱うツールなので、情報としての整理と有用な UI としてのレイアウトの実現に注力しました。このツールによって地震の被害が少しでも小さくなることを願っています。

エンジニアの声

複数のライブラリに組み合わせで、複雑なインタフェースを実現

地図だけでなくグラフも含まれる豪華なインタフェースのアプリケーションを SPA にするのはなかなか大変な作業でした。Angular に D3.js や Leaflet など複数のライブラリを組み合わせることで、グラフのドラッグ操作と地図表示範囲内に絞り込んだ検索結果が連動するような、複雑なインタフェースを実現しています。

– DESIGN CAPTURE

ご依頼やご相談など、
お気軽にお問い合わせください。
フェンリルは、あらゆる問題解決の
プロフェッショナルです。