2024/12/21
Android XR アプリ開発 | Spatial UIについて(Orbiter、Spatial elevation、アクセシビリティ編)
- はじめに
- Orbiterについて
- Orbiterの使用時の推奨事項
- Home space おけるMaterial Designの平面的な Navigation rail
- Full space おけるMaterial Designの空間 Navigation rail
- Home space おけるMaterial Designの平面的な Navigation bar
- Full space おけるMaterial Designの空間 Navigation bar
- ガイドライン
- 避けるべきデザインパターン
- Spatial elevation
- 大画面アプリにおけるMaterial Designのダイアログ
- Android XRで空間的な標高を利用したダイアログ
- 大画面におけるMaterial Designのドロップダウンメニュー
- Android XRで標高を使用したドロップダウンメニュー
- 避けるべきデザインパターン
- 大きなターゲットサイズをデザインする
- タイポグラフィをアクセシブルにする
- まとめ
- 参考情報
- Android XRとは|できること、デバイス、開発ツールなど解説
- Android XR 技術ブログ
- 空間コンピューティングやARアプリ開発に対する弊社の取り組み
- お問い合わせ
- https://1planet.co.jp/contact
はじめに
Android XRにおけるユーザーエクスペリエンスを向上させるためには、Orbiterのような革新的なUI要素の活用だけでなく、空間的な高さ(Spatial Elevation)、適切なターゲットサイズ、アクセシブルなタイポグラフィといった要素も重要です。この記事では、Spatial Panel内のコンテンツ操作をするUI要素Orbiterを中心に、Spatial elevation、大きなターゲットサイズのデザイン、アクセシブルなタイポグラフィについて解説します。
(この記事は、Android XR Advent Calendar 2024 の22日目です。)
Orbiterについて
Orbiterは、Spatial panel の中にあるコンテンツを操作するための、空中に浮かぶUI要素です。これを使うと、コンテンツを表示するスペースを広く確保でき、メインのコンテンツを表示したまま、ユーザーが色々な機能に素早くアクセスできるようになります。Orbiterは、既存のUI部品を組み込んだり、新しいUI部品を自分で作るなど汎用性に富んでいます。
Orbiterの使用時の推奨事項
Orbiterの多用は推奨されません。必要最低限の使用に留めるべきです。空間化されたUI要素が多すぎると、コンテンツへの集中を妨げたり、ユーザーが混乱して操作に手間取る可能性があります。そのため、Navigation railやNavigation barといった主要なナビゲーションコンポーネントだけをSpatial UIに取り入れることをおすすめします。
Home space おけるMaterial Designの平面的な Navigation rail
Full space おけるMaterial Designの空間 Navigation rail
Home space おけるMaterial Designの平面的な Navigation bar
Full space おけるMaterial Designの空間 Navigation bar
ガイドライン
パネルのパディングを調整することで、そのフレキシブルな配置またはパーセンテージに基づく配置を制御します。
OrbiterのY軸方向の位置を決定します。推奨される視覚的な距離は20dpです。
必要に応じて、OrbiterのZ軸方向の位置を調整します。デフォルトでは、Z軸方向に15dpの高さで配置されます。
パネルのリサイズ時に、サイズを固定または可変に設定できます。
コンテンツに合わせてOrbiterが動的に拡張するかどうかを決定します。
避けるべきデザインパターン
Orbiterの50%を超える重複は避けてください。
Orbiterを空間パネルから過度に離れた位置に配置しないでください。
絶対座標(X/Y)の使用は避けてください。
Orbiterの過剰な使用は避けてください。
Spatial elevation
コンポーネントに空間的な標高を追加すると、そのコンポーネントはZ軸上で空間パネルの上に表示されます。これにより、ユーザーの注意を引き、階層が明確になり、可読性が向上します。
プレビュー
Android XRは開発者プレビュー中です。空間的な標高レベルは今後のリリースで変更される可能性があります。
大画面アプリにおけるMaterial Designのダイアログ
Android XRで空間的な標高を利用したダイアログ
大画面におけるMaterial Designのドロップダウンメニュー
Android XRで標高を使用したドロップダウンメニュー
避けるべきデザインパターン
ボトムシートやサイドシートなど、大きなエリアや平面を空間化したり標高を付けたりしないようにします。
スクロール可能なコンテンツを持つUI要素に標高を付けないようにします。
大きなターゲットサイズをデザインする
Android XRアプリにおけるターゲットとは、ユーザーが操作する対象のエリアを指します。Android XRはMaterial Designのターゲットガイドラインに従い、精度、快適さ、使いやすさを向上させるために、より大きなターゲットを推奨しています。
タイポグラフィをアクセシブルにする
Android XRにおいてフォントの読みやすさは、快適なユーザー体験にとって非常に重要です。読みやすさを向上させるために、14dp以上のフォントサイズと、通常またはそれ以上のフォントの太さを使用することを推奨します。
既存のアプリがMaterial Designガイドラインに従っている場合、すでにAndroid XRに最適化されています。新しいアプリのタイポグラフィは、Material Designに基づいて定義することができます。
まとめ
Orbiterは、空間UIを活用してユーザーの操作性を高める強力なツールです。しかし、適切に使用しないと、UIが過剰になり、ユーザーに混乱を与える可能性があります。Spatial elevation や ターゲットサイズのデザイン、アクセシブルなタイポグラフィ など、各ガイドラインに従うことで、UXの向上と直感的な操作を実現できます。これらのポイントを押さえた上で、Android XRアプリのUIを最適化し、より快適な体験を提供することができます。
参考情報
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