混合現実のためのデザイン ― MARS HMD コンパニオンアプリから学べること

Unity Labs のオーサリングツールグループの一部である空間デザインチームは現在、Project MARS 用のヘッドマウントディスプレイ（HMD） コンパニオンアプリの開発を進めています。この Unity 拡張機能は、現実世界とのインテリジェントなインタラクションが可能な MR・AR 体験を開発するクリエイターをサポートします。この HMD コンパニオンアプリは、エディターと現実世界の架け橋として機能します。

MARS の主要なオーサリング環境は Unity エディターですが、モバイルと HMD の両方のコンパニオンアプリによって、オーサリングを「マウスとキーボードだけ」に留まらないものに拡張させる、デバイス上のソリューションが提供されます。HMD コンパニオンアプリ内では、現実世界から素早く環境をキャプチャーしてエディター内にインポートし、シミュレーション、コンテンツ編集、グレーボクシング、条件の設定、クエリを行うことができます。このコンパニオンアプリは、没入型インタラクティブ体験の簡単で素早い制作を可能にする再使用可能なコンポーネントを提供する、Editor XR および XR Interaction ツールキットの両方を利用して構築されています。本記事では、私達の取り組みの背後にある「AR のためのより良いインターフェースを生み出すために個々の要素の間に意義ある繋がりを構築する」という考え方をお伝えするために、このデザインのプロセスについてご紹介します。

ベータプログラムにサインアップする

画面向けのデザインを行う場合、往々にして、デジタル表現の形はおおかたデザインツールによって決まってきます。しかし AR 向けのデザインの場合、実際の物体とその表現のギャップは、混乱を生じさせる原因になり得ます。私達は予測不可能な世界に住んでおり、バーチャル空間は、その背景（文脈）に適応して反応する必要があります。このため私達は、デザインプロセスの全体を通して、3D で、1:1 のスケールで、デバイス上で作業するのが理想的であると考えます。完成したアプリケーションのユーザー体験を真に理解するには、これが唯一の方法であると私達は考えています。

限られた視野、ニアクリップ面、明度・コントラストのレベルなどの制約は意思決定のプロセスに大幅に影響する場合があるので、素早いフィードバックの提供は最重要事項のひとつです。AR HMD の視野の限界がもたらすデザイン上の課題が数多くあり、私達はそれらに真正面から取り組む必要がありました。例えば MARS では、環境内の特定の条件に合わせてオーサリングすると、条件に合致するものがユーザーの周囲のあらゆる場所で（別の部屋にまで）発生してしまう場合があります。この領域の大きさに対応するために「ミニワールド」（環境の縮小版）を導入することが不可欠であると理解できたのは、大きな空間マップを使用してデバイス上でプロトタイピングを行ったからに他なりません。ミニワールドを通して、シーン内の全てのオブジェクトを複数の角度から見られることで、空間が把握しやすくなり、視界が閉塞された状態が起こりにくくなります。

環境の 3D マップが表示されるミニワールドのプロトタイプ

私達は、クリエイターを中心に据えて空間コンピューティング向けのデザインを行っており、人間の体を取り囲む一連のレイヤーとして空間を構成する方法を模索します。私達の衣服や、オブジェクト（物体）、内装や外装の境界は全てレイヤーであり、このレイヤーが、空間の構造化を考える上でのカギとなります。私達の空間の認識は、私達とスケールとの関係性に大きく基づいており、これらのレイヤーによって決定付けられることになります。

デザインプロセスにおけるスケールの理解は奥の深いテーマです。空間 UI の要素はユーザーの周囲の様々なレイヤーにどのように反応・適応するのか？特定のタスクの実行にどの程度の空間が必要か？特定のスケールにおける適切な操作方法は何か？MARS の機能はもともと空間デザイン向けに開発されたものであり、3D 操作を必要とする、あるいは現実世界の文脈情報の組み合わせを活用するものです。HMD コンパニオンアプリはこの MARS の機能と良く適合するものとなっています。

