Mixed Reality 向けの設計Designing for Mixed Reality

Mixed Reality で適切に表示されるようにアプリを設計し、新しい入力方法を活用します。Design your app to look good in Mixed Reality, and take advantage of new input methods.


Mixed Reality は現実世界とデジタル世界を組み合わせたものです。Mixed Reality is the result of blending the physical world with the digital world. Mixed Reality のさまざまなエクスペリエンスには、HoloLens (コンピューターで生成されたコンテンツと現実世界を組み合わせるデバイス) など、1 つの優れたデバイスによるものと、他の Virtual Reality の完全なイマーシブ ビュー (Windows Mixed Reality ヘッドセットに表示される) によるものが含まれます。The spectrum of mixed reality experiences includes at one extreme devices such as the HoloLens (a device that mixes computer generated content with the real world), and at the other a completely immersive view of Virtual Reality (as viewed with a Windows Mixed Reality headset). さまざまなエクスペリエンスの例については、「Mixed Reality アプリの種類」をご覧ください。See Types of mixed reality apps for examples of how experiences will vary.

このトピックのいくつかのガイダンスを実行してユーザー エクスペリエンスを改善しますが、既存のほぼすべての UWP アプリは、変更しなくても Mixed Reality 環境で 2D アプリとして実行されます。Almost all existing UWP apps will run in the Mixed Reality environment as 2D apps with no changes, although the experience for the user can be improved by following some of the guidance in this topic.

Mixed Reality ビュー

HoloLens と Windows Mixed Reality ヘッドセットの両方が UWP プラットフォーム上で実行されるアプリケーションをサポートし、両方とも 2 つの異なる種類のエクスペリエンスをサポートしています。Both the HoloLens and Windows Mixed Reality headsets support applications running on the UWP platform, and both support two distinct types of experience.

2D とします。没入型エクスペリエンス2D vs. Immersive Experience

イマーシブ アプリはユーザーに表示される画面全体を制御し、アプリによって作成されるビューの中央にユーザーが配置されます。An immersive app takes over the entire display visible to the user, placing her at the center of a view created by the app. たとえば、イマーシブなゲームでは、エイリアンの惑星の地表にユーザーが配置されたり、ツアー ガイド アプリでは、南米の村にユーザーが配置されることもあります。For example, an immersive game might place the user on the surface of an alien planet, or a tour guide app might place the user in a South American village. イマーシブ アプリを作成するには、3 D グラフィックスまたはキャプチャした立体映像が必要です。Creating an immersive app requires 3D graphics or captured stereographic video. 多くの場合、Unity や DirectX など、サード パーティのゲーム エンジンを使用してイマーシブ アプリを開発します。Immersive apps are often developed using a 3rd party game engine such as Unity, or with DirectX.

イマーシブ アプリを作成する場合、詳細については、Windows Mixed Reality デベロッパー センター を参照してください。If you are creating immersive apps, you should visit the Windows Mixed Reality Dev Center for more information.

2D アプリは、ユーザーのビュー内で従来のフラット ウィンドウとして実行します。A 2D app runs as a traditional flat window within the user's view. HoloLens では、ユーザー独自の現実世界でリビング ルームやオフィスの空間内にある壁またはポイントに固定されたビューを指します。On the HoloLens, that means a view pinned to the wall or a point in space in the users own real-world living room or office. Windows Mixed Reality ヘッドセットで、アプリは Mixed Reality ホーム (クリフ ハウスとも呼ばれる) の壁に固定されます。In a Windows Mixed Reality headset, the app is pinned to a wall in the mixed reality home (sometimes called the Cliff House).

Mixed Reality で実行される複数のアプリ

これらの 2D アプリはビュー全体を制御するのではなく、ビュー内に配置されます。These 2D apps do not take over the entire view: they are placed within it. 環境内には一度に複数の 2D アプリが存在することができます。Multiple 2D apps can exist in the environment at once.

このトピックの残りの部分では、2D エクスペリエンスの設計に関する考慮事項について説明します。The remainder of this topic discusses design considerations for the 2D experience.

2D アプリの起動Launching 2D apps

Mixed Reality の [スタート] メニュー

すべてのアプリは [スタート] メニューから起動しますが、アプリの起動ツールとして動作する 3D オブジェクトを作成することもできます。All apps are launched from the Start Menu, but it's also possible to create a 3D object to act as an app launcher. 詳しくは、このビデオ をご覧ください。See this video for details.

2D アプリの入力概要The 2D App Input Overview

