そのデザインやりなおし！ 360°自由だからこそ難しい
『AbemaTV VR』のお蔵入りUIデザイン
UI改善に新機能追加。日々スクラップ＆ビルドを繰り返しているサービス開発現場では、一つのデザインを創り上げるまでに数十を超えるデザイン案を作成することも少なくありません。本連載では"お蔵入りUIデザイン"と題して、現在のデザインに至るまでにお蔵入りとなったデザインにフィーチャーし、「なぜお蔵入りになってしまったのか？」をオクラくんと共に担当デザイナーがご紹介していきます。
お蔵入りになったデザインが大好物なオクラの妖精。お蔵入りデザインを見ると興奮してネバネバしてしまうクセがある。醤油と合う。
清水 康秀（しみず やすひで）
『AbemaTV』 デザイナー
サイバーエージェント2014年新卒入社。子会社である株式会社WAVESTの立ち上げにデザイナーとして参画後、映像配信プラットフォーム「FRESH!」のAndroid/Webなどのデザインを担当。2017年4月からはAbemaTVに異動しWebとVRのデザインを担当。
オクラくん
ネバにちは！
無料で楽しめるインターネットテレビ局『AbemaTV』の開発現場にやってきたよ。
どんなお蔵入りデザインが見られるネバかな〜。
それでは早速デザイナーさんを呼んでみよう！ デザイナーさーん！
清水 康秀（以下、清水）
オクラくんこんにちは！
オクラくん
初めまして、お蔵入りのデザインを存分に堪能できると聞いてワクワク、いや、ネバネバしながらやってきたオクラくんだよ！
清水
『AbemaTV』デザイナーの清水です。
『AbemaTV VR』では、まるで家でプロジェクタで投影しているかのように大画面でAbemaTVを楽しむことができます。自分を囲むようにチャンネルが並んでいるVRならではのUIで、チャンネル切り替えや番組表からの検索が可能です。
また、映像の向きやサイズをコントローラーで好みに変化させることのできる画面拡縮機能が特徴となっています。
視聴画面
番組視聴とチャンネル切り替え
映像を好きな位置に動かせる「画面拡縮機能」
オクラくん
360度映像に囲まれるなんて、臨場感がすごそうネバ〜！
いろんな番組を見てみたくなるネバ〜！
早速お蔵入りになってしまったUIを見せてくれネバよ〜。
清水
僕がこのプロジェクトに参加したのが昨年11月頃で、今年3月のリリースまでの4ヶ月間でデザインをたくさん変更しました。今日はその過程でお蔵入りになったものをご紹介しますね！
▷ アプリの体験を360度の空間に落とし込む
清水
まずは、僕がこのプロジェクトに参加した11月頃のUIデザインがこちらです。この頃のUIはAbemaTVの世界観がモチーフの空間がベースに
オクラくん
『AbemaTV』アプリって、左右にスワイプして番組を探す「ザッピング体験」が肝となってると思うんだけど、このVRのUIはそれが直感的にわかりづらいネバね。
これじゃあダメネバ。
清水
（！！）
...うう...そうなんです。
『AbemaTV』アプリのユーザーをメインターゲットにしたので、なるべく使用感をアプリと近づけたいと考えました。そこで、動画視聴体験とザッピング体験の二つをシンプルにわかりやすくすることを最初に考えました。
オクラくん
確かにこっちのほうがワクワクするネバァ！！
他にもお蔵入りしたUIはあるネバ？ もっとくれネバァ！
▷ シンプルにとどめたコメント表示
清水
コメントの表示方法は様々な案を出し、実際に動くものを作りながら検討していきました。
その中の一つで、床にコメントを表示したパターンがこちらです。
オクラくん
...読みづらいネバ。
ぁぁ、このどうしようもない感じがお蔵入り感あって非常に興奮するネバ...。
清水
...シンプルに読みづらいですよね。
床にコメントを出すアイデアは「空間を使う」という点で面白いかな、とは思ったのですが...。番組を視聴しながらコメントを見る基本の体験が極端に悪くなってしまったので、お蔵入りとしました。
次に、花火のようにコメントが出たらどうか？ と考えコチラも動くものを作りました。
オクラくん
...おおっ！？
う、うーん。
一見すると空間を自由に使っていて、VRでしかできない表現で良さそうに見えたネバけど...。
清水
そうなんですよね。平面のデザインでの見え方は良い気がしたのですが表示される場所が決まっていないため、VR空間で見ると視聴中にコメントを見ることが思いの外難しくこちらもお蔵入りとなりました。
最終的にリリースされたものは、映像の隣に吹き出しのような背景とともにコメントが一つずつ流れていくものとなりました。
VR空間といえど視野は限られているので、視野の範囲を意識しながらデザインを進めることが大事だと感じました。
オクラくん
いや〜色々と思い切ったデザインにもチャレンジしてたネバね〜。偉いネバ。
意を決して開発した思い切ったデザインが、あっけなくお蔵入りになるのが特に好きなんネバ。興奮するネバ。
清水
今後ユーザー数が増えてくればより様々なチャレンジをしていけると思うので、ぜひたくさんのユーザーの皆様に使ってみていただきたいです！
Daydream対応の端末をお持ちの方は無料でご利用いただけますので、ぜひこの機会にダウンロードしてみてください！ 泣いて喜びます。
オクラくん
Daydreamって日本語にすると「白昼夢」「空想」って意味ネバね。VR(仮想現実)って夢があって素敵ネバ。
清水
そういう意味では、お蔵入りになったデザインもなんだか楽しい白昼夢、まさに「Daydream」だったんですね。
オクラくん
ネッバァァァアアアアアアアアア！！！！
こりゃあ一本取られた☆
https://play.google.com/store/apps/details?id=tv.abema.vr&hl=ja
多彩な番組がすべて無料で楽しめるインターネットテレビ局『AbemaTV』をVR空間で楽しめるAndroidアプリ。GoogleのVRヘッドセット「Daydream View」と、対応するAndroidデバイスを使って、まるで劇場の中にいるような快適かつ高品質のVR体験を楽しむことができる。
インターネットというフィールドで「Ameba事業」「インターネット広告事業」「スマートフォンゲーム事業」「その他メディア事業」「投資育成事業」の5つの事業を展開。インターネット総合サービス企業として、企業・インターネットユーザーに対し有益なサービスを提供している。
