優れたUXは教科書通りだけでは創れない。「Tribe」が体現する新しいUIの起承転結

優れたUXは教科書通りだけでは創れない。「Tribe」が体現する新しいUIの起承転結

Amebaクリエイティブディレクターが語る
スマホアプリのデザイントレンド
2016年4月13日
TEXT:井上 辰徳(株式会社サイバーエージェント)

日々進化するデバイスやユーザーに合わせ、スマホアプリのデザイントレンドの移り変わりは非常に早い。本コラムでは、アップデートによって進化を遂げたサービスUIや新機能、新サービスなどにフォーカスし、より良いユーザー体験を提供するうえでの工夫についてサービスごとに考察する。今回は、今年リリースされた注目のビデオチャットアプリ「Tribe」について取り上げる。

スマホの時代が産み出した文化のひとつ「自撮り(セルフィー)」。それをコミュニケーションに発展させたアプリは数多く登場しているが、その中でもリリースされたばかりの新しいアプリが「Tribe」 。このアプリは見た目の印象から感じ取れる「斬新」という言葉だけでは説明しきれないほどの工夫が、随所に施されている。今回は日々のデザインにも取り入れたいUXを助けるアイデアについて紹介する。

「Tribe」
●iOS版アプリはこちら
●Android版アプリはこちら


自分と友人を繋ぐフレンドリーな構成

まずは、ホーム画面の構成を紐解いていこう。主な要素は、友人のリストである。ビビットなカラーリングでタイル状に敷き詰められ、カラフルな世界を作りあげている。このポップな印象が、このアプリが気心知れた友人との肩の力を抜いたコミュニケーションを交わすアプリであると言う事を印象づけている。


特徴的なUIのポイントとして、インカメラのウィンドウが常に立ち上がっている事だ。ここには自分の顔が映し出されており、いつでもビデオメッセージや現在の状況をライブ感覚で送る準備が整っているのである。

つまりUIの構成の意図として、友人と自分が同じ画面に並び、離れた場所にいる相手との距離を一気に縮め、まるで隣に並ぶ友人の肩に手が届くような距離感を演出していると言える。その他では、マイページやグループ機能、友人を探す機能などが、コンパクトに左上にまとめられているのが特徴だ。

一見コミュニケーションツールとしての操作部分が無いように見えるが、次は友人とのライトなコミュニケーションを実現する操作について見ていこう。


一定のルールが気軽なコミュニケーションを作る

気心の知れた友人ほど、より簡単な挨拶や共通言語だけで会話をするなど、より形式を省いたコミュニケーションを交わすものであると言えるのではないだろうか? このアプリにもそんな気軽さを損なわない操作の工夫が随所に隠されている。

まずはメインの機能であるビデオメッセージを送りたい場合、送りたい友人のサムネイルを指で長押しする。サムネイルを触っている間だけ録画され、指を離すと送信されると言った感じだ。

操作と言うよりは、離れた場所にいる友人に手を振る様な簡単なジェスチャーに近いと言えよう。また、写真だけを送りたい時は、指でサムネイルをワンタップするだけと、至ってシンプルである。


これらの一定のルールを覚えてしまえば、最小限の操作で友人同士のライトなコミュニケーションを繰り広げる事が可能だ。

さらに撮影されたビデオにも注目してみる。これだけシンプルな操作だと、送られたビデオも簡素なものに思われるが、GPSの情報から場所や天候などの情報が自動で表示されるのだ。これらの情報も離れた相手の状況を知り、距離を縮めるための工夫のひとつである。

さて、ここまで操作のシンプルさを紹介してきたが、もちろんこれらを実現するにはUIにも気遣いが必要である。次はそんなUIに見る工夫について紹介しよう。


シンプルな操作を実現させるための工夫と気遣い

ユーザーのアクションに対して、それなりのUIのリアクションが無ければ、途端に目的を達成できない機能になってしまうと言っても過言ではないだろう。シンプルなUIであればこそ、それらへの配慮は怠ることはできない。続いてビデオ撮影中におけるUIのリアクションについて見ていこう。


左上の図は撮影中のインカメラの挙動を表しているが、注目するべきはウィンドの周りを一周する赤いゲージだ。これは録画されたビデオの長さと、残りの尺を二つ同時に表すものだ。シンプルだが直感的に操作の実行を理解できるデザインである。

また、指を離した後のサムネイルにも注目してもらいたい。送信までに一定の時間が設けられるのも、このアプリのルールのひとつだが、ここに現れるゲージにより、この時間内であればキャンセルも可能と言う事がすぐに理解できる。これらのリアクションがユーザー操作を助長する工夫なのだ。

さらに、このアプリに見られる珍しいUIの表現として、友人リストのソート方法が挙げられる。タイル状のリストは面積を使うため、一見リストの件数が増えるとスクロールで友人を探し難いように思える。

それを解決した工夫が、画面を下に引っ張った時にでるユーザーネームのインデックスだ。これは引っ張った長さによってアルファベット順(または50音順)の頭文字を切り替え、リストをソートする事が可能だ。斬新かつ合理的な方法で問題を解決したUIと言える。これら、小さな工夫が散りばめられたアプリが今回紹介したTribeなのだ。


■まとめ「Tribe」にみる、シンプルなUIを助ける工夫の数々

サービスイメージを重視するあまり、操作性の低いUIになってしまいがちだが、レイアウトやUIのリアクションに配慮することにより、アプリのルールを助長し、使い心地の良いバランスが生まれる。それは画面遷移図やプロトタイピングのツールの検証だけでは見過ごしてしまいがちである。

「Tribe」は決して教科書通りではないUIではあるが、世界観を崩さずにクリエイティブとしての起承転結を保ったアプリと言える。クリエイターとして刺激を受けるアプリだ。今後の展望にも注目したい。


●その他の記事
「Amebaクリエイティブディレクターが語る
 スマホアプリのデザイントレンド」の目次はこちら


[筆者プロフィール]
井上 辰徳(いのうえ たつのり) /クリエイティブディレクター
「Ameba」メディアサービスの立ち上げを複数担当。
現在はコマースサービス「Ameba古着屋」のクリエイティブ責任者を務める。

MdN DIのトップぺージ