DUOLABS
ポートフォリオ

タブレット対応ナビゲーション

スマートフォンで使っていたナビアプリを、一つのアプリでスマホとタブレットの両方で使えるよう広げました。タブレットは車内に置いてナビ端末のように使う場面を基準にしました。運転中に見る画面なので、スマホの画面をそのまま大きくすると案内が読みにくく操作も煩わしくなります。そこで共通機能は一つにまとめ、機器ごとの画面の違いを分けて管理する構造を設計しました。作業はアプリ構造の設計から、タブレット画面と解像度への対応までです。

Launch
2012
Client
ナビゲーション専門企業
Type
車両・ナビゲーション

01 / 04

共通機能は一つに、画面の違いは機器ごとに分けたアプリ構造

一つのナビアプリがスマホとタブレットの両方に対応するよう、アプリ構造を設計しました。経路探索や経路案内のような共通機能はそのまま保ち、機器ごとに変わる画面構成だけを分けて管理しました。機能を直すときは一か所を直せばよく、画面は機器のサイズに合わせて個別に整えられます。

共通機能は一つに、画面の違いは機器ごとに分けたアプリ構造
02 / 04

地図・経路案内・周辺情報・操作を広く分けたタブレット配置

タブレット用のナビ画面は、地図、経路案内、周辺情報、操作エリアの四つに分けて配置しました。スマホの画面をそのまま引き伸ばさず、広くなった面積に合わせて四つのエリアをそれぞれより広く見やすく組み直しました。各エリアにどれだけ場所を与えるかは、車内でタブレットをナビ端末として使う状況を基準に決めました。

地図・経路案内・周辺情報・操作を広く分けたタブレット配置
03 / 04

運転中の一瞬の視線でも読めるよう決めた車載画面の基準

タブレットのナビは車内に置いて運転中に見る画面なので、読みやすさと操作のしやすさを最優先に考えました。運転者は画面を長く見られないため、案内文と距離表示は一瞬の視線で読める必要があります。操作も数回のタッチで終わることを基準に画面を整えました。

運転中の一瞬の視線でも読めるよう決めた車載画面の基準
04 / 04

サイズと解像度が違っても揺らがない地図と案内

スマホとタブレットは画面サイズと解像度が異なるため、同じレイアウトをそのまま使うと地図と案内がずれて見えます。機器ごとのサイズと解像度の違いを踏まえて画面構造を調整し、地図画面と案内画面がどの機器でも安定して表示されるようにしました。この作業は先に作ったスマホ版の基盤をより大きな画面へ広げたもので、複数の機器をまとめて支える次のバージョンにつながりました。

サイズと解像度が違っても揺らがない地図と案内

この仕事のポイント

01

一つのアプリでスマホとタブレットを両方支える構造

02

地図・経路案内・周辺情報・操作エリアを広げたタブレット画面

03

機器ごとに異なる画面サイズと解像度への対応

インサイト

ブログをすべて見る