Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

松本 俊介 Matsumoto Shunsuke 2015年3月 武蔵野美術大学 基礎デザイン学科 卒業 2015年4月 株式会社サイバーエージェント 新卒入社 立ち上げ期のABEMAに配属され、
 今もなおABEMAのチーフプロダクトデザイナーとして従事

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について

Slide 6

Slide 6 text

1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について

Slide 7

Slide 7 text

リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 1

Slide 8

Slide 8 text

リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 1

Slide 9

Slide 9 text

シリーズ シーズン エピソード エピソード エピソード シーズン シーズン 従来のモデル

Slide 10

Slide 10 text

シンプルな コンテンツモデルだったが うまく運用されず、 課題があった 1 シリーズ シーズン エピソード エピソード エピソード シーズン シーズン 従来のモデル

Slide 11

Slide 11 text

シーズンが紐付いて表示されておらず、 連続した回遊体験が乏しい Problem1 1 シーズンが「自由なタブ」として運用され、 運用ルールもバラバラで認知コストが高い Problem2 2つの大きな課題

Slide 12

Slide 12 text

シーズンが紐付いて表示されておらず、 連続した回遊体験が乏しい Problem1 1 シーズンが「自由なタブ」として運用され、 運用ルールもバラバラで認知コストが高い Problem2 2つの大きな課題

Slide 13

Slide 13 text

10シーズン以上あるシリーズが それぞれ独立した作品として登録されてい⁨⁩た 1 どう運用されていたのか? Problem

Slide 14

Slide 14 text

オオカミには騙されない シリーズ 本来あるべき と の関係性 シリーズ シーズン Season13 エピソード エピソード エピソード Season12 Season11 1

Slide 15

Slide 15 text

こうなっていた オオカミには騙されない Season11 オオカミには騙されない Season12 本編 エピソード エピソード エピソー プレミアム 限定 PR オオカミには騙されない Season13 本編 エピソード エピソード エピソード プレミアム 限定 PR それぞれが独立した作品に... 1

Slide 16

Slide 16 text

シーズンが紐付いて表示されておらず、 連続した回遊体験が乏しい Problem1 1 シーズンが「自由なタブ」として運用され、 運用ルールもバラバラで認知コストが高い Problem2 2つの大きな課題

Slide 17

Slide 17 text

1 オオカミには騙されない シリーズ Season13 エピソード エピソード エピソード Season12 Season11 「シーズン」レイヤーは 「時系列に整理されたシーズン」   として想定していた...

Slide 18

Slide 18 text

しかし、運用ニーズとしては や で、 本来の「シーズン」としての運用は少なかった。 本編と特別映像の分類 番組コーナーのグルーピング 1

Slide 19

Slide 19 text

1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について

Slide 20

Slide 20 text

まず、 に想いを馳せる... ソフトウェアデザイン 2

Slide 21

Slide 21 text

ソフトウェアデザインって 「データをどう構造化して、 それをどのように認知・操作可能にするか」だよな データA データB データC データD 2 データA データB データC データD

Slide 22

Slide 22 text

この課題を解決するには コンテンツデータの構造化(コンテンツモデル) に デザイン的なアプローチが必要なのでは? 2 ソフトウェアデザインって 「データをどう構造化して、 それをどのように認知・操作可能にするか」だよな

Slide 23

Slide 23 text

新しくコンテンツモデルを設計し 作品パターンに合わせてUI表現を最適化 2 やったこと

Slide 24

Slide 24 text

シリーズ シーズン エピソード エピソード エピソード シーズン シーズン 2 Before

Slide 25

Slide 25 text

シリーズ シーズン エピソードグループ エピソードグループ エピソード エピソード エピソード エピソード シーズン エピソードグループ エピソードグループ 2 After

Slide 26

Slide 26 text

シーズン シーズン エピソードグループ シリーズ シリーズ エピソード エピソード After 2

Slide 27

Slide 27 text

シーズン シーズン エピソードグループ シリーズ シリーズ エピソード エピソード After 2 これだけでは終わらない

Slide 28

Slide 28 text

ABEMAの配信コンテンツは アニメやドラマなどの「ストーリーもの」だけではなく バラエティ、スポーツ、麻雀 など多種多様 1

Slide 29

Slide 29 text

1 さらに... 試合もあれば、情報番組もある ドラマもあれば、バラエティ的な番組もある 音楽番組もあれば、オーディション番組もある

Slide 30

Slide 30 text

シリーズを見つけたい 特定のシーズンに興味がある バズってる動画(エピソード)を見たい 大会のハイライト動画を見たい 2

Slide 31

Slide 31 text

作品の特性に合わせて 探索体験を最適化すべきだ! シリーズを見つけたい 特定のシーズンに興味がある バズってる動画(エピソード)を見たい 大会のハイライト動画を見たい 2

Slide 32

Slide 32 text

