MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2022.09.30

地図のブックマーク(位置保存)機能にみるUI作成の流れ

TOP

みなさんこんにちは。マルティスープ株式会社 UI/UXチームです。

 

2022年2月、iField Web v4.6.1で地図表示のブックマーク(位置保存)機能を追加しました。

こちらはよく表示する地図の中心座標・ズームレベルを名称付きで保存でき、いつでも簡単に呼び出すことができる機能です。

 

本機能を例に、デザインが確定するまでの流れや、普段どういうことを考えて検討を進めているのかをご紹介いたします。

 

 

 

本機能の必要性や背景について


 

当初、iFieldは地図のホームポジションを1つ決めることができました。

しかし、iFieldを導入していただく企業様が増えていくにつれ、点在する現場を持っていたり、注視したいエリアが複数ある企業様も増えてきました。

その場合、見たい場所へ毎回地図を移動させ、各現場やエリアを確認するのは使いにくく、「よく表示する地図の位置や見たいサイズを保存し、その場所へすぐ移動ができる」地図のブックマークのような機能が必要となりました。

 

 

 

UIとUXで検討が必要なポイント


 

新たな機能を追加する際に確認・検討したポイントは主に下記です。

※検討開始時点では詳細まで詰まっておらず、新たに確認するポイントがでてきたりと、進めていきながら詰めて行きました。

 

  • 利用者像(ペルソナ)
  • 利用シーンや使用フロー
  • 機能の配置場所
  • 機能のカタチ(入口)
  • 機能の操作性
  • 機能のボリューム
  • 他機能のデザインや操作の整合性
  • 今後のiField
  • etc…

 

 

 

案出し


 

今回一番悩んだのは機能のカタチ(入口)と操作性かもしれません。

利用者がそのボタンを押すとどんなことができるのかイメージでき、迷わずに操作が行えることと、操作は保存の新規追加が簡単に行え、保存したものはすぐ使える必要がありました。

最初から両方を表に出すのがベストですがスペース的な制限もありかなり悩みました。

何よりその機能があること事態を知ってもらうことも重要と考えました。

 

追加する機能について、UIやUXを検討する際、世の中に出ているいろいろなサービスを参考にさせていただいたりもするのですが、今回の機能は他の地図サービスであまり見られないタイプのものになると思います。何かを保存するという行為は、お気に入りやブックマークの登録等、様々なサービスで経験されている思うのですが、地図に対して多くの方はその経験がないことに配慮しデザイン案を検討していきました。

 

 

【ボツ案の例】これは一番最初の案です。わかりやすいが、場所をとり今後の機能拡充に支障が出てしまう。また保存したものがすぐに使いにくいということでボツ。

地図保存機能-5

 

 

 

社内共有&ご相談


 

作成したいくつかの案をUI/UXチーム内・開発チーム・CSチームと適宜打ち合わせを行い、多くの方々からご意見をいただき、修正や仕様を固めていきました。

ご協力いただいた方々、また短い期間で機能を実装していただいた開発のみなさんにこの場を借りてお礼を申し上げます。

 

 

 

地図のブックマーク(位置保存)機能のご紹介


 

最後に、最終的にリリースされた本機能を簡単ではありますがご紹介いたします。

 

 

地図の位置を保存をするイメージを持っていただけるよう、ブックマークアイコンを地図のホームボタン横に配置しました。このボタンをクリックします。(初期は以下のようにOFF)

地図画面

 

 

クリックするとブックマークバーが展開します。まだ何も登録されていない初期状態の場合は操作方法の説明を表示します。

地図画面 – 1

 

 

地図を、表示したい位置や大きさに合わせたら、バーの一番左のボタンをクリックし、タイトルを記入して保存します。

地図_位置を保存 – 1

 

 

保存した位置がボタンとして追加されます。これで地図で別の場所を表示させていても、このボタンをクリックすれば、すぐに保存した位置に地図を移動させることが可能です。

使用シーン1

 

 

同じ要領で、他にもよく見る地図の位置を保存するとボタン1つで表示をすぐ切り替えることができます。

使用シーン2

 

 

位置の保存はいくつもでき、バーに並んでいきます。順番の入れ替えもドラッグ&ドロップで可能です。

地図_位置保存バー_ON状態(保存イメージ) – 1

 

 

是非この機能を使っていただき、もし何かご不便等ございましたら適宜ご要望いただけますと幸いです。

引き続きiFieldを宜しくお願いいたします。

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2018.04.26

Googleマップでマーカーの回転

みなさん、こんにちは。

Google マップでマーカーを描画するとき、回転したいなと思うことはありませんか?

例えば、車の走行履歴・・・

続きを読む

2017.03.05

Google マップにKMLファイルをロードする

みなさん、こんにちは。

今回は、Google Maps に KMLファイルをロードしてマーカー、ライン、ポリゴンを表示する方法を紹介します・・・

続きを読む

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマ・・・

続きを読む

 - iField, スタッフ日記