はじめに
みなさん、こんにちは。
ゲームや映画、最近では音楽フェスが VR 内で行われたりと、 VR のコンテンツがだんだんと増えている中で、 VR の UX/UI デザインを考える環境を整えないといけないなと思っている今日この頃。
でも、デザインは Adobe XD や Sketch を使えば作れそうだけど、プロトタイピングはどうしたらいいんでしょう。 Unity や3D ソフトは使えないし、でも360度の空間でデザインを確認したい！（できれば動きも合わせて考えたい！）
困っていると、どうやら Adobe After Effects に VR 環境が作れる機能があると聞いたので、実際に触ってみました！
＊使用したソフトは Adobe After Effects CC 2019 (16.x)です。
目的
- 制作した VR の UX/UI デザインを360度の空間で確認したい
- UX に必要なアニメーションの検討も同時にしたい
結果
- 360度の空間で擬似的にデザインを確認することは可能
- ただ、空間特有の歪みが生じてしまうため、より正確なプロトタイピングをすることは難しい
- アイデア出し段階のイメージを共有するためであれば利用できそう
- 「動き」も確認できるという点は他のソフトにはない強み。
まずは環境作り
Adobe After Effects は、 Adobe が提供している映像制作ソフトです。 VR 環境は、360度映像を編集するために備わっているので、 UX/UI デザインをするために使うのは果たしてできるのかどうか気になるところです。
VR 環境作りは Adobe のヘルプページを参考にします。
Adobe After Effects での VR 環境の作成
＜実際やってみてのポイント＞
- After Effects 上で一から作るときには「 VR 環境を作成」！
- 360度の背景素材を使って作るときは「キューブマップを抽出」！
- 「 VR 環境を作成」から作ったコンポジションでは、後から360度の背景素材を入れることはできなさそうでした。
- 背景素材を今後入れる可能性がある場合も「キューブマップを抽出」から制作した方が良いと思います。
After Effects の360度空間の考え方
360度の空間を上下前後左右、6つの正方形で囲まれた立方体で構築されていて、カメラはその立方体の中にあります。 なので、全天球の中にいるのとは違い、四隅を感じられる歪みがあります。
素材はそれぞれの面に配置していきます。視野は正方形で固定されています。視野内の配置は破綻が少ないですが、各面を横断するような、視野を広く使った配置はし辛いです。赤枠は立方体の面を表しています。
3D レイヤーで作業
VR 環境が整ったら、他のソフトで作った素材を配置していきます。
今回は Adobe Illustrator で作った素材なのですが、そのまま配置すると「2D レイヤー」として読み込まれます。2D レイヤーのままだとその素材は各面に配置されてしまうので、「3D レイヤー」に設定していきます。
3D ソフトとは違い、カメラは3D 空間を自由に動かせる訳ではなく、また、各素材にもコントローラーがついてる訳ではないので、配置位置やサイズ、回転などは数字で管理する必要があります。
ただ、 After Effects はデザインソフトと違い、パーセンテージでの管理が多いため、ピクセル単位での調整は難しいです。他のソフトに慣れていると、このあたりが不自由を感じるところかもしれません。
プレビューの方法
作業しているときにプレビューをしたいですよね。統合カメラツール（ショートカットは「 C 」）により編集画面で簡易的な確認が可能になります。
ドラッグすると、視線を動かしているかのように画面が動くので、実際の見え方に近い感覚でデザインを確認できます。ただ、アニメーションをプレビューしながら使うことができませんし、素材が多いデータの場合は動きがカクカクしてしまいます。
アニメーションも確認するなら外部アプリを使おう
アニメーションも含めて確認するためには、動画を書き出して VR のプレビューアプリを使う方法があります。今回は、GoPro VR Playerを使ってみました。
無料の VR 動画再生アプリで、書き出した動画ファイルをドラック＆ドロップするだけで再生できます。
アニメーションを再生しながら、自由にカメラを動かすことができます。今のところ、続けて自動的にループさせることはできなさそうなので、ある程度アニメーションをループさせておいてから After Effects から書き出しておくと、長い時間確認作業ができます。
炎のゆらめきが再生されたままカメラを動かせました。
After Effects からヘッドマウントディスプレイへ直接転送してプレビューすることも可能なようなので、機会がありましたらこちらも検証できたらと思います。
＜ここが気になる＞空間の歪みを解消できるか？
プレビューができたところで、改めて出来上がったものを見てみると、違和感があります。上にあるサムネイルの帯は、見てる人を取り囲むようにぐるっと湾曲してほしいのですが、ただ面に置いただけでは、立方体の角が目立つような形になってしまいました。
カメラの焦点距離を変えたり、素材の角度を少しづつずらしたりすれば、見え方は変わってくると思いますが、ここは不自由さを感じてしまうところです。
おわりに
After Effects を利用することで、制作したデザインを360度の空間で確認することができました。
ただ、素材の正確な配置やサイズ調整は難しく、また立方体の中の空間特有の歪みも生じてしまい、 After Effects だけで UX/UI のデザインを完結することは難しいです。アイデアをより具体的に他者と共有するためのツールとしては、期待が持てそうです。
アニメーションやエフェクトをつけて、動きの見え方も確認できるという点では、他のプロトタイピングができるソフトには見られないところなので、より使いやすくなったらいいな、というところで、今回の検証は終わりです！
