AbemaTVリードデザイナーの松本です。 この度サイバーエージェントグループでの技術カンファレンスCA BASE CAMPにて登壇させていただきました。

1. AbemaTVのUIデザイン
僕なりの運用の心得

2. 松本 俊介
Matsumoto Shunsuke
iOS / Android UI Designer
2015年度新卒入社

3. AbemaTVの開発について

4. Director
Designer
QA
iOS
Android
Web
Server
New Device

5. Director
Designer
QA
iOS
Android
Web
Server
New Device

7. AbemaTVのUIデザイナーとして
立ち上げから運用までやってきて
気づいたこと

8. 新規事業の立ち上げは刺激的！

9. 新規事業の立ち上げは刺激的！
当たり前。

10. 運用こそ楽しい。刺激的。

11. KPIを達成する
新規立ち上げとは違うチームの動き方
勢いではどうにもならない

12. いかに論理的でいられるか
考察・進め方・アウトプット・管理…

13. 偉そうなことを言います、
すいません！
あとでチクチク言わないで！
予防線

14. 1チュートリアル改修
アレェ、KPIこれでいいんだっけ!?

15. ビデオページへの
誘導チュートリアル
チュートリアル改修

16. ユーザーにビデオページの存在
を伝えたい
ビデオページの訪問ユーザーは
視聴転換率が高い
だからビデオボタンを押して
もらいたい！
チュートリアル改修

17. リリースした結果、
ビデオページへの遷移は増えました
わーいわーい
チュートリアル改修

18. チュートリアル改修

19. まず、遷移が増えるのはそりゃそう。
チュートリアル改修

20. ビデオページでの視聴転換率が上がったか？
ネガティブな影響はなかったか？
を見るべき
チュートリアル改修

21. チュートリアル改修
ビデオページへの遷移は2倍に増えたが
視聴転換率は下がった ( 74%→70% )

22. チュートリアル改修
母数が増えたので、許容範囲！
ビデオページへの遷移は2倍に増えたが
視聴転換率は下がった ( 74%→70% )

23. チュートリアル改修
本当にそう？

24. チュートリアル改修
母数の増加による
視聴転換率の下がり方の安全ラインの
想定は曖昧だった
反省

25. チュートリアル改修
また、チュートリアルによる悪影響を
懸念することもできてなかった
反省

26. チュートリアル改修
KPIの設計は大事
デザイナーもそこをちゃんと考えるべき
反省

27. チュートリアル改修
Sketchファイルを納品したら終わり
ではない！
エンジニアの実装を確認したら終わり
ではない！

28. チュートリアル改修
当たり前だけど…
デザイナーとして
過程～結果まで見れてるか？

29. 2機能は増えるもの？
増やすだけじゃなくて削ることも大事さ

30. AbemaTV
2016年4月リリース時から
追加された機能
機能は増えるもの？

31. 横固定UIから縦UIも / 検索機能 / 運用ポップ
アップ / Abemaビデオ機能 / ダウンロード
再生 / 追っかけ再生 / コメントブロック / カ
メラシェア / 回遊施策 / マイビデオ機能 / 毎
回通知機能 / 倍速再生 / 自動で続き再生 / 視
聴履歴 / バックグラウンド再生 / 通信節約モー
ド / 投票機能 / フィード番組表 / 各UI変更…
機能は増えるもの？

32. 機能はあればあるほどいいもんじゃない
機能は増えるもの？

33. もちろん場合によりますが…
機能は増えるもの？
選択肢が多いとどうなる？

34. 機能は増えるもの？
95年に米国で行われた有名な研究
出典：http://digitalcast.jp/v/12027/

35. 機能は増えるもの？
A週：24種類のジャム
B週：6種類のジャム
スーパーにジャムの試食コーナーを設置し、
人々の行動を観察

36. 機能は増えるもの？
試食した割合
24種類のとき：60%
6種類のとき：40%

37. 試食した割合
24種類のとき
6種類のとき
機能は増えるもの？

38. 機能は増えるもの？
お？選択肢が多い方が良い？

39. 機能は増えるもの？
しかし

40. 機能は増えるもの？
購入した割合
24種類のとき：3%
6種類のとき：30%

41. 購入した割合
24種類のとき
6種類のとき
機能は増えるもの？

