地図UIで実現する新しい検索UX ｜ 導入事例 - Apaman Network株式会社
ホテルやレストラン、イベントなど、近年さまざまな情報の探索において使われることも多くなってきた地図検索UIですが、不動産の検索、つまりお部屋探しや物件探しにおいてもその実例は増えてきています。情報を一覧で閲覧できる視覚性と、直感的に絞り込める操作性が心地よいユーザー体験を生み出しているのかもしれません。
Apaman Network株式会社様（以下、アパマンネットワーク）は、「アパマンショップ」のフランチャイズブランドを展開している不動産会社です。賃貸住宅仲介業店舗数はNo.1（*）で、全国に1093店（*）の契約店舗を抱えています。また、最先端のクラウドやシステムの提供も行っており、アプリを通じた賃貸物件の検索サービス（アパマンショップアプリ）の提供も行っています。
今回、そのアプリ内において地図検索機能を実装するにあたり、弊社Mapboxが提供する地図情報の開発プラットフォームを導入していただきました。本記事では導入にあたっての経緯と決め手についてご紹介していきます。
新しいトレンド、地図検索UI
アパマンショップアプリの競合となる他社サービスでは、アプリ内に地図検索機能を実装している例が増えている、という状況にありました。
地図を活用した検索UIは近年、ホテル検索やレストラン検索、イベント検索など、さまざまな領域で実装されるようになってきましたが、不動産検索サービスにおいてもその事例は増えてきています。
アパマンネットワークでアプリの主担当を務める三原さんによると、ユーザーからのご意見のなかにも「地図で検索できるようにしてほしい」との要望があり、その要望が地図検索機能を実装するきっかけになったそうです。
Unityを使った開発環境
アパマンショップアプリに地図検索機能を導入するための前提として、クロスプラットフォームであること（アパマンショップアプリはiOS、Androidで提供されています）、またUnityを使った開発環境であることなどがあったそうです。
Unityは元々ゲーム開発に利用されるような開発環境ですが、いずれはAR技術や3D技術を利用してみたいという想定もあったので、開発環境としてUnityを採用したという経緯もありました。
この要件の中で地図検索機能を実現できる地図開発サービスを探していく中で、Unityと組み合わせることができ、2Dマップと3Dマップの両方をサポートしているMapboxのMaps SDK for Unityと、情報レイヤーを加えるためにGeocoding APIの導入を決めていただきました。
三原さん（アプリ主担当）「色々探していく中で、Mapboxなら二次元の地図もサポートしつつ、かつ豊富なビジュアルもあるということもあったので、ユーザーにわかりやすい地図検索を実現できると考え、UnityとMapboxを組み合わせることを決めました」
▲ Mapbox SDK for Unityの実装画面
Mapbox Docsより
視覚的で直感的な検索UX
こうして実装された地図検索機能では、地図検索の強みである「視覚的・直感的に目的の情報を探すことができる」という点を活かした工夫がなされています。
例えばベースマップには、電車の線路や駅、大通りなどが目立つように色付けされたデザインが採用されています。そうすることでユーザーは交通の利便性に関する情報を目当てにエリアを絞って物件を探すことができます。
また、地図の縮尺によって表示される物件のアイコンを変更することで、広域で表示されているときの絞り込みと、詳細に表示されているときのUXに考慮した工夫が組み込まれています。広域で地図が表示されているときには、複数のアイコンがまとまり、特定のエリアにある物件数として表示されますが、地図をズームインしていくと、アイコンが分散されていき、一つ一つの物件を表示するアイコンとして表示されるようになります。
▲ ズームイン・アウトによって表示される物件のアイコンが変化する
このような機能があることで、例えば「新宿徒歩圏内でかつ代々木公園の近くに住みたい」という条件で探すときに、まずは大まかに代々木公園の北側で物件が多そうなエリアにズームインしていき、その後物件の情報を見ながら細かく絞り込んでいく、というようなことが可能になります。また、表示されるアイコンが多すぎて見づらいということも防ぐことができます。
地図検索機能の導入の結果、新たな検索機能としてユーザーのみなさまにも認知いただいております。また、アプリな新検索機能としてもご利用いただいており、地図検索経由のお問い合わせも多く入ってきているとのことでした。
▲ なお今回、店舗の所在地の表示のためにMapboxのStatic Images APIについても導入いただいております。
*2019年10月1日時点 （株）矢野経済研究所調べ（1,093店舗）
主要9事業者における店舗数。直営店舗とフランチャイズチェーン加盟店舗の合計値、海外及び契約店舗含む。
契約店舗とは、出店が確定している店舗、出店準備中店舗含む。
・・・
ということで本記事では、アパマンネットワークによるMapboxのMaps SDK for Unityの導入にあたっての経緯と決め手についてご紹介させていただきました。アパマンショップのアプリは以下のリンクからダウンロード可能です。ぜひ新しく実装された地図検索機能を試してみてください。
▼アプリダウンロードリンク（iOS版）
▼アプリダウンロードリンク（Android版）
なお、今回の取り組みは国際航業株式会社様とのパートナーシップにより、成立したものです。アパマンネットワーク様へのご紹介や、導入に至るまでの米国Mapbox Inc.との英語でのコミュニケーションサポート、プロダクトに関する情報提供といった点でご協力いただきました。Mapboxが日本進出して間もないこともあり、日本語ドキュメントやお問い合わせ機能がまだ充実していない中、密なコミュニケーションを通じてサポートしていただきました。
また、今回導入いただいたMapbox SDK for Unityでは、2Dマップでの利用以外にも、3Dマップを活用したゲームやAR技術への応用も可能です。Mapbox SDK for Unityに関するドキュメントやその他の導入事例、チュートリアルは、以下のリンクからご覧になれますので、是非あわせてお読みください。（英語）
【お問い合わせ】
本記事で紹介したアパマンネットワーク様の取り組み、および弊社のプロダクトやサービスについては、下記までお問い合わせください。
Apaman Network株式会社 WEB戦略部
web-promotion@apamanshop.co.jp
マップボックス・ジャパンお問い合わせ
https://www.mapbox.jp/contact
【関連記事】