こんにちは。神田です。
赤坂のオフィスまで45分かけてチャリ通を続けておりますが、昔より遠くなったのでついつい電車に逃げる日が多くなってきました。
電車にのり、車内を見渡すと、半分どころではなく7、8割の乗客がスマホを閲覧しているのが分かります。
私もそのなかの一人。スマホのなかった頃の生活はいつの間にかセピア色になって思い出せなくなってきました。
さて、スマホがすっかり生活の一部になっているのは皆さんも同じだと思います。僕自身はそのなかでもニュースサイト、ニュースアプリは生活への密着度がかなり高いです。
特にスポーツニュースが大好きなのですが、世界中で日本人が活躍するお陰でニュースも昼夜問わずに更新されます。
ニュースアプリ・サイトは無数にあります。そんななかで生き残るアプリはやはり見やすく、ストレスを感じないUI、デザインになっています。今日は自分なりの分析を紹介したいと思います。
●スマートニュース（Smart News）
最近、一番使っているアプリです。
取り上げられるニュースの質が良いのはもちろんですが、一画面の情報量を増やすために様々な工夫がされています。
・一画面内の情報量が多い
スマートニュースの特徴は記事のレイアウトです。
縦に並んだレイアウトが一般的なニュースアプリですが、このアプリでは写真付きの記事、文字情報のみの記事、横に並んだ記事など、まるで新聞のように画面内に記事が隙間なくうめられています。
そうすることで、デッドスペースが少なくなり、大きめの写真がつかわれている記事があるにも関わらず、一画面内に7記事分の情報が収められています。
他のアプリと比べてみてもかなり多い方でした。
・長体のかかった文字と改行位置
webデザインの不得手なものの一つに、「デバイスフォントのデザイン調整が難しい」ことが挙げられますが、スマートニュースでは技術で克服されています。
レイアウトの複雑さから、一記事のタイトルが3行、4行になるものもあります。通常、webではテキストの改行位置の調整が難しいため、単語の間で改行されることも少なくありません。しかし、スマートニュースではテキストに長体をかけることで一行の文字数を調整し、不自然な改行をなくしています。
そうすることによって文章が読みやすい画面になっていることが分かります。
●LINEnews
LINEnewsも2013年に出た新しいアプリです。
こちらもスマートニュースとは違ったUIの特徴があります。
・写真が多い
すべての記事に写真が付いているので、文字を読まなくてもぱっと画面をみただけで興味のあるニュースに目が行きます。反対に「文字情報量」は少ないため、画像で情報を取捨選択させようという狙いがあるように思います。
・記事の扱いは二種類
記事のプライオリティは二つに分けられています。上部に配置されている記事は写真が大きく、その上に記事タイトルが載っています。
下部に配置されている記事は正方形の小さめのサムネイルに、一行タイトルが配置されています。
・縦＋横のスライド
記事は上から下に流れていますが、大きい写真の記事は、横のスライドで移動することが可能です。
一画面に4記事＋5スライドなので、20記事の情報が収納されています。
しかし、意識しているわけではありませんが私はあまり横のスライドを使いません。「流し見」で情報を取捨選択することが多いニュースアプリでは、さーっと縦に流れるUIに比べて操作性がほんの少し複雑だからだと思います。
●livedoorニュース（SPサイト）
最後はlivedoorニュースです。アプリではありませんが、見やすいので重宝しています。
・一番シンプル＆情報量も多い
一番上の記事のみサムネイルがついていますが、後は記事タイトルの文字情報が縦に整然と並んでいます。
ポータルサイトのSP版という位置づけですが、このシンプルなレイアウトが一番馴染みがあり、見やすいようにも感じます。
一画面内の記事数は10記事でした。
カテゴリ内の記事は一画面内に収まっているので、縦にスクロールする必要もありません。
反対に、横にスライドすると記事一覧2ページ目のに移動できます。
linenewsでは「縦＋横」の操作がおっくうに感じますが、livedoorニュースでは「横のみ」の操作でざっと見ていくことができるのでストレスを感じません。
●まとめ
以上、ニュース系アプリ・サイトの分析でした。
現時点では、スマートニュースの質が一番高いと感じています。
デバイスフォントに長体をかけた調整などは、制作者の熱意を感じました。
今回は記事一覧ページのUI･デザインの紹介でしたが、記事詳細の閲覧スピードやアプリのカスタマイズ性も素晴らしいです。
ということで、本日はこのへんで。
