実際にデザインしてみる！VRアプリのUIデザインを作るプロセス

TechAcademy

連載 :

TechAcademyマガジン

2017年5月17日(水)

TechAcademy

本稿は、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はまだまだ発展途上の技術であることが挙げられます。