エンジニアtype - エンジニアのシゴト人生を考えるWebマガジン
  • TOP
  • キーパーソン
  • 旬ネタ
  • コラボ
  • ノウハウ
  • 女子部
  • キャリア

ニュースアプリ「究極のUI」とは?Yahoo!ニュース×日経電子版×深津貴之氏の模索【real news “tech” HACKレポ後編】

タグ : UI/UX, Yahoo!ニュース, 日経電子版, 深津貴之 公開

 
ニュースアプリの最適なUIをめぐって討論した「real news “tech” HACK」

ニュースアプリの最適なUIをめぐって討論した『real news “tech” HACK』

公共性を担うニュースメディアのあり方を編集、開発の両面から考えるためのイベント『real news “tech” HACK with エンジニアtype「公共性×編集×テクノロジー」』が9月17日、東京・港区のヤフー本社で開催された。

レポート後編となる今回は、日本経済新聞の電子版アプリ開発を監修したUIデザイナーの深津貴之氏と同紙デジタル編成局編成部次長・重森泰平氏、今年5月にスマホアプリの大幅リニューアルを行ったYahoo!ニュースのUIデザイナー・宇野雄氏による、「ニュースのUI/UX大激論 ~ユーザビリティとアクセシビリティ~」と題したディスカッションの模様をお届けする。

>> 編集という職人芸はどこまで機械化できるのか?月間100億PVのYahoo!ニュースに見る編集とエンジニアのいい関係【real news “tech” HACKレポ前編】

経済紙として国内で圧倒的な地位を占める日経新聞と、月間100億PVを数え、“公共情報”の発信役としての立場も担うYahoo!ニュース。両者の立ち位置の違いは、アプリ開発にどのような形で反映されているのだろうか。

公共性を担うニュースメディアに求められる、究極のUIとは?

日経電子版:「Webの階層構造」との違いをどう表現するか

日経電子版アプリの開発を監修したUIデザイナーの深津貴之氏。「Webの階層構造をいかに表現するか」にポイントを置いた

日経電子版アプリの開発を監修したUIデザイナーの深津貴之氏。「ポイントは、『シンプルの杖を振れ』だった」

日経電子版アプリは、深津氏と伊藤直也氏という業界の大物の力を借りて内製開発されたことがすでに知られている。

新聞社だけにもともと社内に開発ができるエンジニアは少なく、今回のアプリ開発で手を動かしたメンバーのほとんどが入社2~3年目という若いチームだ。紙、Webの歴史が長い反面、アプリ開発のリソースはなかった。

そこで深津氏が最初に手を付けたのは、「プロダクトデザインの原則10箇条」を作ることだった。

「紙、Web、iOS、AndroidがそれぞれのOSのルールに反しない範囲でそろったデザインにすること、できるだけ機能を減らすことなど、ベースとなる考え方を最初に浸透させたことが、その後の作業をスムーズにさせた」と言う。

また、コンセプト設計する上で最も意識したのは、「Webをアプリへと移行した時に発生する“弱点”をどう扱うか」。Webは階層が深くなっても検索やSNSから直接飛べるから問題ないが、アプリだとそうはいかない。なるべく階層を浅くすることを心掛けた。

しかしここで必ず発生するのが、社内に深く浸透している伝統的なやり方とのせめぎ合いだ。

「日経電子版を読むのには、新聞を取っていない人だと月額4200円掛かります。決して安くない料金に見合うサービスを提供しようと、アプリを作るにあたっては当初、PCの機能をできるだけ詰め込もうと考えました。でも、その度に深津さんに怒られることになりました。『シンプルの杖を振れ』と」(重森氏)

UIデザインの世界から見れば“常識”でも、全てがそのまま通るとは限らない。深津氏は「まずはUIデザインの観点から見たベストプラクティスを話し、それがダメならプランB、それでもだめならプランC」と、重森氏らの力も借りながら粘り強く理想と現実の落としどころを見つけていった。

こうした苦労を経てアプリを内製したことは、改善のPDCAの高速化という形で恩恵をもたらしているという。

「内製化したことで、課金コンバージョン率をはじめとしたさまざまな数値を、素早く機能改善につなげることができています。もっともここでも、伊藤直也さんからは『数字ばかりを追うと全体が見えなくなるぞ』とたびたび忠告を受けるのですが(笑)」(重森氏)

Yahoo!ニュース:公共性を追いつつ「攻める」アプリ

公共性を担うYahoo!ニュース内にあって、アプリは比較的「攻めていい」立場にあったと振り返るUIデザイナーの宇野雄氏

公共性を担うYahoo!ニュース内にあって、アプリは比較的「攻めていい」立場にあったと振り返るUIデザイナーの宇野雄氏

一方、Yahoo!ニュースは今年5月にアプリの大幅リニューアルを施した。Yahoo!ニュースは多くの報道メディアと異なり、自らはコンテンツを作らない。この立ち位置の違いが、UIにも表現されていると宇野氏は言う。

「Yahoo!ニュースの主役はあくまでコンテンツプロバイダからいただいたコンテンツで、『Yahoo!ニュース: 個人』もご寄稿で成り立っています。主役を際立たせるという意味でも、公共性を担う立場にあるという意味でも、アプリ自体は目立たず、“透明”であることが望ましい。ユーザーから見ても、あらためて学ばなくても使える方がいいですから、話題にさえ上らないというのが理想です」

