視覚と動きのデザインに関する考慮事項

♪ ♪ ♪ こんにちは 私はMandaです Apple Vision Science Teamの メンバーです 私はHermanで Appleの リサーチサイエンティストです 三次元の体験を作成するには 奥行や完全な視野など 独特なモダリティを使用する必要があります 今日は 視覚的なキューと 3Dコンテンツからの動作情報を通じて 新しいレベルのイマーシブ体験を ユーザーに提供する方法を紹介し ユーザーがアプリを快適に体験するのを 妨害する人間の限界について紹介します Manda: 私たちが提供するガイダンスは 皆さんが快適で楽しい体験を 作成するために役立ちます 視覚的な奥行キュー コンテンツパラメータ 目への負担 バーチャルオブジェクトの動き 固定コンテンツ ウィンドウ内のモーション 振動モーションについてお話しします まず コンテンツが 正確な視覚的な奥行キューを 提供することが重要です その理由は 優れたデザインの3Dコンテンツでは 脳が奥行を認知できるからです 科学について少し説明しましょう 私たちには多数の感覚システムがあり それを通じて現実世界と 仮想世界を体験します 非常に大まかな部分で視覚システムは 皆さんが作成するコンテンツからの 光を取り入れ 目が捉えるものを解釈します そのためデザインに対する決断は 視聴者の目の快適度に 多大な影響を与えます みなさんが意図とする奥行と 視聴者が知覚する奥行は 快適さを提供するために 一致する必要があります 画像が奥行方向に動くとともに 脳は目の筋肉が 視線で合流し その画像の奥行で 固定するように求めます これにより単一の画像を認知できます 目を正確に合流させるために 脳には正確な視覚的な奥行キューが 必要となります 奥行の手掛かりがない場合 視覚的な快適さに影響を及ぼし 相反や誤解につながる場合があります 視聴者は複視や目の疲れなど 不快感を感じる可能性があります 画像キューを使用して 目の快適さを保つ方法を見てみましょう このシトラスの画像のように 非常にまばらな場面に取り組む場合 奥行情報を伝達する 多くの視覚的キューが欠けています 脳は目をどの奥行で合流させるか 判断できなくなり 不快感を引き起こしてしまいます シトラスの色を見ることで サイズキューが有効になります スライスが緑色である場合 脳は以前に認識した ライムの大きさで このスライスが どの奥行で浮いているかを伝達し 正確な奥行きで目を合流させます ぼかしを使って 奥行情報を伝達することもできます 相対的サイズを使用して 画像の奥行キューを 追加することもできます 2つのライムのうちの大きなスライスは 視聴者に近いと知覚されます 穏やかな動きも 視線が奥行のどの部分に向いているかを 伝達します 同僚のHermanが コンテンツで動きを使用する際の ニュアンスについて説明します 今は 目を向けるための キューをもう少し追加しましょう バックグラウンド 光と影 オクルージョン テクスチャ密度などは 欠けている視覚的な奥行きキューを 追加するためのいくつかの方法です キューが相反する場合も問題が生じます 先述のように下のスライスは もう1つより大きく見えるので 近くにあるように見えます このスライスが前にあり 小さいスライスは オクルードされることを期待しています しかしこの場合は 相対的サイズキューが オクルージョンキューと相反し 私たちが期待することを 反対のものを伝達します 奥行キュー間の相反は 目の不快感につながります 相反するキューはまばらな場面では 例外的なことではありません 相反すればするほど 目の快適さに問題が生じます そのため コンテンツの すべての奥行キューが 脳に適切な情報を伝達し 視聴者の視点が意図とする奥行と 合致することを確実にしましょう また 反復的なパターンなど 誤解されやすい視覚キューについても 考慮してください この画面では両目が反復的なパターンの 同じオブジェクトを見ています これはすばらしいことです しかしこちらでは左右の目は 反復的なパターンの 異なるオブジェクトを見ています 脳がそれぞれの目が見る画像を 1つに組み合わせようとすると 反復的なパターンが 意図とするものとは 異なる奥行で知覚されます この相反を軽減し 複視を回避するには パターンの小さな部分を使用するか 別のデザインでパターンを崩してください 奥行知覚についての最後の注意事項を 説明します 3Dコンテンツと視覚的な奥行きキューは それぞれの目に表示される画像を 自動的にレンダリングし ユーザーが意図とされる奥行を 見ることを可能にします ステレオ動画など ステレオコンテンツを 手動でレンダリングする場合に 非常に重要な点は 正確な奥行きキューを 確保するだけでなく 各目に対する正確な視差を確保して 重度の不快感につながる 相反度が高い視覚キューを 回避する必要があります では サイズやコントラストなどの コンテンツパラメータに移りましょう 視覚的に快適なコンテンツは それぞれの特定の視覚体験に 合ったパラメータを持ちます 視覚的な負担を低減する パラメータを選択してください 次の例をご覧ください 読書など 長時間 目を固定させる必要のある コンテンツは 手の届く場所よりも 遠くに配置することで 目への負担が減ります さらに ユーザーがコンテンツの 奥行を調整して 自身の体験で最も快適な 奥行を選択できるようにします 瞬間的な視覚効果を必要とする 体験向けのコンテンツを 視聴者に一番近い場所に残すか 誰かの手が3Dスペースのアイテムと 実際に交差する場合に起こる 直接的なインタラクションが 関連する体験用に残します それ以外の場合は 透明やぼかしなどの 視覚キューを使って目を奥深い場所に 方向づけて視覚的な快適さを向上します

