MobilityNight#3 マップビジュアライゼーション

Transcript

1. Mobility Night #3 マップビジュアライゼーション KINTOテクノロジーズ 新サービス開発部 兼 モバイルアプリ開発G Producerチーム やまゆき 2025/5/7
2. ©KINTO Corporation. All rights reserved. 2 Index 1 はじめに 2 「これ、やってよかった」話 3 「これは、失敗だった」話 4 5 さいごに – TIPS 目次
3. ©KINTO Corporation. All rights reserved. 3 はじめに 1
4. ©KINTO Corporation. All rights reserved. 4 プロダクトのご紹介 KINTO特別仕様車「Uグレード」の専用アプリ KINTO Unlimitedアプリ
5. ©KINTO Corporation. All rights reserved. 5 プロダクトのご紹介 • コネクティッドドライブトレーナー コネクティッド技術を活用して、 安全で燃費の良い運転をアドバイスするサービス アプリで提供しているサービス etc. • ハードウェアアップグレード アップグレードレディ設計による、 車両機能/装備の後付けサービス
6. ©KINTO Corporation. All rights reserved. 6 プロダクトのご紹介 • コネクティッドドライブトレーナー コネクティッド技術を活用して、 安全で燃費の良い運転をアドバイスするサービス アプリで提供しているサービス 今日はここで使っているマップのUI/UXの話
7. ©KINTO Corporation. All rights reserved. 7 マップを使うプロダクトに関わったのは入社してから × “ 熟練ノウハウ ” → “ 何も知らないところから気づいたこと ” を共有
8. ©KINTO Corporation. All rights reserved. 8 「これ、やってよかった」話 2
9. ©KINTO Corporation. All rights reserved. 9 「これ、やってよかった」話（１） マップ自体の情報量を絞る
10. ©KINTO Corporation. All rights reserved. 10 「これ、やってよかった」話（１） KINTO Unlimited アプリでは、 車で走行したルートをアプリ画面に反映します。 ここで必要となることは、ユーザーに走行ルート あるいは、何かしら安全・燃費のアドバイスがある場所を 分かりやすく提示することです。 しかし、・・・
11. ©KINTO Corporation. All rights reserved. 11 「これ、やってよかった」話（１） Googleマップ・Appleマップ いずれも、 そのまま使うとマップ自体の情報量が多くて、 見たい情報が見づらい。
12. ©KINTO Corporation. All rights reserved. 12 「これ、やってよかった」話（１） 過剰なスポット（店など）を非表示にする ＆ 全体の色味を抑えて情報量を絞る。
13. ©KINTO Corporation. All rights reserved. 13 「これ、やってよかった」話（１） 具体的には
14. ©KINTO Corporation. All rights reserved. 14 「これ、やってよかった」話（１） JSON スタイル オブジェクトを地図に渡す。 Google MAPの場合 JSONスタイルの準備には ↓ のようなサービスが使える。 https://snazzymaps.com/ 担当デザイナーにこれを使って 地図デザインを作成してもらい、 JSONで受け取って実装
15. ©KINTO Corporation. All rights reserved. 15 「これ、やってよかった」話（１） Emphasis（強調する方法）をMuted（ミュート）に指定する Apple Map Kitの場合 iOS 17.0〜 これくらい変わる
16. ©KINTO Corporation. All rights reserved. 16 「これ、やってよかった」話（１） 情報量を絞ることで、見たい情報を見やすくすることができた。
17. ©KINTO Corporation. All rights reserved. 17 「これ、やってよかった」話（２） 見たい場所まで自動で動かす
18. ©KINTO Corporation. All rights reserved. 18 「これ、やってよかった」話（２） マップは広大に広がっているので、 知りたい場所をマップ上で探すのが手間。 例：今みている場所 「A地点」を拡大表示している場合、 遠く離れた次に見たい場所「B地点」を画面上の地図で探すのは手間。 今みている場所 「A地点」 次に見たい場所 「B地点」
19. ©KINTO Corporation. All rights reserved. 19 「これ、やってよかった」話（２） 見たい情報を選ぶと共に、 該当の場所までマップを自動で動かす。 カードやピンを選ぶと、その位置まで動く。 動画をお見せします
20. ©KINTO Corporation. All rights reserved. 20 「これは、失敗だった」話 3
21. ©KINTO Corporation. All rights reserved. 21 「これは、失敗だった」話（１） タップできないマップ
22. ©KINTO Corporation. All rights reserved. 22 「これは、失敗だった」話（１） KINTO Unlimited アプリでは、 安全運転のトレーニング機能を提供しています。 この機能で重要な情報は、 「どこを走ったか」＜「スコアやアドバイス」です。 しかし、・・・ そのため、どこを走ったか（マップ）は 補助的な情報として タップ／ズーム できないものを 提供していました。 サブ メイン ↑ 補助的な情報 タップ/拡大できない
23. ©KINTO Corporation. All rights reserved. 23 「これは、失敗だった」話（１） リリース後、どこを走ったか （どこで、どんな検知があったか）の情 報を見たいという声。 ヒートマップにもタップの痕跡あり・・・
24. ©KINTO Corporation. All rights reserved. 24 「これは、失敗だった」話（１） 補助的な情報であることは間違ではないものの、 それらを必要とするシーンでは、 マップを広げて詳細を見たくなることがわかった。 私たちは 無意識に、窮屈なマップを広げて見たくなる？ マップってできるだけ広げて見たいもの。 マップ＝タップ・ズームできるものと期待してしまうのかも。 期待を裏切ってしまっていた （タップ・ズームできるよう修正）
25. ©KINTO Corporation. All rights reserved. 25 「これは、失敗だった」話（１） ルートと川の混同
26. ©KINTO Corporation. All rights reserved. 26 「これは、失敗だった」話（２） ルートによく使われるのは、原色系の色。 これは、ルートを見やすくするため。 ただ、KINTO Unlimited アプリでは ブランド方針で原色系の色を避けており、 ブランドカラー（KINTO BLUE）を使うことに。 その結果、・・・ 原色系の青を使った例
27. ©KINTO Corporation. All rights reserved. 27 「これは、失敗だった」話（２） ルートが川のように見え、 一見、何が何かわからない状態に・・・。 青系のくすみ色（not 原色）がダメというものでもはなく、 黄・赤・グレーのくすみ色（not 原色）も、 それはそれで、高速道路など別の何かと混同する結果に。 ここにあります
28. ©KINTO Corporation. All rights reserved. 28 「これは、失敗だった」話（２） • フチつきにする • マップ自体の色をミュートする で解決することがわかりました。 原色系を使うしか手がないのか・・・ 色々試した結果、原色を避けたい場合は フチをつける
29. ©KINTO Corporation. All rights reserved. 29 さいごに – TIPS 4
30. ©KINTO Corporation. All rights reserved. 30 さいごに – TIPS 意外と使えた AppleのMap Kit • iOS17.0 〜さまざまなAPIが追加され、アプリ で充分に活用できることがわかった • KINTO Unlimitedでは、iOSのマップを「Google マップ → Map Kit」に切り替え • これにより、 Googleマップ の利用料を削減す ることができた（Map Kitは無料）
31. Thank you !