株式会社ユーザベースの技術チームブログです。NewsPicksのUIデザイン2014-08-21NewsPicksのUIデザインTweetたぬきです。先日、HatchUp様主催の「第2回ノンゲームスマホアプリ勉強会」に発表者として参加してきました。ノンゲームスマホアプリということで、ここ2年くらい企画・開発してきた、NewsPicksについてお話ししました。僕は、「ノンゲームアプリ」はゲームアプリより(ある意味)自由なんじゃないか、と思っています。僕も個人的にゲームアプリを作ったりもしているのですが、ゲームアプリは、開発を始める段階で完成イメージがだいたい出来あがっていて、それをどう作っていくのかという作り方をしています(作っていくうちに思わぬ変化をすることもありますが)。一方で、ノンゲームアプリは、作り始めるときにサービスコンセプトは決まっていても、画面がどうなるかは全然決まっていなかったりします。技術者・デザイナーが、サービスコンセプトを理解し、それを経験・技術を使って何よりも分かりやすい形に結実させていく、そんな自由度があるアプリケーションなんじゃないかと思っています。NewsPicksはそんな感じで開発してきたアプリなのですが、今回はそのうちの一機能、「階段」についてのお話。tanukingUbNewsPicks事業は2013年の頭に立ち上がりました。喧々諤々の議論の末、僕たちが辿り着いた結論は、「自分が尊敬している人、友達、有名人が興味をもったニュース」なのではないか、ということでした。そこで、そういった人たちをフォローできるようにし、その人たちが興味をもったニュース(Pickしたニュース)を見られるサービスを作ろうということになりました(8ページ目参照)。その人たちがニュースにどんなコメントをするか知れたら面白いかも!さて、サービスのやりたいことは見えてきました。いうデザインにすべきでしょうか。デザイナーと肩を並べて色々開発して試してみました。これが一番始めに作ったデザインです。各ユーザーがそれぞれの雑誌を作っていて、それを購読できる、といったことを考えて作りました。左上のカラフルなパネルが、全員のニュースをまとめ読みできるタイムラインです。作ってみるとデザイン的にはカッコ良かったのですが、うーん、カラフル=まとめ読みという表現は理解しづらいですね。次に作ったデザインは、iOS7のSafariのような機能でした。適当なボタンを押すと、2次元に描画されていたタイムラインが3次元状に展開され、後ろ側に各ユーザのPickしたニュースが並んでいるようなイメージです。(スライドの10ページ目にSafariのイメージがあります、元イメージは消失してしまいました......)しかし、次元の転換はやってみると唐突感がありました。試行錯誤を繰り返したあと、「階段」というアイデアにたどり着きました。実際のアプリでは左上のボタンをタップすると見られる、階段状にユーザーが並んでいるデザインです。階段をタップすればそれぞれのユーザのPickしたニュースが見られ、階段の手前にあるタイムラインにはそれらからニュースが生成されていることを表現しました。アプリ勉強会ということで、プログラムの設計とコードをスライドに書きましたが、見てみると非常に単純です。iOS/Androidアプリはそれっぽい動作をするものをとても簡単に作れるので、いろんなデザインを試せていいですね。その後も、ちょっとした問題が起こりました(18-20ページ)。ユーザをたくさんフォローすると、階段が詰まってしまうという問題です。これに関しても、デザインと技術の力で簡単で強力な解答を出せました。階段の上下に吹き溜まりのようなViewを追加することで描画したいことは変えず、問題は解決しました。いうことで、サービスコンセプトを理解し、それをデザイン・技術の力でアプリとして結実させると楽しいよ、という話でした。特別編「NewsPicksウェブ版リニューアルの裏側」を開催します恵比寿のイケてるスタートアップが集まるエンジニア向けの技術...2015-08-05「日本の夏は高温化しているか?」について可視化して確かめてみた。技術チーム竹内(@chimerast)です。