Amebaクリエイティブディレクターが選ぶ！今月のオススメアプリ5選 [2016年12月]

Amebaクリエイティブディレクターが選ぶ！
今月のオススメアプリ5選(2016年 12月版)

2017年1月5日
執筆：佐藤 洋介（株式会社サイバーエージェント）

■今月は今注目されるアプリの【動画系サービス】にフォーカス！皆様こんにちは。昨年のクリスマスの日にシュナウザーの子犬を飼い始めた佐藤です。名前はスパンと言います。HTMLの＜span＞から取ったので、子犬の小屋を＜div＞と呼ぶかどうかで迷っています。 さてこの連載では、Ameba内でも話題になった気になるオススメアプリを、UIデザインの観点からご紹介させていただきます。 今月は「動画系のサービス」についてフォーカスし、パケット通信量の増量プランなどの登場によって、ますますユーザーニーズが増えてきた「動画」というコンテンツを、サービスの中でどのように扱っているのかを具体的に紹介したいと思います。

▷【インタラクションで物理的な示唆をする】
画面遷移のインタラクションが与える逆操作の安心感

1.Red Bull TV

エクストリーム系のスポーツ動画を配信する「Red Bull TV」 。太めの書体とキャッチーなビジュアルが印象的なフィード画面では、ファーストビューで画面を２分割するようなレイアウトになっており、上部でピックアップコンテンツを強めに訴求。下部には並列にコンテンツを並べているが、基本的にすべて動画コンテンツであるため、三角形の再生マークは使用していない。

また、コンテンツをタップすると右下から再生エリアが出現するインタラクションになっているので、「下にスワイプする」という「遷移時のインタラクションと逆の操作」をすると動画がワイプ状に小さくなり、他画面に遷移しながら視聴を続けられる仕様となっている。 このような「物理的な示唆」をインタラクションで訴求しているため、直感的に操作が行える。

▷iPhone： Red Bull TV
▷Android： Google Play で手に入れよう Red Bull TV

▷【下層ページがない！？】
閲覧と視聴をシームレスにつなぎ回遊を生む

2.Great Big Story

CNNの子会社として2015年に設立された動画メディア「Great Big Story（以下GBS）」。印象的な赤と、個性あふれる見出しフォントが魅力的なこのアプリだが、一番特徴的なのは「下層ページが存在しない」という所だ。 動画系に限らず、多くのアプリはフィード画面でコンテンツをタップすると、下層ページへと遷移してより詳細な情報を得ることができるが、行き来が非常にしにくく回遊が生まれにくい。 しかし、GBSのフィード画面で縦に並ぶ動画コンテンツはタップしても遷移はせず、その場でサムネイルが動画再生画面へと吸い込まれるようにアニメーションして「閲覧」と「視聴」をシームレスにつないでいる。

このように、「コンテンツを回遊してもらうために、下層ページに様々な動線を用意して行き止まりにしない」という一般的なメディアサービスUIの正攻法に対し、「そもそも下層ページに遷移させない」というGBSのシンプルな設計は、「見飽きたらスクロールして他を閲覧する」という、コンテンツを探し当てたいユーザーニーズに対して最もシンプルな解決策であると言える。 ただし、「１つ１つのコンテンツをじっくり視聴してもらいたい」という一般的なサービス側の意向とは真逆の設計となっているため、導入にはメディアの特性を十分に理解する必要がある。

▷iPhone： Great Big Story
▷Android： Google Play で手に入れよう Great Big Story

▷【色やアイコンの造形がもたらす安心感】
動画コンテンツをライトに見せる工夫

3.Vimeo

Youtubeと比べ、クリエイター系の動画が多い印象のユーザー投稿型の動画共有サービス「Vimeo」 。上で紹介した「Red Bull TV」と同様に、コンテンツのフィードでは再生マークがなく、変わりに動画の再生時間を控えめに表記することで「動画コンテンツ」としての存在感を出している。 また、遷移時のアニメーションもシンプルで、下から上に詳細画面がせり上がってくる仕様のため、「下げて閉じる」という操作をうまく示唆している例でもある。

特出すべきは白をベースとしたトンマナで、写真と比べてヘビーな「動画」というコンテンツを、明るめのベースカラーで補うことでコンテンツに対する心的な安心感を与え、ゆとりのあるレイアウトと少し太めなアイコンの造形的な安定感もライトな視聴体験をしっかりと演出している。

▷iPhone： Vimeo
▷Android： Google Play で手に入れよう Vimeo

▷【深い視聴体験と没入感】
スクロールを心地よく制御し、シームレスに没入させる工夫

4.メゾン ディオールの世界観をビデオで映し出すDiorTV

名前の通り、メゾン ディオールのビデオチャンネルアプリ。 大きめのヘッダーメニューと、白黒が織りなす独自の世界観が魅力的なこのアプリだが、上で紹介したGBSと同様にこちらも動画の下層ページがない作りとなっている。 GBSと大きく違う点は、1つ1つ動画をじっくり見せるための工夫としてスクロールに制限をかけている点と、中央の動画以外をグレースケールで表現している所だ。 スクロールをやめると、半自動的に1つのコンテンツが中央にFixして上下のコンテンツがグレースケールになり、コンテンツの再生マークをタップすると上下のコンテンツがさらにブラックアウトされ、再生されている動画にフォーカスされる仕様だ。

再生時に画面を遷移させず、再生しているもの以外の要素を邪魔にならない程度まで存在を落とすという手法だが、こうすることでユーザーは選択した動画にシームレスに没入するため、深い視聴体験が演出できている。

▷iPhone： メゾン ディオールの世界観をビデオで映し出すDiorTV
▷Android： Google Play で手に入れよう DiorTV

▷【セレブな世界観】
UIやインタラクションで上品さを演出する工夫

5.CHANEL FASHION

CHANELの新作コレクションやファッションショーの詳細情報がチェックできるこのアプリ。 メインページの大胆なヒーロイメージとシンプルな見出しでコンテンツを印象的に見せ、スクロールを1つづつ制御することで情報をじっくりと訴求している。 動画以外にも情報があるため、メインページから直接動画へ遷移する仕様ではないが、下層ページへの遷移時のアニメーションが比較的ゆったりとしており、「上品さ」をうまく演出している。 また、下層ページの最上部の見出しが画面の大半を占めてしまっているが、下部の内容を「包括」している印象を明確に表現しているので、ゆとりのある「上品さ」も演出できている。

▷iPhone： CHANEL FASHION
▷Android： Google Play で手に入れよう CHANEL FASHION

▷動画コンテンツに必要なのは「省く」意識。
「スマホで見る動画」がユーザーの生活に根付き始めた2016年。 「動画コンテンツ」は体験時間が長いため、写真やテキストとはまた違う重みがあり、「じっくり見る」のか「サッと見る」のかなど、ユーザーの様々な視聴環境を想定してUIを選定する必要がある。 今回紹介したアプリのように、対象ユーザーのニーズをしっかりと理解し、機能が複雑になりがちな「動画コンテンツ」に対して、「省ける機能」をどれだけ見つけられるかがUIデザイナーの腕の見せ所になってくるのは間違いない。