「Yahoo!カーナビ」10周年! リニューアルに込めた思いと次世代への挑戦

サービス
男性が笑顔で立っている写真とテキストが組み合わされた画像です。Yahoo!カーナビの10周年を記念しています。

LINEヤフーでは、さまざまな社員が働いています。「WHY? LINEヤフー」シリーズでは、社員の仕事内容や思いを通じて、LINEヤフーで働く魅力をお伝えしていきます。
今回登場するのは、サービス提供開始から今年で10周年を迎えた「Yahoo!カーナビ」のデザインリニューアルを担当した廣橋です。どのような背景や狙いから今回のリニューアル内容に至ったのでしょうか。仕事で大切にしている価値観や今後の意気込みについても聞きました。

男性が白い背景の前で微笑んでいる写真です。彼はカジュアルな服装をしています。
廣橋 孝紀 (ひろはし たかのり)
ローカル統括本部 ローカルサービス本部 デザイン部 デザイン5チーム 2017年、旧ヤフーにデザイナーとして新卒入社。スマートデバイス本部で新規事業関連の企画やデザインを担当した後、2020年に移動交通系のサービス部門に異動。「Yahoo!マップ」や「Yahoo!乗換案内」を担当し、昨年10月よりYahoo!カーナビにも携わる。

ユーザーに寄り添い、安全・安心な機能を提供する

――はじめに、これまでの経験と現在の仕事内容について教えてください。

大学ではデザイン工学科を専攻し、プロダクトデザインを中心に学びました。2017年、旧ヤフーにデザイナーとして新卒入社し、最初の配属先では新規事業関連の企画やデザインを担当しました。アプリのデザインに注力しているチームに所属していたので、入社1年目はYahoo!マップのARモード機能のデザインなどにも関わっていました。
2020年に移動交通系のサービス部門に異動し、Yahoo!マップを引き続き担当しながらYahoo!乗換案内のトレインキャスト機能のコンセプト設計なども行いました。昨年10月から本格的にYahoo!カーナビに携わっています。今回のYahoo!カーナビ10周年のタイミングで行ったデザインリニューアルでは、主にデザインのリード役やコンセプトづくりを担当しています。

男性がノートパソコンの前で笑顔を見せている写真です。背景には幾何学的なデザインが見えます。

――いろいろなカーナビサービスがある中で、Yahoo!カーナビにはどんな特徴がありますか?

Yahoo!カーナビは2014年から提供を開始し、今年で10周年を迎えました。最新の地図情報と聞き取りやすい音声案内、走行しやすいルートを組み合わせた高品質なルート案内を提供できる点が特徴です。また、「マイカー登録」という機能を使って車を登録すると、車幅に合わせて広い道路を優先的に案内し、安全・安心な案内を提供します。

そのほかにも、曲がり角のタイミングでイラストを付けて丁寧に表示する機能も、ユーザーから好評いただいています。渋滞や規制情報などをリアルタイムに反映して、地図も常に最新の状態で運用しています。マイカー登録では車幅に合わせたルート案内以外にも、例えば車検の満了時期やオイル交換日などの事前通知、お得なクーポンの定期提供なども行っています。

車の管理アプリの画面を示す画像です。メンテナンス記録やクーポン情報が表示されています。

登録すると車種に合った情報やメンテナンスのリマインドを受け取れる「マイカー登録」

――ユーザー一人ひとりに合わせて、より丁寧で安心できる機能を提供しているのですね。

そうですね。いろいろな移動手段がありますが、車は種類も多くさまざまな道を通るので、危険な状況が発生しやすいと思います。そのため「安全・安心」をしっかり念頭に置きながらサービスづくりをしています。

――特におすすめの機能はありますか?

自車アイコン」という現在地のマーカー部分を3Dの犬や猫、車など全18種類のアイコンに変えられる機能が人気です。3Dモチーフの選定や質感の設定に至るまで、若手デザイナーが中心となり積極的に取り組みました。犬と猫には「ミルク」や「ルナ」など、実際の名前ランキング上位の名前を付け、より親しみやすく愛着が持てるよう工夫しています。

また、最近アップデートした機能として、生成AIを搭載した音声案内があります。今回LINEヤフーが新たに開発したオンデバイス型ニューラル音声合成技術を活用しています。これにより、より高品質な音声が生成され、声の抑揚や感情、発音の細かなニュアンスまで再現できるようになりました。その結果、声の質と音量が改善され、「明瞭で聞き取りやすくなった」とユーザーから好評をいただいています。

スマートフォンの地図アプリで、車のアイコンを動物や車のデザインに変更できる設定画面です。

3Dの自車アイコンでお気に入りのアイコンを設定できる

変化する時代とニーズに応じたデザインリニューアル

――今回のYahoo!カーナビのデザインリニューアルには、どういった背景があったのでしょうか。