42. 機能は増えるもの？
選択肢が少ない方が購入していた！
6種類のとき

43. 機能は増えるもの？
人間は「決断」に疲れる
選択肢の多さはストレスになることもある

44. 機能は増えるもの？
機能が増えるなら
何かを削るか、
増えたように見えないデザインが
時には必要かもしれない。

45. 機能は増えるもの？
マイビデオ通知を受け取る

46. 機能は増えるもの？
1つのボタンにまとめる予定
視聴予約通知を受け取る

47. 3部分最適なUI？
常に全体最適をすることを考えるべし

48. 部分最適なUI？
AbemaTVは
いろんなデバイスのUIが存在します

49. 部分最適なUI？
各OSの
デザインガイドライン
を重視しており、
表面的なUIデザイン
は揃っているわけでは
ない…。

50. 部分最適なUI？
でも、デザインの意図はズレちゃダメ

51. 部分最適なUI？
例えば、リスト内の「タグ」のデザイン

52. 部分最適なUI？
iOS
AndroidTV
テキストテキスト
サブテキストサブテキストサブテキスト
ビデオ
テキストテキスト
サブテキストサブテキストサブテキスト
ビデオ

53. 部分最適なUI？
この判断はOK
OSの特性上、リストの矢印の有無が違う
OSのガイドライン上、背景色が違う

54. AndroidTVの
暗い背景上の緑は目立ちすぎる
だから、色を白にした
部分最適なUI？
ビデオ
ビデオ
この判断は避けたいところ

55. 部分最適なUI？
正しい判断に思えるが、
デザインにおいて有彩色と無彩色の持つ
意味や役割は変わってくる

56. 部分最適なUI？
ビデオ ビデオ
デバイスによってタグの色が違うことで
意味合いが変わってしまう

57. 部分最適なUI？
部分最適をすることで
デザインの意図はズレちゃダメ

58. 部分最適なUI？
あくまでも全体最適

59. 部分最適なUI？
デザイナーが分担作業してる時点で
なかなか難しかったり…
だからデザインシステム的なものが
必要だったりする

60. 4変化を恐れるな
改悪よりも、変わらないことの方が悪

61. 変化を恐れるな
意識的な話ですが
UIを変えることに抵抗はないです。

62. 変化を恐れるな
UI変更によってユーザーが戸惑うことはある
改悪と言われるようじゃもちろんダメ…

63. 変化を恐れるな
でも、ガシガシ変えてこ

64. 変化を恐れるな
各指標は横ばいで、
汎用的なデザインに
できたのでこの変更
は成功と言える。
Before After

65. 変化を恐れるな
松本調べの研究結果があります

66. 変化を恐れるな
「絶対5Sより大きいやつにしないわ」
「この持ちやすさがいいんだ」
「絶対機種変しないからな」
iPhone5Sを愛用していたAさんとBさん

67. 変化を恐れるな
「めっちゃいい」
「もう5Sには戻れない」
「めっちゃいい」
後日、iPhone7に機種変したAさんとBさん

68. 変化を恐れるな
こういうことだと思う。
いろんな意味で

69. 5デザインの言語化
デザインなんて99%は言語化できるはず

70. 「言語化できない良さ」？
「言語化しすぎると人間味を失う」？
「堅苦しい」？
デザインの言語化

71. ・言語化するための知識がない
・言語化することを怠ってる
・眠い
新米デザイナーが
言語化できないときは、だいたい
デザインの言語化

72. デザインを言葉で説明すると、
チーム内で一気にコミュニケーションが進む
デザインの言語化

73. とても細かい例をいくつか。
デザインの言語化

74. 黄色の上に白い文字はなんか見辛い！
読めないよね
デザインの言語化

75. 黄色と白色はコントラストが
弱いため判別しづらい
デザインの言語化

76. UIのアニメーションの
イージングがないと、なんか変！
デザインの言語化

77. 物体の動きには
初速と終速に差があるため
UIのアニメーションにも
イージングカーブが必要
デザインの言語化

78. 真ん中に配置したはずなのに、
なんかずれて見える！
デザインの言語化

79. 「形」には重心があるので
真ん中に整列させただけでは
視覚的には正しくない
デザインの言語化

