SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」

    
2013/08/30
    

smartnews-01

2013年8月14日、SmartNewsを開発するゴクロ社がグロービス・キャピタル・パートナーズから4億2千万円を調達したというニュースがスタートアップ界隈を駆け抜けた。
SmartNewsは斬新なUIを持ち、iPhone/Androidでのニュース表示に最適化されている。社内では「違い棚形式」と呼んでいるというアプリUIの源泉を探るため、代表取締役社長の浜本階生氏(@kaiseh)を訪ねた。


??浜本さんはSmartNewsの前にCrowsnestというWebサービスを手がけていますよね。

DSC 0332

浜本階生さん

浜本 ニュースポータル・Crowsnestをピボットして生まれたのがSmartNewsでした。どちらも同じニュース系のサービス。Crowsnestはあまり成功した取り組みだったとは言えなかったため、よっぽど大きなピボットを加えなければいけない意識はありました。ニュースではないサービスを作るのか。ターゲットをどこに絞るのか等々、検討を重ねた結果、iPhone/Android向けのニュースアプリを作ることにしました。

室町時代の”違い棚”に学ぶUIデザイン


ユーザーの声を無視して選んだUI

浜本 UI(User Interface)に関しても「圧倒的に他とは違うデザイン」を目指していました。私はエンジニアでデザインの専門家ではないため、UX(User Experience)ディレクターの川原英哉さんにデザインをお願いしました。米Sun MicrosystemsでProject Looking Glassなどのプロジェクトを担当した方です。川原さんから提案があった初期のプロトタイプがこちらです(A案)。

Prototype1

A案)SmartNewsのコンセプトモデル。


??最初の段階からこれくらい斬新なUIだったのですね。

浜本 プロトタイプを一目見て新鮮さを感じました。画像や文章にメリハリ・緩急が利いています。社内ではこのコンセプトを、室町時代に誕生した和室装飾の「違い棚形式」(社内コードネームでは”Chigaidana”)と呼んでいました。

??プロトタイプ名が渋いですね。

浜本 最初のプロトタイプを見て、iPhone/Androidといったスマートフォンの画面サイズでも見せ方次第ではユーザがあっと驚くUI/UXが作れるかもしれないと思いました。
 多くの人から高い評価を受けているFlipboardのUIを見ても、iPadでは表示が工夫されているのにiPhoneだとすごくオーソドックスなUIに落ち着いちゃっています。それと同様に、iPhoneのニュースアプリはオーソドックスでお利口なUIになっていることに気づいたんです。オーソドックスなUIに落ち着いてしまっている一番の理由は、画面サイズが小さいからだと思います。このプロトタイプを見た時には工夫のしがいを感じました。

??iPhone4から導入されたRetina Displayの恩恵もありますが、文字がハッキリ読めるからこそ作れる、実装可能性のあるUIですよね。

浜本 本当にそう思います。
 次に川原さんから提案のあったプロトタイプは、ボックスで区切る考えを取り入れたものです(B案)。

Prototype2

B案)A案を発展させ、ボックスで区切ることにした


浜本 これは3カラムが固定になっているデザインで、CanCam(小学館の女性ファッション誌)の誌面レイアウトを参考にしました。

??CanCamまで分析したんですね!

浜本 1カラムのプロトタイプも作ってもらいました(C案)。

Prototype3

C案)多くのニュースアプリが採用している1カラム形式のUI


??A案・B案と違い、かなり落ち着いた印象を受けます。

浜本 実はこのA案〜C案のどれを元に進めていくか、ユーザにアンケートをしたんです。3つ並べて「どれが一番読みやすいか」という質問をしました。その結果、A案:25%(のユーザが支持)、B案:15%、C案:60%と、一番オーソドックスなC案に最も多くの票が集まったんです。
でもそれじゃユーザがあっと驚くようなものは作れない。既存のニュースアプリと同じユーザ体験しか与えられないと思ったんです。最終的には「あっと驚くUIを」ということで、わがままでA案・B案寄りに決定しました。

??ユーザーの声を無視して選んだからこそ、意表を突くUIが生まれたのですね。

Others

(左)Yahoo!ニュース、(中)@niftyニュース、(右)LINE NEWS

1カラム形式で表示させるアプリが多い。

写真のサムネイルはどれも同じ大きさだ


浜本 「違い棚」のB案でいくことに決めたのは思い切った決断でした。アンケートの段階ではユーザは見慣れていないB案を少し敬遠しましたが、突き詰めていくことでより良いユーザ体験を提供できると考えたんです。
Snfin 325x487

違い棚形式のA案・B案を煮詰め、最終決定したSmartNewsのUI


情報量と充填率

??最終決定したSmartNewsのUIを見ていると、一度に表示される記事本数の違いが目に留まります。

浜本 そうなんです。1カラムの単一な並べ方を採用せず違い棚形式を採用したことで、情報の一覧性も高まりました。比較のために同じスポーツのチャンネルでSmartNewsと他のニュースを比べてみると一目瞭然です。

Margin

(左)SmartNews、(右)Yahoo!ニュース

赤点線で囲った部分が空白。

SmartNewsは見出しの充填率が高く空白が少ない


??画面内の空白が、SmartNewsは圧倒的に少ないです。

浜本 多くのニュースアプリは1カラムを採用しているため、記事単位のセルのアスペクト比が極端に横長になるわけです。ですが文字数の関係上、どうしても空白が多くなってしまう。アスペクト比が1:1に近づくほど充填率が高くなるんです。
 充填率が最も高くなるようにアルゴリズムを組み、記事を並べ替えるようにしてあります。

