はじめに
AppleからVision Proが発売されて、Human interface guidelinesもアップデートされいました。
この記事では、Human interface guidelinesの「イマーシブ体験」についてまとめます！
Immersive experiences （イマーシブ体験）
Immersive
没頭させるような・夢中にさせる
Vision Pro でアプリを実行には、共有スペースとフルスペースどちらかを選択する必要があります。
-
共有スペース：複数のアプリを同時に実行できる
- ツール系のアプリは共有スペースを選択した方がいいかも
-
フルスペース：アプリが単独で実行され、他のアプリが非表示なる
- ゲーム系などのイマーシブ感が大切なアプリは、フルスペースを先tなくした方がいいかも
| 共有スペース | フルスペース |
|---|---|
 |
 |
イマーシブ感とパススルー
パススルー とは
デバイスの外側のカメラが捉えたリアルタイムの映像のこと
Apple Vision Proを装着しているとき、ユーザはパススルーを使って周囲の物理環境を見ることができる。
これによりユーザは、周囲の物理環境を把握しながら安心して利用できるようになる。
| パススルーの量が少ない | パススルーの量が多い |
|---|---|
 |
 |
Digital Crown
ユーザーはDigital Crownを使用して、アプリやゲームのコンテンツを管理したりパススルーを調整することができる
（パススルーを調整 → イマーシブ状態 とパススルーを切り替えることができる）
- 例えば
- （イマーシブ スライダーを見てる時）Digital Crownを回す → パススルーを調整する
- （音量 スライダーを見てる時）Digital Crownを回す → 音量を調整する
- Digital Crownを長押し → コンテンツの再配置
- Digital Crownをダブルクリック → すべてのコンテンツを短時間非表示にする
特定の状態でパススルーを調整している
以下の条件で、パススルーの量が増え周囲の景色が見えやすくなる
- ユーザーが速く動きすぎた時
- オブジェクトに近づきすぎた時
- イマーシブ感の高い状態で、ユーザの頭が境界に近づいた時
- 境界 → 装着者の頭の初期位置から半径約1.5メートルの範囲
- 境界を越えると、体験が停止し、ユーザが元の位置に戻るか、視野内で中央を再設定すると再開する
ユーザーをコンテンツに引き込む
共有スペースで、複数ウインドウがあったり、フルスペースで、パススルーの量が多いく周囲の状況が見える時には、ユーザーをコンテンツに引き込むことが必要です。
ユーザーをコンテンツに引き込む・注意を向けるように開発する必要がある
- 共有スペースで実行しているときにコンテンツに注意を向けさせる
- パススルーやそのほかの見えているコンテンツを少し暗くするように、システムに指示する
- 参照) SurroundingsEffect
- 3Dコンテンツをフルスペースで表示する
- 標準のウインドウだけでなく、ウインドウに縛られない3Dコンテンツを表示する
-
コンテンツとユーザの周囲の環境を組み合わせる（mixed）
- 近くにある現実の物体や部屋のレイアウトに関する情報へアクセスし、仮想コンテンツを表示させ、注意を向けるようにする
-
progressiveイマーシブ体験を提供する（progressive）
- progressiveスタイルを使用して120～360度のカスタム環境を表示させる
-
完全イマーシブ型の体験を作成する（full）
- パススルーを使用せずにユーザを360度包み込むカスタム環境を提供し、新しい場所に来たかのような体験を作り出す
ベストプラクティス
-
アプリの使用方法やゲームのプレイ方法を複数提供する
- ユーザが体験を選べるようにするだけでなく、ユーザがデバイスの操作方法をパーソナライズできるようにソフトウェアをアクセシビリティ機能に対応させることが非常に重要。
-
アプリやゲームは共有スペースで開始するか、mixedイマーシブスタイルを使用するのが望ましい
- 共有スペースで開始すると、ほかのアプリを使用しながら、そのアプリやゲームを参照することができたり、アプリやゲームをシームレスに切り替えることもできる
- 完全なイマーシブ体験やprogressiveスタイルの体験を提供するアプリやゲームは、mixedイマーシブスタイルか共有スペースのウインドウベースの体験で開始すると、ユーザがイマーシブ度を増加させるタイミングを選べるので、操作の自由度が高まる
-
イマーシブ体験の提供は重要な機能やコンテンツだけに留める
- 何でもかんでもイマーシブ型にすればいいわけではない
- 時には別世界に行きたいと思うこともあるが、基本的にはアプリやゲームの使用中も周囲の環境とつながっていたいと思っている
- ほかのソフトウェアやシステム機能も同時に使えた方が嬉しい
- 体験を特徴付けるタスクやコンテンツに、個別に空間に入れるようにデザインにする
-
どのようなイマーシブ度でもユーザがアプリ内やゲーム内の重要な瞬間を見逃さずに済むような工夫をする
- 調光や色合い調整、モーション、スケール、空間オーディオを使って、コンテンツの特定の領域にユーザの注意を引き付ける
-
パススルーに少し色合いを付けて、イマーシブ体験と周囲を融合させる
- ユーザの手を体験に参加中の姿のままにしながら、パススルーに色合いを付けて、視覚的に周囲をコンテンツに合わせることができる
快適性を高める
- ユーザの視覚的な快適さに配慮する
- ユーザがイマーシブ体験にいるときにはあまり移動を促さない
- アプリやゲーム内で想定されるユーザの動きに合わせてイマーシブスタイルを選ぶ
- mixedイマーシブスタイルを使用する場合は、あまりパススルーを遮らないようにする
- カスタムコンテンツをユーザの周囲に溶け込ませたい場合はARKitを導入する
イマーシブスタイルを切り替える
- 体験間の移行が滑らかで予測可能なものになるようにデザインする
- 変化を目で追えるくらいの速さにするとか
- 体験のイマーシブ感を高めるタイミングはユーザの選択に委ねる
- イマーシブ体験を終了するタイミングはユーザの選択に委ねる
- イマーシブ度のカスタム範囲を定義する
バーチャルハンドの表示
フルスペースで実行中のイマーシブアプリやゲームでは、
ユーザの手を非表示にして、代わりにそれを表すバーチャルハンドを表示する許可を求めることができる
- 馴染みのある特徴とバーチャルハンドを一致させるようにする
- 装着者の手の位置やジェスチャと一致させる
- 装着者の手より大きいバーチャルハンドを作成する場合は注意する
- バーチャルハンドが実際の人の手よりも大きすぎると、関心のあるコンテンツが見えにくくなり、インタラクションがぎこちなく感じられる場合がある
- ハンドトラッキングデータが途切れたときには、バーチャルハンドをフェードアウトさせて装着者の手を表示する
環境の作成
フルスペースで実行するアプリやゲームでは、パススルーの代わりに、ユーザを部分的または完全に囲むカスタム環境を提供することで、ユーザを新しい場所に運ぶことができる
- 気を散らすコンテンツは最低限にとどめる
- 環境内のインタラクティブなオブジェクトを区別しやすくする
- アニメーションは控えめにする
-
表現する場所にかかわらず、広がりのある環境を作成する
- 閉所恐怖症を引き起こすこともある
- 空間オーディオを利用して雰囲気を醸し出す
- フラットな360度画像を使用して環境を作成することは控える
- 地に足をつける感覚を与える
まとめ
この記事では、Human interface guidelines 「イマーシブ体験」についてまとめました。
もし、Vision Proのデザインをする際は参考にする必要がありそうです！
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。