【niconico VR】バーチャルリアリティ空間で新しい動画体験!
はじめまして、okiです。
普段はマルチデバイスアプリに関わるドワンゴ デザイナーです。
今回は私が担当したGear VR向け「niconico VR」アプリがリリースされたので、「niconico VR」についての紹介と「制作の中で注意した点」についてご紹介します。
通常のWebデザインとは大きく仕様が異なり苦難も多かったため、「遂に出たっ！ やっと出たっ！」という気持ちでいっぱいです。
Gear VRのスペック・特徴
そもそもGear VRって何なの？ っていう人も多いと思うのでご紹介します。
Gear VRはSamsungとOculus VRが開発したスマートフォンを装着して使用するタイプの仮想現実（VR）ヘッドマウントディスプレイです。
Gear VRは、スマートフォン（日本で対応しているものはGalaxy S6、S6 Edge）をはめ込むだけで使うことができます。高性能なパソコン、専用機器、配線コードなどは一切必要ありません。また、Gear VRで使用できる様々なアプリも、専用のアプリ「Oculus Home」でダウンロードしてそのまま起動できます。なので、小難しい設定とかも必要なく、VRが楽しめちゃうんですね。
本体上部には視力に合わせてピントを調節するためのダイヤルがついており、視力の悪い方でも裸眼でVRを体験することができます。眼鏡をかけている人も眼鏡をかけたまま体験可能です。また、長時間つけても疲れないようにデザインされているので、長く遊ぶことができます。
Gear VRの内部には、加速度センサー、ジャイロセンサー、近接センサー等が実装されていて、Galaxy本体に搭載されたセンサーと組み合わされることで、より精度の高いVR体験が可能になっています。装着するスマートフォンのディスプレイには有機ELディスプレイを採用しているようです。
スペック
| 名称 | Gear VR |
|---|---|
| カラー | フロストホワイト |
| サイズ | 約92.6mm（高さ）×約201.9mm（幅）×約116.4mm（厚さ） |
| 重量 | 約318g |
| センサー | 加速度センサー、ジャイロセンサー、近接センサー |
スマートフォンで手軽にバーチャルリアリティ体験ができるなんて、凄い時代がきたもんですね！
個人的には「焦点調整ホイール」を回転させることにより、焦点を合わせ、目が悪くてもメガネいらずなところがお気に入りです！（既におっきいモンをかぶってるけど…）
Gear VR向け「niconico VR」って何？
「niconico VR」は「niconico」をバーチャルリアリティ（VR）空間で楽しめるアプリです。「ニコニコ動画」の動画や「ニコニコ生放送」のすべての番組を奥行きのあるVR空間の中で楽しむことができるのです。
広大な動画・生放送の世界
360°カメラで撮影されたパノラマ動画・生放送はまるで自分が映像の中に入ったような感覚を味わうことができ、必見です！
また、通常の「ニコニコ動画」の動画や「ニコニコ生放送」は姿勢を変えてもプレイヤーが追従してくるので、寝転がるなど、どんな体勢でもゆっくりくつろいで視聴できます。いつもの「ニコニコ動画」とは違ったユーザー体験を得ることが可能ですね。
niconico VRだからできること
皆さんは飲食を楽しみながら動画の視聴をしませんか？
私もそうです！ 動画や生放送を視聴しながらお菓子も食べたいし、ジュースも飲みたい！！ そして、そんな時に、わざわざゴーグルを外すなんて、面倒くさいと思いました。
という訳で「niconico VR」では「手元ウォッチ」機能を搭載しています。
この機能は「手元ウォッチ」をONにして下を向くと、スマートフォンのカメラを通じて外の世界を覗けてしまうのです。なので、喉が渇いたなあとか、お腹が空いたなあと思ったら、いちいちゴーグルを外さずに下を向けばいいわけですね。言ってしまえば理想的な映画館ですよ！
これで安心してダラダラできます。
制作工程
VRでのデザイン実装をどのような点に注意して制作したのかを「設計」と「デザイン制作」に分けてご紹介します。
設計について
「niconico VR」を設計するにあたり、以下の2点を念頭に置き作業を行いました。
- 今までの「niconico」にない驚きとワクワクを提供する
- 直感的に操作できる
それぞれについて具体的にお話をします。
今までの「niconico」にない驚きとワクワクを提供する
「niconico VR」のデザインを制作するにあたり、ユーザーに「パノラマ動画」を視聴してもらうことに一番プライオリティを高く設計しています。「パノラマ動画」は、動画再生中に上下左右360度すべてをパノラマ動画で見渡せる新しい表現方法で、VRならではの体験です。「niconico VR」を制作する上でも、この体験をユーザーにしてもらい、驚きと感動を与えたいと考えていました。
そのため、Home画面の正面近くに「パノラマ動画」を配置するなど、通常の「ニコニコ動画」の動画や「ニコニコ生放送」コンテンツとは差別化して設計をし、目立たせるように工夫をしています。
また、動画視聴ページもワクワクを提供する上で大事なページでした。奥行きをどの程度用意するかということにも設計段階で固めていきました。そして、スクリーンが視界に収まって、尚且つ心地よいスケール感を感じられる距離感に辿りつくまで何度も調整を繰り返しました。
直感的な操作
「niconico VR」の操作方法はVRの画面を見ながら側面にあるタッチパットで行います。この操作方法は、今までのスマートフォンとは大きく異なります。そのため、「niconico VR」では見たい動画までの遷移を最短にし、すぐに見たい動画にたどり着けるように設計しています。
また遷移を作る上で、「HOME画面から最短で見たい動画へ遷移できる」というコンセプトを自分の中で持たせていたので、HOMEで「ニコニコ動画」と「ニコニコ生放送」大きく2つの入口を設け、各画面からHOMEにワンアクションで戻れるようにしています。またHOME画面ではカテゴリ選択も設置しており、遷移における重要性をHOMEに持たせることで、慣れないデバイスでもユーザーが自分の好みの動画にたどり着きやすいようにしています。
デザインについて
全体的なデザインテイストやデザインサイズ、デザイン実装方法について紹介します。
デザインテイスト
デザインについてはVRということもあり、ごちゃごちゃしているデザインですと目が痛くなり長時間使ってもらえないので、「奥行きを感じるフラットデザイン」をテーマにデザイン制作をしました。イメージとしては「サムネイルの海に身を投じているイメージ」ですね。なので、全体的にブルーテイストなのは深海をイメージしているからです。
フラットデザインなので、ラインを扱った箇所が多かったのですが、細い線はモアレを起こしやすいのでアンチエイリアスを掛けてどの角度でもハッキリ見えるようにしています。
また奥行きがあるからといって、シャドウをやたらと使うのではなく、パースを利用し、直線の角度を変化させて立体感を演出しています。
デザインサイズ
「niconico VR」では通常のWebデザインに比べて「ボタンサイズ」や「動画サムネイル」などを比較的大きくデザインをしています。
これは先程も述べたように操作が通常のスマートフォンとは違い、視覚的な操作を必要とするため、選択をしやすいように意図的にデザインしています。
また視線が合ったサムネイルは他より大きくなって浮いているように見せ、どれを選択しているか分かりやすくするなど、サイズ感がWebデザインとは違います。例えばWebデザインでは並列に並んでるボタンをホバーした時にサイズを変更させるということはなかなかしないと思います。
これも3D空間ならではの表現ではないのでしょうか。
デザインの実装について
通常のWebデザインであれば、構成から決められたサイズでカンプを制作する作業になりますが、Gear VRでは空間という概念と初の実装でサイズ感がわからないということもあり、デザイン制作には苦労しました。
デザインの実装は以下の方法で行いました。
- 手書きでラフを描く
- 想定できるサイズで一旦カンプを制作
- デザインを当て込んだ際にズレているパーツをリテイクする
完全な2Dの世界ではないので、平面上でラフを描いたイメージと実際に実装したデザインイメージに差異があり、1〜3を繰り返して実装していくという流れです。
通常は様々なデバイスにおけるデザインを担当していたので、その辺のノウハウがすごく役にたったなあと思います。
大変だったところ（所感）
最後に初めてのVRデザインをする上で大変だったところとその解決方法を共有して終わりにしたいと思います。
VR空間ってなんなんだー！！
開発が始まった時、一口で「VR空間でニコニコ動画を見られるようにしよう！」と言っても、メンバー全員が未知の世界でしたので、「いったいどんな風に？ どんなことができるの？」という状態でした。
そこで、最初は好きな映画やゲームで見た空間や表現の話をしてイメージの共有をし、その後、紙に絵を描いて更にイメージを膨らませていきました。
三半規管との闘い
デザインをする際に、ユーザーに「3D酔い」をさせないということに気を使いました。
目の前のサムネイルに視線を合わせて右手でタッチパネルをタップで選択するとダイアログがシュシュっとスライドしてきて…
と目を閉じながらVR空間にサムネイルが並んでいるのを頭の中で想像し、動きのシミュレーション を何度も繰り返しました。しかし「便利だから」、「かっこいいから」という理由だけで設計してしまうと、ユーザーに嘔吐を催すハメになるため、空間を活かしながら酔わせないデザインという丁度いいところを常に模索していました。
「初めてniconico VRを体験する人たちに驚きとワクワクを与えたい！」とは思うけれど、現実世界に無いような無理な動きを入れてしまわないように注意しました。
さいごに
360°カメラで撮影した動画を特定のタグを付けて投稿するとパノラマ動画として認識され迫力満点で視聴できますよ！ 公開直後から多数のユーザーさんが投稿してくれているので、私としては感慨深いものがありました。本当に嬉しい限りです。
ぜひ皆さんもバラエティーに富んだパノラマ動画を体験してくださいね。
