ニュースアプリの「究極のUI」って何ですか？　Yahoo!ニュースと日経電子版が大激論

Yahoo!ニュースとエンジニアtypeが「『公共性×編集×テクノロジー』～ニュースメディアに求められる使命に、開発者はどう応えるのか～」と題した勉強会・交流会を9月17日に開催しました。後半のディスカッションでは、Yahoo!ニュースと日本経済新聞のアプリ担当者が、ニュースアプリに求められるUI/UXとは何かを語り合いました。

⇒前半のディスカッションはこちら：【編集×テクノロジー】激戦のプッシュ通知　Yahoo!ニュースアプリの「苦い」1日

登壇者は、日本経済新聞の電子版アプリを監修したUIデザイナーの深津貴之さん（THE GUILD、写真左から2番目）、同紙デジタル編成局編成部の重森泰平次長（左から3番目）、ヤフー ニュース事業本部のUIデザイナー宇野雄（左から4番目）。モデレーターはエンジニアtypeの伊藤健吾編集長（1番左）。あわせてエンジニアtypeの記事「ニュースアプリ「究極のUI」とは？Yahoo!ニュース×日経電子版×深津貴之氏の模索【real news “tech” HACKレポ後編】」もご覧ください。

アプリは「十徳ナイフになるな」　日経電子版の挑戦

今年4月にリニューアルしたiPhone向け「日本経済新聞 電子版」アプリは、深津貴之さん（@fladdict）、伊藤直也さん（@naoya_ito）という業界きってのデザイナー/エンジニアである2人の協力を得て、日本経済新聞が内製開発しました。完成までにはどんな苦労があったのでしょうか。

伊藤健吾（以下、伊藤）　深津貴之さんと伊藤直也さんという“やばい”組み合わせを一体どうやって口説いたのですか。

重森　直也さんとは勉強会で知り合い、直也さんから深津さんを紹介していただいてお願いすることになりました。2人にお尻をたたかれながら、助けていただきました。

伊藤　今回のディスカッションのテーマは「ニュースのUI/UX大激論　～ユーザビリティとアクセシビリティ～」ですが、そもそもアクセシビリティとは何でしょうか。

深津　いろんな意味がありますが、ざっくりいうと「情報にアクセスできるかどうか」ということです。

伊藤　「読みやすさ」「使いやすさ」だけの意味ではないんですね。

深津　読むことはアクセシビリティの一部です。その情報にリーチできるかどうかとか、どれだけ障害物を取り除くかということだと思います。

伊藤　日本経済新聞とYahoo!ニュースの両社のアプリで何を重視して開発しているのか聞いていきたいと思います。日本経済新聞は電子版を早々に始め、アプリも内製したわけですが、何を大事にしていますか。

重森　電子版を始めてもう5年たちますが、多くのニュース媒体と違うところは有料であることと経済媒体であることです。月額4,200円の電子版の価値をアプリでも感じてもらうことはすごく大変なこと。アプリにいろんな機能を詰め込もうとして、その度に深津さんに怒られました。「それは十徳ナイフだ」「アプリはそういう世界じゃない」「シンプルなつえを振れ」と散々言われました。

深津　僕はとりあえず新機能があったらボツにするのが仕事みたいな（笑）。UIデザイナーというのは外部から見て「この人が入ってから機能が増えなくなったよね」「仕事してないんじゃないの」と思われるくらいの方がいいなと思っています。つけてはいけない機能を食い止めることを裏でやれればいいなと。

伊藤　深いですね！

「この人すごい！」深津さんが投げた「危険な球」

伊藤　日本経済新聞のアプリは、深津さんが最初に作ったフレームワークにのっとって開発したと伺いました。

重森　そうです、これは一つポイントになった部分です。今までいろんなプロダクトがバラバラのデザインで、趣味的にやっていた部分があったので、統一したデザインガイドラインを作り、開発者がいちいち「このボタン何にしよう？」と悩まないようにしました。

伊藤　ガイドラインのポイントは。

深津　iOS/Android/Web/紙とそれぞれのルールや世界観があるときに、全部がけんかせずに共存するため「これを決めておかないといけないよね」という感じで、根本的な原則10カ条みたいなものを最初に作りました。

伊藤　デバイスごとにポイントを分けていくことが重要ですか。

深津　アプリの場合、iOSとAndroidは完全にOSが違うもので、例えばiOSで「戻る」の挙動は前の階層に戻るけれど、Androidでは前の階層に戻ることもあれば前の画面に戻ることもあります。それぞれのルールで最適に使いやすいものにしないといけないと思っています。

また僕が個人的に注意しなければいけないと意識していたのは、紙やWebの歴史が長い日本経済新聞をスマホに持ってきたとき、弱点になりそうなものはできるだけ削るということです。

