UXサムライ
ヤフーはYahoo! JAPANアプリのUXをどう考えているのか。リニューアルの裏を聞いた ヤフー × UX侍

各種サービスへの入り口でもあるYahoo! JAPANトップページのリニューアルを2015年5月に実施。ヤフーの考えるユーザー体験とは?
森田雄+深津貴之+三橋ゆか里 2015/8/25(火) 7:00 tweet85このエントリーをはてなブックマークに追加 印刷用
左から、UX侍:森田雄、ヤフー:赤間隼太氏、長谷川真也氏、UX侍:深津貴之

1996年から約20年間に及んで、日本のインターネットユーザーに使われて来たYahoo! JAPAN。今でもPCユーザーが多いものの、時代の変化、また若い層を取り入れるために既存サービスのモバイル展開に積極的に動いている。2014年には、各種サービスへの入り口でもあるYahoo! JAPANトップページのリニューアルに着手。ランチャーに留まらず、ツールとしても使われるシームレスなユーザー体験の形とは。

森田雄
森田雄

サービスの集合体として非常に大規模なYahoo! JAPANを、アプリとしてどのように構築していくのか、今後の過程も注目していきたいですね。

深津貴之
深津貴之

全員がターゲットなアプリは、全員に使いにくくなるリスクを負うので、大規模リニューアルは大変です。公共性と使い勝手のバランスを、今後どう取っていくのか注視したいです。

ウェブ、アプリ、タブレットすべてで同じ体験をユーザーに

――Yahoo! JAPANアプリのトップページを5月にリニューアルしましたよね。その目的や狙いを教えてください。

新(リニューアル後)
旧Android
旧iOS

長谷川:スマートデバイス時代によって、情報量が圧倒的に増えています。その分、コンテキストが多様化し、人々の行動も多様化しています。たとえば、画像がリッチになったことで、文章を最初から最後まで読むのではなく、流し読みが一般的になりました。ヤフーはこれまでPC利用が中心でしたが、こうした時代背景に合わせて、スマホ時代の若い層にも使ってもらいたいと考えています

そこで、2012年からスマホやタブレットに適した面を作ろうということで、タイムラインのUIを試してみたり、画像がリッチなタイル上のUIを試してみたりと試行錯誤を繰り返してきました。そうして溜めた知見を踏まえて、2015年にアプリのトップページのリニューアルを行いました。

長谷川真也
ヤフー株式会社 スタートページ事業本部 クリエイティブディレクター 長谷川真也氏

――3年越しのプロジェクトなんですね。若い層を取り込みたいということですが、Yahoo! JAPANアプリの既存のユーザー層は? またリニューアル後の反響はいかがですか。

赤間:Yahoo! JAPANアプリのコアユーザーは30~40代の男性です。既存ユーザーに引き続き使ってもらい、今後は若年層や女性ユーザーにも使ってほしいと思っています。まだリニューアルから2か月ほどですが、既存ユーザーからは「以前に比べるとスッキリした」「文字が減ってパッと見やすくなった」といった声が聞かれています。

赤間隼太
ヤフー株式会社 スタートページ事業本部 UI/UX推進室 室長 赤間隼太氏

――プロジェクトを進めるなかで、チームとしてはどんな動きをされたんでしょうか。

長谷川:私がUI・UXのプロジェクトリーダーを勤めて、広告担当やデータサイエンティスト、プロジェクトマネージャーなどから成る1つのチームを結成しました。これまでは、スマホウェブ、スマホアプリ、タブレットアプリなどデバイスやOSでサービスを切って、それぞれのプロダクトで個別最適化を行う戦略でした。でも、各トップのリニューアルに際しては、ここで一度Webやアプリの体験を統一させていくためにデバイス横断で動いています

深津:それは、複数チームがいるとコストが高いからということですか。

長谷川:いえ、そうではありません。個別最適化のデメリットは、ユーザーに与えたいトップページの体験が、デバイスやアプリ、Webそれぞれで変わってしまう点です。少しずつ違う機能やUI、デザインになっているものを統一して、一度足並みをそろえてみようということです。

森田:Yahoo! JAPANを使う個人が受ける体験としては、普通はPCとスマホの組み合わせですよね。PCとスマホでは与えたい体験がそもそも異なると思うんですが、各デバイスで寄り添わせるというのは、具体的にどういう意図ですか。

