VR版AbemaTVのUIが、極限までシンプルになった理由

バーチャル空間でプレゼンテーション

中地功貴氏（以下、中地）：こんにちは。はじめまして。中地と申します。

さっそくなんですけど、今、僕がどこにいるかわかりますでしょうか？

ちょっとわからないと思うのでカメラを引いてみると、えいっ、えいっ。はい、ここは体育館です。

体育館みたいな広い会場でできなかったんですけど、やっぱり僕たちなりの体育館ということで、これからセッションを始めていきたいと思います。よろしくお願いします。

（会場拍手）

最初に気になると思うのでこれの話をしますが、バーチャルLTみたいにやってみたいなと思っています。やってることとしては、STYLYという3Dスキャンするようなサービスがあって、それで僕のモデルをこんな感じでスキャンしてもらって、それをボーンという骨を入れるような作業をしてあげた上でUnityにインポートして、このヘッドマウントディスプレイとかコントローラの入力を骨に流し込んであげる。そうするとこんな感じでバーチャルLTができます。

ぜひSNSとかぜんぜん投稿してもらって。よろしくお願いします。

自己紹介です。中地功貴と申します。

UnityとVRのエンジニアをやっておりまして、株式会社サイバーエージェントの中の「VR Agent」というところでARとかVRのアプリの開発をしております。

僕、YouTubeもやっておりまして、体張った系のYouTubeもやっているので、ぜひチャンネル登録をよろしくお願いします。はい、お客さんの反応がぜんぜん見えないという……。

（会場笑）

AbemaTV VRとは何か？

中地：それではここから本題に入っていきます。

今日はAbemaTVの話をするんですけど、AbemaTVってそもそも知っていると思うので飛ばします。AbemaTVのVR版は、DaydreamというVRのプラットフォームがあって、それに対応したアプリとなっております。

特徴としては、モバイル、Android端末でできて、かつ高品質になっています。コントローラがあってVR空間で操作をすることができるという感じです。

動画が流れるんですけど、こんな感じでチャネルに合わせて、ザッピングして横のチャネルに切り替えていくみたいな感じのアプリになっています。これの裏側について紹介していきたいと思います。

まずAbemaTVの動画再生の仕組みについて簡単にお話しします。リニア型のストリーミング再生といって、動画ファイルを一度にダウンロードするのではなく、細かく切った単位でダウンロードして、それを随時再生していくという形式になっています。

そのなかには、アニメとかほかの環境でも再生できたらまずい「著作権保護」がかかっているコンテンツがあります。それがAndroidの場合は、ハードウェアデコードといって、端末、ソフトウェアじゃなくてハードウェア側で動画の解凍をしなきゃいけないので、すごく守られています。

そのなかで「AbemaTV VR」では、それをUnity上で表示したいということで、そこの部分のプラグインを書いて、デコードした描画をなんとかUnity側に引っ張ってから表示するということをやっています。

その際に、Unity側に持ってくるための描画されている領域はどこにあるのかを探して引っ張ってくるという作業がけっこう大変でした。それの仕組みがどうなっているかというとこういう仕組みになっています。

この青で囲った部分がAndroidのアプリの方法になっていて、あっち側に動画データがあって、それをExoPlayerという動画再生のライブラリでデコードしたものをTextureViewに読み込ませて、それをここのAndroidのビューに表示してあげるということをしてるんです。

今回の場合は、そのTextureViewに書かれているものを1回Unity側で、Unity上で引っ張ってから、Unityを通してAndroidのViewに反映させるという方法をやっています。そんな感じで描画ができました。

VRの視聴体験をデザインする

中地：次の視聴体験のデザインについてお話しします。「AbemaTV VR」と聞いて「どういうことをしたいかな？」というのを最初に思ったんですけど、まず映像を大画面で見たりとか、あと空間にいろんなUI、いろんな情報をたくさん配置したいとかって思ったんですね。

それを踏まえて最初に作ったUIがこんな感じです。

真ん中に映像があって、空間がめちゃめちゃ広く使えるので、番組の情報を置いたりコメント置いたり、設定とかピックアップとか置いたりして作りました。

ですが、映像を見てるときって番組以外の情報ぜんぜんいらないなと気づきました。なので、最終的なデザインはこんな感じでめちゃめちゃシンプル。上から見ている図なんですけど、こんな感じになりました。

