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

    
2013/09/03
    

Smart ui ux 01

斬新なUIをもつニュースアプリSmartNews
今回はSmartNewsのUI/UXの中でも、細かすぎるけど非常に効果的な文字スクロールについての疑問を代表取締役社長の浜本階生氏(@kaiseh)にぶつけた。


ユーザ体験と色

不自然に感じない色の決め方


??SmartNewsのプロトタイプと現行アプリのデザイン、カテゴリ(チャンネル)ごとの色が違うところが気になります。

Hikaku

プロトタイプ(左)と現行(右)。最上部にあるチャンネルの色が違う理由は何なのか。


24 color

色相環で144度ずつ動かしピックアップして

色を決めていった(イメージ)

浜本 そうですね、アプリを開発していく中で少し変えました。黄色を橙色に調整して、色の並び方を変えました。色は、色相環上で144度ずつで動かして決めました。144度ずつ動かすと星形を描くのですが、その際、赤から順番に並べてプロトタイプの配色が決まったんです。ただし、これでは紫や黄色といった、あまりニュース系のサービス・アプリに使われない色が先頭のほうに来てしまいました。
 ニュース系のアプリで赤(サイゾー、ITmedia、フリップボード等)、緑(ハフィントンポスト、Feedly等)はよく見かけますが、紫・黄色はあまり見かけない色。そこで、不自然に感じることがないよう、並べ方だけは色相環上の順番通りではなく、意図的にずらしてあります。

Menu

プロトタイプ(上)と現行(下)のチャンネルタブ。色相環をもとに色が決定された。


機能に気づいてもらうためのUI

??SmartNewsの設定項目が記事のチャンネルと並列に置かれているのも不思議なのですが、どうしてですか?
浜本 これはSmartNewsの売りである「チャンネルを動かせる」「チャンネルをON/OFFできる」ということに気づいてもらうためのUIです。
 アプリをダウンロードしたユーザの行動をイメージしてみると、設定ボタンを押す前にまずはページをめくるだろう、と想定できたんです。他のアプリとは違う、あっと驚くユーザ体験をしてもらうために、あえてチャンネルと並列に並べました。

??たしかにアプリを触り始めて5分後にはこの機能に気づきました。

Ch

SmartNewsの設定項目は右下にあるが、醍醐味である並び替え・ON/OFFはすぐに気づいてもらえるよう、チャンネルと並列に並べた。


カテゴリに秘められたユーザ戦略

女性にシェアしてもらえるカテゴリづくり


??カテゴリの決定は非常に苦労する作業です。。SmartNewsにあるニュースのカテゴリ(チャンネル)はどうやって決めたのでしょうか。

浜本 現在SmartNewsに存在するチャンネルは「トップ、エンタメ、スポーツ、グルメ、コラム、まとめ、国内、政治、経済、テクノロジー、国際、Twitter」です。これはYahoo!ニュースのピックスを参考に決めました。なかでも『ヤフー・トピックスの作り方』という本が参考になりました。

スクリーンショット 2013 09 02 16 25 00

SmartNewsがカテゴリ分けの参考にしたYahoo!ニュースのトピックス


??「コラム」チャンネルがというのが特徴的ですよね。

浜本 これだけを括り出しているニュースアプリはおそらく他にないと思います。これはmixiニュースを参考にしました。ニュースなのに「コラム」がカテゴリとして「スポーツ」などと同列に並べられているというのが特徴です。mixiを見ていると、特に女性ユーザが「コラム」の記事に言及して日記を書いていたんです。
SmartNewsでも、女性が積極的に「記事を見る」→「SNSにシェアする」という流れを作りたかったんです。

??セグメントを問わず良いユーザ体験を届けるためのカテゴリだったんですね。


Column

コラムには特徴的な記事がズラリ


文字組みへの飽くなきこだわり

??SmartNewsは文字組み(フォントの並べ方)にもかなりこだわっているとか。

浜本 そうですね。ユーザに気持ちよく使って貰えるよう工夫してあります。記事一覧になるべく小さい文字で表示できるように、そして記事が読みやすいように工夫してあります。

浜本 SmartNewsはニュースアプリ。日本語表示が綺麗じゃないと読む気が失せると思ったんですね。記事一覧のタイトルを形態素解析し、折り返し(改行)の位置を工夫しています。