長谷川:そうですね。時代性の変化によって、Webとアプリの境界線がだんだん曖昧になってきています。これまでWebと呼んでいたものから、アプリへシームレスに行く世界というか。これはトップページだけでなく、サービスtoサービス、トップtoサービス間でもそうです。Yahoo! JAPANとして、1つのシームレスな体験を提供したいと考えています

赤間:Yahoo! JAPANは、今はまだWebのユーザーのほうが多いですが、アプリをもっと使ってもらうためにも、2つの体験をなるべく近づける方針です。個別のチームで最適化するよりも、同じ方向に向かって一緒に動くことで、まとまった成果が出せるのではないかと考えています。開発面での効率の良さなどは、後から付いて来たものです。

単なるランチャー? Yahoo! JAPAN アプリが目指すこととは?

森田:Yahoo! JAPANアプリの役割ですが、実務的に見ると、大きくはヤフーの各サービスのランチャー的な機能とニュースという認識で合っていますか。

赤間:単純なリンク集としてのランチャーではなくて、Yahoo! JAPANのトップページ上で各ツールの機能や情報がこのアプリに一通りまとまっているような形を目指しています。その中心に検索やニュースがあります

深津:基本的には、提供される機能や挙動はスマホアプリとWeb版で一緒だと考えていいんですか。

赤間:はい、基本的には同じですね。[メモリ最適化]などアプリでしか実現できない機能が一部ありますが。

Androidにしかない機能「メモリ最適化」

――たとえば、[路線情報]を押すと、Yahoo!乗換案内アプリではなく、スマホウェブのYahoo!路線情報にリンクさせているのはなぜですか? 他のボタンでもそうですが。

長谷川:すぐ解決が必要な課題やニーズに応えるためです。Yahoo!乗換案内アプリは、ディープな機能も備えていますので、そこに誘導してもっと深く使ってもらうという導線はあると思います。ただ、今の段階ではまだユーザーがどんな進化を望んでいるのかが見えていないため、現時点では、スマホウェブのYahoo!路線情報に飛ばしています。

スマホアプリ
スマホウェブ

森田:各アプリにリンクするわけではなく、スマホウェブは各サービスとしてそれぞれあって、ウェブビュー的に出すということですか。ゆくゆくはネイティブ化して取り込むつもりですか?

赤間:今のランチャー的な機能では、タップするとウェブビューが立ち上がってウェブサービスに飛ぶものがほとんどです。サービスには、アプリとしてあるものとWebしかないものがあるため、アプリを全部ここに集約して巨大戦艦を作るという思想はないですね。今後、アプリがあるものは、ウェブビューではなくアプリに飛ばすといったことは検討しています。

深津:最初にこのアプリがランチャーだと思った理由として、Yahoo! JAPANアプリでログインしない状態で、ログイン要求されるサービス(メールなど)を利用すると、[ログイン画面]が出て来て、そこでIDとパスワードを入れると[ログイン完了画面]になります。

でもYahoo! JAPANアプリのトップページに戻ろうとすると、ブラウザのバックボタンなので、[ログインの入力画面]に戻っちゃうんですよね。不思議な挙動をしているので、ブラウザに投げるアプリなんだと思ったんです。

赤間:ログイン導線としてイケていない部分だということは認識しています。アプリとしてより自然なログイン導線にできるように、今後改良したいですね。

深津:ランチャーの機能は「これが正しい答えだということで導入された機能なのか」、「過渡期の機能なのか」、「いろんな部署からの横やりで入れなきゃいけなかった機能なのか」どれにあたりますか。

長谷川:一番近いのは、過渡期の機能というところですね。今のUIが最終形ではないため、改善や機能追加を含めてこれから最適化していきたいです。

深津貴之

短いスパンでPDCAを回すニュースアプリ

赤間:Yahoo! JAPANトップページのリニューアルには、2014年頭から本格的に着手して、「今使っているものがそのまま使える」ことを大前提にいろんなパターンを作ってきました。開発に入る前に、既存ユーザーを集めた定性調査を繰り返して集まった声を反映しています。旧トップページではナビゲーション機能としてのサービス一覧(ランチャー)と、メールの新着件数や天気などのステータス表示を別の機能として分けて表現していました。今回のリニューアルでこのサービス一覧とステータス表示を結合して今の形に落ち着けました。