HoloLens と Mixed Reality の両方のプラットフォームでは、キーボードおよびマウスがサポートされています。Keyboards and mice are supported on both HoloLens and Mixed Reality platforms. Bluetooth を介してキーボードおよびマウスを HoloLens と直接ペアリングすることができます。You can pair a keyboard and mouse directly with the HoloLens over Bluetooth. Mixed Reality アプリは、ホスト コンピューターに接続されたマウスとキーボードをサポートします。Mixed Reality apps support the mouse and keyboard connected to the host computer. 両方とも微調整が必要な場合に役立ちます。Both may be useful in situations when a fine-level of control is necessary.

また、他の一般的な入力方法もサポートされています。ユーザーがオフィスにいない場合や微調整が必要な場合などに特に役立ちます。Other, more natural, input methods are also supported, and these may be particularly useful when the user isn't sitting at a desk with a real keyboard in front of them, or when fine control is needed.

ハードウェアまたはコーディングを追加しなくても、2D アプリの使用時のマウス ポインターとして、視線、つまりユーザーが見ているベクトルを使用します。Without any extra hardware or coding, apps will use gaze - the vector your user is looking along - as a mouse pointer when working with 2D apps. 仮想シーン内のものにマウス ポインターを合わせているかのように実装されます。It is implemented as if a mouse pointer was hovering over something in the virtual scene.

一般的な操作では、ユーザーがアプリのコントロールを見ると、このコントロールは強調されます。In a typical interaction, your user will look at a control in your app, causing it to highlight. ユーザーは、ジェスチャ (HoloLens 上) またはコントローラーや音声コマンドを使用して動作をトリガーするタイミングを指定します。The user will when trigger an action, using either a gesture (on the HoloLens), or a contoller or by giving a voice command. ユーザーがテキスト入力フィールドを選択すると、ソフトウェア キーボードが表示されます。If the user selects a text input field, the software keyboard will appear.

Mixed Reality のポップアップ キーボード

重要なことは、UWP プラットフォーム上で実行することで、自分でコーディングを追加しなくても、これらすべての操作が自動的に行われる点です。It's important to note that all these interactions will happen automatically with no extra coding on your part, as a consequence of running on the UWP platform. HoloLens と Mixed Reality ヘッドセットからの入力は、タッチ入力として 2D アプリに表示されます。Input from the HoloLens and Mixed Reality headset will appear as touch input to the 2D app. つまり、既定では、多くの UWP アプリを実行し、Mixed Reality で使用することができます。This means that many UWP apps will run and be usable in Mixed Reality, by default.

ただし、作業を少し追加すると、エクスペリエンスを大幅に向上できます。That said, with some extra work, the experience can be improved greatly. たとえば、音声コントロールは特に有効です。For example, voice control can be especially effective. HoloLens と Mixed Reality の両方の環境でアプリの起動と操作の音声コマンドがサポートされており、音声サポートなどはこの方法の一般的な拡張機能として表示されます。Both HoloLens and Mixed Reality environments support voice commands for launching and interacting with apps, and including voice support will appear as a natural extension of this approach. 音声サポートを UWP アプリに追加する際の詳細については、「音声操作」をご覧ください。See Speech interactions for more information on adding voice support to your UWP app.

適切なコントローラーの選択Selecting the right controller

Mixed Reality モーション コントローラー

Mixed Reality 専用のいくつかの新しい入力方法が設計されました。Several novel input methods have been designed especially for use with Mixed Reality, specifically:

これらのコントローラーにより、仮想オブジェクトの操作が自然かつ正確になります。These controllers make interacting with virtual objects seem natural and precise. いくつかの操作は無料で利用できます。Some of the interactions you get for free. たとえば、HoloLens ジェスチャ を選択またはアニメーション コント ローラーの Windows キーまたはトリガーをクリックすると予想どおり、ここでも、ユーザー側でコーディングを行わずに、入力の応答が生成されます。For example, the HoloLens select gesture or clicking on the Motion Controller's Windows key or trigger will generate the input response you would expect, again, with no coding on your part.

それ以外の場合は、追加情報と利用可能な入力情報を活用するコードを追加します。At other times, you will want to add code to take advantage of the extra information and inputs that are made available. たとえば、位置とボタン操作を考慮するコードを作成する場合、モーション コントローラーを使用すると、オブジェクトを細かく操作できます。For example, the Motion Controllers can be used to manipulate objects with a fine level of control, if you write code that takes their position and button presses into account.


要約: 基本理念では、常にできるだけ自然でスムーズな入力方法をユーザーに提供するようにしています。In summary: the guiding principal should be to always provide the user with as natural and frictionless an input method as possible.