これはなにをしたかというと、必要な情報の精査をしました。番組を見るときはその番組だけが見えていて。AbemaTVってザッピングしてほかの番組に切り替えるという操作があるので、それを強調したようなデザインにしました。真ん中に映像があって、その周りにほかの番組が360度広がっているという感じのデザインにしています。

さらに、情報をそれ以上にもうちょっと出すんですけど、情報を出すにしてもコメントを横にあんまりかぶらないように表示したり、その番組の情報も画面の下に出してあんまり横のサムネイルを邪魔しないようにという感じで、極限までシンプルな感じに作りました。

最後はコメント機能の変遷です。コメント機能は、初期のUIで見せたところにあるんですけど、これって本家のAbemaTVのアプリと同じような、黒い画面に下からコメントが流れてくるだけのUIだったんですね。

藤田社長がやった時に「なんかもっとコメントをVRっぽくしたいよね」みたいな話があったので、コメントについてもいくつか検討しました。

ちょっといろいろ作ってみまして、「なんかあっち側のほうが床に流して、縦じゃなくて、平行に流すとちょっとVRっぽくない？」みたいな感じでやってみました。あと、空中に出そうと思って空にコメントが浮いて消えていくのがわかると思うんです。そういうちょっとVRっぽいやつをやってみたんですけど、なんか単純に見づらいと思いました。

最終的には、動画の横にLINEのポップアップみたいな感じで下からどんどん出てくるみたいな感じにしました。

これなにがいいかというと、最初のもとあんまり変わってないかもしれませんが、枠がないので空間を意識するような表示になったり、後ろのほうが透けているのでそこで情報量あんまり多くないように感じるという形になりました。

中地：最後、まとめです。今回は「VRの視聴体験デザイン」と言っていたんですけど、やっていることは「空間のUIデザイン」かなと思いました。

VRを作るときに、当たり前の話かもしれないですけど、平面で見て情報を組み立てるとなかなかできない。うまく思ったとおりにいかないんです。ちゃんとヘッドマウントディスプレイをかぶって作ると、ちゃんとした空間デザインができるかなと思いました。ぜひ空間UIデザインをして、崖越えしていきましょう。

ということで、僕の発表を終わりにしたいと思います。ご清聴ありがとうございました。

（会場拍手）

バーチャルLTの作り方

司会者：中地さんありがとうございました。それでは、なかなか珍しい発表だったと思いますけど、もしよかったらこの場で質問タイム、質疑応答のタイムなので、質問のある方、挙手していただければ。質問どなたかありますでしょうか？

質問者1：たぶんいろんな人が気にしてるかもしれないですけど、かぶってるものにはなにが映ってるの？　僕らは映っていない感じなんですか？

中地：あ、映っていて、鏡越しに自分の姿が見ているみたいな感じですかね。なんでしょう、僕の……ええと、画面出してもらって。

この映像が見えてる。この画面が僕のほうにも見えているという感じです。なので、僕はスライドの文字が見えた状態で進めていけるという。

質問者1：すごいですね（笑）。

中地：だから、これが見えているので「あっちのほう」みたいな感じでやってたんですね。という感じです。

質問者1：ありがとうございます。すごい難しいなと思って、どうなってるのかなと思って。

中地：ちょっと昨日の夜、急いで作りました（笑）。

質問者1：ありがとうございます。

司会者：ほかに質問ありますでしょうか？

質問者2：すいません。プレゼン内容じゃないんですけど、このツールって完全に自作しているんですか？

中地：あ、自作しています。

質問者2：じゃあ、あのカメラオブジェクトは、実際リアルアバターの顔のところにカメラついてるみたいな？

中地：というか空間に固定してて、それを手元のコントローラで切り替えられるようにしているという。

質問者2：ああ、なるほど。

中地：そうですね。自分の映像が必要なので自分の目元にもカメラが置いてあって、その映像はこっちに出しているという感じですね。

質問者2：なるほど。ありがとうございます。

中地：システムに対する質問が。

司会者：すいません。ちょっと、まぁ、システムの質問もしたいところなんですが時間がありますので、今ので最後の質問とさせていただきます。それではこれで以上となりますので、中地さん、あらためて、ありがとうございました。

（会場拍手）