ステータス表示

森田:これくらいの数と内容なら、ステータス表示と通常のボタンを同居させることが比較的可能かなと思いますね。ちなみにニュースのUIをリニューアルしたのも、同じくらいのタイミングですか。

森田雄

赤間:ニュース表示は、ヤフーのサービス群の中でもいろいろな実験を試しているところなので、短いスパンで変更して、常にPDCAを回していますね。

森田:ニュース部分の見せ方は、Yahoo!ニュースのアプリで実験して良い感じだったら、Yahoo! JAPANアプリに取り込んだりもするんでしょうか。

長谷川:両方ありますね。たとえば、ユーティリティアイコン1つをとっても、ユーザーにとって優しいアイコンが何かをお互いに考えながら、体験を合わせるためにより良いほうを採用しています。ただ同時に、ニュースアプリを本当に愛してくれているコアユーザーとのバランスも大事ですね。

スクロール障壁、ヤフーが提供したい価値をどう出すか

――リニューアルをされてみて、これから解決していきたい課題はありますか?

赤間:最初にいただいた感想にもありましたが、Yahoo! JAPANのアプリは、ランチャーやニュースアプリという認知が一般的だと思います。でも、僕たちはニュース会社ではないですし、コマースもあればスポーツ試合の結果、路線情報のアプリなどいろんなサービスを持っているので、そこの利点を活かして「Yahoo! JAPANのトップならでは」というところをしっかり強くしていきたいですね。

――現時点で、その「Yahoo! JAPANのトップならでは」に対するアプローチはどんなものですか。

赤間:今、面に出ているわかりやすいところで言うと、タイムラインのタブで[話題]、[お買い物]、[スポーツ]などを設けているところですね。単にニュース記事を並べているだけではなく、[話題]では、Twitterの急上昇ワードのランキング、[お買い物]では、ヤフオクとYahoo!ショッピングの商品が掲載され、[スポーツ]では、プロ野球の速報情報を掲載しています。

話題
お買い物
スポーツ

森田:PCもそうなんですけど、[話題]の表示の仕方ってタイムライン型で流れていってしまうじゃないですか。今は、じっくり読む時間がないんだけど、後で読みたいときにその情報を一時的に保存しておくことってできないんですか。

深津:個人的な要望ですね(笑)。

長谷川:それは前向きに検討させていただきます(笑)。ユーザー体験としてタイムライン型が浸透したときに、絶対に見てもらわなきゃいけないものと流れていっていいものが、自分の行動なりロジック的にしっかり区別できるか。そもそもタイムラインがどれくらいイケてるのかを含めて、今はまだ学習期間ですね。

――ユーザーに見せる情報で、パーソナライズはされているんですか。

長谷川:[すべて]タブの下へスクロールすると、[あなたにおすすめ]という枠があるんですが、そこでは個々のユーザーに合った情報を見せる努力をしています。

深津:パーソナライズされた枠が上部に来ていないのは、今のところは機械によるおすすめよりも、人力のおすすめのほうが強いということなんですか。

長谷川:トップページの主な価値の1つに、「トピックス」と呼んでいるニュースがあります。トップに来てくださるユーザーにとってこの「トピックス」の価値は、「日本で今、何が起きているのかパッとわかること」なので、おすすめよりも優先度を高くしています。

深津:でも、ちゃんとパーソナライズされているのなら、そのニュースを見るべきユーザーにはそれが自然に出るから、特定のコーナーを設けなくていいのかなって思うんですけど。

長谷川:そこは、ユーザーが関心のある部分と、ヤフーが提供したい価値とのバランスですね。

深津:[あなたにおすすめ]は画面外で、設計思想的には「ヤフーが提供する情報」のほうが「パーソナライズした情報」よりも価値が高いというのはおもしろい主張ですね。もちろん、パーソナライズされていない情報のほうが価値があるというのは、アリだと思うんですが、冒頭で言っていた、「若い層にもアプローチしていきたい」とのバランスが難しそうだなと思います。

赤間:その通りですね。今、まさにユーザビリティの定量調査をいろんなパターンを試していて、得られた結果をどう反映するか実験の途中です。トピックスで全員に同じものを見せるというのは確かに異質だとは思うんですが、「トピックスをなくしたパターン」を試すと、なかなか受け入れられにくいという結果が出ています

