【第３回】iOSアプリ ticket to UI/UX

注目!? リスト内のセルの一部を固定する見せ方

"Instagram"で用いられているのは知っていたのですが、他のアプリが使用しているのを見かけなかったのでInstagramのみが使用している悪い意味での「奇抜なUI」なのかと思っていたのですが、最近DLした"Sumally"でもみられたのでここに記しておきます（ここではSumallyを参考画像に用います）。
リストで並んでいる情報のかたまり１つ１つをセルと呼ぶとすると（下画像赤色部）、そのセルが表示されているあいだはセル内の一部（下画像黄色部）の位置を固定して表示する方法だ。

上の画像からスクロールアップしても、固定部は固定されたままだ。

さらにスクロールアップすると次のセルが固定部とぶつかることになるが、そのときは次のセルの固定部が前のセルの固定部を押し上げる仕様になっています。

固定した箇所の情報へのアクセスをしやすくするための設計だと思うのですが、個人的には過保護な印象をもっています。それでも今後もこのUIが増えていくのであれば注目していきたいですね！

タブバーのカスタマイズ!!

ようやく最近Twitterクライアントアプリである"Tweetbot"をDLしました。まだ使いこんでいるとは言えない状況ですが、タブバーがカスタマイズできるという機能が珍しいと思ったので（もちろん便利でもある）、こちらに記しておきたいと思います。
Tweetbotではタブバーのメニューのうち右２つがカスタマイズできます（下画像。右のほうに選択オプションアイコンがついていて、カスタマイズできるということがわかりやすくなっています）。

カスタマイズのやり方は、ロングタップすることで下画像のようになり、好きな機能を選択したタブバーのメニューに設定できます（補足ですがカスタマイズできる機能としては「検索」「プロフィール設定」「お気に入り」「リスト」などがあります）。

Twitterの使い方というかユーザが求める機能は千差万別で、それをすべて満たすクライアントアプリをつくることはおそらくできないでしょう。そういったときに、Tweetbotのように「わかりやすくカスタマイズ」できるというのはUI/UXとして素晴らしいと感じました。

LINEカメラとIQONのスタンプの拡大縮小/回転のUI/UX

"LINEカメラ"とファッションコーディネートSNSである"IQON"（下画像）、この２つではスタンプを拡大縮小/回転する似たような機能があります。

ただしそのUIは、LINEカメラのほうがかなりシンプルな設計になっています（LINEカメラでは拡大縮小/回転を共に行うボタンが１つ、IQONでは、拡大縮小ボタンが３つ、回転ボタンが１つの計４つのボタンがある）。ここでいいたいのは善し悪しや好みの話ではなく、どちらもそれぞれのアプリのコンセプト（言い換えればUX）に沿ってUIが設計されていると思えることです。

LINE=鉋をかける

LINEカメラのUIだと、拡大縮小と回転を１つのボタンで操作することになります。この仕様ですと、たとえば拡大のみしようとしたときにも操作する指のズレで若干回転してしまうことが発生します。ただしLINEカメラはそれでいいのだと思います。というのは、LINEカメラではなにか大それた作品のようなものをつくることはおそらく求められておらず、LINEのスタンプのキャラクター同様ゆるい感じの作品がつくられることを求められているのだと思います。そしてなによりもLINE自体の「シンプル」さを損なわないようにしたのだろうと思います。

http://app.famitsu.com/20121108_107027/

この勉強会に参加して、LINEのデザインマネージメントを担っているという橋本さんからLINEのUIについて話を聞けたのですが、個人的には「鉋をかける」という言葉が一番印象に残っています。要は不要なものは徹底的に削る。簡単なようなことでなかなかできないもの。せっかくつくったものも不要であれば削除する。このLINEカメラのUIもまた鉋をかけられてこのような形になったのではと思います。

IQON=コーディネート作品をつくりあげる

一方IQONでは、スタンプの４隅にボタンがついている。操作は複雑になるが細かな制御が可能になる。そう、IQONでは自分だけのコーディネート作品をつくりあげるのだ。必死になって、かわいいorクールな作品をつくって、他ユーザからいいねなどをしてもらう。だからこのようにボタンが4つもついている。個人的には何個もボタンがあるのは好きではないのですが、このアプリのUXから落とし込んだ最適なUIになっているように思えます。