遠隔操作のプロトタイプ

従来のデザインワークフローは、それが画面上のデザインであれ物理的なオブジェクトのデザインであれ、今日の XR 開発のニーズには合いません。XR の場合、他のデジタルメディアよりも正確なビジュアライゼーションと迅速なイテレーション、そして常に変化し続ける環境に対応する何らかの方法が必要です。Unity の空間デザインチームは、従来のプロセスとのギャップを埋めることを目標とし、複雑性を伴う XR 体験の制作をより深く理解するために、カスタマイズしながら独自のワークフローをデザインしました。以下に、私達が試したワークフローのいくつかと、その結果学んだことをご紹介します。

空間デザインにおいては、疲労を防止するために、オブジェクトや空間だけでなく体の動きのスケールを理解することが必要となります。動きや人間工学をテストするには、1:1 スケールの紙のプロトタイプが非常に適しています。

例えば私達は、ユーザーが頭を傾ける動きに応じて上下に角度を変えるバーチャルトレーをデザインし、そのテストを行いました。紙のモデルトレーを物理的なプロトタイプとして作成し、首（顎の真下）に掛けました。通常の勤務中に、電話、眼鏡、ペンなどの頻繁に使用するツールをこのトレー内に入れました。この紙のプロトタイプを 1 時間装着してみると、アクティベートのインタラクションとして紐付けられた首の動きや、首まわりにあるツールにアクセスする頻繁な腕の動きは、かなり疲れるものであることが分かりました。したがって私達は、このデザイン案は採用しないことにしました。AR 向けのデザインにおいては、簡単な紙のプロトタイプを作成すれば時間の節約に繋がり、空間的に考えるためにも役立ちます。

ツール用顎トレーのデザイン案のための紙のプロトタイプ

MR のユーザーフローは、プレゼンテーションやアニメーションモックアップなどの従来の 2D ツールを使ってレビューするのは困難です。私達は、2D 絵コンテを作成する代わりに Tvori を使用して VR でプロトタイプを作成しました。Tvori によって、インタラクションの編集やアニメーション付けの際に、素早くイテレーションを行うことができました。カメラや UI 要素、バーチャルオブジェクト、入力デバイスのキーフレームは、Timeline 機能を使って設定しました。

Tvori VR でプロトタイピングされたフローを AR FOV ビューで表示した様子

VR を使用することで、環境のスケールを絶えず（頻繁に何度も）変更することができました。簡単に編集できるようにシーンを小型化しながら、環境を人間のスケールで直接体験することができました。他のチームメンバーにフローを見せる時は、VR ヘッドセットを装着してスケールを 1:1 に設定してもらい、タイムラインをスクラブしてもらうだけで済みました。

バーチャル要素の適切なスケールとサイズをより良く把握するために、VR 内で AR を素早くシミュレートする効率的な方法として、典型的な AR ヘッドセット視野の「セーフエリア」が導入されました。人間の視野角を遮蔽する長方形は非常に理に適っています。この制約が、空間をデザインする際の体験の没入感の度合いに（見えるものだけでなく、動き、つまりハンドジェスチャーの面でも）影響を及ぼします。

パレットメニュー用の入力マッピング

デザインプロセス全体を通して、私達は 2 つのドキュメントを随時更新し続けました。ひとつは入力マッピング用、もうひとつはユーザーフロー用です。ユーザーフロー用ドキュメントは真実を語る資料として継続的に更新し続けました。このドキュメント上で、ユーザーがいつどこで特定のタスクを遂行するのかを特定しました。特定のタスクが特定のワークスペース（XR UI の個々の部分）内で遂行されるのか、それとも現実世界の中、あるいはその両方の中で実行され得るのかを把握します。

また入力マッピングに関しては、アプリ内で実行されるアクションとその頻度をより正確に把握するために、ある方法を用いました。これは以下の単純な手順で行われるものです。

• 全ての既知のアクションをリストアップし、それらを優先度に基づいて順位付けする。
• 各アクションの実行される頻度を書き留める。
• インタラクションの種類を決定する。

