夜間用UIの設計で気をつけるポイント紹介 〜 Yahoo!カーナビの地図の色設計事例

こんにちは。Yahoo!カーナビ のデザイナー ふがねです。
カーナビアプリに欠かせない「地図」。今回はこの地図のスタイル（デザイン）編集で何を意識し、どんな工夫をしているかについてお話しします。

Yahoo!カーナビの地図編集の手順

地図編集作業の概要や、作業の様子についてはこちらの記事で紹介しています。
これからも進化する Yahoo!カーナビの地図、その改善がリリースされるまで（外部サイト）

上記の記事では、夜のルート案内用の地図の視認性を向上させるために、道路色を変更したことについて紹介しています。この記事では道路色を調整する際何を意識して調整していったかをより詳しくお話しします。
ぜひYahoo!カーナビアプリをお手元に開いてご覧ください。「メニュー＞アプリの設定＞昼夜モードの切り替え」を「夜」にすると夜間用の地図が見られるようになります。

夜間用UI調整で気をつけるべきこと　　

夜モードの地図は名前の通り、夜間や、トンネル区間を走行するときに表示される黒っぽい色の地図です。自動車内においては暗い環境で明るい地図を表示すると、フロントウインドーに画面が反射したり、画面が明るすぎて相対的に暗い前方が見えなくなる危険があることから、明度を落とした地図に切り替えられるようにしています。

夜モードの地図は、目への負担を低減させることや、バッテリーの消耗を防ぐことを主目的としているダークモードUIとは目的が異なりますが、調整で気をつけるべき点は同じだと思います。同じように視認性を向上させるために、コントラストを強めるわけですが、あまりにもコントラストが強いと、ルート線といった一番重要な情報が見えづらいという弊害が出ます。利用する環境が暗いことを考慮して、ちょうどいいあんばいで見えるように、適切な作業環境を整える必要があります。

人間の目は暗いところでは桿体（かんたい）細胞という網膜の細胞が30分ほどかけてウォーミングアップし、徐々に暗いところに慣れていくのですが、その状態と明るいところで見る色の見え方は大きく違います。そのため、明るい場所でカラー設計作業をすると、実際に使う暗いところで見たときに意図した見え方よりも明るすぎ、色の浅い印象になってしまいます。実際の利用環境に近い暗い環境で色を決める必要があるため、私は自宅の窓のない屋根裏に仕事用パソコンを持ち込んで数時間こもって調整作業をしました。このとき、ディスプレイの輝度もスマホでは環境に合わせて自動調整されるため、ほぼ最低輝度にしておきます。

実際に暗い環境で、ディスプレイの輝度を下げて以下の図を見てみてください。

暗い環境でコントラストを強める場合、Aのように明度を上げるだけでは色が浅く感じられてしまうため、少しだけ彩度も高めると見やすくなります。

ズーム値（地図の縮尺）によって、道路の色を変えている

お気づきの方も多いかもしれませんが、Yahoo!カーナビでは地図の縮尺によって道路の色を変化させています。
地図の縮尺が1.5kmほどの状態から、縮尺を50mほどまで拡大したときでは、一部の道の色が変化していくのが分かるかと思います。この色変化のしかたは、道路種別によっても微妙に違います。

この章では種別ごとに色をどう変更したかと、縮尺による色の変化がどうなっているかを見ていきましょう。
※ここでの「縮尺」はYahoo!カーナビ iOS版で見た場合のズームボタンに記載してある数値を指しています。Android版はこれと少し異なりますのでご了承ください。

広域図では高速道路が最も目立つように

まずは、地図の縮尺を3km以上に縮小表示してみてください。
地図を縮小表示しているときは、広い範囲を移動したい時なので、より遠い距離を移動するために高速道路の利用がメインになる考えられます。そうすると、高速道路をもっとも目立たせる必要があります。

高速道路の色味は、もともと高速道路内の看板で使われている緑系の色を踏襲し、#3e7a67 としていました。しかしそのまま地図に載せると、わずかにくすんだ印象があったため、今回の変更では同じ緑系のまま、少し彩度を高めて#44A586に変更しました。
高速道路は、引きの地図でも寄りの地図でもしっかり目立たせたい道路種別なので、縮尺による色の変化は設定しないことにしました。

中程度の広域図では一般主要道路をよりはっきりさせる

次に、地図をもう少し拡大して、縮尺750m〜200mのところを見てみましょう。市区町村をまたいだ移動の際に見ることの多いこの縮尺では、先ほどの高速道路の視認性はそのままに、茶色っぽい主要一般道と、グレーのその他一般道も合わせて見えるようになってきます。

あまり細かい道路に惑わされず、広域移動で利用の多い主要一般道の「脈」がしっかり捉えられるコントラストにしました。それぞれの色も明度を上げるだけでなく、彩度も調整しています。目立たせたい道路はより強い色目に調整しました。また縮尺500m前後からは細街路（ほそがいろ）も見えはじめますが、主要な道路がはっきり見えるように、あえてぐっと明るさを落としました。調整前後を比較してみて、いかがでしょうか？　細街路の色を暗くしただけでも、主要道路の脈がよりはっきり見えるようになりました。
このように、ユーザーにとってノイズになりかねない要素のコントラストを下げることで、本来ユーザーに集中させるべき視点を邪魔せずに済むようになります。運転中のような、長い時間注視できない状況で見る画面では、特に必要な調整です。

詳細図ではすべての道路を同じくらいはっきり見せる

さらに地図を拡大すると、縮尺100m以下になるころから、道路が実幅（じっぷく）表示になります。この倍率になると、住宅街など、細かい道路の形状までしっかり見たいという場合に使われることが多いです。

ここでは交差点もくっきり見えるため、道路の種別の切り替わるポイントで違和感が出ないように、高速道路の色の強さに合わせるかたちで、すべての種別の道路が同じくらいの強さで見えるようにしました。幅1mに満たないような細い道路も、しっかり見えます。これで、細い道も含めて周囲の道路の状況を把握でき、より安心して走れるようになったのではないかと思います。

まとめ

縮尺によって色を変える工夫は、昼モードの地図でも同様にしているので、ぜひアプリで確認してみてください。
夜間に使われるUIを設計する際は、実際に近い環境で見るのと見ないのとでは随分印象が変わります。部屋の明かりを消して、ディスプレイの輝度を下げるだけでも実際に近くなります。みなさんも、アプリのダークモード対応をする際などは、ぜひリアルな環境で調整してみてください。

Yahoo!カーナビでは、今後もより見やすい地図になるよう改善を続けてまいります。