これからも進化する Yahoo!カーナビの地図、その改善がリリースされるまで
こんにちは。Yahoo!カーナビ のデザイナー ふがねです。
カーナビアプリに欠かせない「地図」。今回はこの地図のスタイル（デザイン）編集についてのお話を書こうと思います。
地図の改善リリースまでの流れ
Yahoo!カーナビは約1年前から、Mapbox社の地図開発プラットフォームを活用しています。Mapboxのプラットフォームを使うと、こんな感じのツールひとつで編集から本番リリースまで完了します。（恐ろし…いや素晴らしいですね！）
作業は、以下の手順でおこないます。
1. スタイルをブラウザーで調整する
スタイルの編集はウェブツールで行います。ある項目を変更すると、すぐさまプレビューが更新されるので、どのような結果になるかを確認しながら作業します。
2. 検証環境で実機確認する
検証環境で、スマートフォンの画面に収まったときの見え方や、実際に使う車の中での見え方を確認したり、アプリの動作に悪影響がないかを確認します。
3. ブラウザーからワンクリックで公開
2で確認OKとなれば、本番環境に反映されるスタイルを更新し、Publishします。作業は5分ほどで完了します。
最近の地図改善で行った編集作業を 一部ご紹介
それでは、最近行った改善での具体的な編集作業を紹介していきます。
〜夜モード・ナビ地図の道路色改善〜
【課題】夜間のルート案内中に表示される地図モードで、道路が視認しづらい
修正前の地図も、コントラストなどさまざまな考慮の上色が決められていましたが、川などの水域の色が道路の色よりも少し目立っており、道が相対的に目立たない状態です。川や水路を一瞬でも誤って道だと認識してしまえば事故のもとですし、より瞬時に分かりやすい地図にするため、今回は道路色を全体的により強くする編集をします。
ここから編集作業に入っていくわけですが、夜に使う地図の色のチューニングでは気をつけなければいけないことがあります。
人間の目は暗いところでは桿体（かんたい）細胞という網膜の細胞が30分ほどかけてウォーミングアップし、徐々に暗いところに慣れていくのですが、その状態と明るいところで見る色の見え方は大きく違います。簡単に言うと、暗い色でも少し明るめに、彩度は浅く見えます。高校の生物で習った方もいらっしゃるかもしれませんね。
そのため、明るいところで作業をすると、実際に使う暗いところで見たときに意図した見え方よりも明るすぎ、色の浅い印象になってしまいます。
そこで実際に使う環境に近い目で作業・確認するために、自宅勤務の中、暗い環境を探し、私は自宅の窓のない屋根裏に仕事用パソコンを持ち込んで数時間こもって作業しました。（他に夜地図を編集した方には、夕方以降に作業時間を取ったメンバーや、窓のないバスルームで作業されたメンバーもいました）
作業環境が整ったところで、道路の色をつかさどるレイヤーの色の設定を変更していきます。地図は、表示する要素ごとのレイヤーを重ねて表現しているのですが、そのうち道路は高速道路と一般道、それぞれ高架区間、地上区間、地下区間からなり、対象レイヤーは全部で 60枚以上あります。それら全ての色のバランスを見ながら調整しました。
▲高速道路の色は、#3e7a67 から #44a586 に変更。他の道路の色も、ズームの倍率ごとに色を微妙に変化させながら指定しています。
夜モードの地図調整の難しいところは、暗所に目が慣れるまで30分かかるので、暗所作業の時間を決めて、その時間内に「これぞ」という色のバランスを決定する必要がある点です。昼モードの地図とは違い、他の業務の隙間時間に30分ずつ作業するということが難しいのです。
この時間内に、
・画面からある程度距離が離れても各種道路がしっかり見えるか
・逆に見えすぎてチカチカしないか
・河川や鉄道、建物など他の要素が沈んでしまわないか
・地図を引いたときも寄ったときも自然に見えるか
・ナビのルート線が地図の上に乗ったときルート線がかき消されないか
など多方面に気をつけて色を決定していきました。
調整が終わってからは、テスト環境にスタイルを反映し、複数メンバーで夜間に実機での見え方を確認します。その後実機でも問題なかったので本番環境に反映しました。
Yahoo!カーナビの地図スタイル編集環境の変化
少し余談になりますが、Mapbox導入以前は、一度作った地図から色などを変更するときは、以下の流れで編集していました。
1. スタイルを管理する表を編集する
地面の色、道路の線の幅、建物の表し方など、1,000項目以上ある地図の構成要素を、エクセル上で編集します。このときどんな地図になるかは目視できないので、どの項目がどの色や形に影響するかは全て頭に入れておく必要がありました。
2. 検証環境で実機確認する
ここで、1で編集した地図がどのように変わったか確認できます。意図通りの表示でなかったり、間違った項目を修正してしまった場合は1に戻って修正です。
3. 地図サーバーに適用して公開する
地図配信サーバーは150台ほどあり、この中に入っているスタイルデータを一台ずつアップデートしていくことで本番公開がなされます。
Mapbox導入までは、編集時に地図を目視できないことから、どの編集項目を修正したらどこが変更されるかを全て把握しておく必要があり、地図の調整は経験と勘が必要で限られた人しかできない状況でした。しかし、現在は地図の変更内容がつぶさに確認できるようになるなどの結果、誰でも、ほぼ1人で調整から公開まで完了できるようになっています。
ちなみに、ヤフーの地図表示のアプリ・サービスはほぼ全てMapboxに切り替わってきています。Yahoo!地図（ウェブ版）、Yahoo! MAP、Yahoo!防災速報、Yahoo!天気・災害で、同じ地図描画システムを利用し、サービスごとの要件に沿ってスタイルをカスタマイズしています。
地図の改善によって、もっとできること
カーナビの地図では、その目的から公共交通機関の構内地図の詳しい表示はありませんでした。しかし、駅に車で送迎することもあることを想定して、地下鉄など小さな駅の出入口も表示したほうが便利ではないかという意見もあります。また、ドライブ中によく探すコンビニエンスストアなどのアイコンをもう少し探しやすくしてほしいといった要望もあります。これらの要望は、地図スタイルを編集することで改善できるものです。
ほかには、新たなスタイルの作成も比較的手軽にできるようになりました。（Yahoo! MAP で最近追加された「ワクチンマップ」もその1つです）季節のイベントに合わせた楽しい地図や、個人の見え方や好みに合わせた地図を増やせる可能性を持っています。
これからも進化します
Yahoo!カーナビでもこれまでは地図編集のできる人が限られていましたが、編集ツールが変わったことで、デザインメンバー全員が地図スタイルの編集ができる体制になってきました。ヤフーには地図編集に紙の地図の頃からずっと携わってきたプロがいるので、その方から講習を受け、地図表現のイロハや、注意すべきことを学びつつ細かいチューニングを繰り返しているところです。
▲修正予定リストはまだまだいっぱいです…！
地図に表示したい情報は何種類もあり、全部出すと逆に見づらくなる難しさはありますが、この尺度で見たい情報はなんだろう？ 車を運転しながら見たい情報はなんだろう？ と考えながら、情報の優先順位をつけ、ごちゃつかずに必要な情報を伝えられるよう、これからも調整を続けていきます。
ご意見・ご感想をお願いします
Yahoo!カーナビは、より安全な運転に貢献できるサービスを目指して機能を改善してまいります。
この機会にぜひYahoo!カーナビをお試しいただき、ご意見・ご感想を下記のリンクよりお寄せください。
■Yahoo!カーナビ - お問い合わせフォーム
↓Yahoo!カーナビを使ってみましょう↓
・機能および画面デザイン、地図表示は、今後の改善により変更になる場合があります。
・実際の交通ルールに従って運転してください。
・運転中の操作および画面注視は大変危険ですのでおやめください。
・必ず安全な場所に停止してから操作および画面を注視してください。
※記事の内容は公開時点での情報です。最新状況とは異なる場合がありますのでご了承ください。
※初出時より一部文章表現を修正しております（2021/6/1）