複雑性が増すにつれ、プロトタイプの忠実性を高くする必要がありました。「マインドマップ」ビューを使用して、重複する入力とその適切な調整方法をより良く理解することができました。入力数が制限され得る Magic Leap One コントローラーなどの入力デバイスでは、この理解は特に重要になります。特定のアクションにホバー状態を付随させることで、競合を回避する形で入力を分配することができました。汎用のアクションに関しては、コンテキストメニューにはバンパーボタンを使用し、メインパレットメニューの呼び出しにはホームボタンのタップを使用することに決めました。また、疲労対策として、トリガーやバンパーボタンのプレスとタッチパッドを組み合わせなければならない入力は使用しないようにしました。

私達は Unity を使用して 3D モデルと UI デザイン、コントローラースクリプトをまとめ、Magic Leap 上にデザインを素早く展開できるようにしました。目標は、プロセスの早期から完璧なコードを記述しなくても、インタラクションのプロトタイプの迅速なイテレーションからフィードバックを取得できるようにすることでした。また私達は、独自のプロトタイプを作成しながら、より広範な XR コミュニティーによって開発された数多くのアプリにヒントを求め、特定のインタラクションの挙動を作成するに当たっては、頻繁にそうしたアプリを参考にしました。

大多数のインタラクションは、タイミングや境界値、距離などの「マジックナンバー」（特別な意味を持つ数字）を基盤としています。プロトタイプ構築後の最初のステップは、これらの値を、各インタラクションで「丁度良い」と感じられる値に調整することでした。値の調整は Unity エディターの再生モードで行えましたが、ランタイムビルドでも値を調整する必要がありました。私達はこれを行うために、再使用可能な簡単な設定メニューをアプリ内に構築しました。全てのプロトタイプスクリプトで、一行のコードを使用して、これらのマジックナンバーを調整するための値スライダーやチェックボックスを追加できるようにしました。

インタラクション設定の「マジックナンバー」を調整する

続くステップは、フィードバックの取得とイテレーションです。以下に、第三者にインタラクションをテストしてもらう際のヒントをご紹介します。

• 始めはなるべく何も伝えないこと。どうしても必要な場合にのみ、何をしようとすべきかを伝え、そのやり方を簡単に説明しても良いでしょう。あなたはソフトウェアには付いてこないので、ユーザーがあなたからの影響なしでどのようにインタラクトするかを観察する必要があります
• 混乱、フラストレーション、驚きなどの好ましくない反応を見逃さないようにし、何が起こると予測していたか（そして実際には何が起こったか）をユーザーに聞きます。
• ユーザーがフィードバックの説明に苦労しているようなら、ヘッドセットビューをストリームまたは録画して、バーチャルオブジェクトを対象に実際にジェスチャーを実演してもらうこともできます。

バーチャルオブジェクトのスケールは、現実世界で計測するのは困難であり、見ているユーザーからの距離に応じて変わる必要があります。現実世界のスケールを唯一の参照として使用することはできません。なぜならユーザーは、立体視覚や（レイの遷移の動きなどの）奥行きの手掛かりによってしか、UI が物理的により大きいと感じられないからです。片目を瞑った場合や、他の文脈なしに UI を見た場合は、UI がどの程度大きく、どの程度遠くにあるか、ユーザーには分かりません。

私達は、Google の Daydream チームによって VR デザイン用に開発された距離に依存しないミリメートル（DMM／distance-independent millimeter）システムを使用しました。これは、距離とサイズを比例的にスケーリングするものです。例えば、1 dmm は 1 メートル先にある 1*1 mm のボタンのサイズを意味します。これは 3 メートル先に配置された 3*3 mm のボタンのサイズともなります。Google は、dmm システムを使用して、特定のフォントとレイベースの最小ヒットサイズの一式を提供しました（「最小フォントサイズが 20 dmm、最小のヒットサイズが 64 dmm プラス 16 dmm の余白」など）。

