白山工業株式会社

Geonavi

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

AWS UXデザイン

  • Web

– OUTLINE

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

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

         

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

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

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

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

– DESIGN CAPTURE

– STAFF VOICE

デザイナー

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

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

エンジニア

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

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

アプリ開発でお悩みなら。

実績の詳細、開発規模など詳しくはお問い合わせください。お電話でもメールでも承ります。