写真の切り抜き方

??アスペクト比が1:1に近づくほど情報の充填率が高まる、というのは納得です。ですが、SmartNewsのソースとなる多くのニュースサイトに1:1の報道写真は少なそうです。

浜本 多くの報道写真は1:1ではない、2:3などの縦長写真ですよね。そのため写真のクロップ(切り抜き)にも気を遣いました。
 記事のアイキャッチ画像(サムネイル)が縦長写真の場合、真ん中で切り取ってしまうと顔が途中で切れてしまうことに気づきました。そのため、縦長写真が指定されている場合、上半分を中心にクロップするようにしているんです。
 多くのニュースアプリではサムネイルのアスペクト比を重視しそのまま使っているため空白が多くなるんですが、SmartNewsの場合はどうしてもクロップする必要があり、そんな中から見つけた発見でした。

SmartNewsは渋谷の漫画喫茶で生まれた


??ここからはSmartNews自体のお話を伺っていきたいと思います。SmartNewsのリリースは2012年12月ですよね。
DSC 0324

漫画喫茶でコードを書いていた

浜本 そうですね。SmartNewsを作り始めたのが2012年3月。Crowsnestを作っていた会社を退任し、3ヶ月間フリーでコードを書いていました。SmartNewsを手がけるゴクロ社の設立は3ヶ月後の2012年6月。鈴木(編注、ゴクロ社取締役 鈴木健氏)との共同創業でした。当時、コードが書けるメンバーは自分一人。漫画喫茶の8時間パックを使って、コードを書いていました。椅子をリクライニングさせてコーディングしたかったのでスタバじゃなくて漫喫で開発していたんですよ。

??以前話題になったサブマリンスタイルですね!

SmartNewsの裏側

浜本 SmartNewsはネイティブで一番サクサク動くようにしたかったので、iOSはObjective-C、AndroidはJavaで書いています。インフラ周りではプロキシサーバを立てて、ユーザがアプリを立ち上げた時にプリフェッチさせています。プロキシサーバを通すことで素早い読み込みを可能にしました。AWSやさくらインターネットを組み合わせてパフォーマンスの良い設計にしています

??たしかに記事数が多い割に、プリフェッチしにいく時間が短いです。

ピボットを重ねたアプリ名とアイコン


「あまりクールじゃないアプリ」が流行る

??良いユーザ体験を届けるための第一歩、アプリ名が「SmartNews」に決まった経緯も教えてください。

浜本 最初は「ニュースどうぞ」という名前でリリースしようとしていたんですね。すでにアイコンも用意していたんです。

??SmartNewsとはかけ離れた、スマートではない印象のアプリ名ですが、もともと「ニュースどうぞ」という名前はどこから来たのですか?


Newsdozo

「ニュースどうぞ」時代のアイコン

浜本 AppStoreの分析です。無料ランキングをずっと眺めていると、「あまりクールじゃないアプリ」が流行っていることに気づいたんですね。一見クールではないけれどアプリ名を見て一瞬で意味がわかるようなアプリってけっこう多いんですよね。「ニュースどうぞ」にアプリ名が決定しアイコンも確定、いよいよリリースという段階になって、念のためユーザに使ってもらったところ、可もなく不可もなくという反応でした。これには焦りました。その時点でアイコンもできていたんですが、この反応を見て、まるっきりアプリ名・アイコンを変えることにしました。これがリリース1ヶ月前の出来事です。

??テストにはUI Scopeなどのサービスを使ったりしたんでしょうか。

SmartNews

Lancersで作ってもらった初期のアイコン

浜本 ユーザテストの仕組みを使っても良かったのですが、見ている側に「私はいま、テストをしている」意識が出てきてしまうと考え、使わなかったんです。ユーザテストにはAppStoreランキングのモックアップを作成し、そこに自分たちのアプリを紛れ込ませる形で登場させ行いました。その結果先ほどお話したような芳しくない反応が得られたんです(笑)

??「ニュースどうぞ」から「SmartNews」、大きなピボットですね。

Sma

浜本さんが手を加え完成させた決定稿

浜本 SmartNewsへのピボットですが、AppStore内でのSEOを意識しました。ユーザが「ニュース」と検索した時に表示されやすいよう、そしてランキングを斜め読みする時にもアプリ名に「News」が含まれていたほうがいいだろうという判断をしたんです。

??アイコンも直前で変えたんですね

浜本 はい(笑) アイコンを変えたのも実は直前なんです。Lancersに発注して作ってもらいました。

??今回はSmartNewsの「違い棚」とアイコン・アプリ名のピボットに焦点を当てお聞きしました。どうもありがとうございました。

Kaisei hamamotoSmartNews 開発統括 浜本 階生
ソフトウェアエンジニア。株式会社ゴクロ代表取締役社長。2005年東京工業大学工学部情報工学科卒業。2007年に『EatSpot』で価格.com WEBサービスコンテスト最優秀賞、2009年に『Blogopolis』でYahoo! JAPAN インターネットクリエイティブアワード 一般の部 グランプリなどを受賞。共訳書に『実用Git』(オライリー・ジャパン)など。Webに氾濫する情報の整理、可視化に興味を持つ。

SmartNewsのダウンロードはこちら

https://www.smartnews.be/


あわせて読みたい

細かすぎるが効果的なSmartNewsのUI/UX「文字とスクロールと色相環」


(話し手 浜本階生

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2017 mixi recruitment, Inc. all rights reserved.