WEB・IT業界で働く人々の人生を少し豊かにするメディア

CAREER HACK

専任のいない「ダメアプリ」から脱却!NewsPicksがたった1年でGoogleベストアプリを受賞できたワケ

2017-02-27

専任のいない「ダメアプリ」から脱却!NewsPicksがたった1年でGoogleベストアプリを受賞できたワケ

NewsPicksを担うAndroidエンジニアの松原孝司氏が登壇。じつは同アプリ、Android専任が居らずiOSのUIをAndroidに流用していた状況だった。そこから2016年ベストアプリに選出されるまでわずか1年。怒涛の改修劇の裏側とは?

ニュースらしいUIってなに?|NewsPicksの場合

※Google Playの『ベスト オブ 2016』 に選出された企業が集結したイベント『App Talk Night』の内容をお届けします。[登壇:Loco Partners(Relux)、AWA、Fablic(FRIL)、NewsPicks、VASILY(iQON)]


「私は2015年くらいに入社したのですが、当時、NewsPicksのAndroidアプリを見たときに『イケてねぇなぁ……』と思いました」(松原氏)


こう語るのは、経済情報に特化したニュース共有サービス「NewsPicks(ニューズピックス)」を運営する株式会社ニューズピックスの松原氏だ。

2015年当時、NewsPicksはAndroidアプリの専任がおらず、iOSとAndroidでUI/UXがほとんど共通だった。通信量が多くニュースのスクロールも遅く、CrashlyticsのCRASH-FREE SESSIONSの値が悪くよく落ちる問題点があったそうだ。

そのような状況を踏まえて、松原氏はUI/UXの改修に着手することに。


「AndroidらしいUI/UXを採用し、ニュース・コメントをNews Picksのアプリとしていかに見やすくするか。まずはGoogleのMaterial Designを導入することを提案していき、それからフォントサイズの見直や各コンポーネント間のマージン、パディングの調整を行っていきました」(松原氏)


具体的に、Material Designのコンポーネントの間隔は8dpが基本となっているため、8dp間隔の値をあらかじめdimens.xmlに定義。そうすることで、デザイナーから「もう少し間隔を広げたい(狭めたい)」と言われても、少し修正をかけるだけでMaterial Designのガイドラインに準拠した形での間隔を維持できるようにしたという。


UI改修後のメニュー画面


その結果、多少野暮ったい印象を受けるメニュー画面が、Material Designを踏襲した今っぽい感じに。

「メニューを改修する際、ハンバーガーメニューをあえて採用せず、ボトムナビゲーションを採用することにしたんです。検討中はMaterial Designのガイドラインにボトムナビゲーションがなかったのですが、途中でガイドラインに加わったので迷うことなく採用しました」(松原氏)


UI改修後のニュースコメント


また、文字がたくさん出ているような状態だったニュースのコメント欄も、フォントのサイズやタイトルなどの各コンポーネントのマージンを調整することで、より見やすくなっています。


「通信料の削減については、通信ライブラリとしてVolleyを採用することにしました。最近のアプリはRetrofitを使用しているところも多いですが、既存のロジックとの親和性を優先しました。ただ、通信自体はOkHttp3というものを使って通信をするようにしています。画像の表示もGlideを使い、OkHttp3というライブラリを一緒に経由して通信ができるようにしています」(松原氏)


一部の通信は、実際に通信処理をする前に、サーバーから受け取ったJSONをそのままキャッシュしておき、そのまま上位レイヤーに返す。そうすることで、そもそも通信しないようになり、通信料が削減したとのこと。その他、レイアウトの最適化を行っていくことでCRASH-FREE率は最低でも99%は維持するように。

UI/UXをAndroidに最適化し、通信のキャッシュを良くすることがユーザー体験の底上げにつながっている。


▼App Talk Nightにて語られた各社の開発Tipsについてはコチラ
・Googleベストアプリ獲得! 僕らが実践した3つのポイント| Loco Partners(Relux)
・AWAが実践したUXの改善手法とは? 技術サイドからアプローチすべき理由
・エンジニアよ、デザインを恐れるな。ガイドラインの「根拠」が強い味方になる|Fablic(フリル)
・VASILYの開発体制とは?3年連続Google Playベストアプリ《iQON》開発のウラ側



CAREER HACK をフォロー

タグ一覧