links

あなただけのニュースアプリ

links

あなただけのニュースアプリ

  • 自主制作

Overview

近年、ニュースアプリ・キュレーションアプリは、 ユーザーの趣味嗜好に応じた記事収集をしてくれたり、異なるメディアの記事を一度に見れたりなど、 効率よくニュースを見ることができ、大変人気です。 しかし、ニュースアプリのほとんどは、自分から遠いニュース(他人事のように見るニュース)が多いように感じます。 本アプリでは、ユーザーにとってより身近なニュースを取り上げ、まとめるようなニュースアプリの制作を行いました。

制作日

2019.06 (制作時間:4日間)

ツール

Figma

Adobe Illustrator

制作者

村田 亘


あなただけのニュースアプリ

近年では、ユーザーの趣味嗜好に応じた記事収集をしてくれるようなニュースアプリがあります。 しかし、それらのニュースは、自分から遠いニュース(他人事のように見るニュース)が多いように感じます。 具体的には、メディアで公開されているようないわゆる「記事」が、よくニュースアプリに取り上げられます。 しかし、noteや個人ブログ、話題になっている(記事ではない)サイトなど、SNSや友達間でシェアされるようなリンクはニュースアプリにピックアップされません。 そこで本アプリでは、ユーザーにとってより身近なニュースをまとめ、一度に確認・管理できるニュースアプリの制作を行いました。

Twitterベースのニュースアプリ

本アプリは、Twitter連携を使用して身近なニュースを収集します。 Twitterでフォローしているアカウントがシェアするサイトリンクを収集することで、あなただけのニュースアプリを実現します。 Twitterを用いる理由は、Facebookなどに比べ、Twitterはユーザーの趣味嗜好がアカウントの色として出やすく、 本当に自分の欲している情報がタイムラインに流れる傾向にあるからです。 特に、「仕事用アカウント」や「プライベートアカウント」「趣味アカウント」など複数のアカウントを持っているユーザーも多く、 用途やジャンルに分けて整理することから、シェアされるリンクにもそのアカウントの色が出ます。 そのため、あなた色のより身近なニュースをピックアップしやすいため、Twitterを採用しました。


具体的な収集方法は、Twitter APIを使用し、24時間以内にツイートされた投稿からリンクを含む投稿のみを取得し、アプリにニュースとして掲載します。

ホーム画面

ホーム画面には、収集されたサイトリンクが一覧として表示されます。 サイトリンクの「コメント欄ボタン」をタップすると、そのサイトリンクをシェアしたユーザーのツイートを確認することができます。 サイトを見る前に、シェアしたユーザーがどのような意見・感想を述べていたかをまとめて見ることができるため、 見るべきサイトなのか、そうでないサイトなのか、自分が興味ありそうなサイトなのかをサイトを見る前に確認することができます。

そのほかにも、あとでまとめて読むための「あとで読むボタン」や 良いサイトに巡り合った時の「お気に入りボタン」、 友達やフォロワーに共有するための「シェアボタン」などをサイト単位で用意しています。 今回、これらのボタンは、円形の背景の上にアイコンを乗せる形のボタンを採用し、ボタン自体を少し大きめにしています。 これは、自発的なアクションしやすくするための操作性向上の工夫のひとつです。 本来気づかないうちにタイムライン上で流れていってしまうサイトリンクですが、 本アプリでは、それらひとつひとつを認識しやすく、アクションしやすいようなインターフェースを目指しているため、 タップしやすい大きめのボタンを採用することで、自発的なアクションを促しています。

アカウント単位で見るストーリー

ホーム画面上部には、アカウント単位でそのアカウントがシェアしたサイトリンクを見ることができます。 ここでは、ストーリーUIを採用することで、よりひとつひとつのニュースを認識しやすくしています。 「特に、この人のシェアしたリンクは欠かさず追いたい」と思っているような特定のアカウントがある場合は、 このストーリー機能を利用することで、漏らさずチェックすることができます。

サイトへアクセスする

サイトリンクをタップするとアプリ内でブラウザが開き、サイトへアクセスすることができます。 サイト訪問時もシェアしたユーザーのツイートを確認することができ、 サイトの内容とツイートを照らし合わせながら閲覧することができます。

プロトタイプ

Figmaを使用したプロトタイプを公開します。 細かなインタラクションはありませんが、主な機能と画面遷移など実際に体験することができます。 ぜひ一度触ってみてください。


プロトタイプを触る

OTHER WORKS