2024.12.19
システムの穴を運用でカバーしようとしてミス多発… バグが大量発生、決算が合わない状態から業務効率化を実現するまで
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.12.20
日本の約10倍がん患者が殺到し、病院はキャパオーバー ジャパンハートが描く医療の未来と、カンボジアに新病院を作る理由
2024.12.19
12万通りの「資格の組み合わせ」の中で厳選された60の項目 532の資格を持つ林雄次氏の新刊『資格のかけ算』の見所
2024.12.16
32歳で成績最下位から1年でトップ営業になれた理由 売るテクニックよりも大事な「あり方」
2023.03.21
民間宇宙開発で高まる「飛行機とロケットの衝突」の危機...どうやって回避する?
PR | 2024.12.20
モンスター化したExcelが、ある日突然崩壊 昭和のガス工事会社を生まれ変わらせた、起死回生のノーコード活用術
2024.12.12
会議で発言しやすくなる「心理的安全性」を高めるには ファシリテーションがうまい人の3つの条件
2024.12.18
「社長以外みんな儲かる給与設計」にした理由 経営者たちが語る、優秀な人材集め・会社を発展させるためのヒント
2024.12.17
面接で「後輩を指導できなさそう」と思われる人の伝え方 歳を重ねるほど重視される経験の「ノウハウ化」
2024.12.13
ファシリテーターは「しゃべらないほうがいい」理由 入山章栄氏が語る、心理的安全性の高い場を作るポイント
2024.12.10
メールのラリー回数でわかる「評価されない人」の特徴 職場での評価を下げる行動5選
Climbers Startup JAPAN EXPO 2024 - 秋 -
2024.11.20 - 2024.11.21
『主体的なキャリア形成』を考える~資格のかけ算について〜
2024.12.07 - 2024.12.07
Startup CTO of the year 2024
2024.11.19 - 2024.11.19
社員の力を引き出す経営戦略〜ひとり一人が自ら成長する組織づくり〜
2024.11.20 - 2024.11.20
「確率思考」で未来を見通す 事業を成功に導く意思決定 ~エビデンス・ベースド・マーケティング思考の調査分析で事業に有効な予測手法とは~
2024.11.05 - 2024.11.05