深津:このトピックスが重要だとしても、たとえば、記事数を今の6本から3本にして、[あなたにおすすめ]を画面内に納めるようにしたらどうですか。

赤間:いろんなパターンの定性評価をして、さらにA/Bテストも実施していますが、今採用しているは、[あなたにおすすめ]を画面外にして、スクロールが多いパターンです。表示する記事本数も含めて、今はいろいろなパターンの実験を試している最中で、よりユーザーに適した形を模索しているところです。

「いざ」というときに頼れるヤフーでありたい

森田:ピンポイントな話なんですが……Yahoo! JAPANのアプリで地域設定できますよね。たとえば、僕は「世田谷区」で登録したけど、今は港区にいる。天気は東京しか見ていないからいいんですけど、災害情報に関しては登録地だけじゃなく、今いる場所も設定したいなって。それこそ、家族が住んでいる付近の情報も知りたいし、一か所である必要はないのかなと思うんですが。

赤間:Yahoo! JAPANのアプリでは、1件しか登録できないんですが、Yahoo!天気やYahoo!防災速報のアプリでは複数の地域を登録できます。

森田:なるほど。Yahoo! JAPAN IDって、親と子どものIDを紐づけて親子関係を特定してペアレンタルコントロールできたりするんですか。

長谷川:Yahoo!あんしんねっと」という近いものがあるんですけど、親子でIDを紐付けるものはないですね。

森田:いや、単純にそういうものがあって、お互いの災害情報が出るなら安心できるなと。家族が一体となって、ヤフーを生活の傍らに置くといった感じでしょうか。

長谷川:おっしゃる通りですね。「誰にでもインターネットの力を」というのが、我々の大きなビジョンです。そのためには、人々が毎日使うツールになる必要があって、もっとコアなところでは、人々の生命と財産を守る必要があります。「いざ」というときに頼られるヤフーであるためにも、散らばっている家族の状況がわかるというのは大切なことですね。

森田:登録できるのは、3件とかでいいんですけどね。

赤間:ちなみに、天気アプリでは5件まで登録可能です。

森田:予定表もヤフーで管理していたら、これから出張する先の天気も勝手に教えてくれるといいですよね。

赤間:まさにYahoo! JAPANアプリで提供したいところですね。

森田:そこまでユーザーに寄り添ってくると、機能としてはランチャーかもしれないけれど、8個のマス目で表現されたステータスを見るためだけに起動するのもありかなって思いますね。Androidだったら、この部分をウィジェットにもできて、パッと見られるとか。技術的には可能だと思うのでがんばってください。

長谷川:我々が目指したい世界ですね。

――最後に、今後どんな風に改善していきたいのか、意気込みをお一人ずつ聞かせてください。

長谷川:今回はいろいろ突っ込んでいただいて、すごく勉強になりました。トップページだけのヤフーではないので、各サービスをどうつなげて、ユーザー体験としてどれだけシームレスにできるかが勝負です。それを一番いい形で実現したいですね。まずは、Yahoo! JAPANのアプリから改善していきますので、引き続き使っていただければと思います。

赤間:先ほどカレンダーや天気の話が出ましたけど、そういう機能的な側面も今後進化させて便利にしていきたいと思っています。細かくご指摘いただいた点についても認識しているので、その辺も妥協せずにやっていきたいです。

森田:記事にならなそうな細かい要望は、Redmine(プロジェクト管理ツール)とかで共有しておいてください(笑)。

一同:(笑)。

長谷川:ありがとうございます。細かいところからしっかり直していきますので、ぜひYahoo! JAPANアプリを使っていただけると嬉しいです。

※2015-08-25 記事掲載後に、本文中の一部のセクションを削除しました。
Yahoo! JAPANアプリ

Yahoo! JAPAN
価格:無料

毎日の生活をより豊かにする情報をあなたに。

編集部が厳選した読んでおくべきニュースや今、起きている状況がすぐにわかる「リアルタイム検索」や災害情報や号外ニュースがいち早く届く。

この記事が役に立ったらシェア!
tweet85このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

ナビゲーション
サイトの訪問者が、サイト内で目的のコンテンツを探したり、サイト内の他のコンテンツ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore