給油所の位置案内地図サービス
運転者がWebブラウザで近くのガソリンスタンドを地図で探す位置案内サービスを開発しました。同じ会社のWeb地図サービスで作った地図技術を、実際の顧客が使うスタンドブランドのサービスに移して適用しました。誰でもアクセスするサービスなので、地図の表示が遅かったり操作への反応が鈍かったりすると、運転者は別の方法でスタンドを探します。全国のスタンド位置の表示、近くのスタンドを探す画面フロー、地図操作、軽い読み込みを担当しました。
近くのスタンドを地図ですぐ探せる位置案内
ガソリンスタンド位置案内サービスは、運転者がWebブラウザで全国のスタンドを地図で見て、近い場所を選べるサービスです。全国のスタンドの位置データを地図上に載せ、運転者が地図を見ながら近くのスタンドにたどり着く画面フローを組みました。住所の一覧を読む代わりに、地図で自分の周りを見て選べるようにすることがこのサービスの出発点でした。

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

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

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

この仕事のポイント
全国のガソリンスタンドの位置を表示するWeb地図
近くのスタンドを探す画面フローと地図操作
先行するWeb地図技術を実サービスに移した再利用
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