2D のアプリの設計に関する考慮事項:機能2D App Design considerations: Functionality

Mixed Reality プラットフォームで使用する可能性がある UWP アプリを作成する場合は、次の点に注意してください。When creating a UWP app that will potentially be used on a Mixed Reality platform, there are several things to keep in mind.

  • モーション コントローラー、ゲームパッド、またはジェスチャを使用すると、ドラッグ アンド ドロップが適切に動作しない場合があります。Drag and drop may not work well when used with Motion Controllers, gamepads or gestures. ドラッグ アンド ドロップを頻繁に使用するアプリケーションの場合は、オブジェクトを新しい場所に移動するかどうかを確認するダイアログを表示するなど、この操作をサポートする代替方法を提供する必要があります。If your application depends heavily on drag and drop, you will need to provide an alternative method of supporting this action, such as presenting a dialog confirming if objects to be moved to a new location.

  • 音の変化に注意してください。Be aware how sound changes. アプリでサウンド エフェクトを生成する場合、音源はアプリの仮想世界で固定された場所に表示されます。If your app generates sound effects, the source of the sound will appear to be your app's pinned location in the virtual world. ユーザーがアプリから離れると、音が消えます。As the user moves away from the app, sound will diminish. 詳しくは、「立体音響」をご覧ください。See Spatial sound for more information.

  • 視野を考慮して、アフォーダンスを用意します。Consider the field of view and provide affordances. すべてのデバイスでコンピューター モニターと同じ大きさの視野が用意されるわけではありません。Not every device will provide as large a field of view as a computer monitor. 詳しくは、「ホログラフィック フレーム」をご覧ください。See Holographic frame for complete details. さらに、ユーザーが実行中のアプリから離れている場合があります。Furthermore, the user may be some distance away from a running app. つまり、アプリが現実世界または仮想世界の異なる場所にある壁に固定されている場合があります。That is, the app may appear pinned to the wall at a different location in the world (real or virtual). ユーザーの注意を引く必要があったり、ビューが常に表示されていないことを考慮する必要があります。Your app may need to get the users attention, or take into account that the entire view is not visible at all times. トースト通知は使用できますが、音または音声 アラートを使用してユーザーの注意を引く別の方法もあります。Toast notifications are available, but another way to get the user's attention might be to generate a sound or speech alert.

  • 2D アプリにはアプリ バー が自動的に用意されるため、ユーザーは仮想環境で移動および拡大縮小を行うことができます。A 2D app is automatically given an app bar to allow the user to move and scale them in the virtual environment. ビューは、垂直方向にサイズ変更したり、同じ縦横比を維持するようにサイズ変更できます。The views can be resized vertically, or resized maintaining the same aspect ratio.

2D アプリの設計に関する考慮事項:UI/UX2D app design considerations: UI/UX

  • ナビゲーション ビュー などのFluent Design System を実装する XAML コントロールと アクリル などのエフェクトはすべて、2D Mixed Reality アプリに特化して適切に動作します。XAML controls which implement the Fluent Design System such as the Navigation view, and effects such as Acrylic all work especially well in 2D Mixed Reality apps.

  • Mixed Reality デバイス、または少なくとも Mixed Reality シミュレーターでアプリのテキストとウィンドウのサイズをテストします。Test your app's text and windows size in a Mixed Reality device, or at the very least in the Mixed Reality Simulator. アプリの既定のウィンドウ サイズは 853 x 480 有効ピクセルです。Your app will have a default windows size of 853x480 effective pixels. フォント サイズを大きくし (推奨ポイント サイズは約 32)、「Hololens 用の既存のユニバーサル アプリを更新する」を確認します。Use larger font sizes (a point size of approximately 32 is recommended), and read Updating your existing universal app for Hololens. 記事「文字体裁」では、このトピックの詳細について説明しています。The article Typography covers this topic in detail. Visual Studio で作業する場合は、57 インチ HoloLens 2D アプリ用に設定された XAML 設計エディターがあるため、正しいスケールと寸法のビューが表示されます。When working in Visual Studio, there is a XAML design editor setting for a 57" HoloLens 2D App which provides a view with the correct scale and dimensions.

