松本 俊介

内田 達也

Matsumoto Shunsuke

Uchida Tatsuya

株式会社サイバーエージェント / 株式会社AbemaTV

株式会社サイバーエージェント

2015年に新卒入社

2013年に新卒入社

同年7月に株式会社 AbemaTVに出向し、UIデザイナーとして複数サービスを担当し、AbemaTVの立ち上げメンバーとして参画。

AbemaTVの立ち上げに参画。 2017年に退社し以降同部署でプロダクトデザインオーナーとして個人でゲームを開発。

各デバイスへの対応やサービスグロースに携1年半後サイバーエージェント再入社。再び新わる。

規サービスを立ち上げ中。

目次
概要

UIについて●AbemaTVとは？

●

横スクロールUIについて●

投げ銭機能について●

VODとは？

●

ダークテーマが多い●

若者向け動画サービスについて●

リニアとは？

●

プレイヤーコントロールUI●VOD以外の動画活用について●

テレビにもVODサービスが縦型動画やストーリーUIに●開発時のプロトタイピング●

ついて機能や活用

AbemaTVとは？

無料で楽しめるインターネットテレビ局

リニア配信とオンデマンド配信のハイブリッド

サイバーエージェント
2019年12月 統合報告書より抜粋AbemaTVのコンテンツ

サイバーエージェント
2019年9月期通期決算説明会資料より抜粋

AbemaTVのコンテンツ

サイバーエージェント
2019年9月期通期決算説明会資料より抜粋

AbemaTVのアプリダウンロード数

サイバーエージェント
2019年9月期通期決算説明会資料より抜粋

AbemaTVのユーザー数

サイバーエージェント
2019年12月 統合報告書より抜粋AbemaTV 競合比較

サイバーエージェント
2019年12月 統合報告書より抜粋AbemaTVのビジネスモデル

サイバーエージェント
2019年12月 統合報告書より抜粋リリース当初は横UIだった
テレビのような受け身視聴

シンプルでスタイリッシュ

目新しいUI

リリース当初は横UIだった

1年後、コンセプトが世に浸透した時点で縦UIに対応した

VODとは？
(VOD = Video On Demand)VODとはユーザーが観たい時に映像コンテンツを視聴できるサービスのこと。

公開済みの
映画

放送済みのテレビ番組

オリジナル作品

各サービスの一部

MAUの比較サイバーエージェント
2019年12月 統合報告書より抜粋

VODの各種サービス形態

AVOD Advertising Video On Demand
広告型動画配信 広告掲載によって配信業者が収益を得て、無料で視聴できる

SVOD Subscription Video On Demand
定額動画配信 定額料金を支払うことで、用意されている映像を視聴できる

TVOD Transactional Video On Demand
期限付きのペイ・パー・ビュー レンタル型の動画配信形態で視聴できる

VODの各種サービス形態

AVOD
広告型動画配信 広告掲載によって配信業者が収益を得て、無料で視聴できる

SVOD
定額動画配信 定額料金を支払うことで、用意されている映像を視聴できる

TVOD
期限付きのペイ・パー・ビュー レンタル型の動画配信形態で視聴できる

すごいAVOD（広告）

動画内にバーチャル広告を自然に合成する技術がすごい...
https://twitter.com/mbrennanchina/status/1184114082804158464?s=20

👉 動画再生前の6秒/15秒/30秒CMが必要なくなる！？

VODに見せないリニアのサービスとは？

ここで言うリニアとは?
テレビ放送のように、止めたり巻き戻しできない動画のこと

苦労話AbemaTVを作る時、リニアサービスはあまりなかった普通に作るとVODっぽく見えるリニアなので停止もスキップもできない「テレビ」だということを伝える

起動後すぐに再生

テレビ欄と同じ番組表

VODサービスの横スクロールUIについて

どこも横スクロールUIである

AbemaTVも、様々なパターンをA/Bテストして一番良かったのがこの横スクロールUIだった

AbemaTVで実施したA/Bテスト縦に積んでみたり、件数を減らしてみたり、カラム数を増やしてみたりどこも横スクロールUIである特集やグルーピングの軸で縦に並べた方がコンテンツを探しやすい（おそらく各社も同じ道を辿っているのではないか？）VODサービスはダークテーマが多いなぜダークテーマ？

暗い背景の方が動画やビジュアルが映えるため理由がシンプル！

なぜダークテーマ？

「進出色・後退色」に理由がある？

黒色は後退色なので相対的に画像が浮き出てみえる

