優れたUXは教科書通りだけでは創れない。「Tribe」が体現する新しいUIの起承転結 - デザインってオモシロイ -MdN Design Interactive-
デザインってオモシロイ MdN Design Interactive

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

  • 新規会員登録
  • ログイン管理
  • Twitter
  • facebook
  • はてなブックマーク
  • RSS

2026.4.22 WED

  • TOP
  • 特集
  • 連載
    • ALL
    • デザイン・アート
    • テクノロジー
    • コラム
    • インタビュー
    • レポート
    • インサイト
  • Tech
    • ALL
    • プログラミング
    • UI/UX
    • フレームワーク
    • Webアプリ
    • Webサービス
    • その他
  • ニュース
    • ALL
    • ニュース
    • 新製品
    • テクノロジー
    • アートイベント
    • モバイル
    • ネットで話題
新規会員登録
ログイン管理
  • プレスリリース
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 広告掲載について
  • インプレスグループ
閉じる
  • TOP
  • ニュース -
  • 優れたUXは教科書通りだけでは創れない。「Tribe」が体現する新しいUIの起承転結
【サイトリニューアル!】新サイトはこちら/MdNについて
  • ALL
  • ニュース
  • 新製品
  • テクノロジー
  • アートイベント
  • モバイル
  • ネットで話題

コラム

2016.4.13 WED

優れた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古着屋」のクリエイティブ責任者を務める。


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちら/MdNについて

前の記事を読む

起業家イーロン・マスクのSpace Xは何を破壊するのか?

起業家イーロン・マスクのSpace Xは何を破壊するのか?

2016.4.11 MON

次の記事を読む

最高益に隠れるiPhoneの失速、iPhone販売台数回復の方策は何か?(前編)

最高益に隠れるiPhoneの失速、iPhone販売台数回復の方策は何か?(前編)

2016.4.14 THU

アクセスランキング

8.30-9.5

  • 携帯大手3社、メッセージアプリ「+メッセージ」を各社全ブランドとMVNOに拡大
  • テレビの音声をワイヤレス化して飛ばせる「トランスミッター」発売、サンワサプライから
  • iPhone 12/iPhone 12 Proに音の不具合、対象モデルは無償修理へ
  • ビクトリノックス、30色バリエーションのマルチツール「クラシック カラーズ」を発売
  • 今月発表のiPhone13、低軌道衛星通信を使い“圏外”でもテキスト送信などが可能か
MdN BOOKS|デザインの本

Pick upコンテンツ

現在

  • 【文房具連載】第19回 五十嵐製紙「Food Paper」/物語のある、ニューフェイスな文房具・雑貨
  • 見た目のかわいさだけじゃない、犬の形をした実用性の高いウェブカメラ
  • この秋に発表予定のiPhone 13(仮称)はどのような変貌を遂げるのか?
  • 植物性由来100%、合成香料不使用など、エコな洗濯洗剤5選/ライフスタイル連載・こんげつのきぶん
  • 【DESIGN DIGEST】書籍カバー『顔のない花嫁/K.R.アレグザンダー』、商品パッケージ『秋の限定商品/アフタヌーンティー・ティールーム』

MdN公式Instagram

Instagramでは、デザイン関連本や本に関連した参加型コンテストについて発信しています。

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • インプレスグループ
  • 広告掲載について
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • “静寂”文具サイト
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.

page top
MdN
impress
  • メルマガの登録・解除
  • プライバシーポリシー
  • 特定商取引法
  • 利用規約
  • お問合せ
  • 会社概要
  • 広告掲載について
  • インプレスグループ
  • MdN デザインの本
  • MdN新書 新ジャーナリズム宣言。
  • “静寂”文具サイト
  • MdN DESIGNFONT STORE

Copyright © MdN Corporation,
an Impress Group company. All rights reserved.