アニマネ開発日誌

アニメアプリのアニマネの開発日誌です。

国内ニュースアプリのUI調査(2016年版)

UI アプリ開発

あけましておめでとうございます。
今年もよろしくお願い致します。

今後のアプリ開発の参考にするために国内の主要ニュースアプリのUIを調べていました。
せっかくなので、その時の調査結果をまとめてみます。

ちなみにiOSアプリのみです。

対象アプリ

SmartNews

グノシー

Yahoo!ニュース

Google Play ニューススタンド

antenna

@niftyニュース

LINEニュース

NewsDigest

NewsDigest（ニュースダイジェスト）｜ニュース・地震・災害速報アプリ

Spotlight

NewsPicks

ニュースペーパー型

ニュースペーパー型というのは便宜上勝手に名付けています。 1カラム、2カラム、3カラムと混在したレイアウトです。

SmartNews

SmartNews登場後に色んなアプリが真似していましたが、全面的に採用しているのは意外にもSmartNewsのみでした。

f:id:animane:20160105174517p:plain:w300

目線があちこちに移動するので新着情報をざっとチェックするには向かない印象ですが、 画面を最も効率よく使えるレイアウトになるので、話題の記事だけをチェックする場合にはよいレイアウトと思います。

リスト型

グノシー

昔はSmartNewsと同様だった気がしますが、 現在はリスト型のシンプルなUIとなっています。

f:id:animane:20160105174719p:plain:w300

マンガや占いなどのサブコンテンツはトピックの天気予報と同じ列に控えめに並んでいます。

と思いきや途中でネイティブ広告のようにグノシーマンガが登場したりするので、 サブコンテンツはあまり気付いてもらえていないのかも知れません。

僕もマンガが導入された時にどこから見れるのか迷った記憶があります。

Yahoo!ニュース

基本的にはリスト型ですが、スクロールが進むと2カラムで表示したり、3カラムで表示したりと、 ニュースペーパー型も採用されています。

f:id:animane:20160105175040p:plain:w300

速報タブでは記事が更新されたタイミングごとに微妙に色を変えるなど、 リスト型を基本としながらも、表示する内容によって変化を付けているようです。

@niftyニュース

記事の見出しを大きめにとり、画像は小さめで概要文の掲載にスペースを割いています。

f:id:animane:20160105175106p:plain:w300

一覧で見やすいリスト型との相性はよく、見出しだけをさっと見て、 気になれば概要を読んでさらに読むべきかが判断できるので、シンプルながらもよく考えられていると思います。

LINEニュース

リスト型を採用しながら、各カテゴリのトップニュースには2カラムで表示しています。

f:id:animane:20160105175127p:plain:w300

特徴的なのは記事詳細画面で、複数のニュースソースの概要を表示しながら、 そのまま縦スクロールで次の記事に移動ができます。 （ただし、記事の並び順はよく分かりません。）

f:id:animane:20160105175154p:plain:w300

カード型

facebookやTwitterのようなカード型のUIです。 一覧性は犠牲にしますが、1記事あたりの情報量が多く、 アクションも配置しやすいUIです。

Google Play ニューススタンド

マテリアルデザインを採用したUIです。

f:id:animane:20160105175451p:plain:w300

スクリーンショットのようにハイライトでは画像を表示していますが、 基本的にはカード型を基調としながらも、あまり画像を全面に出さずに、 文字情報を中心にしているようです。

f:id:animane:20160105175539p:plain:w300

ニュースソースは大手ニュースサイトから選択可能で、 どちらかと言えばニュースというよりはフィードリーダーに近い感じです。

NewsPicks

NewsPicksもカード型を採用しています。

f:id:animane:20160105175609p:plain:w300

NewsPicksは著名人がキュレーション、コメントしたニュースを主に配信しており、 ビジネスマン向けの内容になっています。

コメントしたユーザーやピック数など、1記事あたりの情報が多いため、 リスト型よりもカード型が適しているといえます。

UIとは関係ないのであまり突っ込みませんが、 今回初めて使ってみて、大衆が存在しないはてブみたいに感じました。

他のアプリと比べてもかなり毛色が違うので、好みが分かれそうです。

UI自体は分かりやすくて、サービスの特徴がそのまま出ている感じがします。

オーバーレイ型

正式な名称があれば教えて頂きたいのですが、 画像にオーバーレイを被せて暗めにし、 その上にタイトルなどを表示するタイプです。

他のアプリではトップ記事のみこのような形で表示しているケースはありましたが、 今回調査した中で全面的に採用しているのはantennaのみになります。

antenna

f:id:animane:20160105180107p:plain:w300

パッと見た感じはシャレオツな感じですが、 僕はこのUIがかなり苦手です。

画像と文字が重なっていることで、 どちらに集中していいのか分からずクラクラします。

それに加えて動画の動きも目に入るので、さらに視線が定まらず、 しばらく見ていると、乗り物酔いのような感覚にさえ陥ります。

ただ、見た目のインパクトもあり、表示スペースの効率もよいという優れた面もあるので、 一番最初に表示する記事だけに採用するならアリと思います。

2カラム型

画面を2カラムに分けて表示するタイプです。

Spotlight

トップ記事や、最新の人気画面では一部1カラムで表示していますが、 基本的には2カラムで表示されています。画像と文字をバランスよく読めるレイアウトだと思います。

f:id:animane:20160105180237p:plain:w300

あと記事詳細の特徴としてはシェアを全面的に押しています。

f:id:animane:20160105180254p:plain:w300

アクションシートにシェアメニューを用意しているアプリが多い中、 ツールバーに単独で配置することでかなりの効果がありそうです。

タイムライン型

こちらも勝手に名付けています。 速報性を重視したUIで基本はリスト型ですが、時間毎に区切りを入れています。

NewsDigest

今回調査した中では、NewsDigestが唯一採用しているUIです。

f:id:animane:20160105185045p:plain:w300

NewsDigestは速報性に特化しており、UIにもそれがよく表れていて、個人的にはとても印象が良いです。 他のアプリとは違いタブレイアウトも採用せず速報性に特化しています。

まとめ

こうして改めて見てみると、各社工夫していて勉強になります。 個人的な考えては、時系列でチェックするならリスト型で、 話題の記事などのトピックを重視するなら、ニュースペーパー型がいいかなと思っています。