XR で Android アプリを 3D にする

対象となる XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
XR ヘッドセット
有線 XR グラス
XR デバイスのタイプについて →

2D のモバイルまたは大画面の Android アプリは、デフォルトで Android XR で動作し、3D 空間内に 2D パネルとして表示されます。没入型の XR 機能を既存の 2D Android アプリに追加して、フラットな画面エクスペリエンスから動的な 3D 環境に移行できます。

Android アプリを XR に移行する際は、次の重要な原則を考慮してください。

  • 空間機能: Android XR には、アプリで利用できるさまざまな空間機能が用意されていますが、すべての機能を実装する必要はありません。アプリの視覚階層、レイアウト、ユーザー ジャーニーを補完するものを戦略的に実装します。カスタム環境と複数のパネルを組み込んで、真に没入感のあるエクスペリエンスを作成することを検討してください。空間要素の最適な統合を判断するには、空間 UI 設計ガイダンスをご覧ください。
  • アダプティブ UI: XR では、無限のキャンバスと自由にサイズ変更可能なウィンドウにシームレスに適応する、広々とした UI を柔軟に設計できます。最も重要な考慮事項の一つは、大画面設計ガイダンスを使用して、この広大な環境に合わせてアプリのレイアウトを最適化することです。アプリがモバイル専用であっても、魅力的な環境を利用してユーザー エクスペリエンスを向上させることはできますが、大画面向けに最適化された UI は、Android XR 向けにアプリを最適化する最善の方法の一つです。
  • UI フレームワーク: Jetpack Compose for XR を使用して UI を構築することをおすすめします。アプリがビューに依存している場合は、XR でビューを操作するを確認して、ビューを操作する際に Compose の相互運用性を活用する方法を学ぶか、Jetpack SceneCore ライブラリを直接操作することを検討してください。
  • Google Play ストアでの公開: XR 拡張アプリが Google Play ストアで検出可能であることを確認するには、次の手順を行います。
    • 不要な機能要件を削除して、アプリを効率化することを検討してください。
    • アプリが Google Play ストアの検索結果から除外されないように、Google Play Console でアプリが XR 公開をオプトアウトしていないことを確認します。

2D UI コンポーネントを 3D に変換する

これらのヒントを参考にすると、アプリが XR 向けに最適化されているように感じられるようになります。

  • 大画面との互換性を優先する: アプリの UI が大画面の設計原則に準拠していることを確認し、広大な XR 環境でテキストとコンテンツの最適な可読性を確保します。
  • 空間機能を戦略的に使用する: アプリのユーザー ジャーニー内で、空間機能を組み込むことでエクスペリエンスを向上させ、プラットフォームの独自の機能を活用できる重要な瞬間を特定します。
  • ユーザーの快適性を考慮して空間パネルを配置する: 空間パネルを使用してレイアウトを設計する場合は、ユーザーから適切な距離に配置して、圧迫感や近すぎる感覚を避けます。
  • 空間レイアウトにアダプティブ UI を使用する: ペインやプログレッシブ リビーリングなどのアダプティブ UI のコンセプトを利用して、レイアウトを複数の空間パネルに効果的に分解し、情報の表示を最適化します。
  • 永続的な要素とパターンにオービターを使用する: オービターは、ナビゲーションやコントロールなど、永続的でコンテキストに応じた UX 要素に使用します。オービターの使用を制限して、わかりやすさを維持し、煩雑さを回避します。
  • エレベーションを適切に使用する: 静止したままで、コンテンツとともにスクロールしない一時的なコンポーネントに空間エレベーションを適用します。視覚的な不快感を防ぎ、バランスの取れた視覚的な階層を維持するために、広い領域を高くすることは避けてください。

Jetpack Compose for XR には、XR の拡張機能を管理する新しいコンポーネントが導入されているため、デベロッパーが管理する必要はありません。たとえば、SpatialPopup と SpatialDialog を使用して、2D の対応する要素を置き換えることができます。これらのコンポーネントは、空間 UI が利用できない場合は一般的な 2D UI として表示され、利用可能な場合はアプリの空間 UI を表示します。これらを使用するには、対応する 2D UI 要素を置き換える 1 行の変更を行うだけです。

ダイアログを SpatialDialog に変換する

// Previous approach
Dialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

ポップアップを SpatialPopup に変換する

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

2D UI 要素をエレベートする

よりきめ細かい制御で UI をエレベートする場合は、SpatialElevation を使用して、アプリ内の任意のコンポーザブルを、SpatialElevationLevel で設定した Z 軸上の空間パネルよりも上のレベルにエレベートできます。これにより、次の例に示すように、ユーザーの注意を引き、階層を改善し、読みやすさを向上させることができます。

// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(elevation = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}

コードに関する主なポイント

  • ボトムシートやサイドシートなどの大きな領域や平面を空間化したり、高さを上げたりしないでください。
  • コンテンツとともにスクロール可能な UI 要素をエレベートしないでください。

2D コンポーネントをオービターに移行する

オービターは、通常、ユーザーが操作できるコントロールを含むフローティング要素です。オービターは、空間パネルや、空間レイアウトなどの他のエンティティに固定できます。オービターを使用すると、コンテンツのスペースをより広く確保でき、メインのコンテンツを遮ることなく、ユーザーが機能にすばやくアクセスできるようになります。

空間化されていないナビゲーション レール

空間化されていないナビゲーション レール

