NewsPicksのUIデザイン

たぬきです。

先日、HatchUp様主催の「第2回ノンゲームスマホアプリ勉強会」に発表者として参加してきました。

ノンゲームスマホアプリということで、ここ2年くらい企画・開発してきた、NewsPicksについてお話ししました。

僕は、「ノンゲームアプリ」はゲームアプリより（ある意味）自由なんじゃないか、と思っています。僕も個人的にゲームアプリを作ったりもしているのですが、ゲームアプリは、開発を始める段階で完成イメージがだいたい出来あがっていて、それをどう作っていくのかという作り方をしています（作っていくうちに思わぬ変化をすることもありますが）。

一方で、ノンゲームアプリは、作り始めるときにサービスコンセプトは決まっていても、画面がどうなるかは全然決まっていなかったりします。だから、技術者・デザイナーが、サービスコンセプトを理解し、それを経験・技術を使って何よりも分かりやすい形に結実させていく、そんな自由度があるアプリケーションなんじゃないかと思っています。

NewsPicksはそんな感じで開発してきたアプリなのですが、今回はそのうちの一機能、「階段」についてのお話。

News picksのUIデザイン from tanukingUb

NewsPicks事業は2013年の頭に立ち上がりました。そこで出てきた疑問
「僕たちが本当に知りたいニュースって何だろう？」

喧々諤々の議論の末、僕たちが辿り着いた結論は、「自分が尊敬している人、友達、有名人が興味をもったニュース」なのではないか、ということでした。そこで、そういった人たちをフォローできるようにし、その人たちが興味をもったニュース（Pickしたニュース）を見られるサービスを作ろうということになりました（8ページ目参照）。更にその人たちがニュースにどんなコメントをするか知れたら面白いかも！

さて、サービスのやりたいことは見えてきました。ではどういうデザインにすべきでしょうか。デザイナーと肩を並べて色々開発して試してみました。

これが一番始めに作ったデザインです。各ユーザーがそれぞれの雑誌を作っていて、それを購読できる、といったことを考えて作りました。左上のカラフルなパネルが、全員のニュースをまとめ読みできるタイムラインです。

作ってみるとデザイン的にはカッコ良かったのですが、うーん、カラフル=まとめ読みという表現は理解しづらいですね。。。

次に作ったデザインは、iOS7のSafariのような機能でした。つまり、適当なボタンを押すと、２次元に描画されていたタイムラインが3次元状に展開され、後ろ側に各ユーザのPickしたニュースが並んでいるようなイメージです。（スライドの10ページ目にSafariのイメージがあります、元イメージは消失してしまいました……）

しかし、次元の転換はやってみると唐突感がありました。

と、試行錯誤を繰り返したあと、「階段」というアイデアにたどり着きました。実際のアプリでは左上のボタンをタップすると見られる、階段状にユーザーが並んでいるデザインです。階段をタップすればそれぞれのユーザのPickしたニュースが見られ、階段の手前にあるタイムラインにはそれらからニュースが生成されていることを表現しました。

アプリ勉強会ということで、プログラムの設計とコードをスライドに書きましたが、見てみると非常に単純です。iOS/Androidアプリはそれっぽい動作をするものをとても簡単に作れるので、いろんなデザインを試せていいですね。

その後も、ちょっとした問題が起こりました(18-20ページ)。ユーザをたくさんフォローすると、階段が詰まってしまうという問題です。これに関しても、デザインと技術の力で簡単で強力な解答を出せました。階段の上下に吹き溜まりのようなViewを追加することで描画したいことは変えず、問題は解決しました。

ということで、サービスコンセプトを理解し、それをデザイン・技術の力でアプリとして結実させると楽しいよ、という話でした。勉強会ではたくさんの質問をいただけ、楽しい会でした！