Moji dume

長体・カーニングが施され、とても読みやすい記事タイトル。2行目の文字幅が狭く(長体)、カギ括弧の文字幅が明らかに違う(カーニングの最適化)


??ユーザがあまり気付く部分ではないですが、良いユーザ体験を提供するためには欠かせないことですよね。

浜本 日本語をただ並べただけではなく、美しく、意味が捉えやすいように、そして記事ブロックごとの充填率が高まるように工夫しています。
 雑誌のデザイナーさんにはおなじみの長体(文字の横幅を狭くすること)とカーニング(フォントの間隔を詰めること)を調整し、狭いスペースでもタイトルの見栄えがするようなUIにしました。

??これはiOSやAndroidの標準機能で実装できるのですか?

浜本 Androidはカーニングについては実装できませんが、iPhoneは長体、カーニングともに実装可能です。
 iOSを例に説明しましょう。
 iOSは普通、UILabelコンポーネントを使って文字を表現します。ただ、SmartNewsの場合、Core Text APIを使い日本語表示を実装してあります。Core TextというのはiOSの文字描画に関するフレームワークです。これを使うと非常に詳細なフォントの座標点が取れるのですが、その座標点をもとに、文字種ごとのカーニング量を設定しました。

??「Core Textを使って文字のカーニングをかけなさい」ということは、Appleが推奨しているものなんでしょうか?

浜本 ぜんぜん推奨していないです(笑) もともとカーニングのための機能ではなく、もっと原始的な計算手法の組み合わせにより「あ、日本語表示の最適化に使える」と気づいただけなんです。
 もともとiOSは綺麗に日本語表示できるのですが、更なる綺麗さを求めた結果、このような日本語表示のUIに落ち着きました。

??細かすぎるけど非常に効果的なUI/UXですね……! 日本語表示にこだわるアプリはぜひとも参考にしたいものです。

DSC 0307

日本語表示を最適化するために参考にした書籍



慣性スクロール中でもページめくりできるUI

浜本 SmartNewsはページめくりにもこだわりました。
 たとえばiOSでは、Gesture Recognizer APIを使い、指の位置を細かく検出してページのめくり方を工夫したアプリが多いです。

Sc ibooks

iBooksのページめくり。指の動きに応じてページのめくれかたが異なる。リッチなUIだ。(矢印は編集部が加えた)


??こういうiOS標準のページめくりを採用しているアプリって多いですよね。

浜本 このリッチなページめくりは、ニュースアプリに実装してもあまり意味がないと考えたんです。
 実はGesture Recognizer APIを使うと、縦のスクロールに慣性が効いてしまい、スクロールし終わるまでページがめくれないんですよね。

??ニュース記事を斜め読みしたいユーザにとって、スクロールし終わるまでページ遷移できないのは不便です。

浜本 そこでiOS標準のGesture Recognizer APIを使わず、SmartNewsでは独自にページめくりの実装を施しました。そうすることで次のようなページめくりが可能になりました。

Sc smartnews

SmartNewsのページめくり。指をどんなに動かしてもページのめくれ方は水平に一定している。スクロール中でもすぐにページをめくることも可能だ(矢印は編集部が加えた)



??スクロールにもここまでこだわり抜いているとは。参りました。


DSC 0339

浜本階生氏


これからのSmartNewsとUI/UX

浜本 SmartNewsは、今回トピックに挙がったようなクライアントサイドのUI/UXも妥協していませんし、サーバーサイドではユーザがどのような記事を選ぶのかについても、徹底的に追求をしています。
 特に、今は開発リソースをサーバーサイドのデータマイニングに費やしているところです。何日も連続して面白い記事が配信されてこなければユーザーは読み続けてくれません。記事の選別・配信はユーザ体験に関わるものとして最優先に考えているところです。

??フロントサイド・サーバサイドの細かすぎるUI/UXにまでトコトンこだわるところがSmartNews流なんですね。今回はどうもありがとうございました。

DSC 0408

SmartNewsを開発するメンバー(取材時は5人)


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

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

https://www.smartnews.be/


あわせて読みたい

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



(話し手 浜本階生)

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.