私達は、この提案されたサイズを Magic Leap でテストし、その結果これらは大きすぎると感じたため、少し小さくしました。これは、Magic Leam の FOV が Daydream よりも小さく、また Daydream のコントローラーが 3DoF であるのに対し Magic Leap のコントローラーは 6DoF であることに起因すると思われます。UI は、距離と比例的にスケーリングされる場合、同じピクセルサイズでレンダーされ、レイキャストは同じ角度領域をカバーしますが、印象が非常に異なることに私達は気付きました。コミュニティーの皆様も同じようにお感じになりましたか？ぜひお聞かせください。

コンパニオンアプリ用の空間 UI デザインは、マテリアルとしてライトを使用するという概念を核としたものです。ライトとシャドウのレイヤリングは、より立体的な体験の作成を可能にし、AR HMD 内でのユーザーの奥行き感覚を向上させるために行われるものです。光は、究極的には相関的なものです ― 私達が光をどのように知覚するかは、それが他のマテリアルやサーフェスによってどのように具象化されたかによって決まるという意味において。コンパニオンアプリ内の全ての空間 UI 要素は、物理的な構造物のように扱われ、光源と光の面の関係を精密に反映します。

この効果は、光によって影を表現する技法を用いて作られます。AR ヘッドマウントディスプレイは色光の加法混色による色空間を使用しています。黒は光のない状態なので透明にレンダーされます。黒いオブジェクトが他のバーチャルオブジェクトの前に配置されると、それはマスクとして機能します。影の錯覚を作り出すには、暗い影の領域を光で囲む必要があります。人間の知覚システムは（3D オブジェクトの動きと奥行きを暗示する）影による手掛かりに大きく依存しています。これらのデバイス向けに開発された AR アプリケーションに影がきちんと組み込まれていなければ、ユーザーに重要な奥行き手掛かりが与えられないことになります。

奥行きの手掛かりとしてユーザーに提供されるボタンホバーシャドウ（上）、視認性のためのテクスチャー付きマスク（下）

シャドウに加えてテクスチャーも、オブジェクトのスケールと相対的な位置を把握するための手掛かりをユーザーに与えます。ライトベースの HMD で色を扱う場合の問題のひとつがバンディングで、これはコントラストの強いグラデーションを使用している場合に頻繁に起こります。私達は、これを制約として使用し、空間 UI 要素のデザインにテクスチャーを使用することで、グラデーションに使用できる色の範囲を拡大するとともに、オーサリング体験内の奥行きの認知をさらに向上させる一助としました。

パレットメニュー用（左）およびコンテキストメニュー用（右）の、ノイズ付きのベイクしたシャドウテクスチャーマップ

空間 UI デザイン要素と光源の関係は、インターフェースの挙動をハイライトするように意図して設計されます。（オーディオと物理の様式に加え）このようなビジュアルの様式は、ユーザーにアフォーダンスを伝達したり入力フィードバックを提供する一助となります。私達の日常空間と同様に、光によるアクセントがビジュアルに面白味を与え、オブジェクトや空間の特定の性質を強調します。私達は、物理的な世界に見られるこうしたアフォーダンスからヒントを得て、各種のライティング条件（埋め込みライト、コーブ照明、ダウンライト）を模倣する、光源と空間 UI 要素の間の様々な関係を作り出しました。

空間 UI 要素のための、入力フィードバックのビジュアル／モーションの研究

私達は、より良い体験の開発を可能にする新しいワークフローを常に模索しています。本記事でご紹介した内容をを皆様の空間デザインにお役立ていただければ嬉しく思います。皆様の発見されたテクニックも、ぜひご共有ください。この新しい媒体を形作り、全く不可能と思われた創造を可能にするのは、クリエイターコミュニティーの皆様からの知識の共有に他なりません。

MARS Magic Leap コンパニオンアプリをプロジェクトに使用されることをご検討中の方は、こちらの短い質問集にご回答ください。これにより、私達は皆様のニーズをより明確に把握することができます。皆様からのご連絡をお待ちしております。