伊藤　弱点とは例えばなんでしょう。

深津　例えばWebは階層が深くても全然OKです。どんどんカテゴリを増やしてどんどん深くしても大丈夫。検索やTwitterによって外からダイレクトに入ってこられるからです。それがアプリの場合はほぼないと考えられるので、階層はできるだけ浅くしないといけません。

重森　深津さんは「新聞の面構成のココとココをくっつけたらどうですか」と最初すごいことをおっしゃって。

深津　新聞には「社会1」「社会2」とか「株式1」「株式2」とかあるじゃないですか。それを合体させていいんじゃないですかって危険な球を投げました。

重森　ほかにもユーザーがカスタマイズできるようにして「1面の次を企業面にするのはどうですか」とおっしゃって。「この人すごい！」と感動して社内でプレゼンしたら、特に整理部系の人からにらまれました（笑）。

深津　ぼくはフラットに入ってきて言いたい放題言えました。

良いUIほど話題にならない？　「圧倒的普通」Yahoo!ニュースの狙い

伊藤　Yahoo!ニュースアプリも5月にリニューアルしましたね。デザインの意図を教えてください。

宇野　日本経済新聞とYahoo!ニュースは立ち位置がそもそも違います。Yahoo!ニュースは媒体社からニュースをいただいて配信しているので、コンテンツが常に主役です。「Yahoo!ニュースアプリが超カッコイイ」と注目されることが僕らにとって良いことなのかというと、もしかしたら違うかもしれません。

目指しているのは「圧倒的普通」です。特色を持たないことが特色になることって十分あると思うんです。なんならYahoo!ニュースと気づいてもらえなくてもいいくらい。というのは言い過ぎかもしれませんが。

深津　UIは目立つことより透明であることが良いとされています。本当に良いUIはそもそも話題にならない。あんまりにもなじんで何も引っ掛かりなく学習しなくても使えるから、新しい感覚がなかったりするんです。話題がコンテンツの話に集中するのは、ニュースアプリのUIとして理想なのではないかと思います。

伊藤　なるほど確かに。しかし「圧倒的普通」で慣れ親しんだものが変わっていくとなると、抵抗感を感じるユーザーもいると思うのですが、Yahoo!ニュースアプリはどんな方針でリニューアルしたのでしょうか。

宇野　Yahoo!ニュースのアプリは案外攻めていい立場です。Yahoo!ニュースにはまずWebがあって、PCのあらゆる環境から見られるようになっているので、せっかくアプリを出すんだったら、アプリだからこそ得られる体験があるべきだと思っているんです。Yahoo!ニュースアプリはYahoo! JAPANアプリに比べると対応端末は少ないですが、その分得られる体験を向上させたいと、Apple Watchにも対応していたりします。

それから先ほどスマホでは外から記事に飛んでくることが少ないという話がありましたが、僕らはWebToApp（Webからアプリに遷移させる）も重視しています。Yahoo!ニュースのスマホWebには「アプリで開く」ボタンがあります。そうすると、Yahoo!ニュース トピックスの詳細画面から始まるアプリというのが僕らとして今あるわけです。検索からだろうとTwitterからだろうと最後の受け口がアプリになる、ということも意識して作っています。

伊藤　その意識はどのようにデザインやUIに反映されていますか。

宇野　アプリが記事詳細画面から始まると、そこで完結してしまったり、一体なんのアプリか分からないということがあります。Yahoo!ニュースは有料ビジネスではなく広告ビジネスなので、いかに回遊させるか、いかに興味のある関連記事を出すか、パーソナライズをどう進めるかといったことを意識していますね。

伊藤　UIやUXの目線でみたときに、アプリのKPIはどこに置いてるんですか。

宇野　最終的には一点、継続率だけです。UIのA/Bテストは常に回していて、効果を細かく見ていますが、どんなに押されるボタンでも継続率が下がってしまったら意味がありません。ユーザーに長い間使ってもらえるアプリを目指しています。

伊藤　日本経済新聞もPDCAを回すというところにはこだわりがあるとか。

重森　内製開発によって、ぐるぐる早いスピードで改善できるようになったので、PDCAを回さないといけないと思っています。われわれもいろんなデータを取っていて、課金のコンバージョン率や解約率は重視しています。データをもとに、どうしたら有料会員になってもらえるか考えたり、会員を続けている人とそうでない人の差は何かを考えたり。とはいえ先日「数字ばっかりこだわっていると全体が見えなくなる」と伊藤直也さんに怒られたところなんですが。

ダメ元で一番正しいことを