スポーツ・アニメ・麻雀…といった ではなく それぞれの を整理 5種類の「作品パターン」を定義 ジャンル 作品内容のパターン 2

Slide 33

Slide 33 text

2 シリーズ 優先 アニメやドラマ のような作品の 時系列がハッキ リしていて連続 的な視聴が求め られる作品 シーズン 優先 恋愛番組やオー ディション番組 で特定シーズン にのみ興味関心 がある可能性が 高い作品 検索結果やランキングにも シーズン単位で露出される エピソード 優先 バラエティ番組 のように特定エ ピソードに興味 関心があり、時 系列の連続的な 視聴が求められ ない作品 映画・特番 シーズン概念が なく、1シリーズ に対して本編が1 つしかない作品 競技・大会・ イベント スポーツ、格闘、 麻雀、将棋のよ うにリーグや大 会の概念がある 作品 シリーズ 優先 アニメやドラマ のような作品の 時系列がハッキ リしていて連続 的な視聴が求め られる作品 シーズン 優先 恋愛番組やオー ディション番組 で特定シーズン にのみ興味関心 がある可能性が 高い作品 検索結果やランキングにも シーズン単位で露出される エピソード 優先 バラエティ番組 のように特定エ ピソードに興味 関心があり、時 系列の連続的な 視聴が求められ ない作品 映画・特番 シーズン概念が なく、1シリーズ に対して本編が1 つしかない作品 競技・大会・ イベント スポーツ、格闘、 麻雀、将棋のよ うにリーグや大 会の概念がある 作品 5種類の作品パターン

Slide 34

Slide 34 text

2 シリーズ 優先 アニメやドラマのような 作品の時系列がハッキリ していて連続的な視聴が 求められる作品 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シリーズ優先

Slide 35

Slide 35 text

2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シリーズ優先

Slide 36

Slide 36 text

2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シリーズ優先 検索 レコメンド

Slide 37

Slide 37 text

2 シーズン 優先 恋愛番組やオーディショ ン番組で特定シーズンに のみ興味関心がある可能 性が高い作品 検索結果やランキングにもシーズン単 位で露出される シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シーズン優先

Slide 38

Slide 38 text

2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シーズン優先

Slide 39

Slide 39 text

2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シーズン優先 検索 レコメンド

Slide 40

Slide 40 text

2 エピソード 優先 バラエティ番組のように 特定エピソードに興味関 心があり、時系列の連続 的な視聴が求められない 作品 シリーズ エピソードグループ エピソード エピソード エピソード シーズン ーー エピソードグループ エピソードグループ エピソード優先

Slide 41

Slide 41 text

2 シリーズ エピソードグループ エピソード エピソード エピソード シーズン ーー エピソードグループ エピソードグループ エピソード優先

Slide 42

Slide 42 text

2 シリーズ エピソードグループ エピソード エピソード エピソード シーズン ーー エピソードグループ エピソードグループ エピソード優先 検索 レコメンド

Slide 43

Slide 43 text

1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について

Slide 44

Slide 44 text

シーズンにもサムネイルを設定し、 露出可能になった 3

Slide 45

Slide 45 text

3 シリーズと の粒度が作品ごとに揃い、 探索時の混乱が解消された シーズン

Slide 46

Slide 46 text

年単位の格闘技シリーズ 各大会単位の格闘技シリーズ シリーズと の粒度が混在していたが... シーズン 3

Slide 47

Slide 47 text

年単位の格闘技シリーズ 各大会単位の格闘技シリーズ RISE 2022年内の各大会が 「1つのシリーズ」に ぶら下がっている K-1 2022年内の各大会が 「別々のシリーズ」として 登録されている Problem シリーズと の粒度が混在していたが... シーズン 3

Slide 48

Slide 48 text

年単位の格闘技シリーズ 年単位の格闘技シリーズ 競技・大会・イベントは に統一 年単位 3

Slide 49

Slide 49 text

2018 2019 2020 2022 2021 3

Slide 50

Slide 50 text

シーズンをまたいだ が実現できた マイリスト体験 3

Slide 51

Slide 51 text

UIデザインの裏話 3

Slide 52

Slide 52 text

どんな があるか 俯瞰できない シーズン Problem 3 シーズンタブUIのデザイン

Slide 53

Slide 53 text

まだ俯瞰しづらく、 作品性も伝わりづらい Problem 3 シーズンタブUIのデザイン

Slide 54

Slide 54 text

他シーズン 他シーズン を探したいのに のサムネが 暗いと見づらい Problem 3 シーズンタブUIのデザイン

Slide 55

Slide 55 text

各シーズンが俯瞰しやすく、 作品性も伝わり、 アクティブ表現も改善 3 シーズンタブUIのデザイン FIX

Slide 56

Slide 56 text