立体化された（XR に適応した）ナビゲーション レール

空間化された（XR に適応した）ナビゲーション レール

次のサンプルコードは、2D UI コンポーネントをオービターに移行する方法を示しています。

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}

オービターに関する重要なポイント

  • オービターは、既存の UI 要素を空間パネルにアタッチするように設計されたコンポーネントです。
  • Android XR アプリの設計ガイダンスを参照して、オービターに移行する要素と、避けるべきパターンを確認してください。
  • ナビゲーション レール、トップ アプリバー、ボトム アプリバーなど、いくつかのナビゲーション コンポーネントのみを適応させることをおすすめします。
  • 空間 UI が有効になっていない場合、オービターは表示されません。たとえば、ホームスペースや、スマートフォン、タブレット、折りたたみ式デバイスなどのデバイスには表示されません。

2D コンポーネントを空間パネルに移行する

空間パネルは、Android XR アプリの UI の基本的な構成要素です。

パネルは、UI 要素、インタラクティブ コンポーネント、没入型コンテンツのコンテナとして機能します。設計時に、ユーザー コントロール用のオービターなどのコンポーネントを追加したり、UI 要素を空間的に引き上げて特定のインタラクションに注意を引いたりできます。

コードに関する主なポイント

  • Android XR アプリの設計ガイダンスを参照して、パネルに移行する要素と、避けるべきパターンを確認してください。
  • 空間パネルの配置に関するベスト プラクティスに従います。
    • パネルは、ユーザーの目の中心から 1.5 メートルの位置に表示される必要があります。
    • コンテンツは、ユーザーの画角の中央 41° に表示される必要があります。
  • パネルは、ユーザーが移動しても同じ場所に表示されます。アンカーはパススルーでのみ使用できます。
  • パネルには、システムで推奨されている 32 dp の角丸を使用します。
  • タップ ターゲットは 56 dp にし、48 dp 未満にしない。
  • 特に透明な背景を使用する場合は、読みやすさを考慮してコントラスト比を維持します。
  • Android デザインの色の原則に沿って、マテリアル デザインのカラーシステムを使用して、アプリのダークモードとライトモードを実装します。
  • 既存の UI 要素で Spatial Panels API を使用する。

2D UI を単一の空間パネルに移行する

デフォルトでは、アプリはホームスペースに 1 つのパネルで表示されます。詳しくは、ホームスペースとフルスペースを切り替える方法をご覧ください。そのコンテンツをフルスペースに表示するには、SpatialPanel を使用します。

以下に例を示します。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}

2D UI を複数の空間パネルに移行する

アプリの UI に単一の空間パネルを使用することも、2D UI を複数の空間パネルに移行することもできます。アプリの UI に複数のパネルを使用する場合は、パネルを配置して回転させることができます（2D で UI をレイアウトする場合と同様）。まず、達成したいことの明確な設計ビジョンから始め、Spatial UI Layout API（SpatialBox、SpatialRow、SpatialColumn、SpatialLayoutSpacer、SpatialAlignment）とサブスペース修飾子を使用して、パネルの UI レイアウトと回転を行います。複数のパネルを実装する際に避けるべき重要なパターンがいくつかあります。

  • 重要な情報がユーザーに表示されないようなパネルの重複は避けてください。
  • パネルを過剰に表示しないようにします。
  • パネルを不快な場所や目立たない場所に配置しないでください。例: ユーザーの背後に配置されたパネルは気づきにくい。
  • 空間 UI の開発について詳しくは、ガイダンスをご覧ください。

空間化されていないコンテンツ

空間化されていないコンテンツ

オービター内の立体化された（XR に対応した）メディア コントロールと、複数の空間パネルに分割されたコンテンツ

オービター内の空間化された（XR に適応した）メディア コントロールと、複数の空間パネルに分割されたコンテンツ

SpatialRow {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

空間機能を追加する

2D UI コンポーネントを 3D に変換するコンセプトを策定して変換を開始したら、アプリに追加できる他の空間機能も検討して、Android XR の差別化されたエクスペリエンスを作成できます。

空間機能を確認する

特定の UI 要素を表示するかどうかを決定する際は、特定の XR デバイスやモードを確認しないでください。機能ではなくデバイスやモードを確認すると、特定のデバイスの機能が時間の経過とともに変化した場合に問題が発生する可能性があります。代わりに、次の例に示すように、LocalSpatialCapabilities.current.isSpatialUiEnabled を使用して、必要な空間化機能を直接確認します。このアプローチにより、新しいデバイスの登場や機能の変更のたびにアップデートを行うことなく、アプリをさまざまな XR エクスペリエンスに適切に適応させることができます。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

環境を使用してユーザーの周囲を変更する

ユーザーの周囲の環境を変更して、アプリへの没入感を高めたい場合は、環境を使用します。コードに環境を追加することは、アプリの既存の UI に大きな影響を与えることなく行える簡単な変更です。環境の設定について詳しくは、ガイダンスをご覧ください。

3D コンテンツを追加する

3D モデルや空間動画などの 3D コンテンツは、より没入感のあるエクスペリエンスの作成と空間認識の追加に役立ちます。アプリで 3D コンテンツを表示できるのは、空間機能が利用可能な場合のみです。そのため、まず空間機能が利用可能かどうかを確認する必要があります。

3D モデル、空間動画、空間音声の追加については、該当するガイドをご覧ください。