伊藤　ニュースアプリに限らず、サービスに運営側が望む機能を詰め込みすぎるとダメだという定説がありますが、ビジネス面から見るとその機能が欠かせないという場合に、UXはどのように作っていくといいでしょうか。

深津　これはあくまで僕個人の考えですが、頭の良い人がビジネスモデルを考えて、そこにユーザーを集めるのはめちゃくちゃ難しいと思うんです。おすすめなのは、ユーザーを観察して欲しがるものを作り、人が集まるようにすること。その後に「人が集まってるけどお金をもうける方法ないかな？」とマネタイズに優れた人が出てきた方がやりやすい。逆にビジネスモデルを先に作ると、その通りになることはなかなかないかなと。

伊藤　でも逆のシチュエーションは多いですよね。深津さんならどうしますか。

深津　まずはベストプラクティスを正直に話し合って、ダメならプランBです。日本経済新聞の担当者と最初にお会いしたとき「ログイン機能なくしちゃいましょうよ」と話したこともありました。ビジネスモデル的に難しいから怒られるかもしれないけど、とりあえず言ってみるところから始めます。実際ある程度受け入れてもらったりするので、ダメ元で一番正しいことを言おうかな。

伊藤　Yahoo!ニュースはどうでしょうか。ユーザーの声から何かを考えるようなフローはありますか。

宇野　当然ユーザーの声は取り入れているし、社内でもいろんな議論をします。例えばYahoo!ニュースにとって広告は大事なもので、UIデザイナーが仮にいらないと思ってもなくせません。そうなったとき「なぜ広告はいらないと感じるんだろう」「見せ方や内容によって変わるんじゃないか」と突き詰めて、着地点を見つけていきます。

古いOSにどう付き合うべき？「割り切り」の重要性

伊藤　アプリは古いOSとどう付き合っていくべきでしょうか。

深津　OSのバージョンに関しては、ユーザーの事情と開発の事情のバランスをとるのが大事です。ユーザー的には古いiPhoneでもできるだけ使いたいでしょうが、開発者がそれに応えてしまうと最新機能を生かせない、フルスペックの何かを提供できないという問題が起きます。どこかの時点ではユーザーに怒られることを覚悟して進んでいくのかなと。

機種のバリエーションに関しては、国家が違う、言語が違うという風に考えてローカライズしていくのが一番です。もし予算やスピード、マンパワーなどの面でどうにもならないときは最大公約数を狙うのですが、どちらでもベストプラクティスというより、どちらにも矛盾しないでどっちのガイドラインもクリアしているということを優先します。逆にどっちでも使えるけど、どっちのガイドラインにものっとってないのは長期的にみてどうかな。

伊藤　Yahoo!ニュースアプリは古いOSにどうやって付き合ってきたんでしょう。

宇野　古いOSのユーザーが全体の1％しかいなくても、月間100億PVのYahoo!ニュースでは1億PVを捨てることになるんですよね。幸いYahoo!ニュースのWeb版はちゃんとガラケーにも対応しているし、Android 2系や3系も動作確認していたりします。そういった支えるものがあって、届ける手段があるので、Yahoo!ニュースアプリはある程度攻めた作りができています。

伊藤　割り切りができているということですね。

深津　割りきっておくと、もっと使いやすくしたいならアプリを入れよう、課金しようと自然に「もっと踏み込んでアプリにきませんか」と提案できますね。

重森　私たちもまさに同じような使い分けをしています。何かアプリで起こっても、Webで見られるというのを発端としつつ、アプリの方では面白いことをやりたいなと。日本経済新聞は年齢が高めのユーザーが多いので、古い機種やガラケーの方もいらっしゃいますし、古いOSのサポートはいつも悩んでいるところではあります。

iOSの「News」ってどうなの？　変わるニュースの見せ方

先日AppleがiOS 9の新機能としてニュース閲覧アプリ「News」（米国でのみ提供）を公開しました。一方Twitterはニュースをまとめて表示する機能をアプリに実装。Facebookも、アプリのニュースフィードから離れることなくメディアの記事を読める「Instant Articles」を提供しています。ニュースの見せ方は今後どうなっていくでしょうか。

深津　ニュースの見せ方の未来としてはポジティブな話とネガティブな話があると思うのですが、ポジティブな話としてはニュースがTwitterなどに近づいていくので、より一目瞭然で明快になっていくのではないでしょうか。見出しや3行くらいの要約だけで今日のことを把握し、さらに知りたいときだけもっと深く読むというような。

伊藤　ライブドアニュースの「ざっくり言うと」みたいな感じでしょうか。

深津　そうです、昔の2ちゃんねるで言う“今北産業”みたいな。瞬間的に把握することに特化することで、情報量に多様性が出てくるということがポジティブな部分です。

