2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
VR版AbemaTVの裏側と視聴体験のデザイン(全1記事)
リンクをコピー
記事をブックマーク
中地功貴氏(以下、中地):こんにちは。はじめまして。中地と申します。
さっそくなんですけど、今、僕がどこにいるかわかりますでしょうか?
ちょっとわからないと思うのでカメラを引いてみると、えいっ、えいっ。はい、ここは体育館です。
体育館みたいな広い会場でできなかったんですけど、やっぱり僕たちなりの体育館ということで、これからセッションを始めていきたいと思います。よろしくお願いします。
(会場拍手)
最初に気になると思うのでこれの話をしますが、バーチャルLTみたいにやってみたいなと思っています。やってることとしては、STYLYという3Dスキャンするようなサービスがあって、それで僕のモデルをこんな感じでスキャンしてもらって、それをボーンという骨を入れるような作業をしてあげた上でUnityにインポートして、このヘッドマウントディスプレイとかコントローラの入力を骨に流し込んであげる。そうするとこんな感じでバーチャルLTができます。
ぜひSNSとかぜんぜん投稿してもらって。よろしくお願いします。
自己紹介です。中地功貴と申します。
UnityとVRのエンジニアをやっておりまして、株式会社サイバーエージェントの中の「VR Agent」というところでARとかVRのアプリの開発をしております。
僕、YouTubeもやっておりまして、体張った系のYouTubeもやっているので、ぜひチャンネル登録をよろしくお願いします。はい、お客さんの反応がぜんぜん見えないという……。
(会場笑)
中地:それではここから本題に入っていきます。
今日は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に反映させるという方法をやっています。そんな感じで描画ができました。
中地:次の視聴体験のデザインについてお話しします。「AbemaTV VR」と聞いて「どういうことをしたいかな?」というのを最初に思ったんですけど、まず映像を大画面で見たりとか、あと空間にいろんなUI、いろんな情報をたくさん配置したいとかって思ったんですね。
それを踏まえて最初に作ったUIがこんな感じです。
真ん中に映像があって、空間がめちゃめちゃ広く使えるので、番組の情報を置いたりコメント置いたり、設定とかピックアップとか置いたりして作りました。
ですが、映像を見てるときって番組以外の情報ぜんぜんいらないなと気づきました。なので、最終的なデザインはこんな感じでめちゃめちゃシンプル。上から見ている図なんですけど、こんな感じになりました。
これはなにをしたかというと、必要な情報の精査をしました。番組を見るときはその番組だけが見えていて。AbemaTVってザッピングしてほかの番組に切り替えるという操作があるので、それを強調したようなデザインにしました。真ん中に映像があって、その周りにほかの番組が360度広がっているという感じのデザインにしています。
さらに、情報をそれ以上にもうちょっと出すんですけど、情報を出すにしてもコメントを横にあんまりかぶらないように表示したり、その番組の情報も画面の下に出してあんまり横のサムネイルを邪魔しないようにという感じで、極限までシンプルな感じに作りました。
最後はコメント機能の変遷です。コメント機能は、初期のUIで見せたところにあるんですけど、これって本家のAbemaTVのアプリと同じような、黒い画面に下からコメントが流れてくるだけのUIだったんですね。
藤田社長がやった時に「なんかもっとコメントをVRっぽくしたいよね」みたいな話があったので、コメントについてもいくつか検討しました。
ちょっといろいろ作ってみまして、「なんかあっち側のほうが床に流して、縦じゃなくて、平行に流すとちょっとVRっぽくない?」みたいな感じでやってみました。あと、空中に出そうと思って空にコメントが浮いて消えていくのがわかると思うんです。そういうちょっとVRっぽいやつをやってみたんですけど、なんか単純に見づらいと思いました。
最終的には、動画の横にLINEのポップアップみたいな感じで下からどんどん出てくるみたいな感じにしました。
これなにがいいかというと、最初のもとあんまり変わってないかもしれませんが、枠がないので空間を意識するような表示になったり、後ろのほうが透けているのでそこで情報量あんまり多くないように感じるという形になりました。
中地:最後、まとめです。今回は「VRの視聴体験デザイン」と言っていたんですけど、やっていることは「空間のUIデザイン」かなと思いました。
VRを作るときに、当たり前の話かもしれないですけど、平面で見て情報を組み立てるとなかなかできない。うまく思ったとおりにいかないんです。ちゃんとヘッドマウントディスプレイをかぶって作ると、ちゃんとした空間デザインができるかなと思いました。ぜひ空間UIデザインをして、崖越えしていきましょう。
ということで、僕の発表を終わりにしたいと思います。ご清聴ありがとうございました。
(会場拍手)
司会者:中地さんありがとうございました。それでは、なかなか珍しい発表だったと思いますけど、もしよかったらこの場で質問タイム、質疑応答のタイムなので、質問のある方、挙手していただければ。質問どなたかありますでしょうか?
質問者1:たぶんいろんな人が気にしてるかもしれないですけど、かぶってるものにはなにが映ってるの? 僕らは映っていない感じなんですか?
中地:あ、映っていて、鏡越しに自分の姿が見ているみたいな感じですかね。なんでしょう、僕の……ええと、画面出してもらって。
この映像が見えてる。この画面が僕のほうにも見えているという感じです。なので、僕はスライドの文字が見えた状態で進めていけるという。
質問者1:すごいですね(笑)。
中地:だから、これが見えているので「あっちのほう」みたいな感じでやってたんですね。という感じです。
質問者1:ありがとうございます。すごい難しいなと思って、どうなってるのかなと思って。
中地:ちょっと昨日の夜、急いで作りました(笑)。
質問者1:ありがとうございます。
司会者:ほかに質問ありますでしょうか?
質問者2:すいません。プレゼン内容じゃないんですけど、このツールって完全に自作しているんですか?
中地:あ、自作しています。
質問者2:じゃあ、あのカメラオブジェクトは、実際リアルアバターの顔のところにカメラついてるみたいな?
中地:というか空間に固定してて、それを手元のコントローラで切り替えられるようにしているという。
質問者2:ああ、なるほど。
中地:そうですね。自分の映像が必要なので自分の目元にもカメラが置いてあって、その映像はこっちに出しているという感じですね。
質問者2:なるほど。ありがとうございます。
中地:システムに対する質問が。
司会者:すいません。ちょっと、まぁ、システムの質問もしたいところなんですが時間がありますので、今ので最後の質問とさせていただきます。それではこれで以上となりますので、中地さん、あらためて、ありがとうございました。
(会場拍手)
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには