Android XR のマテリアルデザインについて（UX編）── 色・距離・Elevationで理解する空間UI設計

※ 本記事は 2026/3/31 以前にNTTコノキューにて記載した記事になります

0. はじめに
1. XR UI が難しい理由：視野と背景が UX を不安定にする
- 1-1. 視野角の制約と背景干渉が同時に影響する
- 1-2. XR UI では“はっきり見えること”が最低条件になる
2. Home Space / Full Space の基本と切り替え UX
3. 色設計：XRでは“背景からの分離”が最優先
4. 距離（Z）と物理サイズ：UI の“読みやすい位置”を決める軸
5. Spatial Elevation（0〜5）：UI の“優先順位”を空間的に伝える
6. 透明度と影：UI の存在感を支える基礎要素
- 6-2. 読み取り：UI を背景から切り離すための設計
- 6-3. 実務で安定する調整
7. まとめ
8. おわりに
参考文献 / リファレンス

0. はじめに

この記事は NTTコノキューアドベントカレンダー2025 の一記事です。

こんにちは、NTTコノキューの牧野です。

私はもともと Web / サーバサイドを中心に開発してきましたが、近頃 Android XR（Jetpack XR）の検証を進めています。公式ガイドラインを読み解きながら、“空間UIならではの設計要件”が見えてきました。

XR の UI は “現実空間に重ねて表示される” という性質から、背景の明るさ・距離・視野角・視線移動など モバイルUIとは異なる外的要因 に左右されます。

本記事では、Google の Android XR 公式ガイドライン をベースに、空間UIを設計する上で意識すべき 色・距離・Elevation・影 のポイントを整理します。

XR UI の基礎をつくる内容ですので、Android / XR / UI デザインに携わる方の参考になれば幸いです。

1. XR UI が難しい理由：視野と背景が UX を不安定にする

XR UI がモバイルより難しいのは、視野角の制約 と 現実背景の干渉 が常に重なるためです。

この2つが UI の“見えやすさ”を揺らし、UXの不安定さにつながります。

1-1. 視野角の制約と背景干渉が同時に影響する

● 視野角の制約

Android XR デバイスの視野角は広くありません。公式ガイドでは：

UI は 視野中心 41°以内 に置く

パネルは 視線より 5°下 が負荷が少ない

といった推奨が示されています。 視界外に置かれた UI は気づけない／頭部移動が増える という問題が発生します。

● 背景干渉（Background Interference）

公式ガイドでは、以下の点が繰り返し説明されます。

明るい背景で UI が薄く見える
背景と近い色相の UI は境界が曖昧
暗所ではコントラストが過度に強く見え、疲れやすい

→ XR UI は “視野の制約 × 背景の揺らぎ” により、 モバイル以上に視認性が不安定 になります。

1-2. XR UI では“はっきり見えること”が最低条件になる

上記の不安定さを前提とし、公式ガイドでは次の方向性が示されています。

コントラストは強めに
透明度（半透明UI）は控えめに
影や Elevation で前後関係を明確に
読みやすい距離（約1m）で提示
視野中心に UI を置く

これらは “派手な UI を作る” のではなく、 環境の影響で消えないために必要な最低ライン としての指針です。

2. Home Space / Full Space の基本と切り替え UX

Android XR アプリは、Home Space と Full Space の2つの表示モードを切り替えて使います。空間UIの設計に入る前に、この違いを押さえることが重要です。

2-1. Home Space（2Dウィンドウ型）

浮かぶパネル（ウィンドウ）として表示される
複数アプリのマルチタスクが可能
既存 Android アプリも追加対応なしで動作
大画面向けに最適化された Android アプリは最適に適応する
空間UIはサポートされていません。

→ 読み物UIや設定など “2Dで完結する UI” に適しています。

2-2. Full Space（空間全体を使う没入モード）

アプリが空間全体を専有
Spatial Panel、3Dオブジェクト、空間オーディオなどを活用
距離・角度・Elevation が UX に直結
ユーザーが一つのアプリに集中する

→ 空間UI（Spatial UI）が本領を発揮するモードです。

2-3. モード切り替え実装イメージ（Compose for XR）


// Home Space / Full Space のレイアウト切り替えイメージ
@Composable
fun XrApp() {
    val isSpatialUiEnabled = LocalSpatialCapabilities.current.isSpatialUiEnabled

    if (isSpatialUiEnabled) {
        // 空間 UI 利用可能 → Full Space 用レイアウト
        // 例：SpatialPanel、3Dモデル、空間レイアウト など
        FullSpaceUI()
    } else {
        // 空間 UI 利用不可（＝Home Space 相当）→ 2D Compose レイアウト
        HomeSpaceUI()
    }
}


// Orbiter に配置するモード切り替えボタンのイメージ
@Composable
fun RequestModeToggleButton() {
    val spatialConfig = LocalSpatialConfiguration.current
    val isSpatialUiEnabled = LocalSpatialCapabilities.current.isSpatialUiEnabled

    Orbiter {
        IconButton(
            onClick = {
                if (isSpatialUiEnabled) {
                    // Full Space → Home Space
                    spatialConfig.requestHomeSpaceMode()
                } else {
                    // Home Space → Full Space
                    spatialConfig.requestFullSpaceMode()
                }
            }
        ) {
            Icon(
                imageVector = if (isSpatialUiEnabled) {
                    Icons.Default.Home      // Full → Home
                } else {
                    Icons.Default.ViewInAr  // Home → Full
                },
                contentDescription = null
            )
        }
    }
}

※ あくまでイメージになります。公式サンプルなどを参考に実装してください。

2-4. 切り替え UI の UX（公式ガイドからの要点）

Orbiter（Level1）に固定配置

→ Home/Full どちらでも見失いにくい

状態が分かるアイコンを使う

→ “どちらのモードか” の混乱を防ぐ

アニメーションは控えめ（150–250ms）

→ 急な動きは酔いを招きやすい

2-5. 以降の章を読む前提

パネル距離は Z ≒ –1.0m を基準に説明
Elevation は主に Full Space を前提に扱う
Orbiter は Home/Full 共通の軽操作UIとして解説

3. 色設計：XRでは“背景からの分離”が最優先

XR の色設計の中心は、背景干渉を避けて UI を空間から切り出すことです。公式ガイドには、照明や壁色によって UI が沈みやすいことが何度も言及されています。

3-1. 色設計の基本（公式ガイドの主張）

明るい背景では UI が見えにくい
背景と近い色相は境界が曖昧
視認性確保には十分なコントラストが必要

→ XR では「背景に負けない色」が必要になります。

3-2. 読み取り：設計意図

淡い色・控えめな色は環境光に吸収されやすい
半透明は想定以上に薄く見える
色・影・透明度で境界を補強する必要がある

3-3. 実務で安定する色の使い方

* コントラストを強めに

テキスト 5.5:1 CTA/Orbiter 7.0:1以上

* 透明度は α=0.9〜1.0

→ 半透明は環境光で境界が消えやすい

* 背景との色相差（Hue Contrast）をつける

→ 暖色背景→寒色UI／寒色背景→暖色UI

* 現実環境で必ず見え方確認

→ 白壁・暗所・暖色照明など複数環境でチェック

4. 距離（Z）と物理サイズ：UI の“読みやすい位置”を決める軸

距離（Z）は、読みやすさ・視線移動・ピント調整を左右する XR UI の中心要素です。

4-1. 公式ガイドが説明する距離の考え方

UI は 0.75〜5m の範囲で提示される
dp → 物理サイズは 0.868係数で距離によって変化
1.75m に配置されたパネル例が紹介されている

→ 距離によって UI の物理スケールは必ず変わる前提。

4-2. 読み物UIでは“約1m”が扱いやすい

公式は最適距離を断言していませんが、読み物UIで多く採用されるのは約1 ~ 2m です。

文字が読みやすい
視線移動が少ない
ピント調整が自然
情報密度が適切に保てる

→ 詳しくは触れませんが、人間工学的配慮から負荷が少ない距離 とされています

Microsoft Mixed Reality ガイドラインなどが参考になります。

4-3. 距離と物理サイズの理解

XR では dp を物理寸法（dmm）に変換するときに距離に応じてスケール補正が入るため、同じ 48dp でも距離が変わると “実際の大きさ” が変わります。これは遠くにある UI が読めなくならないように自動的に拡大される仕組みで、XR 特有のサイズ設計です。そのため、UI の大きさは dp だけでなく距離を含めて考える必要があります。

4-4. UI 種類ごとの距離帯

Panel（読み物UI）：約1m
大型Panel・ギャラリー：1.5〜2m
小型UI：0.75〜1m

用途によって最適な距離帯が異なる前提で使うと設計が安定します。

4-5. 基準の距離を決めると Elevation が整理しやすい

Level0（Panel）：1m に置く
Level3（Popup）：Panel より手前に見える
Level5（Dialog）：最前面として“寄ってくる”印象

→ 距離が決まると、Elevation の序列が自然に理解できます。

5. Spatial Elevation（0〜5）：UI の“優先順位”を空間的に伝える

Elevation は、UI の浮き方・前後関係を整理する視覚レイヤーです。物理距離とは別に UI の重要度 を示す仕組みとして働きます。

5-1. 公式ガイドが説明する Elevation の考え方

Elevation には 0〜5 のレベルがある
数値が大きいほど手前に“浮いて見える”
Dialog, Popup, Orbiter などはレベルごとに序列がある
距離（Z）とは独立した概念

5-2. レベルと主なコンポーネント

Level	Component	役割
5	SpatialDialog	最重要UI（最前面）
4	-	Dialog直前の強調
3	SpatialPopup	補助情報・サブ操作
2	-	軽度の前面化
1	Orbiter	常時使う操作UI
0	SpatialPanel	標準読み物UI