心配なのは、さまざまなニュースメディアが1カ所のストリームに集約されることで、“釣り”やセンセーショナル合戦が始まってしまうこと。どこかの会社がポリシーを持って見出しをつけても、似たような後追い記事にトラフィックが流れるようだとセンセーショナルな見出しや絵に走らざるを得なくなるリスクがあります。そことどう戦っていくかだと思います。

伊藤　なるほど。iOSのNewsは実際に触ってみてどうですか。

深津　下のタブの設計がすごく良くできています。一般的にタブを作るとき、それぞれに違う機能を割り振ることが多いですが、iOSのNewsが面白いのは1番左のタブに全力投球なところです。左におすすめ記事があって「左だけで幸せになれますよ、終わり」という設計なんです。それでも幸せになれなかったら、右隣りのタブにニュースが並んでいるし、検索もできるという風に、欲求のレベルに応じたフローが設計されています。

iOSのNews

重森　朝の10分で社会のニュースを全部知りたいというような忙しい日本経済新聞の読者にiOSのNewsやFacebookで見てくださいというのは僕らの役割を果たしていないと思います。日本経済新聞は1本1本の記事をどこかに配信して終わりではなく、ラインアップに責任をもった形で価値を提供しているので、使い勝手がいいとか良い記事がレコメンドされるだけなら、自分たちでやりたいというのはありますね。

深津　iOSのNewsはあくまで百貨店的。「経済」のことだけを知りたいときに集中できないですね。

重森　ユーザーに使い分けていただければいいかなと。朝に経済ニュースを見るんだったらまず日経だよねという風にならないといけないとは思っています。

伊藤　スマホアプリで経済ニュースというと「NewsPicks」は新しい見せ方で話題になっています。

深津　個人的にはニュースは2、3個のアプリの使い分けに着地するのかなと。記事として正確な情報を得るためのもの、ディスカッションするためのもの、Yahoo!ファイナンスの株価情報のようにデータを得るもの、という風に3つの軸で分けていくことが現実的かな。

FacebookのInstant Articles

宇野　FacebookのInstant Articlesなどによってニュースを同じフォーマットで見られることはユーザーにとってとても良いことです。でもメディアを運営している人間からするとメディアの“色”がまったくないなあ……とも思います。

iOSのNewsは今英語だけですが、僕は英語が読めないので全部同じに見えるんですよ。どこの媒体が配信しているか分からない、BuzzFeedですら赤くない。メディアの特色をまったく考えずに並べてしまうと、強みとか特性がばらけてしまうんですね。それはとてもさみしいなと思いますし、メディアの色が見えないことは良いことなのかなあと。メディアごとに最適なUIがあり、それをほかのメディアがまねしてもうまくいかないじゃないですか。

深津　例えば日本経済新聞とナショナルジオグラフィックを合体させるとか不可能に近いですよね。

宇野　iOSのNewsやFacebookのInstant Articlesはそれをやろうとしているわけですよね。コンテンツに適したUIを壊されることに恐怖を感じる部分はありますね。

深津　文脈を追いかけることも難しくなります。例えば、政治的なポリシーがある媒体の記事が文脈なく流れてくるなど、情報を把握する際のネックになる可能性があると思います。

究極のUI、究極のアクセシビリティとは

伊藤　最後に。究極のUI、究極のアクセシビリティとは何かをお伺いします。何が最終ゴールなのでしょうか。

深津　究極を考える場合、いつの時代の文化やテクノロジーを前提にするかにもよりますが、日本経済新聞ならばベストプラクティスは「朝起きたら知ってる」ですね。それができないなら、せめて朝に知っておくべきことをレコメンドするとか、どうやって近づけるかを考えることかなと思います。

宇野　Yahoo!ニュースは広告モデルで、みんなに使ってもらえればもらえるほど儲かる仕組みなので、いかにそこにストレスを感じさせないかにかかっていると思います。色弱の方でも使えるとか、誰でも使えてみんな幸せというところまでひたすら進めていくだけです。最終的にはUIデザイナーという職業がなくなっても良いと思っています。

伊藤　UIデザイナーなくなったらどうしますか。

宇野　僕らの仕事は常に変化しています。1996年にYahoo!ニュースができたときと比べてデザイナーの仕事は変わりました。iPhoneが発売されて8年ですが、当時はスマホのデザイナーなんてこの世にいませんでした。僕らはそこを追いかけるしかないし、追いかけるのが楽しいからこそUIデザイナーをやっています。だから名前がなくなってもいいかな。

深津　デザイナーの仕事は問題を解決することなので、UIデザイナーがなくなってもほかの問題を解決しようかなと思います。

• ツイート
• シェア
• はてブ

お問い合わせ先

このブログに関するお問い合わせについてはこちらへお願いいたします。