VOYAGE GROUP VR室ブログ

VOYAGE GROUP VR室のブログです。コンテンツの紹介や制作方法、イベントレポートなどについて書きます。原則毎週水曜日更新。

GoogleのVRコンテンツ向けデザインガイドライン、Designing for Google Cardboard を雑に訳しました

Google Earth VRで世界中を旅行中の@daybysayです。

Google Earth、中にはいれたら楽しいのに〜とずっと思っていましたがそのまんまきましたね!友達とワイワイしながら色々めぐるの楽しすぎワロタって感じです。

さて、今回は開発話ではなくVRコンテンツのデザインについての記事になります。

といってもGoogleのVRチームが作ったガイドラインをつたない英語力でさせていただいただけです!

原文はこちらです。(2016/11/23 時点の内容で翻訳しています)

A new dimension - Designing for Google Cardboard - VR design guidelines

この文章自体は割りと前から存在していますが、体系的にまとまっており内容も陳腐化しづらいものになってます。

また、すべてのプラットフォームに通じる内容も多く含まれているので、VRコンテンツ開発をこれから始める方は一度目を通すのが良いかと思います。

目次

Designing for Google Cardboard

新次元へ

A new dimension

VRにおける優れたUX体験の設計は、従来の2次元形式のものとは大きく異なります。 このベストプラクティスはグーグルカードボードデザインチームが初期に開発したアプリケーションとプロトタイプの評価に基づいています。 人間の知覚と認知の基本的な側面に基づいており、すべてのプラットフォームでのアプリケーションデザインに役立てることが出来ます。

デザインチームがこの領域について引き続き調査を行うにつれ、このガイドはVRを設計するための包括的な資料になっていきます。 インタラクティブ、ビジュアル、モーショングラフィックのデザイナーにとって、エキサイティングな時代が訪れました。

シミュレータ酔いを防ぐ

VRはデザインに新たな生理学的考察を取り込みました。パイロットが使用するフライトシミュレータのように、VRは視覚と身体感覚の不一致を引き起こす可能性をあります。 このミスマッチは、目が動いていると思っていても、体が動いていないときにシミュレータシックネス(VR酔い)と呼ばれる吐き気を伴う症状を引き起こします。 VRが体に与える影響を理解し、ガイドラインに沿ったデザインを行うことで、より良いユーザ体験を提供する素晴らしいアプリケーション開発を行うことが出来ます。

慣れさせる

VRは新しいメディアであるため、ユーザはVRコンテンツの体験にまだ慣れていないかもしれません。 また、空間が無限大に広がっているため、2Dアプリケーションでは見られなかったユーザの集中と注意を引くための課題が生じます。 このガイドでは、インタラクション,インターフェースのデザインについて、適切な例とユーザを混乱させる失敗例どう避けるかについて説明します。

生理学的な考察

Physiological considerations

モーションシックネスは、ユーザの期待と実際の感覚との不一致により引き起こされます。 例えば窓の外を見ていない車の乗客が乗り物酔いになりやすく、運転手が乗り物酔いになりづらいのは車の動きを予測できるからです。 人間は死を回避するため、有毒なものを食べると吐き気を催すように進化しました。 同様に、モーションシックネスも人間の生存スキルとして存在しています。

しかしながら、現代において乗り物酔いは恩恵よりも迷惑なことのほうが多いです。 VRアプリケーションのデベロッパ、及びデザイナーは下記のガイドラインに従い、ユーザがVR酔いに陥らないデザインをする責任があります。

ヘッドトラッキング

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0VN0pfZ1lGS0JBMFk/physiologicalconsiderations_headtracking.png

ヘッドトラッキングを使用することで、VR空間内のオブジェクトは固定された位置を維持することが出来、ユーザに正しくVR空間の認識を与えることが出来ます。 VRを設計する上で一番重要なのはヘッドトラッキングを常に維持することです。 アプリケーション内のユーザのヘッドポジションのトラッキングは決してて止めないで下さい。 ヘッドトラッキングの停止は一時的であってもVR酔につながります。

2Dスプラッシュスクリーンの3次元空間上での配置

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0VUGlJT2s3WjQzYjg/physiologicalconsiderations_headtracking_2d.png

スプラッシュスクリーンは3D空間上に2Dで表示してください。 これによりヘッドトラッキングを止めるような表現をしないでください。 また、なるべく3軸(ロール、ピッチ、ヨー)の自由度をもった形で実現するのが好ましいです。

ヘッドトラッキングを止めない

アプリケーションのテスト時は、特にヘッドトラッキングが止まらないかに注意してテストしてください。 多くの場合、新しいシーンのロードやデバイスの機能の限界を超えたときに発生する可能性が高いです。 どうしてもヘッドトラッキングを止まってしまう場合、トラッキングを失う前に画面をフェードアウトさせてください。

ヘッドトラッキングが出来ないときはどうするか?