なぜダークテーマ？
とあるテキストに関する研究結果「白い背景に黒い文字」の方が読む速度が速く、誤字脱字も見つけやすかった
瞳孔の開き方に原因があり、それが視認性に影響をもたらしているらしい
出典 https://wired.jp/2019/10/05/dark-mode-chrome-android-ios-science/なぜダークテーマ？

視聴者の環境面
部屋を暗くしてノイズを少なくし視聴に集中したいストーリーもある
VODアプリは、他アプリと比べて遅い時間帯に利用される傾向がある
出典 https://news.mynavi.jp/article/20180710-662296/

プレイヤーコントロールUIについて

各社のプレイヤーコントロール
数年前は微妙に統一されてなかったが、徐々に統一されていった
Hulu

Netflix

Amazon Prime Video

各社のプレイヤーコントロール

微妙に統一されてなかった点とは● シーク時プレビュー： ミニサムネイル or プレイヤー自体● シーク時プレイヤー： 一時停止される or 再生し続ける● シークコントロール： 経過時間を表示 or 残り時間を表示

各社のプレイヤーコントロール

ダブルタップスキップ
YouTubeが始めた!?
● おそらく2017年始めにYouTubeが導入● 2018年〜他VODサービスも導入を始める

各社のプレイヤーコントロール

倍速機能のニーズも高まる● コンテンツの消費効率を上げる需要の高さ● 海外では、制作側からの反発も？

縦型動画やストーリーUIについて

Snapchat2012-

2012年12月
動画を送信する機能が追加

Snapchat Stories
2013-

2014年6月にはメッセージより使われる主要機能に

Instagram Stories
2016-Meerkat, Periscope, 17...
2015-

TikTok
2016-

UIの話

片手で使えるか
主要ボタンは画面下部にスワイプなどで動かせるようにSomeone says...

人間の目は横に付いてるから動画は横の方が見やすい

投げ銭機能について1. アイテム購入型
スタンプなどを購入して送る
配信者が「ありがとうー❤」というリアクションをくれる17, SHOWROOM, LINE LIVE

2. スーパーチャット型
自分のコメントをピン留めできる
ピン留される時間は値段によって変わる
YouTube, AbemaTVhttps://blog.streamlabs.com/live-streaming-q418-report-fortnite-seesfirst-decline-in-mau-mobile-users-up-266-mixer-94f281e5b31f

I think...
ライブ動画の場合、ユーザーは「動画」を見ている感覚はない。

消えたサービスと生き残ったサービス

Vine
インスタ風動画SNS
6秒以内の短い動画を投稿できた
UIと言うよりはビジネス的な問題でクローズ？

TikTok●

振りが用意され投稿ハードルがさらに低下●

一瞬で人気者になれるアルゴリズム●

膨大な広告で「流行ってる感」

●

全画面動画

VODサービスでなくても動画を有効活用している

マッチング人の雰囲気をより具体的に伝える
ストーリー機能を持たせたアプリも増加
Hatch, Tinder, match.com, bumble

レシピ
Facebook, Instagram, YouTube等
自社メディア以外にも動画を配信
Delish Kitchen, クラシル, クックパッド

ニュース
災害等あらゆる情報が動画で分かりやすい
NewsPicksの場合は時事ネタを扱うメディア
NewsPicks, LINE NEWS, SmartNews

エンタメ等
動画再生機能がなかったアプリにも追加されつつある
Pinterest, Shazam, Reddit and more!

EC?
アメリカではECサイトに動画を積極的に活用「ライブコマース」の行方は？

I think...

メディアは「文字→画像→音声→動画」と進化するテレビにもVODサービスがついてくる時代テレビでインターネットを楽しめる時代

Android TV / Fire TV
Apple TV
上記以外のテレビ（Linux-based）

テレビデバイスのUIデザインの機会が増えた● リモコン操作● 文字入力のハードル● スマホと異なる可読性...etc

テレビデバイスならではの開発● 視聴距離が大きいため、情報量に気をつける● 1人で使用しているとは限らない● スマホのように頻繁に操作したくない（リモコンを常に握っているとは限らない）● つけっ放しにして使うユーザーが多い開発時のプロトタイピング

AbemaTVの使用ツール

SketchAbstract

ProtoPieAbemaTVの使用ツール

動画をメインに扱うサービスのためプロトタイピングツールには動画再生機能が必須

最後に

最後に

VODサービスのUIやマネタイズの手段などは、一度多くのサービスで発散され試行錯誤されたがここ数年で収束されて似通ってきた世のトレンドと同様に発散と収束、変化と回帰を繰り返す？

ありがとうございました