これまでも少しずつデザインをアップデートしてきたのですが、今年はYahoo!カーナビの提供開始から10周年を迎えるため、それに合わせて新しくすることを決めました。自動車業界において、今は100年に一度の大変革と言われています。EV(電気自動車)やカーシェアリング、運転の自動化といったさまざまな変化が進む中で、Yahoo!カーナビも世の中のニーズやトレンドに合わせてデザインを変化させていく必要があると考えたのです。

近年は特に若年層の車の使い方が変化していると感じます。以前は自分の車を持つことが一般的でしたが、シェアリングやサブスクリプションが登場し、さまざまな方法で車を利用できるようになってきています。その変化にYahoo!カーナビも対応しなくてはならないと思い、デザインをリニューアルすることになり、コンセプトづくりやアプリの方向性について議論を重ねていきました。

――デザインリニューアルにはどんな狙いがあったのか教えてください。

Yahoo!カーナビは幅広い年齢層の方にご利用いただいていますが、今回は特に若年層の利用を促すことを狙いとしました。もちろん、すべてのユーザーのニーズに応えられるプロダクトであることが前提ですが、今後5年後、10年後を見据えたときに今の若年層が車を持てるようになるので、コアなユーザーとして利用してもらいたいと考えました。このような狙いや背景から『"カジュアル"に使え"ココロオドル"車移動を提供できるカーアプリ』をコンセプトにデザインリニューアルを検討しました。

男性がノートパソコンの前で話をしている写真です。彼は笑顔で手振りを交えています。

――実際にどんなデザインリニューアルを行ったのでしょうか?

今回のリニューアルでは主にトップ画面、運転中マップ、ナビ画面、地図全体のデザインをアップデートしました。まずはトップ画面について説明します。左側が従来の画面、右側がリニューアル後です(図1参照)。従来のトップ画面は、ひとつの画面に多くの機能が並んでいるため、初めて利用するユーザーや運転に慣れていない若年層の方には利用のハードルが高いという課題がありました。

そこで、アプリを開いたときになにができるのかを一目でわかりやすくすることを目指し、機能自体は削減せずに表示する機能を絞り、地図を広く見せるデザインに変更しました。特に表示する機能については、それぞれの機能の利用者数を見ながら何度も議論と検証を重ねました。

スマートフォンの地図アプリの「Before」と「After」を比較した画像です。見やすく改良されています。

図1:トップ画面

次に運転中マップです(図2参照)。運転中マップは流し見しながら運転するというケースに合わせて、機能のアップデートを検討しました。具体的にはなるべく地図を広くして遠くまで見える表示にしたり、もともと表示していた地図の角度は45度だったのですが、それを55度に傾けることで遠くまで道路を見せたり、よりリアルな感覚で運転を楽しめるようにデザインしました。SNSでも「広く見えるようになってすごくいいね」というユーザーの声もあり、うれしく思っています。

地図アプリの運転中の機能紹介画像です。コンパスや2D/3D切り替えボタンが表示されています。

図2:運転中マップ

続いてナビ画面です(図3参照)。右側がリニューアル後の画面で、主に地図と上のガイドパネルを変更しました。例えばニュースアプリなどでは、ユーザーは画面をずっと見ていますが、Yahoo!カーナビは運転しながらちらちら見るというのが基本的な体験です。そのため、少し見ただけでも必要な情報が一目でわかるようデザインを変更しました。

ガイドパネルのデザインの色味は白ベースですが、どこで曲がるかをより強調させるために、矢印に色をつけています。ほかにも文字の可読性を高めるために、白背景に黒い文字を使用してより見やすくなるように意識しました。

地図アプリのナビゲーション画面の「Before」と「After」を比較した画像です。デザインが改善されています。

 図3:ナビ画面

地図全体もアップデートしました。これは東京駅周辺の画像で、右側がリニューアル後の画面です(図4参照)。特徴は「Mapbox(※)」が提供している3D地図表現に対応することでより位置がわかりやすくなり、リアルな地図に近づいた点です。この変更により、見ているだけでワクワクするような体験を提供できるようになったと思います。さらに道路の色味も濃くして視認性を高くしたり、ピンの表示量を調整したりと、より運転に集中できるように改善を行いました。

※ マップボックス・ジャパン合同会社が提供する地図開発プラットフォームのこと。Yahoo!カーナビではMapbox社の地図表示システムを採用している

地図アプリの「Before」と「After」を比較した画像です。建物の詳細がより明確に表示されています。

 図4:地図全体

ナビでの動作にもこだわりました。例えばこれまでは3Dにして運転すると、曲がるときにも3Dで表示されるため曲がり角がわかりにくいという声がありました。今回は曲がり角に近づくと自動的に地図を2Dにして、どこで曲がるかをよりわかりやすくしています。曲がり角に近づくと地図を自動的に拡大したり、曲がり角を通り過ぎて直線の道になると自動的に3Dに戻して、より遠くまで見えるようにするなどカメラ制御の最適化もしたりしています。

