2024/12/20
Android XR アプリ開発 | Spatial UIについて(Material DesignとSpatial panel編)
はじめに
Android XRアプリ開発は、従来のモバイルアプリとは異なる、革新的なユーザー体験の創造を可能にします。特に、Material DesignのコンポーネントとSpatial UIを組み合わせることで、ユーザーは没入感あふれる、直感的で快適な空間体験を享受できます。本記事では、Android XRにおけるMaterial Designの活用方法、Spatial panelの特性と最適な配置、そして独自の空間レイアウト構築について説明します。
(この記事は、Android XR Advent Calendar 2024 の21日目です。)
Material Designのコンポーネントとレイアウトの活用
Android XRアプリを開発する際には、Material Designのコンポーネントライブラリと、画面サイズや向きに合わせて変化するアダプティブレイアウトを活用してください。これらの便利な部品を使うことで、開発の手間を減らし、アプリの重要な機能や新しいアイデアの開発に集中できます。
Android XR向けのMaterial Designでは、Material 3のコンポーネントとアダプティブレイアウトに、Spatial UI ならではの挙動が追加されています。これにより、アプリがプラットフォームに自然に馴染み、空間を最大限に活用できるようになります。
Material 3 Design Kit
Material 3 Design Kit の Figmaデッキは以下にあります。
https://www.figma.com/community/file/1035203688168086460
Spatial panel
Spatial panel は、Android XR アプリの基本構成要素です。これを使用すると、ユーザーの空間全体にコンテンツを展開し、制限のない空間で差別化された XR 体験を構築できます。Spatial panel は、UI 要素、インタラクティブなコンポーネント、没入型コンテンツのコンテナとして機能します。
UI のスケールと動きの仕組みを理解する
Spatial panel は、ユーザーとの距離に応じて自動的にサイズを調整します。この動的スケーリングにより、UI 要素は異なる距離から見た場合でも読みやすく、操作しやすい状態を保ちます。サイズは 0.75 メートルから 1.75 メートルの範囲内で一貫していますが、それ以降は 1 メートルあたり 0.5 メートルのスケーリング率で縮小し、要素が小さく見えるようになります。
システム UI との干渉を避けるため、以下のデフォルトのパネル移動範囲を守りましょう:
最小深度:ユーザーから 0.75 メートル
最大深度:ユーザーから 5 メートル
ユーザーは spatial panel を拡大または縮小して、距離に関係なく十分に見やすいサイズに調整できます。ユーザーが spatial panel を移動すると、Android XR は自動的にそのサイズを調整します。
Spatial panel のサイズ
Android XR は、快適で読みやすく、幅広いユーザーにとって使いやすいものにするよう設計されています。最適な体験を提供するために、システムは 0.868 dp-to-dmm を使用します。ヘッドセットで表示される場合、アプリはスマートフォンやタブレットで表示する場合よりもユーザーから遠くに見えるため、操作しやすくするためにサイズを大きくする必要があります。
dp-to-dmmとは
Android のデザインにおける「密度独立ピクセル(dp)」と「ミリメートル(dmm)」の比率を指します。具体的には、UI 要素が物理空間でどれくらいの大きさに見えるべきかを定義するスケール変換です。
dp(density-independent pixel): スクリーンの解像度に依存しないピクセル単位で、異なるデバイスで一貫した UI サイズを保つために使用されます。
dmm(dynamic millimeter): Spatial UI での物理的な寸法を表す単位で、ヘッドセットや Android XRデバイスでの実際の視覚的スケールに対応します。
0.868 dp-to-dmm は、1dpがヘッドセット内で 0.868ミリメートルに相当するスケールで表示されることを表します。このスケールは、Android XR 環境での視認性と快適性を考慮して設定されています。
Spatial panel の最大サイズ
Full Space では、spatial panel に最小サイズの制限はありませんが、物理的な制約により最大サイズは 2560dp × 1800dp に制限されています。
Spatial panel の配置場所
Full Space では、パススルー と 仮想環境 の両方でパネルの配置を決定できます。ユーザーが Home Space から Full Space に切り替えると、Spatial panel やその他の UI コンポーネントは、カスタム位置を指定しない限り、自動的に前と同じ場所に配置されます。
パネルの中心をユーザーの視線から 1.75 メートルの距離に配置します。パネルの垂直方向の中心は、ユーザーの目線から 5度下に配置します。ユーザーは自然に視線を下に向けることが多いため、快適さを最大化できます。
最適な快適さを得るために、コンテンツをユーザーの視野の中央41度に配置します。これにより、視認性が向上し、過度な頭部や体の動きを最小限に抑えることができます。
ユーザーは空間内を動き回ることができ、Spatial panel は所定の位置に留まります。
Android XR には、ユーザーがコンテンツを操作しやすくするためのインタラクションパターンがあらかじめ用意されており、開発プロセスを簡素化します。ユーザーは自分の周囲の空間に合わせてコンテンツを移動できます。また、移動やサイズ変更の動作を設定することができます。
安定感と方向感覚を維持するため、Spatial panel を床、椅子、壁、天井、テーブルなど、特定の場所に固定できるようにすることができます。この固定機能はパスルルーのみ利用できます。
独自の空間レイアウトの構築
アプリを複数の Spatial panel に分割し、任意のレイアウトで配置できます。Spatial UI の API にはパネルの数に制限はなく、行と列、平面および曲線の行でレイアウトを作成することができます。Spatial panel の位置は、特定の場所でも任意の場所でも設定できます。
平面の行配置レイアウト
曲線の行配置レイアウト
任意の位置配置レイアウト
注意
重要な情報が隠れるような空間レイアウトは避けてください。
まとめ
Android XRアプリ開発において、Material DesignとSpatial UIは、革新的な空間体験を実現するための強力なツールです。Spatial panelの特性を理解し、適切な配置とインタラクションを設計することで、ユーザーに没入感と快適性、そして直感的な操作性を提供できます。
参考情報
Android XRとは|できること、デバイス、開発ツールなど解説
Android XR の情報について以下の記事をご参照ください。
https://ar-marketing.jp/android-xr-what-it-can-be-used-for-devices-tools/
Android XR 技術ブログ
https://1planet.co.jp/tech-blog/category/AndroidXR
空間コンピューティングやARアプリ開発に対する弊社の取り組み
空間コンピューティングやARアプリ開発の取り組みについては、こちらをご覧ください。
https://1planet.co.jp/work/consulting
お問い合わせ
AR関するご依頼・ご相談など、お気軽にお問い合わせください。
https://1planet.co.jp/contact
XR エンジニア
徳山 禎男
SIerとして金融や飲料系など様々な大規模プロジェクトに参画後、2020年にOnePlanetに入社。ARグラスを中心とした最先端のAR技術のR&Dや、法人顧客への技術提供を担当。過去にMagic Leap 公式アンバサダーを歴任。
View More