フェードアウト中は、オーディオを流すことでアプリがまだ起動中であることをユーザにフィードバックできます。

また、画面全体の色や輝度を変化させることで、ユーザを混乱させずにトラッキングを切ることが出来ます。 これはスクリーンが全体的に変化すること、また追跡が失敗するオブジェクトが存在しないためです。

ユーザの移動制御

重要なのは、ユーザは「乗客」ではなく「ドライバー」であることです。 自身が体験するものを予測できるように、ユーザがアプリ内で動きを制御し続けられるようにしてください。

この項目に該当しないコンテンツもあります。 例えばローターコースターアプリ、あるいはその他のユーザの動きが固定されたコンテンツは一部のユーザに不快感を与える可能性があります(エキサイティングなスリルと同様に!)。 そのようなコンテンツであっても、せめてコースターのスタートをユーザに任せるなど、基本的な部分でユーザにコントロールを委ねるべきです。

速度の維持

実生活では加速と減速を感じることはありますが、速度を感じることはありません。 例えば飛行機の離着陸時に力を感じることはありますが、一定の巡航速度で飛行しているときは何も感じません(乱気流を除く)。車も同様です。

ユーザがアプリケーション内で加速、減速を伴う移動をしてしまうと、身体感覚のギャップが生まれ、不快感を引き起こす可能性があります。 この不快感を軽減するために、ユーザのアプリ内での移動は一定の速度を保ってください。

固定されたオブジェクトの活用

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0Va2pYZDV5b0o2dXc/physiologicalconsiderations_groundingobjects.png

ユーザが座りながらVR端末を利用している場合、VR空間内でも静止した環境に置くことで、実際の状態とVR内での感覚の調整をサポートすることが出来ます(バーチャル椅子など)。 ユーザが椅子やコクピットに座っている環境を作り出すことで、それが動いている乗り物だったとしても、座っている理由を説明することが出来ます。

VR空間内で移動している巨大なオブジェクトの近くにユーザが居た場合、自分自身が移動していると誤って思い込む可能性があります。 これらはVR酔いを引き起こす可能性があるため、ユーザは自分自身が移動していないことを実感できるような、固定した点を作ることで環境を作る必要があります。

明るさの変更

明るさを変えるタイミングに注意してください。 目がディスプレイに近いので暗い状態から明るい状態に突然かえると、新しい明るさに順応する際に不快感を引き起こす可能性があります。 これは暗い部屋から太陽の下に出たときの状態と似ています。

インタラクションのパターン

準備

Setup VRコンテンツを体験するには時間がかかることがあります。 ユーザはヘッドセットの調整やHMDにスマホをセットする必要があります。

ユーザが焦るのを避けるため、ユーザの準備が完了してからコンテンツが始まるようにしてください。 コンテンツが勝手に始まるようなデザインは避けてください。

コンテンツの開始と終了

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0VdHUyVlFXeTRTTlU/cardboard_icon.png

Androidプラットフォームにおいては、慣例的にヘッドセットアイコンのタップがVRコンテンツへの導線になっています。 逆に、VRコンテンツの終了はシステムバーの戻るボタンかホームボタンのタップが標準的な導線です。

ヘッドセット対応

ユーザが利用しているVRヘッドセットに対応するにはCardboard SDK(Google VR SDK)の利用がおすすめで、このSDKを使用するとアプリは自動的にヘッドセット対応をします。 SDKには両眼モードとレンズの歪み補正も含まれています。

2眼画像の正確な配置や、特定のヘッドセットのレンズへの歪み補正を行わないと、ユーザに不快感を与える可能性があります。 ユーザが使用できるヘッドセットの選択肢が広い場合、SDKの利用をおすすめします。

フルスクリーンモードの利用

AndroidにおけるVRアプリはフルスクリーンモードを使用し、ライトアウトモードは使用しないでください。 ライトアウトモードは有効な画面サイズが小さくなったり、システムのコントロールなどがユーザの視野に表示されることがあります。

APIの呼び出し

現状ではAndroidはVRアプリ内の両眼モードでのダイアログボックスの表示はサポートしていません。 それゆえにアプリケーションは2Dダイアログを表示するAPIの呼び出しを行わないでください。これらは次の理由で失見当識(方向感覚を失うこと)を引き起こします。

  • ダイアログが両目の視界をまたがって不自然に表示される
  • ダイアログをタップするために、ユーザはスマホを取り出し再度挿入する必要がある

アプリケーションがダイアログボックス表示を伴うAPIの呼び出しを行う場合は、それらが完了してからヘッドセットに挿入するよう指示してください。

VRコンテンツであること示す方法

多くのユーザーがGoogle Playでの検索、Cardboardアプリ、またはVRアプリケーションのレビューであなたのアプリケーションを見つけます。 アプリのアイコンにVRを示すためのバッジを置く必要はありませんし、見た目が乱雑になります。

