バイラル・キュレーション・ニュースメディアの一覧デザイン大全

毎日毎日いろんなコンテンツが出てきてたまらない
バイラルメディアやキュレーションサイトやらニュースサイトの一覧が
ふと気になったのでまとめてみました。

全部iOS。

# ブラウザ

## NAVERまとめ

![naver-matome-browser.png](https://qiita-image-store.s3.amazonaws.com/0/3163/d9f26b55-e85a-ca2b-c5b6-7ff28efd5834.png)

* レイアウト
  * 1種類
* コンテンツ
  * 左に画像
  * 右に記事タイトル
  * タイトル下にView数

## ハフィントンポスト 日本版

![huffingtonpost-browser1.png](https://qiita-image-store.s3.amazonaws.com/0/3163/6bf61206-9171-7930-a816-ed9d4d05a109.png)
![huffingtonpost-browser2.png](https://qiita-image-store.s3.amazonaws.com/0/3163/5877446e-9b45-d24d-90da-6f8ae89c057f.png)


### レイアウト

* 一番上に1カラム(写真大)
* その下に2カラム(写真大)
* その下に1カラム(写真小)

### コンテンツ

* 写真大
  * 写真横幅100%、その下に記事タイトル
* 写真小
  * 左に写真
  * 右に記事タイトル
 
## LINE ニュース

![line-news-browser.png](https://qiita-image-store.s3.amazonaws.com/0/3163/f909f338-cebb-5c3f-8920-504ea23c9ad7.png)


### レイアウト

* 上部に写真横幅いっぱいのトピックスエリア
  * 2列の場合あり
* その下にその他の記事一覧

### コンテンツ

* トピックスエリア
  * 写真横幅100%
  * 文字が写真の下部に表示
  * 写真の下に若干影が入っている
* 記事一覧
  * 左に画像
  * 右にタイトル
  * 下に更新時間(○○前)

# mery

![mery-browser.png](https://qiita-image-store.s3.amazonaws.com/0/3163/19c74451-b000-1963-52bb-e8652160f486.png)

### レイアウト

* 1種類

### コンテンツ

* 左に画像
* 右に記事タイトル
* 記事タイトルの下にView数。
* View数と同じ行の右に書いた人

NAVERまとめてほぼ同じ

## spotlight

![spotlight-browser.png](https://qiita-image-store.s3.amazonaws.com/0/3163/98ef34b9-2cfb-6967-a92a-300f826fd8db.png)

### レイアウト

* 一番上に1カラム(写真大)
* その下に2カラム(写真大)
* その下に1カラム(写真小)

ハフィントンポストとほぼ同じ。

### コンテンツ

* 1カラム写真大
  * 写真横幅100%、写真の上に記事タイトル
* 2カラム写真大
  * 写真の下に記事タイトル 
* 写真小
  * 左に写真
  * 右に記事タイトル
  * 記事タイトルの下にカテゴリ名
  * カテゴリ名の右に作成日(時間無し)

## dropout

http://dout.jp/

![dout-browser.png](https://qiita-image-store.s3.amazonaws.com/0/3163/61f50a9e-f3bf-4193-638a-87edf9957cd0.png)

### レイアウト

* 詳細画面と同じ

### コンテンツ

* 1行目に記事日付
* 記事タイトル
* 記事画像
* SNSシェアボタン
* シェアのあおり（「ささったらコメントとともにシェアを」)

# アプリ

## SmartNews

![smartnews-app.png](https://qiita-image-store.s3.amazonaws.com/0/3163/8f13f680-eb99-c96d-df96-7b4c24698ec1.png)

* 違い棚! (http://www.find-job.net/startup/smartnews-ui-ux)
* コンテンツ内容によって枠組み
* コンテンツ
  * タイトル
  * 提供元
  * 記事画像

## グノシー

![gunosy-app.png](https://qiita-image-store.s3.amazonaws.com/0/3163/ae73f5d8-30f9-f3ff-7334-1e5f83f14a81.png)

* 上部に写真横幅100%。下に記事タイトル
* 天気予報、占い
* その下に、コンテンツ
* コンテンツ
  * 左に記事タイトル
  * 記事タイトルの下に提供元
  * 右に記事画像

## Antenna

![antenna-app.png](https://qiita-image-store.s3.amazonaws.com/0/3163/3a75d66c-c645-ac56-871f-2de488e3e640.png)

* 写真横幅100%
* 写真の下部(あれば)カテゴリ的なテキストとカテゴリ名か記事タイトル
  * カテゴリの場合と記事タイトルの場合でタップ時の遷移先が違う
* 記事タイトルの下に提供元と閲覧数

## NewsPick

![newspick-app.png](https://qiita-image-store.s3.amazonaws.com/0/3163/cef460b9-efa8-d7a0-d825-931db2005f9d.png)

* 記事タイトル。右の写真エリアが予め取られてるため、改行が早め。
* 右に記事写真(あれば)
* 記事タイトルの下に、提供元。時間。
* 記事タイトルの下にPickした人。
* ユーザーアイコンの下にコメント

## NewsHub

![NewsHub-app.png](https://qiita-image-store.s3.amazonaws.com/0/3163/f360c882-5c82-a4cb-f402-fc953f39fab4.png)

* 記事画像
* 記事画像の上にグレー。その上に白テキスト
* コンテンツ
  * 記事タイトル
  * 記事タイトルの下に提供元
  * 提供元の右に提供時間

## GREE NEWS

![GreeNews-app.png](https://qiita-image-store.s3.amazonaws.com/0/3163/81c2c25c-42c8-7fd0-e7b6-d320d8fec86e.png)

* 記事タイトル
* 右に記事画像(あれば)
* 下にコメント数
* 右に記事時刻

# 所感

いわゆるリストビューなので選択肢はあんまり無いわけです。
主に以下のように分けられます。

1. 記事画像
2. 記事タイトル
3. 記事サブテキスト

LINE NEWS
![LINE-news.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3163/9eaa9e29-d6d8-ae49-901b-8b66e5ce5953.jpeg)

ハフィントンポスト
![hah.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3163/25cfffb9-3f62-6081-70ac-3328463e25da.jpeg)

Antenna
![antena.jpeg](https://qiita-image-store.s3.amazonaws.com/0/3163/1c75a0d2-a5aa-1a74-c591-b6aef1eab9d9.jpeg)

デザインよりも分かりやすさ重視なのは、ニュースアプリが
どこを目指しているかだと思うのですが、
やっぱり分かりやすさを目指すとLINEニュースになってしまい、
写真がドンとなるところを目指すのですが、なかなか難しいねといったところでしょうか。

そんな中で、一覧UIで差別化出来てるのは、やはりSmartNews。
次点でAntenna。力技ながらも写真推しのポリシーは一貫しています。
何をさせたいのかが見えてくるのが好印象でした。