奥行と同様に コンテンツの サイズやコントラストも 視覚的快適さを確保するために デザインする特定の視覚体験と 一致する必要があります たとえば テキストの閲覧には 高度のコントラストを使用し それ以外の場所に視覚的注意を向けるには 低度のコントラストや 透明またはぼかしを使います 長時間の閲覧に合わせて テキストサイズ ウィンドウサイズ 奥行を選択します 頭や体を回転させることなく 楽に目を通すことができるように 読みやすい文字にしてください もう1つ念頭に置いておくべきなのは コンテンツの明るさです この画像のように 自然の大部分が 暗い場合は ゆっくりと 明るい場面に移行して 目が徐々に 明るさに順応できるようにして 目の快適さを確保しましょう 目の快適さでもう1つ覚えておくべきなのは 目への負担です より快適な視覚体験を提供するために 視聴者の目の負担を最小限に抑えましょう 次の方法でそれを行います コンテンツの場所を選択する際は 目が下 または左右に向く場所が 最も快適です 可能な限りそれらの場所を選びましょう 上や斜めに向くことは 目に最も負担がかかります そのような方向に目を固定させると 目の疲労につながります 長時間読むことが必要なコンテンツや 長い凝視が必要なターゲットは 中心部の視覚の少し下に配置して 快適な視覚体験を提供します 過激な眼球回転が必要な 体験には簡単なインタラクションを デザインするか 視界の中心に配置して 眼球回転の負担を低減します ユーザーが一時停止して 目を休めたい場合もあります それを可能にするには ユーザーが目を休められるように 自然なブレークポイントを導入します 目の快適さに関しては以上です 次は同僚のHermanが 快適なモーションのためのアプリのデザイン について説明します Herman: Manda ありがとう それでは これから 皆さんのイマーシブなアプリの コンテンツからの動きの情報が ユーザーの体験に与える影響と 人間の限界が快適さを妨げる点について 説明します まず 科学についてもう少し 深く探ってみましょう 私たち人間は多数の感覚システムを使って 実世界と仮想世界を体験します 視覚システムは光を取り入れ 知覚するものを解釈することは すでに理解しましたね 自身の動きはその知覚の一部です 内耳の前庭器官も 自身の動きを測定します 通常 視覚的な動きに関する情報と 前庭系で知覚する動きは 常に一致します しかし視覚的な動きの情報が欠落している場合 または前庭系と矛盾する場合 動きに対する不快感を感じます めまいや胃のむかつきがその例です 優れたデザインのコンテンツは 脳が 世界が定常であると知覚することを 可能にします これにより動きの快適さに必要な 安定感が提供されます 動きに関する例を見て 動きの快適さを保つ方法を学びましょう まずは仮想オブジェクトの動きの例です この青い多面体のような 1つまたは複数の仮想オブジェクトが 視界の大部分を占め 動いた場合 視聴者の脳はそのオブジェクトの 視覚的な動きの情報を視聴者が 動いたかのように解釈します これは安定感に影響を及ぼし 不快感を起こします デザイナーは オブジェクトが動くときに 半透明にすれば 通過するコンテンツは オブジェクトの移動中 明確に視認できるため 不快感を軽減できます 固定コンテンツの使用は できる限り避けましょう これはユーザーの頭に固定された コンテンツを意味します 固定コンテンツは常に視界の 同じ位置に存在します 固定コンテンツが必要な場合は ウィンドウサイズを小さくし 視線の中央付近に配置し 視聴者から遠い場所に配置します できる限り 「world-locked」表示を使用し コンテンツが行き詰ったように 感じないようにします lazy-followアニメーションを 使用することもできます これはコンテンツを目的の場所に ゆっくり経時的に移動させます 仮想ウィンドウに表示される コンテンツの動きにも気をつけてください この仮想風景のように ウィンドウのコンテンツが 動く場合

視聴者の脳はこの視覚的な動きを 視聴者自身が動いていると 解釈する場合があります

動きに対する最良の快適さを提供するには カメラの動きに気をつけてください まずウィンドウのコンテンツを 実際の水平線にあわせて 水平に保ちます すべてのピクセルの開始点は 拡張焦点と呼ばれます その方向に向かうと 人は自然とその点に 目を向ける傾向があります 拡張焦点の動きが ゆっくりで予測可能になるように カメラを動かします また 拡張焦点は 視野の中におさめます つまり急に曲がったり 純粋な回転運動は避けます その場合 拡張焦点は 視野の外に移動してしまいます 高速の回転を使用する代わりに フェードアウト中に 瞬間的な方向転換を行えます 動きの快適さを最適化するには 画面の右のように 近距離で大きなオブジェクトを 近づけるのは避けましょう 画面左のように 小さなオブジェクトを 大きな間隔で配置します さらに 輝度コントラストが低い 単純なテクスチャを使用すると 目は動きを知覚しにくくなります 最後に気を付けるべきなのは 持続振動するオブジェクトや 動画への対応です 快適な体験を提供するために 一般的に振動は避けます 特に5秒あたり1回振動する 周波数が0.2ヘルツの 振動は避けてください 振動を避けられない場合は 動きの振幅を低くし コンテンツを半透明にします これにより左の画像のように 目が動きを 知覚しにくくなります また Reduce Motionの アクセシビリティ設定を介して 振動なしのオプションを提供することを おすすめします では動きの快適さをデザインするための ヒントをおさらいしましょう 安定感を提供し 固定コンテンツを避けます カメラは穏やかに動かし できるだけ振動は避けます 空間デザインの原則の詳細と 視覚と運きのガイドラインの実行については こちらに記載されている セッションをご覧ください Manda: 以上です 皆さんが創造するすばらしい体験を 見るのが楽しみです！ Herman: ご視聴ありがとうございます ♪