アプリケーションでVRが利用されていることを示す最も良い方法は次のとおりです。

  • タイトルに「VR」をつける
  • 両眼視の画面を表示したスクリーンショットを追加する

コントロール

Controls UIコントロールはアプリケーションの起動時にユーザの視野に入れる必要があります。 コントロールを見失った場合、

アプリケーションがユーザの移動をサポートしている場合、ユーザの位置と視野に合わせてUIコントロールの場所を更新します。 場所を更新しない場合、ユーザは元の位置に戻ってコントロールを見つける必要があります。

ヒューズボタン

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0VREMzWkpKRm85WUU/interactivepatterns_controls_fusebuttons.png

カードボードはターゲットをクリックするためのボタンが側面にあります。 このボタンを使用しない場合は、タイマーを利用する仮想ボタンを作るか、ユーザが特定の時間見つめたときにトリガーされるボタン(ヒューズボタン)を作ります。

これらのボタンはVRアプリで徐々に一般的になってきていますが、これらはアクションが実行されるまで待つ必要があり、遅く感じる上にユーザにストレスを与えます。

カウントダウン表示

ヒューズボタンを使用知ているときは、何が起きているかユーザがわかるようにカウントダウンを視覚的に表示してください。 カウントダウンを表示しない場合ミスクリックしやすく、その際アプリケーションの状態が変わった理由をユーザが理解できません。

ボタンの配置

複数のヒューズボタンを近接しておかないでください。 ヒューズボタンはお互いに十分離れたターゲットを扱う場合に最適です。

複数の小さなヒューズボタンが近接して配置されていると、間違ったボタンを誤ってクリックする可能性があります。 このような状況の場合は、ヒューズボタンではなく直接クリックできるボタンを使いましょう。

フィードバック

Feedback

オーディオ

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0VTER3TnN6T1BDaDQ/interactivepatterns_feedback_audio.png

文字でのインストラクションは幾つかの理由からVRには適していません。 多くの場合、VR環境がユーザに与える情報量は過多になります。 ユーザにインストラクションを与える場合は、短い音声案内を利用することを検討してください。

音声案内のリソースを用意できない場合はテキスト読み上げを利用することを検討してください。 また、ユーザが音声案内を利用できない可能性もあるので、あくまで資格情報の補助として利用してください。

音声案内もテキストと同様、簡潔さが重要です。

BGM

VRアプリケーションは没入するように設計されており、ユーザは多くの場合ヘッドフォンを装着しています。 アプリケーションの臨場感を高めたり、ユーザの注意をひくためにオーディオを利用することを検討してください。

オーディオを利用したコミュニケーションは、シーン全体の情報をユーザの頭の向きに依存せずに伝えることが出来ます。

触覚フィードバック

触覚フィードバックは、ユーザの触覚体験をより良くします。 ユーザが直接オブジェクトに触れたり、コントロールする場合はその恩恵を受けることが出来ます。 スマホヘッドセットにおいて触覚フィードバックのクオリティは高くないが、体験をより実体的にします。

レティクルの表示

Display reticle

https://material-design.storage.googleapis.com/publish/vr_v_1/vrexternal/0B7WCemMG6e0VaGR4NEIxUlZ0VmM/interactivepatterns_displayreticle.png

ユーザは視点を動かすことで、小さなオブジェクトを正確にターゲティング出来ます。 しかし、視覚的レティクル(ターゲットの視覚的追跡を支援するもの)を与えることでその操作をより簡単にできます。 ユーザが詳細なターゲティングを行っているときに、レティクルを表示してください。

レティクルを表示することによって没入感が下がったり、不要な視覚的混乱を招く場合は次のガイドに従ってください。

  • ユーザが能動的にターゲットにアプローチしたときのみレティクルを表示する
  • ユーザがターゲットできるオブジェクトに対し、光を投影するか、ホバー状態をデザインして下さい(訳注: HTMLでリンクにカーソルが乗った時の「ホバー状態」の意)

レティクルのサイズ

レティクルを表示する場合、立体的に、奥行きを感じられるようにターゲットとのオブジェクトに投影します。 レティクルとターゲットの間に数メートルほどの間が空いてしまうと、両方を同時に捉えるのが難しくなってしまいます。

レティクルのサイズは奥行きに比例させるか、常に固定のサイズを維持することでみやすさを担保してください。

まとめ

  • 人間の生理的な側面を理解し、VR酔いを防ぐデザインをする
  • VR空間に即したコントロールを使い、ユーザを混乱させない
  • ヘッドセット対応は Google VR SDKで!

過去に作ったコンテンツを振り返ると、こちらで言及されている内容に関して対応できているもの、出来ていないものありました。(もっと早く見ておけばよかった)

今後はガイドラインを踏まえて、ユーザに優しいコンテンツを作っていけるよう頑張ります!

簡単ですが今週は以上です!