80. このような言語化できる要素が
幾千もの粒度と数で絡み合い
デザインはされている
デザインの言語化

81. 熟練デザイナーは
「言語化・ロジック」を
「経験」として昇華し
ショートカットしている
デザインの言語化
ただ、イチイチ言語化してる時間はない…

82. ・言語化を忘れたデザイン
・経験によるショートカットのないデザイン
デザインの言語化
いつか必ず矛盾を生んでしまうし
メンバーの納得感もない

83. 6なんでこのデザイン？
デザイナーの思考はブラックボックスじゃダメだ！

84. なんでこのデザイン？
デザイナー
「デザインできました、Sketchどうぞ」
エンジニア
「なにこれ、微妙じゃない？」

85. なんでこのデザイン？
あるある！

86. なんでこのデザイン？
デザイナー =
よくあるイメージ
優れた感性でなにやら
綺麗っぽいモノを
作り出す人たち

87. なんでこのデザイン？
せめてUI/UXデザイナーからは
このイメージをなくしたい

88. なんでこのデザイン？
デザイナーの思考の過程も、
みんなに見えるようにするべき！

89. なんでこのデザイン？
デザイナーではない人に
「デザインのことはよく分からん」
と思われていることの危機感

90. なんでこのデザイン？
を共有できてなければ！
なにが目的でどう考察されて
どのようなデザインでユーザーに届けるか

91. なんでこのデザイン？
チームにとって
デザインはみんなのものであり
デザイナーはそれらを整理して
取捨選択する人でありたい

92. なんでこのデザイン？ @here これどう思いますか
パターンこんな感じです
エンジニアさん的には
どう思います？
@ioser
ラフ段階ですが意見ください!
どうです？コレ
AとB、どっちが
実装的にもいいですかねぇ

93. なんでこのデザイン？
Slackにデザインの過程を
バンバン投げるようにしてます
@here これどう思いますか
パターンこんな感じです
エンジニアさん的には
どう思います？
@ioser
ラフ段階ですが意見ください!
どうです？コレ
AとB、どっちが
実装的にもいいですかねぇ

94. 7現状の大きな課題
なんで、ナビゲーションドロワーなの？

95. 現状の大きな課題
AbemaTVの
ナビゲーションは
ドロワーです

96. 現状の大きな課題
ナビゲーションドロワーのデメリット

97. 現状の大きな課題
ドロワーを開くまでなにがあるか不明
何でも入れられる便利スペースになりがち
必ず2タップ必要になる

98. 現状の大きな課題
メリットとしては、
「省スペース」ってくらい…

99. 現状の大きな課題
じゃあなんでドロワーなの？

101. 現状の大きな課題
リリース当初、
・横UIだった
・そもそも機能がとても少なかった
だから、ドロワーが最適だった

102. 現状の大きな課題
しかし機能が増えた今、
合理的なナビゲーションではない

103. 現状の大きな課題
最近の各アプリの
Tab Bars
Bottom navigation
の流れ

104. 現状の大きな課題
YouTube

105. 現状の大きな課題
Tumblr

106. 現状の大きな課題
Reuters TV

107. 現状の大きな課題
Netflix
現状

108. 現状の大きな課題
「下タブ」
ある程度ナビゲーションが
重要なアプリでは使いやすそう…

109. 現状の大きな課題
AbemaTVでは
A/Bテストプロジェクトが始動する予定

111. 現状の大きな課題
メルカリさんのように、
「ドロワー」VS「下タブ」は
やってみたい

112. 現状の大きな課題
とか言ってますが
いったんiPadで
リリースする予定

113. 現状の大きな課題
「下タブになる時がいずれ来る」と思い、
ドロワーの項目数は抑えてきた

114. 現状の大きな課題
ドロワーを開くまでなにがあるか不明
何でも入れられる便利スペースになりがち
必ず2タップ必要になる

115. 最後に

116. 最後に
当たり前のことを
つらつらと喋ってすいません

117. デザインがもっと
「みんなのもの」になってほしい
最後に

118. 運用フェーズって、
それが
叶えられそうな気がする！
最後に

119. メディアとして成功するため、
日々変化するAbemaTVのUIを
楽しみにしててください！
最後に

120. ご静聴ありがとうございました