DUOLABS
ポートフォリオ

給油所の位置案内地図サービス

運転者がWebブラウザで近くのガソリンスタンドを地図で探す位置案内サービスを開発しました。同じ会社のWeb地図サービスで作った地図技術を、実際の顧客が使うスタンドブランドのサービスに移して適用しました。誰でもアクセスするサービスなので、地図の表示が遅かったり操作への反応が鈍かったりすると、運転者は別の方法でスタンドを探します。全国のスタンド位置の表示、近くのスタンドを探す画面フロー、地図操作、軽い読み込みを担当しました。

Launch
2008
Client
韓国の石油精製会社
Type
地図・空間情報

01 / 04

近くのスタンドを地図ですぐ探せる位置案内

ガソリンスタンド位置案内サービスは、運転者がWebブラウザで全国のスタンドを地図で見て、近い場所を選べるサービスです。全国のスタンドの位置データを地図上に載せ、運転者が地図を見ながら近くのスタンドにたどり着く画面フローを組みました。住所の一覧を読む代わりに、地図で自分の周りを見て選べるようにすることがこのサービスの出発点でした。

近くのスタンドを地図ですぐ探せる位置案内
02 / 04

ドラッグし、拡大し、押して選ぶ地図操作

Web地図サービスには、地図の移動、拡大・縮小、位置の選択という基本操作が必要です。これらの操作をブラウザの中ですぐ反応するよう実装しました。運転者は地図をドラッグして周辺へ動かし、拡大して近くを見て、スタンドの位置を押して選びます。

ドラッグし、拡大し、押して選ぶ地図操作
03 / 04

最初の画面がすぐ出るよう軽くした地図の読み込み

地図サービスは、最初に開くときの速さと操作への反応で使われるかどうかが決まります。実際の利用者がアクセスする環境と回線の状況に合わせ、地図を読み込む量とスタンドのデータを表示する方式を軽く整えました。実サービスに移すにあたり、安定性と読み込み速度を基準に性能を合わせ直しました。

最初の画面がすぐ出るよう軽くした地図の読み込み
04 / 04

一度作った地図技術を別のサービスへ移した再利用

ガソリンスタンド位置案内サービスの地図は、一から作り直したものではありません。同じ会社のWeb地図サービスのために作った地図技術を、実際の顧客が使うブランドサービスに合わせて移して適用しました。共通の技術を別の領域のサービスで使い直す経験がこの仕事で積み上がり、同じ地図技術はその後、新都市のバス情報地図へとつながりました。

一度作った地図技術を別のサービスへ移した再利用

この仕事のポイント

01

全国のガソリンスタンドの位置を表示するWeb地図

02

近くのスタンドを探す画面フローと地図操作

03

先行するWeb地図技術を実サービスに移した再利用

インサイト

ブログをすべて見る