指がスマートフォンの地図アプリを操作している写真です。地図上の情報を指で指し示しています。

©Mapbox,©OpenStreetMap,©LY Corporation

――デザインリニューアルの中で、特に苦労したことを教えてください。

Yahoo!カーナビは基本的に運転中に使用されるため、検証には苦労しました。運転しながらアプリを見ているのと、運転せずに手元で見ているのでは入ってくる情報が全く異なります。この違いを調整しながら進めるのが難しい点でした。

特に先ほどお話ししたカメラ制御の最適化では、手元で動きを確認したときにはよく見えるものでも、実際に運転しながら見ると「もっとこうしたほうがいいのではないか」と改善点が多く見つかりました。ユーザー目線になって何度も検証を重ねて最善を尽くすことを意識しました。さまざまな職種や年齢層のメンバーと実際に走行テストをしたり、日常の外出時に利用してもらったりして、得られたフィードバックを参考に改善を繰り返しました。

――デザインリニューアルのプロジェクト全体を通じて意識したことは何ですか?

ほかのメンバーと目指すべき姿の認識合わせをすることを意識しました。大きな変化の際にはいろいろな意見が出てくると思いますが、方向性が定まっていないと収拾がつかなくなり、目指している姿にたどり着けなくなる可能性があります。それを防ぐために、リニューアルのコンセプトづくりをしっかりと行い、全員が同じ目指すべき姿を掲げて取り組むことにこだわりました。

先ほどお伝えした『"カジュアル"に使え"ココロオドル"車移動を提供できるカーアプリ』というコンセプトも数カ月かけて議論し、たどり着いた言葉です。ただ、この言葉だけだと抽象的なので、「"カジュアル"に使えて"ココロオドル"車移動って具体的にどういうことか?」 について、デザイナーやエンジニア、企画のメンバーと一緒にすり合わせながら機能を作り上げていきました。

男性がノートパソコンの前で話をしている写真です。彼は真剣な表情で手を動かしています。

多角的な視点を持ちながら、挑戦を楽しむ

――今回のプロジェクト以外でも、仕事をする上で大切にしている価値観はありますか?

1つ目は「いろいろなサービスを見ること」を常日頃から心がけています。現在はYahoo!カーナビを担当していますが、他社のカーナビ系のサービスだけに目を向けると視野が狭くなってしまうので、意識してニュースや乗り換え、ゲームなどさまざまな領域のサービスも見ています。

具体的にはApp Storeのランキングで上位100位くらいまですべてのサービスを試してみて、なぜ使われているのかを自分なりに解釈し言語化したりしています。最近いいなと思ったのは「noplace」というアプリです。「Instagram」のように、加工して飾った姿を見せるものとは異なり、noplaceはありのままの感情をつぶやきたいというユーザーニーズをくみ取り、自分好みのスペースをつくってカスタマイズできる点が魅力的だと思いました。日本だけでなく、海外で流行っているサービスも意識して見ています。

2つ目は「とにかく楽しみながらやる」ことです。大学生のころから車関連の仕事をしたいと思っていたので、Yahoo!カーナビのデザインも楽しみながら行っていますが、たとえ異なる分野や興味があまりない分野であっても、自分なりにその領域をどうすれば良くしていけるかを試行錯誤しながら取り組むことを心がけています。そうすることで、気づくとその領域が好きになっていることもあります。

そして、「手を動かすこと」も自分の中ではとても大事な価値観です。自分が知らない領域で初めてデザインする際も、常日頃から「このサービスのデザインだったら自分はこうする」という意識を持ち、実際に手を動かしてラフ案をつくり、いろいろな人からフィードバックをもらうようにしています。

――最後に今後の意気込みをお願いします。

『"カジュアル"に使え"ココロオドル"車移動を提供できるカーアプリ』を実現するため、今回アップデートを行いましたが、まだまだ改善点はたくさんあります。今後も機能改善を行い、コンセプトで掲げた姿をユーザーに提供できるように日々取り組んでいきます!

男性が明るい廊下で腕を組んで立っている写真です。彼はリラックスした様子で笑顔を見せています。
  • 運転中の操作および画面注視は大変危険ですのでおやめください。
  • 必ず安全な場所に停止してから操作および画面を注視してください。

取材日:2024年8月26日 ※本記事の内容は取材日時点のものです。LINEヤフー株式会社の社内広報に掲載した記事を一部修正し再掲載しています

「WHY? LINEヤフー」バックナンバー

「LINEヤフー ストーリー」のロゴ
LINEヤフーストーリーについて
みなさんの日常を、もっと便利でワクワクするものに。
コーポレートブログ「LINEヤフーストーリー」では、WOWや!を生み出すためのたくさんの挑戦と、その背景にある想いを届けていきます。
Page top