AppleからVision Proが発売されて、Human interface guidelinesもアップデートされいました。
この記事では、Human interface guidelinesの「空間レイアウト」についてまとめます！
Spatial layout（空間レイアウト）
このセクションでは、Vision Proの無限のキャンバスを有効活用し、ユーザに負担をかけず、魅力的にコンテンツを提供するための方法がまとまっている
⚪︎ 視野
Apple Vision Proを装着しているときの各ユーザの視野の広さは、ライトシーリングの設定や個々の周辺視力の程度などに左右されます。
- Vision Pro 購入時に、顔をスキャンして、購入者にあった
ライトシーリング・ライトシーリングクション付き、ライトシーリングの設定がVision Pro に連携されている - 視力矯正に使う ZEISS_LENSES は、購入者が後で設定する
| ライトシーリング | ライトシーリングクション | ZEISS_LENSES |
|---|---|---|
 |
 |
 |
ユーザの視野に関する情報を提供しません。
重要なコンテンツは視野の中心に配置する
基本的にアプリは、ユーザの正面で起動し、ユーザの視野の中に配置される。
イマーシブ体験では、ユーザの視線を重要なコンテンツに向けるために、重要なコンテンツを常に中央に配置するようにし、周辺に邪魔になる動きや、コントラストの高い明るいオブジェクトを表示しないようにする
| 背筋を伸ばした姿勢 | 体を倒した姿勢 |
|---|---|
 |
 |
装着者の頭にコンテンツをアンカリングしない
アプリは視野の中に留めておくのが基本ではあるが、装着者の頭を基準にコンテンツを固定すると、「ここから抜け出せない」「コンテンツに縛られている」「不快」に感じてしまうかもしれない。
ユーザが自然に周囲を見渡して、ほかの位置にあるほかのオブジェクトも見ることができるように、コンテンツはユーザの空間に固定する方がよい。
⚪︎ 奥行き
人は、物体との距離や、物体同士の前後関係、影などの視覚情報をもとに周囲の環境を把握している。
Apple Vision Proでは、色温度・反射・影などの視覚エフェクトを自動的に使用して、
仮想コンテンツに奥行き感を与える。
ユーザが仮想オブジェクトを移動した時 や ユーザとオブジェクトとの相対的な位置関係が変わった時は、
視覚エフェクトによってオブジェクトの見かけ上の奥行きが変化することで、
現実らしく感じられるようになっている。
インターフェース
オブジェクトはどのような角度からでも見ることができるので、
インターフェイス全体にわずかな奥行きを与えると、自然な見た目のインターフェイスになる
SwiftUIを使用する場合は、2Dウインドウのビューに自動的に視覚エフェクトが追加され、奥行き感が与えられます。
3Dオブジェクトはどこにでも表示できますが、3Dコンテンツを表示するボリュームというコンポーネントを使うこともできます。（ボリュームはウインドウに似ていますが、フレームは表示されません。）
| 2D Window | VolumeTricWindow |
|---|---|
 |
 |
コンテンツの奥行きを正確に伝える視覚情報を提供する
視覚情報がなかったり、視覚情報が現実世界での体験と矛盾していたりすると、視覚的な不快感が生じるので、コンテンツの奥行きを正確に伝える必要がある
奥行きで階層を伝える
奥行きは、オブジェクトと周囲のコンテンツとの間に視覚的な差を付け、オブジェクトをより目立たせるのに役立つ。
テキストには基本的に奥行きを付けない
周囲の映像から浮いたように見えるテキストは読みにくく、ユーザの読む速度が落ちてしまいます。
奥行きに意味を持たせる
奥行きは明快にしたりユーザを楽しませたりするために使うもの。
すべてに奥行きを出す必要はありません。
デザインに奥行きを出す場合は、オブジェクトのサイズと相対的な重要度を考えましょう。
例えば、タブバーやツールバーをウインドウから浮かび上がらせるなど、大きくて重要なアプリ要素を視覚的に区別する
小さいオブジェクトには同じような効果は期待できないかもしれません。
例えば、ボタンのシンボルに奥行きを与えてバックグラウンドから浮かび上がらせると、かえって読みにくく、使いにくくなってしまう可能性がある
アプリ内で何種類も奥行きを使う場合は使用頻度に注意しましょう。
奥行きがそろっていない場合、ユーザは奥行きが変わるたびに目のピントを調整しなければならず、それをあちこちで素早く行うと疲れてしまう可能性があります。
⚪︎ スケール
Vision Proでは、見かけの奥行きを維持しつつ使いやすさを最適化するために、2つのタイプのスケールが定義されています。
Dynamic Scale と Fixed Scale
Dynamic Scaleは、ウインドウが装着者から離れるとウインドウのスケールが自動的に大きくなり、近づくとスケールが小さくなることで、どの距離にあるときでも同じサイズに見えるスケール
Fixed Scaleは、装着者との距離にかかわらずオブジェクトのスケールが一定に保たれるスケールで、
物理環境と同様に、近いオブジェクトは大きく、遠くのオブジェクトは小さく見える
| Dynamic Scale | Fixed Scale |
|---|---|
 |
 |
仮想オブジェクトを現実世界の物体のように見せたい場合はFixed Scaleの使用を検討する
ユーザが自分の空間に表示したときによりリアルに見えるように、実物のサイズを維持したい場合は、Fixed Scaleを使う
近くにあっても遠くにあっても使いやすい大きさである必要があるのの場合は、Dynamic Scaleを使い、Fixed Scaleは必要を控えめにする
⚪︎ ベストプラクティス
表示するウインドウを多くしすぎない
ウインドウが多すぎると周囲の環境が隠れ、圧迫感や束縛感、あるいは不快感を与えてしまうかもしれない。
多くのウインドウを動かすことになるため、アプリの位置調整も面倒になる。
標準の間接的ジェスチャを優先する
手を視野の中に持ってこなくても実行できる間接ジェスチャを優先的に使う。
ウインドウを視野の中心に置き直す機能はDigital Crownに任せる
Digital Crownを押すことでコンテンツを自分の正面に置き直すことができる
注視しやすいように、インタラクティブなコンポーネントの周囲には十分なスペースを設ける
インタラクティブなコンテンツを楽に注視できるにしたり、ホバーエフェクトがほかのコンテンツにかからないようにするには、インタラクティブなコンテンツの周りに十分なスペースを確保することが非常に重要になります。
中心間の距離が60ポイント以上、ボタン間のスペースが16ポイント以上になるように配置する必要がある
アプリを使うのに必要な身体の動きを最小限にするかゼロにする
体験を楽しむにはある程度の身体の動きが不可欠というような場合を除き、
誰もがその場から動かずに楽しめるようにする。
大きなイマーシブ体験を配置するときは床を利用する。
床を起点にして大きく広がるコンテンツがイマーシブ体験に含まれている場合は、
フラットな水平平面を使って配置しましょう。
この水平面と床の位置を合わせれば、コンテンツを周囲の環境と継ぎ目なく融合させ、
より直感的な体験を実現することができます。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。