モバイル向けレスポンシブなインタラクティブマップの設計手法

Webサイト訪問者の65%以上がスマートフォンやタブレットからデジタルマップを利用しています。イベント会場を歩く来場者であれ、建設予定地に立つ住宅購入者であれ、モバイルでの使いやすさがエンゲージメントに直結します。

デスクトップ操作はマウスホバーや正確なカーソル移動を前提としていますが、タッチ画面では指先や親指での操作、限られた画面幅に対応しなければなりません。モバイルファーストなマップ設計には、タッチ領域、ドロワー配置、ジェスチャー制御のきめ細かな最適化が不可欠です。

デスクトップではピンのクリックで横に浮き出るカードを表示できますが、幅の狭いスマホ画面では浮きカードが地図全体を覆ってしまい、位置感覚を失わせます。

Layerpin はモバイル表示時、情報カードを人間工学に基づいた ボトムシートドロワー へ自動変換します。ピンをタップすると下から滑らかにスライドアップし、写真、タイトル、仕様、CTAボタンが親指の届く位置に整然と並びます。

下方向にスワイプするだけでドロワーを軽快に閉じることができ、地図の空間的な位置関係を見失わずに探索を継続できます。

モバイルWebサイトにマップを埋め込む際によくあるストレスが『スクロールトラップ』です。記事を下へ読み進めている最中に指がマップに触れると、マップの拡大縮小や移動に巻き込まれてページが止まってしまいます。

Layerpin はスマートジェスチャー処理を搭載しています。Webページ埋め込み時、二本指操作またはタップ操作でのみマップを動かす制御により、記事のスムーズなスクロールを阻害しません。

画面上に明確なズームイン、ズームアウト、視点リセットのボタンを配置し、ピンチ操作を行わなくても快適に閲覧できるように配慮しています。