3 オオカミには騙されない 花束とオオカミ ちゃんには騙 オオカミちゃん とオオカミ%( 彼とオオカミ ちゃんには5( 虹とオオカミに は騙されない 本編 特別映像 #1:バラ一輪の 花言葉を君に 54分 362 „( 無料 オオカミには騙されない 花束とオオカミちゃ んには騙されない オオカミちゃんと オオカミくん( 彼とオオカミちゃ んには騙されない 虹とオオカミには 騙されない 本編 特別映像 #1:バラ一輪の花言葉 を君に 54分 362 万視聴 無料 オオカミには騙されない 花束とオオカミちゃん には騙されない オオカミちゃんとオ オカミくんには5( 彼とオオカミちゃん には騙されない 虹とオオカミには騙 されない 本編 特別映像 #1:バラ一輪の花言葉を君に 54分 362 万視聴 無料 どんな端末でも一定の見切れ方をさせるために 画面幅に対して3.3個の計算でレイアウト (アクティブアイテムは1.1倍のスケール) シーズンタブUIのデザイン w340 w375 w430

Slide 57

Slide 57 text

3 シリーズページと視聴ページで モジュールを共通化 シーズンタブUIのデザイン

Slide 58

Slide 58 text

3 UIを階層化することは 必ずしもわかりやすい デザインではない...... 気をつけなければならないこと

Slide 59

Slide 59 text

3 情報を分類して階層化して 綺麗になった!と満足する ことには注意を払わなけれ ばならない ABEMAもまだ答えは出てない 気をつけなければならないこと

Slide 60

Slide 60 text

1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について

Slide 61

Slide 61 text

開発チーム 30名 4 関係者の多さ コンテンツデータを入稿、設定する運用部 10名 クリエイティブを制作するチーム 4名 データサイエンティスト 4名 広告配信チーム 4名 コンテンツの契約や管理を行うチーム 3名 プロジェクトコアメンバー 6名 私 各番組の制作、運用、編成担当 60名

Slide 62

Slide 62 text

4 プロセス STEP1 番組担当にヒアリング 統合すべき作品はあるか? タイトルがわかりづらくな いか?エピソードの分類は どうすべきか? STEP3 モデル移行 開発、運用、編成、広告、 経営管理で実施日時を合わ せて対応 STEP2 メタデータの再設計 全シリーズ、全エピソード のメタデータを書き直す

Slide 63

Slide 63 text

4 プロセス STEP1 番組担当にヒアリング 統合すべき作品はあるか? タイトルがわかりづらくな いか?エピソードの分類は どうすべきか? STEP3 モデル移行 開発、運用、編成、広告、 経営管理で実施日時を合わ せて対応 STEP2 メタデータの再設計 全シリーズ、全エピソード のメタデータを書き直す

Slide 64

Slide 64 text

4 メタデータの再設計 シリーズid シリーズタイトル シーズンid シーズン番号 シーズンタイトル エピソードグループ名 エピソード番号 123-45 素晴らしき科学の世界シーズン2 123-45_xxx 1 本編 - 1 123-99 に統合 素晴らしき科学の世界 123-45_xxx 2 シーズン2 本編 1

Slide 65

Slide 65 text

4 メタデータの再設計 何千ものシリーズを対応するため のデータを書き換える 約100,000行

Slide 66

Slide 66 text

4 メタデータの再設計 必ずしも理路整然としたデータではなかったため 自動化はできず、目視かつ手作業が多くなった 何千ものシリーズを対応するため のデータを書き換える 約100,000行

Slide 67

Slide 67 text

4 プロセス 数ヶ月間かけて完遂 設計〜実行まで達成目標を立てて進行

Slide 68

Slide 68 text

最後に

Slide 69

Slide 69 text

リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 5 再掲

Slide 70

Slide 70 text

2種類のリアルタイム配信 リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 5 再掲

Slide 71

Slide 71 text

5 ここにはリニアしか並んでないので、 スポーツやPPVをはじめとした
 ライブイベントは他の画面から探さないといけない リニアとライブイベントという 2つのリアルタイム配信の存在

Slide 72

Slide 72 text

5 2024-25年は ここに向き合っています ここにはリニアしか並んでないので、 スポーツやPPVをはじめとした
 ライブイベントは他の画面から探さないといけない リニアとライブイベントという 2つのリアルタイム配信の存在

Slide 73

Slide 73 text

5 優れたUIの実現のために データの構造化に目を向けたのは正しい判断だった。 私たちデザイナーが良いモノをつくろうとした時に、
 表層的なUIデザインにも、基盤的なモデルデザインにも
 やれることはまだまだ山ほどある。 ABEMAのように大きなプロダクト、大きな組織でも
 このような挑戦的な取り組みが歓迎されている。

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

5 作品がもっとも輝くプロダクトをつくる。 そのためには世界水準のデザインが求められる。 これを成し遂げるには、まだまだ仲間が足りません。 世界水準のプロダクトづくりに挑戦したい デザイナーを募集しています! Message