【Design for VisionOSまとめ】 〜視覚と運動に関するデザインの考慮事項編〜
こんにちは、MESONでディレクターをしているtaka(@takataka530)です。今年の6月、WWDCにて、AppleからVisionProがついに発表されましたね。デバイスとともに、SpatialComputing領域でのデザインのガイドライン(visionOS)も発表されました。
MESONでは、「知を通わせる」ことをテーマにチームでナレッジの体系化を進めており、その一環として、VisionOSのガイドラインの整理も進めています。
今回はその第1弾。「Design considerations for vision and motion」(視覚と運動に関する設計上の考慮事項)の動画内容をまとめていきます。
※対象の動画は、下記リンクより閲覧いただけます。
I.安定感を提供する
ユーザーの目に快適な奥行きの表現
ユーザーの3Dコンテンツの閲覧時に快適な視界を提供するために、デザイナーはいくつかの要素に注意を払う必要があるとのことです。
１）対象物の認識と推測
私たちが見慣れた物体や色を目にした時、脳は既存の知識（その物体の大きさや表示位置の深さなど）を利用して、正確に視線を収束させることができる。
２）相対的な大きさ
複数の物体を配置し、大きいものを閲覧者から近い位置に配置することで、奥行き感の手がかりをユーザーに提供することができる。
３）その他
背景や光と影、テクスチャの密度、オクルージョン(手前にある物体が背後にある物体を隠して見えないようにする状態)などの要素を追加することで、より閲覧者の視線が負担少なく誘導されます。
読書体験で考える場合・・・
・コンテンツ配置は、腕の長さよりも遠くに (長時間目を凝らすため)
・コンテンツの深さを快適な位置で調整できるように
・視聴者に最も近い位置にあるコンテンツは、焦点を合わせるなどの労力が一瞬のものにする。難しい場合は、透過やぼかしの表現を用いて、視線が自然と奥に向かうようにする
・コントラストは、テキストを読むときは高く。別の場所に視線を向ける際は低くする。
・コントラストの明るさが変化する場合(暗→明)、目が明るさに順応できる時間を持たせて切り替える。(※下記写真参照)
https://developer.apple.com/videos/play/wwdc2023/10078/
ユーザーの目に快適な視線の動き
○快適な視線の動き
・目線を下に向けたり、左右に視線を向ける
×負担がかかる視線の動き
・上や斜め方向に視線を向ける (最も眼筋の力を必要とする)
長時間の読書や、特定の目標を集中的に注視する必要がある体験の場合・・
・視線の中央よりやや下に、対象物を配置する
・極端な視線回転などが必要な場合は、短時間のインタラクションにするか視野の中央に移動させる
改めて整理した内容を見てみると、負担が少ない動作は、普段私たちが日常生活でとっている動作の延長上にあるのが分かります。SpatialComputingでデザインを設計する際も、技術に引っ張られて難しく考えず、まずは一度現実の生活での動作を丁寧に観察することが重要そうですね。
II.頭の動きに固定されたコンテンツを避ける
通常、視覚の運動情報と内耳にある前庭系(平衡感覚を司る神経)で知覚する運動は常に一致しています。ただ、情報のズレや片方の情報の欠落があると脳が混乱して不快感を感じます。(車の中でスマホを見ていると気持ち悪くなってしまうのも似たメカニズムによるものだと思われます)
デザインする上では、視聴者の脳が、オブジェクトの動きを視聴者自身の動きとして誤って解釈してしまわないように、配慮することが大切です。
▼動画内で挙げられている具体的な対策例
１）オブジェクトが動いている際は、それが半透明になるようにする
２）ユーザーの頭の動きに固定されたコンテンツは表示させない
もし常に同じ位置に表示が必要な場合は、視線の中央付近で、視聴者から離れた位置で小さなウィンドウズ・サイズを使用する。
３）遅延追従アニメーションを使う
視線が動いた後で、時間差でコンテンツが追って表示されるようにする。
IV.カメラの動きを穏やかにする
拡張焦点(Focus of Expansion)への配慮
全てのピクセルがどこからこちらに向かって来ているかのように見える点(拡張焦点)を、人は目的地として自然と見てしまう傾向がある。この性質に沿ったデザインにすると、ユーザーの負担が少なくなる。
▼動画内で挙げられている具体的な対策例
１）いきなり動画を急旋回させたり回転させない
拡張焦点が特定できなくなるのに加えて、焦点が視野の外に移動してしまうこともあるため。
２）大きな物体を至近距離で動かさない (※下の画像参照)
オブジェクトは小さく、距離を離すのがベスト。また、輝度コントラストが低く、プレーン(平らで地形の変化が少ない)テクスチャを使用すると良い。
V.揺れ動きを避ける
0.2Hz前後(5秒に1回)の揺れ動きを避けるようにする。少し分かりにくいですね。揺れ幅が大きくて、揺れの往復時間が短い動きは避けるようにすると解釈すると分かりやすそうです。
▼動画内で挙げられている具体的な対策例
揺れ動きが避けられない場合は、以下の対処で動きを感じにくくする
１）振れ幅を小さくする
２）揺れ動くコンテンツを半透明にする。
今回のまとめは以上になります！SpatialComputingのデザインを学習・実践される際に、何かしらのご参考になれば幸いです。引き続き、VisionOSの解説動画を整理・アップしていく予定です。
その他の記事は以下からご確認いただけます！
最後に、私が所属している「MESON」はSpatialComputing領域におけるUXを強みとしたクリエイティブカンパニーです。いま全職種積極採用中ですので、少しでも興味を持っていただいた方、是非一度お話ししましょう！
noteも是非フォローよろしくお願いします！