ただし、そんなYahoo!ニュース内にあって、アプリは比較的「攻めていい」(宇野氏)立場にあるという。あらゆる環境で閲覧できることはすでにWebで実現しているため、アプリはアプリだからこその体験を追求できる。

それゆえ、リニューアルしたYahoo!ニュースアプリでは、Webからの遷移を非常に重視していると宇野氏は言う。

「先ほどWebの階層構造の弱点の話題がありましたが、Yahoo!ニュースのアプリはTwitterなどからの受け口にもなっており、直接、記事詳細画面に飛ぶこともできます。また、そこからいかに回遊してもらうかもポイントですから、パーソナライズしたレコメンデーションの機能にも力を入れています」(宇野氏)

Webサービスの開発においては、OSや端末が次々更新される中、どれくらい古いものまでフォローし続けるかという問題も発生する。この点について深津氏は、「99%の人が満足できる最新の機能を提供するためには、1%の古い端末やOSへの対応はどこかのタイミングであきらめなければならない」と話している。

しかし、月間100億PVを数えるYahoo!ニュースにあっては、たった1%であっても1億PV。簡単には切り捨てられない立場にある。いち早くApple Watchにも対応するなど、端末、OS対応という意味でも攻めていけるアプリが、Yahoo!ニュース内で果たす役割は小さくないようだ。

ニュースメディア、究極のUIとは?

「経済紙としては単に情報を知るだけでなく、儲けるためのアクションにもつなげてもらえるUIでなければならない」(重森氏)

「経済紙としては単に情報を知るだけでなく、ビジネスアクションにもつなげてもらえるUIでなければならない」(重森氏)

深津氏は、ニュースメディアの究極的なUXを「朝起きたらすでに知るべきことを知っている状態」であると言い、テクノロジーの限界のためにそれが「知るべきことを示しておく」段階に留まっているのが、現在のレコメンデーションであると位置づける。

「それがよく表れているのが、iOS9でリリースされたAppleNews。見出しとサマリーだけでその人が知りたい情報を効率よく知ることができ、より詳細に、より多くの情報を知りたいと思った人だけにアクションを要求する設計になっている。しかし一方では、こうした1つのプラットフォームに情報が集約されることになると、各メディアがその中で目立つことばかりを考え、センセーショナルな要素ばかりが評価されることになりかねない危険もあります」(深津氏)

こうした問題提起に対し、日経・重森氏、Yahoo!ニュース・宇野氏の受け止め方は、やはりそれぞれのニュースメディアとしての立ち位置が反映されたものだった。

「新しい人に届ける生態系ができるという意味ではこういう動きもありがたいが、忙しいビジネスマンに対して今日読むべきニュースをラインアップとして提供するのは、引き続き自分たちの役目だと思っている。経済紙としては単に情報を知るだけでなく、ビジネスのためのアクションにもつなげてもらわなければならない。それは、Evernoteとの連携で表現したように、必要な時にそっと差し込むようなUIではないか」(重森氏)

「あくまで個人としての意見ですが、全てのニュースを同じフォーマットで読むというのは、メディアそれぞれの色がなくなるということでもあると思う。メディアごとの文脈が読みづらくなるのは果たしていいことと言えるでしょうか。Yahoo!ニュースとしては、今以上に使ってもらえるよう、ストレスを感じさせないUIというものを追求していきたい」(宇野氏)

「究極のUI」といっても、そのあり方は一つところには収束しない。「どう」伝えるかの最適解は、「何」を伝えるメディアなのかによるというのが、現時点での答えといえるだろうか。

文・撮影/鈴木陸夫(編集部)




人気のタグ
業界有名人 スタートアップ 開発 SE 転職 エンジニア プログラマー Web スキルアップ ソーシャル アプリ シリコンバレー キャリア プログラミング 起業 Android スマートフォン えふしん SIer 技術者 UI アプリ開発 Webサービス クラウド btrax スペシャリスト Apple ギーク 英語 CTO Twitter Facebook デザイン 村上福之 IoT Google SNS Brandon K. Hill ツイキャス モイめし 世良耕太 IT 30代 採用 赤松洋介 コーディング UX 20代 勉強会 プロジェクトマネジメント Ruby 中島聡 ITイベント 法林浩之 ビッグデータ Webエンジニア ウエアラブル 五十嵐悠紀 LINE ひがやすを ドワンゴ モノづくり 受託開発 IT業界 ロボット コミュニケーション ハードウエア MAKERS tips ソーシャルゲーム インフラ SI Webアプリ 女性 ゲーム iPhone イノベーション 高須正和 女性技術者 UI/UX トヨタ マイクロソフト iOS 研究者 チームラボ 自動車 ノウハウ システム プラットフォーム 息抜き 和田卓人 グローバル オープンソース メイカームーブメント 開発者 イベント エンジン 教育 ソニー サイバーエージェント Java 女子会 コミュニティ 家入一真 メーカー ソフトウェア スーパーギーク 増井雄一郎 GitHub 人工知能 IPA 音楽 日産 テスト駆動開発 ソフトウエア 40代 TDD ニュース モバイル PHP TechLION

タグ一覧を見る