ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve

ABEMAでは配信するコンテンツのジャンルや作品数が多く、複雑化した概念モデルとUIを改善するためにコンテンツモデルに焦点を当てました。
コンテンツをどのように構造化し、モデリングするかは、UIの表現や使いやすさに大きな影響を与えます。
CAのような、優れたUIデザイナーがそれぞれ在籍しているプロダクトにおける「使いにくいUI」は、UIデザインにだけ原因があることは意外と少なく、大体が概念モデルの設計、そもそもの要件、ひいてはビジネスモデルに課題があるはずです。
そこをUIデザイナーが正していくのが一番効率的であり、一般的に「UIデザイン」で想像する業務から少しはみ出た仕事の面白さをお伝えします。

https://cadc.cyberagent.co.jp/2024/sessions/abema-ui-improve/

Transcript

2. 松本 俊介 Matsumoto Shunsuke 2015年3月　武蔵野美術大学 基礎デザイン学科 卒業 2015年4月　株式会社サイバーエージェント 新卒入社 立ち上げ期のABEMAに配属され、
 今もなおABEMAのチーフプロダクトデザイナーとして従事
5. 1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について
6. 1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について
7. リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 1
8. リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 1
9. シリーズ シーズン エピソード エピソード エピソード シーズン シーズン 従来のモデル
10. シンプルな コンテンツモデルだったが うまく運用されず、 課題があった 1 シリーズ シーズン エピソード エピソード エピソード シーズン シーズン 従来のモデル
11. シーズンが紐付いて表示されておらず、 連続した回遊体験が乏しい Problem1 1 シーズンが「自由なタブ」として運用され、 運用ルールもバラバラで認知コストが高い Problem2 2つの大きな課題
12. シーズンが紐付いて表示されておらず、 連続した回遊体験が乏しい Problem1 1 シーズンが「自由なタブ」として運用され、 運用ルールもバラバラで認知コストが高い Problem2 2つの大きな課題
13. 10シーズン以上あるシリーズが それぞれ独立した作品として登録されてい⁨⁩た 1 どう運用されていたのか？ Problem
14. オオカミには騙されない シリーズ 本来あるべき と の関係性 シリーズ シーズン Season13 エピソード エピソード エピソード Season12 Season11 1
15. こうなっていた オオカミには騙されない Season11 オオカミには騙されない Season12 本編 エピソード エピソード エピソー プレミアム 限定 PR オオカミには騙されない Season13 本編 エピソード エピソード エピソード プレミアム 限定 PR それぞれが独立した作品に... 1
16. シーズンが紐付いて表示されておらず、 連続した回遊体験が乏しい Problem1 1 シーズンが「自由なタブ」として運用され、 運用ルールもバラバラで認知コストが高い Problem2 2つの大きな課題
17. 1 オオカミには騙されない シリーズ Season13 エピソード エピソード エピソード Season12 Season11 「シーズン」レイヤーは 「時系列に整理されたシーズン」 　 として想定していた...
18. しかし、運用ニーズとしては や で、 本来の「シーズン」としての運用は少なかった。 本編と特別映像の分類 番組コーナーのグルーピング 1
19. 1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について
20. まず、 に想いを馳せる... ソフトウェアデザイン 2
21. ソフトウェアデザインって 「データをどう構造化して、 それをどのように認知・操作可能にするか」だよな データA データB データC データD 2 データA データB データC データD
22. この課題を解決するには コンテンツデータの構造化（コンテンツモデル） に デザイン的なアプローチが必要なのでは？ 2 ソフトウェアデザインって 「データをどう構造化して、 それをどのように認知・操作可能にするか」だよな
23. 新しくコンテンツモデルを設計し 作品パターンに合わせてUI表現を最適化 2 やったこと
24. シリーズ シーズン エピソード エピソード エピソード シーズン シーズン 2 Before
25. シリーズ シーズン エピソードグループ エピソードグループ エピソード エピソード エピソード エピソード シーズン エピソードグループ エピソードグループ 2 After
26. シーズン シーズン エピソードグループ シリーズ シリーズ エピソード エピソード After 2
27. シーズン シーズン エピソードグループ シリーズ シリーズ エピソード エピソード After 2 これだけでは終わらない
28. ABEMAの配信コンテンツは アニメやドラマなどの「ストーリーもの」だけではなく バラエティ、スポーツ、麻雀 など多種多様 1
29. 1 さらに... 試合もあれば、情報番組もある ドラマもあれば、バラエティ的な番組もある 音楽番組もあれば、オーディション番組もある
30. シリーズを見つけたい 特定のシーズンに興味がある バズってる動画(エピソード)を見たい 大会のハイライト動画を見たい 2
31. 作品の特性に合わせて 探索体験を最適化すべきだ！ シリーズを見つけたい 特定のシーズンに興味がある バズってる動画(エピソード)を見たい 大会のハイライト動画を見たい 2
32. スポーツ・アニメ・麻雀…といった ではなく それぞれの を整理 5種類の「作品パターン」を定義 ジャンル 作品内容のパターン 2
33. 2 シリーズ 優先 アニメやドラマ のような作品の 時系列がハッキ リしていて連続 的な視聴が求め られる作品 シーズン 優先 恋愛番組やオー ディション番組 で特定シーズン にのみ興味関心 がある可能性が 高い作品 検索結果やランキングにも シーズン単位で露出される エピソード 優先 バラエティ番組 のように特定エ ピソードに興味 関心があり、時 系列の連続的な 視聴が求められ ない作品 映画・特番 シーズン概念が なく、1シリーズ に対して本編が1 つしかない作品 競技・大会・ イベント スポーツ、格闘、 麻雀、将棋のよ うにリーグや大 会の概念がある 作品 シリーズ 優先 アニメやドラマ のような作品の 時系列がハッキ リしていて連続 的な視聴が求め られる作品 シーズン 優先 恋愛番組やオー ディション番組 で特定シーズン にのみ興味関心 がある可能性が 高い作品 検索結果やランキングにも シーズン単位で露出される エピソード 優先 バラエティ番組 のように特定エ ピソードに興味 関心があり、時 系列の連続的な 視聴が求められ ない作品 映画・特番 シーズン概念が なく、1シリーズ に対して本編が1 つしかない作品 競技・大会・ イベント スポーツ、格闘、 麻雀、将棋のよ うにリーグや大 会の概念がある 作品 5種類の作品パターン
34. 2 シリーズ 優先 アニメやドラマのような 作品の時系列がハッキリ していて連続的な視聴が 求められる作品 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シリーズ優先
35. 2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シリーズ優先
36. 2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シリーズ優先 検索 レコメンド
37. 2 シーズン 優先 恋愛番組やオーディショ ン番組で特定シーズンに のみ興味関心がある可能 性が高い作品 検索結果やランキングにもシーズン単 位で露出される シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シーズン優先
38. 2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シーズン優先
39. 2 シリーズ シーズン エピソードグループ エピソード エピソード エピソード シーズン シーズン エピソードグループ エピソードグループ シーズン優先 検索 レコメンド
40. 2 エピソード 優先 バラエティ番組のように 特定エピソードに興味関 心があり、時系列の連続 的な視聴が求められない 作品 シリーズ エピソードグループ エピソード エピソード エピソード シーズン ーー エピソードグループ エピソードグループ エピソード優先
41. 2 シリーズ エピソードグループ エピソード エピソード エピソード シーズン ーー エピソードグループ エピソードグループ エピソード優先
42. 2 シリーズ エピソードグループ エピソード エピソード エピソード シーズン ーー エピソードグループ エピソードグループ エピソード優先 検索 レコメンド
43. 1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について
44. シーズンにもサムネイルを設定し、 露出可能になった 3
45. 3 シリーズと の粒度が作品ごとに揃い、 探索時の混乱が解消された シーズン
46. 年単位の格闘技シリーズ 各大会単位の格闘技シリーズ シリーズと の粒度が混在していたが... シーズン 3
47. 年単位の格闘技シリーズ 各大会単位の格闘技シリーズ RISE 2022年内の各大会が 「1つのシリーズ」に ぶら下がっている K-1 2022年内の各大会が 「別々のシリーズ」として 登録されている Problem シリーズと の粒度が混在していたが... シーズン 3
48. 年単位の格闘技シリーズ 年単位の格闘技シリーズ 競技・大会・イベントは に統一 年単位 3
49. 2018 2019 2020 2022 2021 3
50. シーズンをまたいだ が実現できた マイリスト体験 3
51. UIデザインの裏話 3
52. どんな があるか 俯瞰できない シーズン Problem 3 シーズンタブUIのデザイン
53. まだ俯瞰しづらく、 作品性も伝わりづらい Problem 3 シーズンタブUIのデザイン
54. 他シーズン 他シーズン を探したいのに のサムネが 暗いと見づらい Problem 3 シーズンタブUIのデザイン
55. 各シーズンが俯瞰しやすく、 作品性も伝わり、 アクティブ表現も改善 3 シーズンタブUIのデザイン FIX
56. 3 オオカミには騙されない 花束とオオカミ ちゃんには騙 オオカミちゃん とオオカミ%( 彼とオオカミ ちゃんには5( 虹とオオカミに は騙されない 本編 特別映像 #1：バラ一輪の 花言葉を君に 54分　362 „( 無料 オオカミには騙されない 花束とオオカミちゃ んには騙されない オオカミちゃんと オオカミくん( 彼とオオカミちゃ んには騙されない 虹とオオカミには 騙されない 本編 特別映像 #1：バラ一輪の花言葉 を君に 54分　362 万視聴 無料 オオカミには騙されない 花束とオオカミちゃん には騙されない オオカミちゃんとオ オカミくんには5( 彼とオオカミちゃん には騙されない 虹とオオカミには騙 されない 本編 特別映像 #1：バラ一輪の花言葉を君に 54分　362 万視聴 無料 どんな端末でも一定の見切れ方をさせるために 画面幅に対して3.3個の計算でレイアウト （アクティブアイテムは1.1倍のスケール） シーズンタブUIのデザイン w340 w375 w430
57. 3 シリーズページと視聴ページで モジュールを共通化 シーズンタブUIのデザイン
58. 3 UIを階層化することは 必ずしもわかりやすい デザインではない...... 気をつけなければならないこと
59. 3 情報を分類して階層化して 綺麗になった！と満足する ことには注意を払わなけれ ばならない ABEMAもまだ答えは出てない 気をつけなければならないこと
60. 1 2 3 4 従来のモデルとその課題 解決に向けたアプローチ 改善された使い勝手 実際のモデル移行について
61. 開発チーム 30名 4 関係者の多さ コンテンツデータを入稿、設定する運用部 10名 クリエイティブを制作するチーム 4名 データサイエンティスト 4名 広告配信チーム 4名 コンテンツの契約や管理を行うチーム 3名 プロジェクトコアメンバー 6名 私 各番組の制作、運用、編成担当 60名
62. 4 プロセス STEP1 番組担当にヒアリング 統合すべき作品はあるか？ タイトルがわかりづらくな いか？エピソードの分類は どうすべきか？ STEP3 モデル移行 開発、運用、編成、広告、 経営管理で実施日時を合わ せて対応 STEP2 メタデータの再設計 全シリーズ、全エピソード のメタデータを書き直す
63. 4 プロセス STEP1 番組担当にヒアリング 統合すべき作品はあるか？ タイトルがわかりづらくな いか？エピソードの分類は どうすべきか？ STEP3 モデル移行 開発、運用、編成、広告、 経営管理で実施日時を合わ せて対応 STEP2 メタデータの再設計 全シリーズ、全エピソード のメタデータを書き直す
64. 4 メタデータの再設計 シリーズid シリーズタイトル シーズンid シーズン番号 シーズンタイトル エピソードグループ名 エピソード番号 123-45 素晴らしき科学の世界シーズン2 123-45_xxx 1 本編 - 1 123-99 に統合 素晴らしき科学の世界 123-45_xxx 2 シーズン2 本編 1
65. 4 メタデータの再設計 何千ものシリーズを対応するため のデータを書き換える 約100,000行
66. 4 メタデータの再設計 必ずしも理路整然としたデータではなかったため 自動化はできず、目視かつ手作業が多くなった 何千ものシリーズを対応するため のデータを書き換える 約100,000行
67. 4 プロセス 数ヶ月間かけて完遂 設計〜実行まで達成目標を立てて進行
68. 最後に
69. リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 5 再掲
70. 2種類のリアルタイム配信 リニア型配信 地上波テレビのような 365日24時間編成 VOD型配信 Netflixのような ビデオオンデマンド ライブイベント型 配信 リニアの放送枠に 囚われないライブ 5 再掲
71. 5 ここにはリニアしか並んでないので、 スポーツやPPVをはじめとした
 ライブイベントは他の画面から探さないといけない リニアとライブイベントという 2つのリアルタイム配信の存在
72. 5 2024-25年は ここに向き合っています ここにはリニアしか並んでないので、 スポーツやPPVをはじめとした
 ライブイベントは他の画面から探さないといけない リニアとライブイベントという 2つのリアルタイム配信の存在
73. 5 優れたUIの実現のために データの構造化に目を向けたのは正しい判断だった。 私たちデザイナーが良いモノをつくろうとした時に、
 表層的なUIデザインにも、基盤的なモデルデザインにも
 やれることはまだまだ山ほどある。 ABEMAのように大きなプロダクト、大きな組織でも
 このような挑戦的な取り組みが歓迎されている。
75. 5 作品がもっとも輝くプロダクトをつくる。 そのためには世界水準のデザインが求められる。 これを成し遂げるには、まだまだ仲間が足りません。 世界水準のプロダクトづくりに挑戦したい デザイナーを募集しています！ Message