実際にデザインしてみる！VRアプリのUIデザインを作るプロセス
本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、ロンドンにあるデザインファームKickpushの共同創業者であるSam Applebee氏によって投稿されました。
多くのコンテンツデザイナーにとって、仮想空間は新しい領域です。ここ数年、VRのハードウェアとアプリケーションが劇的に増加し、VRの複雑性や認知性が向上したため、日常のありふれたものから驚くようなものまで幅広い体験ができるようなりました。
この記事では、初心者向けの VRアプリのデザインプロセスを紹介します。
VRの専門家にならなくても、スキルアップしたい気持ちがあれば大丈夫です。同じ業界で働く者同士、VR技術を一緒に盛り上げていきましょう。
目次
VRアプリとは？
VRアプリは、VR環境とVRインターフェースの2つの要素から構成されています。仮想惑星やジェットコースターからの景色など、VRヘッドセットを装着して見える世界がVR環境です。
VRインターフェースは、ナビゲートされるVR環境とVR体験を繋ぐものになります。VRアプリは、これら2つの要素が複雑に組み合わさって形成される技術となります。
左上の象限（1/4円）はシミュレーターのようなもので、一例としてジェットコースターに乗る体験にリンクされています。
これらはVR環境として形成され、VRインターフェースを通さなければ何も体験することはできませんが、VRインターフェースを装着すれば、簡単にジェットコースターに乗ることができます。
反対側の1/4円は、VR環境が殆どもしくは全くない状態で、開発されたVRアプリです。サムスンの「Gear VR」のホームスクリーンなどが該当します。
場所や風景といった仮想環境をデザインするためには、難易度が高いですが、3Dモデリングツールを使いこなせるようになりましょう。それでも最近は、VR（もしくはVRのUI等）のユーザインターフェースの制作に、従来スキルの活用が可能になりつつあります。
私達が初めて手掛けたVR UIデザインは、「エコノミスト」誌のアプリでしたが、VRの制作事務所である「Visualise」とのコラボでデザインしました。我々がデザイン、「Visualise」はコンテンツとアプリを担当しました。
VRインターフェース制作の具体的な説明に入る前に、「エコノミスト」誌のアプリデザインを例に、VRアプリのデザインプロセスについて説明します。尚、「エコノミスト」誌のVRアプリは、「Oculas」のWebサイトからダウンロードできます。
VRのUIデザインプロセス
モバイルアプリやVRインターフェースの制作プロセスには、明確な定義はありません。
そのため、「エコノミスト」誌のVRアプリのデザインは、制作プロセス検討のための重要な手がかりとなりました。
従来のデザインプロセスとVRとの共通点
初めて、サムスンの「Gear VR」でVR体験をした時、従来のモバイルアプリに似ていると感じました。VRアプリのインターフェースは、従来型のアプリと同じく基本的な動的言語によって動作し、ユーザは「エコノミスト」誌のページをめくって、VRインターフェースと情報のやりとりを行います。
この共通点に気を払いつつ、デザインを進めるようにしています。
従来型アプリとの類似性のおかげで、試行錯誤の末に定義されたモバイルアプリのデザインプロセスを活用して、短時間でVRのUIを制作することができました。案外、VRアプリのデザインは簡単なのです。
VRインターフェースのデザインの説明の前に、モバイルアプリのデザインプロセスをおさらいします。
1．ワイヤーフレーム
まず、迅速な反復型開発を行い、インタラクションとレイアウトを定義します。
2．ビジュアルデザイン
この段階で、特性とインタラクションは決まっているので、ワイヤーフレームにブランドのガイドラインを適用し、インターフェースを作成します。
3．設計図
スクリーンと各スクリーンで描写されるインタラクションのリンクを作成し、流れに沿ったスクリーンを構成します。これを設計図と呼び、プロジェクトの参加メンバー用のメインリファレンスとして活用しています。
セットアップ
キャンバスサイズ
360°のキャンバスのどこから手をつければいいのか分からないのが、一番厄介な問題でした。全体の中のある一点を決めなければならず、私達の場合は、VRに合うキャンバスサイズを決めるのに数週間もかかりました。
モバイルアプリの場合、キャンバスサイズはデバイスの大きさによって決められ、iPhone6であれば1334×750ピクセル、Android端末は1280×720ピクセルとなりますが、モバイルアプリのデザインプロセスと同じように、VRのUIをデザインするのであれば、まず、キャンバスサイズを決めなければなりません。
これは、360度の環境を平らにしたイメージです。エクイレクタングラー（地図投影法）と言い、3D仮想環境は、この投影法を利用して現実世界を模倣します。
投影法の全幅は、水平方向に360°、垂直方向に180°であることから、キャンバスサイズを3600×1800ピクセルと定義しました。
こんなに大きなキャンバスサイズのデザインは骨が折れますが、当初、VRインターフェースからのアスペクト（見え方）が気になっていたため、キャンバスサイズのセグメント設定に注力しました。
マイク・オルガー氏による最新の研究では、人が快適と感じる視界はインターフェース上、特定可能で、360°環境の1/9程度、エクイレクタングラーによる平面図の中心から右側にあり、1200×600ピクセルほどの大きさと言われています。
適切なキャンバスサイズ
- 「360°ビュー」：3600×1800ピクセル
- 「UIビュー」 ：1200×600ピクセル
検証
検証のため、1つのスクリーンに2つのキャンバスを表示します。「UIビュー」キャンバスは、私たちが作成したインターフェースを映し、「360°ビュー」は、VR環境でのインターフェースのプレビューとして使用します。VRヘッドセットを装着してインターフェースの検証を行うことで、VR環境下での現実感の分量を確認します。
「Avocode」は、目視でデザイン補正を比べるときに便利です。
ツールの紹介
検証を始める前に、必要なツールをご紹介します。
- 「Sketch」
インターフェースとユーザの手順のデザインに使用します。持っていないのであれば、トライアル版のダウンロードが可能です。「Sketch」はインターフェースデザインのためのソフトで、使い勝手がよいです。もし、Photoshopや他のソフトの方が使いやすければ、お好きなものを使っていただいて構いません。
- 「GoPro VR Player」
360°環境のコンテンツビューワーで、GoProから無償で提供されています。プレビューと検証に使用します。
- 「Oculas Rift」
「GoPro VR Player」に「Oculas Rift」を接続すると、上に記載した検証を実施することができるようになります。
VRインターフェースデザインのプロセスについて
この章では、VRインターフェースのデザインプロセスについて、簡単なチュートリアルを行います。5分程度でできる簡単なものなので、一緒にやってみましょう。
アセットパックをダウンロードして、UIエレメントとバックグラウンドを入手します。手持ちのアセットを使いたい場合は、そちらで大丈夫です。
1．「360°ビュー」の設定
まず、「360°ビュー」用のキャンバスとして、「Sketch」で、3600×1800ピクセルのアートボードを作成します。アセットパックから「background.jpg」をインポートして、キャンバスの中央に配置します。
自分で作ったエクイレクタングラーのバックグラウンドを使う場合は、プロポーション比は2:1とし、3600×1800ピクセルにリサイズしてください。
2．アートボードの設定
「UIビュー」は「360°ビュー」をトリミングし、VRインターフェース用に作ったアートボードです。
今度は、新規で1200×600ピクセルのアートボードを作成し、上記のアートボードの隣に配置します。1.で作成したバックグラウンドをコピーして、新しいアートボードの中央に配置します。
リサイズはせず、1.で作成したままの状態にしておいてください。
3.インターフェースのデザイン
「UIビュー」のキャンバスで、インターフェースをデザインします。
ごく簡単な作業で、順にタイルを張り付けていくだけです。アセットパックから「tile.png」をドラッグして、「UIビュー」の中央に配置して複製します。
更に、「kickpush-logo.png」を、タイルの上に配置します。
4．アートボードのマージとエクスポート
画面左側のレイヤーリストに、「UIビュー」アートボードが「360°ビュー」アートボードの上に表示されていることを確認します。
「360°ビュー」アートボードの中央に「UIビュー」アートボードをドラッグし、「360°ビュー」のPNGファイルをエクスポートして、「UIビュー」がリストの一番上に表示されるようにします。
5．VR環境での検証
「GoPro VR Player」を起動し、先ほどエクスポートした「360°ビュー」のPNGファイルをドラッグして、「360°環境」のプレビューを表示させます。
これで完成です！思っていたより簡単だったと思います。「Oculas Rift」をインストールすると「GoPro VR Player」が検出し、VRデバイスでのプレビュー表示の確認を求められます。MacOSの場合、ディスプレイの設定次第では、細かい調整の必要が出てくるかもしれません。
技術的な考察
解像度が低い
VRヘッドセットの解像度は、あまり高くありません。全製品という訳ではないのですが、おおよそ携帯電話の解像度と同じくらいです。
肉眼からVRヘッドセットまで5センチしか隙間がないため、鮮明な画像を映し出すには、15,360×7,680ピクセルの8Kディスプレイが必要となります。将来的には実現するのでしょう。
判読性
解像度の問題により、UIエレメントはすべて画素化されてしまうため、テキストは読みにくく、かなりのエイリアシング（画像のギザギザ）が発生してしまいます。
対策として、テキストサイズは大きくせず、UIエレメントは詳細に設定し過ぎないでください。
フィニッシュタッチ
設計図
モバイルアプリのデザインプロセスをベースに、ここまで紹介してきました。VRインターフェースのデザインに大分慣れたと思います。アーキテクチャー全体を理解できるいいケーススタディになったと思います。
モーションデザイン
アニメーションのデザインプロセスにも触れたかったのですが、まだ3D対応していません。「Sketch」でデザインした画像を、「Adobe After Effect and Principle」で動かそうとしたのですが、3D化できませんでした。
開発者向けガイドラインに、3D化のツールとして紹介されていたからなのですが、早々に改善してほしいところです。
ここまでで、初めてのVRのUIデザインが完成しました！「面白かったけど、VPアプリは難しそう。」と思うかもしれません。
ですが、VRという新しい媒体に対し、現在のUXとUIの技術で対応できる領域は限られるため、恐れずに取り組んでほしいと思います。
これからのVRのUIデザイン
INTER-YOUR-FACES
従来のインターフェースでのVR体験は、仮想環境に大きく依存するため、最適な方法ではありません。VR環境の中で、直に体験したいユーザもいるはずです。
例えば、ラグジュアリーな旅行代理店向けのアプリをデザインを受け持つことになり、お客にインパクトのある体験をしてもらうため、ヘッドセットを付けてもらい、おしゃれなチェルシーホテルや、お客が行ってみたい場所、旅行雑誌で気になったページ、店側で用意した「おすすめ一覧」の中でお客が選んだ場所など、候補の旅先にトランスポートしたいと考えているとします。
とてもいいアイディアなのですが、いくつか問題点があります。
臨場感溢れる体験をしてもらうには、最新の（高価な）VRヘッドセットとハンドヘルドコントローラーを購入しなければならないこと、更に、VRはまだまだ発展途上の技術であることが挙げられます。
革命はこれから
VR技術は、開発費用やリスクが高く、また、開発に時間がかかるため、無限のリソースを持つ「Valve」や「Google」のような企業は除いて、一般的な企業が参入するには、まだまだ敷居が高い領域といえます。
最先端のメディアとテクノロジーとして、注目を集める素晴らしい技術ですが、VR関連の製品はアクセシビリティが重要なため、技術がこなれるまでは、販売は控えた方がいいと思います。
大抵、新しいフォーマットが登場すると、クリエーターやイノベーターといった新しいもの好きな人々が大挙して押し寄せ、彼らによって十分な研究や投資がなされた後、関心を持つ人が増えていきます。そうして、VRヘッドセットが日常に馴染んでいくにつれ、企業は接客の手段として、VR導入の検討を始めていきます。
多くの企業にとって費用対効果の高い投資対象となり、VR関連製品の価格が下がれば、ウェアラブルデバイス、スマホ、タブレットやPCで直感的な操作に慣れている人々に普及するものと思われます。
宇宙旅行まであとどのくらい？
この章で、VR空間を少し怖いと感じつつ、自分でVRのデザインをやってみたいという気になると思います。
「もしあなたが急いで行きたいなら、一人で行け。もしあなたが、遠くへ行きたいなら一緒に行け」という古いことわざがあります。もし私達が「Far. AT kickpush」 に行きたいと思う頃には、全ての企業がモバイル用のWebサイトを作ったように、全ての企業がVRアプリを導入していると思います。
かつて、誰も行ったことのない場所に行くために、全世界のデザイナーが協力し合ってロケットを作っています。VRアプリが、投資対象としての企業ニーズに早く合致すれば、VRエコシステムは拡大を加速させていくでしょう。
TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。
また、TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。
ゲーム開発やUI/UXデザインのスキルを身につけたい方はぜひご覧ください。