タブレット対応ナビゲーション
スマートフォンで使っていたナビアプリを、一つのアプリでスマホとタブレットの両方で使えるよう広げました。タブレットは車内に置いてナビ端末のように使う場面を基準にしました。運転中に見る画面なので、スマホの画面をそのまま大きくすると案内が読みにくく操作も煩わしくなります。そこで共通機能は一つにまとめ、機器ごとの画面の違いを分けて管理する構造を設計しました。作業はアプリ構造の設計から、タブレット画面と解像度への対応までです。
共通機能は一つに、画面の違いは機器ごとに分けたアプリ構造
一つのナビアプリがスマホとタブレットの両方に対応するよう、アプリ構造を設計しました。経路探索や経路案内のような共通機能はそのまま保ち、機器ごとに変わる画面構成だけを分けて管理しました。機能を直すときは一か所を直せばよく、画面は機器のサイズに合わせて個別に整えられます。

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

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

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

この仕事のポイント
一つのアプリでスマホとタブレットを両方支える構造
地図・経路案内・周辺情報・操作エリアを広げたタブレット画面
機器ごとに異なる画面サイズと解像度への対応
インサイト
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…