Mixed Reality アプリに表示されるテキストは大きくなります。

  • 視線がマウスになりますYour gaze is your mouse. ユーザーが何かを見ると、タッチ ホバー イベントとして動作するため、オブジェクトを見るだけで、不要なホップアップが表示されたり、他の不要な操作が実行される場合があります。When the user looks at something, it acts as a touch hover event, so simply looking at an object may trigger an inadvertent pop-up or other unwanted interaction. アプリが Mixed Reality で現在実行されているかどうかを検出し、この動作の変更が必要になる場合があります。You may need to detect if the app is currently running in Mixed Reality and change this behavior. 下記の「ランタイム サポート」のご覧ください。See Runtime support, below.

  • ユーザーがモーション コントローラーを使用してどこかの方向やポイントを見ると、タッチ ホバー イベントが発生します。When a user gazes towards something or points with a motion controller, a touch hover event will occur. これは [PointerPoint] で構成されます。この場合、 [PointerType][Touch][IsInContact][false] です。This consists of a PointerPoint where PointerType is Touch, but IsInContact is false. 何かが確定すると (たとえば、ゲームパッドの A ボタンが押された場合、クリッカー デバイスが押された場合、モーション コントローラーのトリガーが押された場合、または音声認識で 選択 を選んだ場合)、PointerPointIsInContacttrue となり、タッチ プレスが発生します。When some form of commit occurs (for example, gamepad A button is pressed, a clicker device is pressed, a motion controller trigger pressed, or voice recognition heads "Select"), a touch press occurs, with the PointerPoint having IsInContact become true. 入力イベントの詳細については、「タッチ操作」をご覧ください。See Touch interactions for more information on these input events.

  • 視線はマウス ポインターほど正確でありません。Remember, gaze is not as accurate as mouse pointing. マウス ターゲットまたはボタンが小さくなるほど、ユーザーには不便になるため、コントロールのサイズを適切に変更します。Smaller mouse targets or buttons may cause frustration for your users, so resize controls accordingly. タッチ操作用に設計した場合は、Mixed Reality で動作しますが、実行時にいくつかのボタンを大きくすることもあります。If they are designed for touch, they will work in Mixed Reality, but you may decide to enlarge some buttons at runtime. Hololens 用の既存のユニバーサル アプリを更新する」をご覧ください。See Updating your existing universal app for Hololens.

  • HoloLens では、光の有無を黒色で定義します。The HoloLens defines the color black as the absence of light. これはレンダリングされないだけでなく、「現実世界」では透けて見えます。It's simply not rendered, allowing the "real world" so show through. このことが混乱を招く場合は、アプリケーションで黒色を使用しないでください。Your application should not use black if this is would cause confusion. Mixed Reality ヘッドセットでは、黒色は黒色を指します。In a Mixed Reality headset, black is black.

  • HoloLens はアプリのカラー テーマをサポートしていないため、ユーザーに最適なエクスペリエンスを実現できるように既定値は青色に設定されています。The HoloLens does not support color themes in apps, and defaults to blue to ensure the best experience for users. 色の選択の詳細については、このトピック を参照してください。ここでは、Mixed Reality 設計での色とマテリアルの使用方法について説明しています。For more advice about selecting colors, you should consult this topic which discusses the use of color and material in Mixed Reality designs.

他に考慮する点Other points to consider

  • デスクトップ ブリッジ により、既存の (Win32) デスクトップ アプリを Windows 10 および Microsoft Store に移植できますが、現時点で HoloLens または Mixed Reality で実行できるアプリを作成することはできません。Although the Desktop Bridge can help bring existing (Win32) desktop apps to Windows 10 and the Microsoft Store, it cannot create apps that run on HoloLens or in Mixed Reality at this time.

ランタイム サポートRuntime support

実行時に Mixed Reality デバイスで実行するかどうかを判断したり、コントロールのサイズを変更し、ヘッドセットで使用するアプリを他の方法で最適化する機会としてこのアプリを使用したりできます。It is possible for your app to determine if it is running on a Mixed Reality device at runtime, and use this as an opportunity to resize controls or in other ways optimize the app for use on a headset.

次に、アプリを Mixed Reality デバイスで使用している場合にのみ、XAML の TextBlock コントロール内のテキストのサイズを変更するコードを示します。Here's a short piece of code that resizes the text inside a XAML TextBlock control only if the app is being used on a Mixed Reality device.

bool isViewingInMR = Windows.ApplicationModel.Preview.Holographic.HolographicApplicationPreview.IsCurrentViewPresentedOnHolographicDisplay();

            if (isViewingInMR)
                // Running on headset, resize the XAML text
                textBlock.Text = "I'm running in Mixed Reality!";
                textBlock.FontSize = 32;
                // Running on desktop
                textBlock.Text = "I'm running on the desktop.";
                textBlock.FontSize = 14;