visionos-design-guidelines について
Apple Human Interface Guidelines に基づく、visionOS のデザイナーや開発者向け設計ガイドです。空間での快適性、視線と手の操作、プラットフォームの慣例を扱います。
主な機能
- 01空間レイアウトと視聴距離
- 02視線と手の操作規則
- 03ウィンドウとボリュームの指針
- 04没入度と退出経路
- 05視線プライバシーの原則
活用シーン
- 01Vision Pro のウィンドウや 3D コンテンツの配置を計画
- 02操作ターゲットのサイズと視線フィードバックを確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ ehmo/ platform-design-skills --skill visionos-design-guidelinesインストール後、Claude Code で/visionos-design-guidelinesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
AGENTS.mdmetadata.jsonrules/_sections.md詳細
visionOS のデザインガイドライン
Apple Human Interface Guidelines に基づく、Apple Vision Pro の包括的なデザインルールです。これらのルールにより、空間コンピューティングアプリを快適で直感的にし、プラットフォームの規約に沿ったものにできます。
1. 空間レイアウト [CRITICAL]
空間レイアウトは、ユーザーの快適さと使いやすさを左右します。不適切な配置は、首の疲れや方向感覚の喪失、コンテンツへのアクセス困難につながります。
ルール
SL-01: 視野の中央にコンテンツを配置します。 主要なウィンドウやコンテンツは、ユーザーの真正面、目の高さに配置します。快適に見渡せる垂直方向の範囲は、目の高さから上下におよそ 30 度です。この範囲外のコンテンツを見るには頭を動かす必要があり、疲労の原因になります。
SL-02: 快適な距離を保ちます。 コンテンツは、通常はウィンドウであれば 1-2 メートル程度の、ユーザーから自然な距離に配置します。近すぎると侵入感があり、遠すぎると読みにくくなります。システムのデフォルトの配置距離はおよそ 1.5 メートルです。特別な理由がない限り、この距離を守ってください。
SL-03: コンテンツをユーザーの背後に配置しないでください。 ユーザーは、実際に振り返らなければ背後のコンテンツを見ることができません。すべての UI 要素は、前方を向いた半球の範囲内に表示する必要があります。コンテンツでユーザーを囲む必要がある場合は、回転や再配置のための分かりやすい操作手段を用意してください。
SL-04: パーソナルスペースを尊重します。 3D オブジェクトやウィンドウを、ユーザーの頭から腕の長さ(約 0.5 メートル)より近くに配置しないでください。パーソナルスペース内のオブジェクトは、不快感や侵入された感覚を引き起こします。オブジェクトを意図的に手の届く範囲に置くダイレクトタッチ操作は例外です。
SL-05: Z 深度で階層を表現します。 ユーザーに近い要素ほど、目立ち、操作しやすくなります。副次的なコンテンツや背景のコンテンツは、より奥に配置します。インターフェイスが分断されるような大きな距離ではなく、レイヤー化した要素の間に控えめな深度差(数センチメートル)を設けてください。
SL-06: 複数のウィンドウを慎重に配置します。 複数のウィンドウを表示する場合は、積み重ねたり重ね合わせたりせず、ユーザーを囲む緩やかな弧状に配置します。各ウィンドウは個別に再配置できるようにしてください。空間を圧迫するほど多くのウィンドウを同時に表示しないでください。
SL-07: コンテンツを頭部ではなく環境に固定します。 ユーザーが頭を動かしても、ウィンドウやオブジェクトはワールド空間で固定された状態を保つ必要があります。頭部に固定されたコンテンツ(頭の動きに追従するコンテンツ)は、不快感や乗り物酔いを引き起こします。頭部に対する相対位置を使うのは、ツールチップのような短時間だけ表示する一時的な要素に限ってください。
2. 視線と手による入力 [CRITICAL]
visionOS では間接操作が主要な入力方式です。ユーザーは対象を見て、指をつまむ動作で選択します。これはタッチ操作やマウス入力とは根本的に異なります。
ルール
EH-01:視線とピンチを主な操作方法として設計します。 標準的な操作方法は、ユーザーが要素を見る(目で対象を指定する)と、その後、親指と人差し指を合わせてピンチする(手で確定する)という流れです。すべての主要な操作は、このモデルに沿って設計してください。ユーザーが手を上げたり、対象を指差したりする必要はありません。
EH-02:操作可能なターゲットの最小サイズは60ptです。 視線追跡には固有の精度の限界があります。視線で確実に対象を指定できるよう、タップ可能な要素はすべて直径60ポイント以上にしてください。これはiOSのタッチターゲット(44pt)より大きいサイズです。ターゲットが小さいと、ユーザーにストレスを与え、誤選択の原因になります。
正しい例:
// visionOS — button meeting 60pt minimum
Button(action: confirmAction) {
Label("Confirm", systemImage: "checkmark")
.frame(minWidth: 60, minHeight: 60)
.padding(.horizontal, 16)
}
.buttonStyle(.borderedProminent)
正しくない例:
// visionOS — 32pt button too small for reliable gaze targeting
Button(action: confirmAction) {
Image(systemName: "checkmark")
.frame(width: 32, height: 32) // Below 60pt minimum; unreliable with eye tracking
}
EH-03:視線に対するホバーフィードバックを表示します。 ユーザーの視線が操作可能な要素に留まったら、対象として指定されていることがわかるよう、目に見えるハイライトや控えめな拡大表示を行います。カーソルがないため、このフィードバックは不可欠です。ホバー状態がなければ、ユーザーは選択しようとしているものを確認できません。
EH-04:近距離のオブジェクトでは直接タッチをサポートします。 3DオブジェクトやUI要素が腕の届く範囲にある場合、手を伸ばしてタップする直接タッチ操作を可能にしてください。直接タッチは自然に感じられるようにし、接触時に視覚と音によるフィードバックを提供してください。臨場感を高められる没入型の体験には、直接タッチを使用します。
EH-05:コンテンツ目的で視線を追跡してはいけません。 目の位置は、システム操作のターゲット指定にのみ使用します。視線の方向からユーザーの興味を推測したり、ユーザーが見ているものに応じてコンテンツを変更したり、ユーザーの視線の位置を記録したりしてはいけません。これはプラットフォームの中核的なプライバシー原則です。システムは、視線追跡の生データをアプリに公開しません。
EH-06:カスタムジェスチャーはシンプルで直感的なものにします。 システムのピンチ以外にカスタムの手のジェスチャーを定義する場合は、簡単に見つけられ、無理なく実行でき、システムジェスチャーと競合しないものにしてください。手を上げ続ける必要があるジェスチャー、複雑な指の動き、基本操作で両手の連携を必要とするジェスチャーは避けます。
EH-07:手の位置を正確に指定しないと操作できない設計にしてはいけません。 ユーザーは、膝の上や体の横に自然に置いた手で操作します。特定の位置に手を置く、特定の場所に手を伸ばす、ジェスチャーを続けるといった操作をユーザーに求めてはいけません。間接操作モデルは、身体的な負担を軽減するために設計されています。
EH-08:操作の開始時に意図を確認します。 システムが視線のターゲット、ピンチ、ドラッグの開始、または直接タッチの接触を認識したら、すぐに目に見える状態変化を表示してください。確認が遅れると、視線と手の連携が途切れ、選択に確信が持てなくなります。
空間操作のクイックリファレンス
| 操作 | 方法 | 使用例 |
|---|---|---|
| タップ/選択 | 見てからピンチ | ボタン、リンク、リスト項目 |
| スクロール | 見てからピンチしてドラッグ | リスト、長いコンテンツ |
| ズーム | 両手でピンチ | 地図、画像、3Dモデル |
| 回転 | 両手をひねる | 3Dオブジェクトの操作 |
| ドラッグ | 見てからピンチしたまま移動 | ウィンドウの再配置 |
| 直接タッチ | 手を伸ばしてタップ | 近距離の3Dオブジェクト |
| 長押し | 見てからピンチしたまま保持 | コンテキストメニュー |
ターゲットサイズのリファレンス
| 要素 | 最小サイズ | 推奨サイズ |
|---|---|---|
| ボタン | 60pt | 60-80pt |
| リスト行 | 高さ60pt | 高さ80pt |
| タブバー項目 | 60pt | 72pt |
| 閉じる/非表示 | 60pt | 60pt |
| ツールバー項目 | 60pt | 60pt |
| 3D操作可能オブジェクト | 60pt相当 | 状況に合わせて拡大 |
3. ウィンドウ [HIGH]
visionOSのウィンドウは、ユーザーの物理空間に浮かびます。現実世界の環境に溶け込むガラス素材を使用します。
ルール
WN-01:ウィンドウの背景にはガラスマテリアルをデフォルトで使用します。 システムのガラスマテリアルは、ユーザーを取り巻く現実の環境に動的に適応し、一貫性があり読みやすい背景を提供します。メディア再生など、特別なデザイン上の理由がない限り、ガラスを不透明な単色に置き換えないでください。ガラスによって、インターフェイスは共有空間に自然になじみます。
WN-02:標準のウィンドウコントロールを維持します。 ウィンドウには、位置を変更するためのシステム提供のウィンドウバーが下部にあり、閉じるボタンも備わっています。これらのコントロールを非表示にしたり、上書きしたり、置き換えたりしないでください。ユーザーは、すべてのアプリで一貫したウィンドウ管理を利用できることを前提としています。
WN-03:適切な場合はウィンドウのサイズ変更に対応します。 コンテンツがさまざまなサイズに適応できる場合(書類、ブラウザー、メディアなど)は、ウィンドウのサイズ変更に対応してください。システムのサイズ変更ハンドルを使用します。妥当な最小サイズと最大サイズを定義し、ウィンドウのサイズ変更に応じてレイアウトをレスポンシブに調整します。
WN-04:タブバーを先頭側のオーナメント(左側)に配置します。 visionOS では、タブバー(アプリのナビゲーション)は iOS のように下部ではなく、ウィンドウの先頭側(左端)に縦型オーナメントとして配置されます。これにより、ウィンドウのコンテンツ領域を消費せずにナビゲーションを利用できます。タブアイコンには SF Symbols を使用します。
WN-05:ツールバーを下部のオーナメントに配置します。 主要な操作コントロールは、ウィンドウの下端に固定されたツールバーオーナメントに表示します。これにより、ユーザーが自然に手を置く位置の近くにコントロールを配置し、コンテンツ領域を遮らずに済みます。
WN-06:ウィンドウは固定画面のない空間に浮かびます。 固定されたディスプレイはありません。ウィンドウはユーザーの物理環境内に存在します。少し斜めから、また距離を変えて見たときにも適切に見えるコンテンツを設計してください。固定されたビューポートサイズやピクセル単位の正確な配置を前提とするデザインは避けてください。
4. ボリューム [HIGH]
ボリュームは、境界のあるボックス内に 3D コンテンツを表示します。3D モデル、ビジュアライゼーション、ユーザーがさまざまな角度から調べられるオブジェクトに最適です。
ルール
VL-01:3D コンテンツをボリュームの境界内に収めます。 すべてのコンテンツは、定義されたボリュームの寸法内に収める必要があります。境界からはみ出したコンテンツはクリップされます。収容するコンテンツに合わせてボリュームのサイズを適切に設定し、システムによって適用される制限を守ってください。
VL-02:あらゆる角度からの閲覧を想定して設計します。 ユーザーはボリュームの周りを実際に歩いたり、位置を変えたりできます。3D コンテンツが正面からだけでなく、あらゆる角度から適切に見えるようにしてください。側面から見たときに段ボールの切り抜きのように見える、平面的な外観は避けてください。
VL-03:特定の閲覧位置を必須にしません。 ユーザーはボリュームを上、下、またはどの側面からでも見る可能性があります。コンテンツは、どの角度から見ても理解できる必要があります。向きが重要な場合は、特定の位置を強制するのではなく、台座やラベルなどの視覚的な手がかりを使ってください。
VL-04:空間に適した大きさにコンテンツを調整します。 ボリュームのサイズは、コンテンツとユーザーの環境に合わせて設定してください。分子モデルは小さく、腕を伸ばした距離で持てるサイズが適している場合があります。建築のビジュアライゼーションは、テーブルいっぱいに広がるサイズが適している場合があります。ユーザーがボリュームを操作する状況を考慮してください。
VL-05:自己完結した 3D エクスペリエンスにはボリュームを使用します。 ボリュームは、3D オブジェクトを中に入れたウィンドウではありません。3D コンテンツが主なエクスペリエンスとなる場合(製品モデルの確認、3D グラフの表示など)にボリュームを使用してください。主に 2D のインターフェイスに一部の 3D 要素を含める場合は、ウィンドウを使用してください。
5. イマーシブスペース [HIGH]
visionOS は、共有空間(アプリが現実と並んで表示される状態)から完全なイマーシブ環境まで、さまざまな段階の没入感に対応しています。
ルール
IS-01: Shared Space から開始します。 アプリはデフォルトで Shared Space に起動し、現実世界と並んで複数のアプリウィンドウが共存します。ユーザーが明示的に求めた場合にのみ、より没入感の高い体験へ移行します。起動時に没入を強制しないでください。
IS-02: 段階的に没入感を高めます。 没入レベルは、Shared Space(現実と並んでウィンドウを表示)から Full Space(パススルーを維持したままアプリが画面を占有)、Full Immersion(完全な仮想環境)へと、徐々に移行させます。各段階への移行は、意図的でユーザーが開始したものだと感じられるようにしてください。
IS-03: 常に退出手段を用意します。 ユーザーはいつでも、より没入感の低い状態に戻るか、体験を完全に終了できなければなりません。Digital Crown はシステムレベルの退出手段です。アプリ内にも、没入感を弱めるための明確な操作を用意してください。ユーザーを没入型の体験に閉じ込めないでください。
IS-04: 安全のためにパススルーを使用します。 ユーザーが身体を動かす可能性がある体験では、現実環境のパススルーを維持するか、ガーディアン境界を設けてください。ユーザーが物理的な障害物、他の人、部屋の境界を認識できる必要があります。完全な没入は、ユーザーが静止している場合にのみ適切です。
IS-05: パススルーを段階的に暗くします。 より没入感の高い状態に移行する際は、パススルー環境を真っ暗に切り替えるのではなく、徐々に暗くしてください。急激な視覚変化は方向感覚を失わせます。没入レベル間の移行には、滑らかなアニメーションを使用してください。
IS-06: 部屋のレイアウトや広さを前提にしないでください。 ユーザーが利用する物理空間はさまざまです。最低限の部屋の広さを必要としたり、床に何もないことを前提としたり、特定の家具配置を期待したりする体験を設計しないでください。利用できる物理空間に合わせて、柔軟に対応してください。
IS-07: 空間オーディオの手がかりを提供します。 没入型空間では、ユーザーが方向を把握できるよう、空間オーディオを使用してください。音は仮想環境内の発生源の方向から聞こえるようにします。視覚的に注視しなくても、音の手がかりによって注意を誘導し、フィードバックを提供できます。
6. マテリアルと奥行き [MEDIUM]
visionOS は、現実世界の照明に反応する物理ベースのマテリアルシステムを使用します。マテリアルを適切に使用することで、奥行きの階層が生まれ、読みやすさが保たれます。
ルール
MD-01: UI サーフェスにはシステムのガラスマテリアルを使用します。 ガラスマテリアルは visionOS UI の基盤です。奥行き、半透明性、環境との調和をもたらします。独自の半透明マテリアルではなく、システムが提供するガラスのバリエーション(regular、thin、ultra-thin)を使用してください。
MD-02: スペキュラーハイライトは環境に反応します。 visionOS のマテリアルは、現実世界の照明条件に反応します。この特性を活用する要素をデザインしてください。インタラクティブな要素にさりげないスペキュラーハイライトを加えることで、立体感が強調されます。マット一辺倒のサーフェスを使って、マテリアルを平坦に見せないでください。
MD-03: マテリアルを重ねて奥行きの階層を作ります。 前景の要素には明るく厚みのあるガラスを、背景には暗く薄いガラスを使用してください。サイドバーには、コンテンツ領域と少し異なる色合いのガラスを使用します。この重なりによって、はっきりした境界線がなくても自然な視覚的階層が生まれます。
MD-04: テキストの読みやすさを保つためにビブランシーを適用します。 ガラスマテリアル上のテキストには、背景環境にかかわらず読みやすさを保つため、ビブランシー効果が使われます。適切なビブランシーを含むシステムのテキストスタイルを使用してください。ガラス上に独自の方法でテキストを描画する場合は、背景の明るさや色の変化を考慮する必要があります。
MD-05: 影とハイライトで高さを表現します。 ウィンドウのサーフェスから浮かび上がる要素(ポップオーバー、メニュー、ホバーステート)には、さりげない影を付け、上端にわずかなスペキュラーハイライトを表示してください。こうした奥行きの手がかりによって、インターフェースの各レイヤー間の空間的な関係をユーザーが理解しやすくなります。
MD-06: Shared Space では完全に不透明な背景を避けます。 Shared Space で不透明なサーフェスを使うと、環境に視覚的な穴が開いたように見えます。環境が透けて見える半透明のガラスマテリアルを使用してください。メディア再生(動画、写真)など、不透明な背景によって視聴体験が向上する場合は例外です。
7. オーナメント [MEDIUM]
オーナメントは、ウィンドウの端に取り付けられ、一部がウィンドウの境界から外側に浮かぶ UI コントロールです。ツールバー、ナビゲーション、コンテキストに応じたアクションを提供します。
ルール
OR-01:コントロールはインラインではなく、オーナメントとして配置します。 ツールバー、タブバー、常時表示するアクションボタンは、ウィンドウのコンテンツ領域に埋め込まず、オーナメントとして配置します。オーナメントを使うことでコンテンツ領域をすっきり保ち、コントロールとコンテンツの間にはっきりとした空間的な階層を作れます。
OR-02:主要なアクションは下部のオーナメントに配置します。 ウィンドウ下端のオーナメントは、アクションコントロール(再生/一時停止、書式設定ツール、共有)の主要な配置場所です。この位置は、人間工学的に操作しやすく、コンテンツを隠すことなく視覚的に目立たせることができます。
OR-03:ナビゲーションは前方(左側)のオーナメントに配置します。 アプリレベルのナビゲーション(タブバーに相当)は、ウィンドウの前方の端に取り付けます。これによりナビゲーションを常に表示してアクセスしやすくしながら、コンテンツ領域と下部のオーナメントをコンテキストに応じたコントロール用に確保できます。
OR-04:オーナメントでウィンドウのコンテンツを覆わないでください。 オーナメントはウィンドウの端から外側に広がるものであり、内側に入り込むものではありません。ウィンドウのコンテンツ領域を覆ったり、重なったりしないようにしてください。コンテンツより視覚的に目立ちすぎず、かつ機能を損なわない大きさに調整します。
OR-05:適切な場合は、コンテキストに応じてオーナメントを表示します。 すべてのオーナメントを常時表示する必要はありません。ツールバーは、ユーザーがウィンドウを見たときにホバーで表示し、視線を外したときにフェードアウトできます。これにより、見つけやすさを保ちながら、インターフェースをすっきりさせられます。
OR-06:標準のオーナメントスタイルを使用します。 オーナメントにはウィンドウと同じガラス素材のシステムを、奥行きをわずかに変えて使用します。独自のフローティング UI ではなく、システムが提供するオーナメントコンテナーを使用してください。これにより、ほかの visionOS アプリとの視覚的な一貫性が保たれます。
OR-07:重要なコントロールを見つけやすくします。 ナビゲーション、再生操作、主要なアクションなど、ユーザーが繰り返し使うコマンドにはオーナメントを使用します。重要なコントロールを、記憶が必要なジェスチャーやホバー時のみ利用できる操作の背後に隠さないでください。
8. アクセシビリティ [CRITICAL]
visionOS は、VoiceOver、スイッチコントロール、ポインター操作の代替手段に対応しています。空間 UI は、視線と手による入力だけに頼らず操作できる必要があります。
ルール
ACC-01:すべてのインタラクティブ要素に、意味のあるアクセシビリティラベルを設定します。 ボタン、コントロール、ユーザーが操作できる 3D オブジェクトには、VoiceOver が読み上げられるラベルを付ける必要があります。見た目や位置だけに頼らないでください。
ACC-02:VoiceOver ですべてのインタラクティブ要素にアクセスできるようにします。
アクセシビリティツリーに、フォーカス可能なすべてのコントロールが含まれていることを確認してください。インタラクティブなカスタムの RealityKit エンティティは、アクセシビリティ階層に登録する必要があります。
ACC-03:ポインター操作とスイッチコントロールの代替手段に対応します。 すべてのユーザーが視線追跡や手のピンチ操作を使えるわけではありません。ヘッドポインター、スイッチコントロール、キーボードナビゲーションなどの代替入力方法で、アプリ全体を操作できるようにしてください。
ACC-04:「視差効果を減らす」設定に従います。 空間アニメーション、没入型の画面遷移、視差効果は、「視差効果を減らす」が有効なときに無効化または軽減する必要があります。空間環境での急な動きは、方向感覚を失わせることがあります。
@Environment(\.accessibilityReduceMotion) var reduceMotion
var body: some View {
Model3D(named: "SceneObject")
.rotation3DEffect(reduceMotion ? .zero : rotation, axis: (0, 1, 0))
}
ACC-05:「文字を太くする」設定に対応します。
ユーザーが「文字を太くする」を有効にした場合、visionOS のカスタム描画テキストもそれに合わせて変更する必要があります。SwiftUI のダイナミックタイプスタイルは自動的に対応しますが、カスタム描画では UIAccessibility.isBoldTextEnabled を確認するか、@Environment(\.legibilityWeight) を使用して、より太いウェイトを検出して適用してください。
ACC-06:「コントラストを上げる」設定に対応します。
ユーザーが「コントラストを上げる」を有効にした場合、カスタムカラーにはより高いコントラストのバリエーションを用意する必要があります。SwiftUI で @Environment(\.colorSchemeContrast) を使用して .increased を検出し、ガラスや環境の背景に描画するテキストと UI 要素に、コントラストの高い色を代わりに使用してください。
評価チェックリスト
このチェックリストを使って、visionOS のデザインや実装を評価してください。
空間レイアウト
- 主なコンテンツを視野の正面中央に配置する
- 快適な距離にコンテンツを配置する(ウインドウの場合は1〜2m)
- ユーザーの背後にコンテンツを配置しない
- パーソナルスペースを尊重する(約0.5m以内に何も配置しない)
- 階層構造を示すためにZ軸の奥行きを適切に活用する
- 複数のウインドウは重ねず、弧を描くように配置する
- コンテンツをヘッドロックせず、ワールドスペースに固定する
視線と手の入力
- 視線とピンチ操作ですべてのインタラクションを実行できる
- すべてのインタラクティブな対象のサイズを60pt以上にする
- すべてのインタラクティブな要素にホバー状態を表示する
- 近距離のオブジェクトでは直接タッチに対応する
- コンテンツや分析を目的とした視線追跡を行わない
- カスタムジェスチャはシンプルで、見つけやすいものにする
- 手を上げ続ける必要がないようにする
ウインドウ
- デフォルトの背景にガラス素材を使用する
- 標準のウインドウバーと閉じるボタンを配置する
- タブバーを上部オーナメントとして配置する
- ツールバーを下部オーナメントとして配置する
- さまざまなウインドウサイズに合わせてレイアウトを調整する
- 空間に浮かぶことを前提にコンテンツを設計する
ボリューム
- コンテンツをボリュームの境界内に収める
- どの視点から見てもコンテンツが正しく見えるようにする
- 特定の視点を必要としないようにする
- コンテンツと状況に適したスケールにする
イマーシブスペース
- アプリを共有スペースで起動する
- 没入感を段階的に高める
- 常に明確な終了方法を用意する
- 安全上必要な場合はパススルーを維持する
- 没入レベル間の遷移をスムーズにする
- 部屋の大きさやレイアウトを前提としない
素材と奥行き
- UIサーフェスにシステムのガラス素材を使用する
- 素材のレイヤーで奥行きの階層を表現する
- ガラス越しのテキストを読みやすくするためにビブランシーを使用する
- 影とハイライトで高さを示す
- 共有スペースでは完全に不透明なサーフェスを使用しない(メディアを除く)
オーナメント
- コントロールはインラインではなく、オーナメントとして取り付ける
- 主要なアクションを下部オーナメントに配置する
- ナビゲーションを上部オーナメントに配置する
- オーナメントはコンテンツに重ねず、外側に広げる
- 標準的なオーナメントのスタイルを使用する
アクセシビリティ
- 太字テキストの設定を尊重する(SwiftUIは自動的に処理します。カスタムテキストでは
legibilityWeightまたはUIAccessibility.isBoldTextEnabledを確認します) - コントラストを上げる設定を尊重する(カスタムカラーでは
colorSchemeContrastを通じて、よりコントラストの高いバリエーションを用意します) - すべてのインタラクティブな要素と3Dオブジェクトに、意味のあるアクセシビリティラベルを付ける
- アプリをヘッドポインターまたはスイッチコントロールで完全に操作できるようにする(視線とピンチ操作だけに限定しない)
- 視差効果を減らすが有効な場合、空間アニメーションやイマーシブな遷移を無効にするか、抑制する
- インタラクティブなRealityKitエンティティをアクセシビリティ階層に登録する
アンチパターン
visionOS のデザインでよくある間違いです。避けてください。
| アンチパターン | 問題点 | 正しいアプローチ |
|---|---|---|
| 頭部に固定された UI | 酔いを引き起こし、閉塞感を与えます | UI をワールドスペースに固定します |
| 小さすぎるタップ対象 | アイトラッキングでは 60pt 未満を正確に狙えません | インタラクティブな対象は最小 60pt にします |
| ホバー状態がない | 何がインタラクティブなのかユーザーに伝わりません | 視線を向けたときは常にハイライトを表示します |
| 共有空間における不透明なウィンドウ | 環境に視覚的な穴が生じます | システムのガラスマテリアルを使用します |
| 強制的な完全没入 | 混乱を招き、ユーザーを閉じ込めます | 共有空間から始め、段階的に没入させます |
| ユーザーの背後にあるコンテンツ | 見えず、全身を回転させる必要があります | コンテンツを前方半球内に保ちます |
| 視線駆動型コンテンツ | プライバシーの侵害となり、監視されているように感じさせます | 視線はシステムのターゲティングにのみ使用します |
| 平坦な 3D ボリューム | 横から見ると、段ボールの切り抜きのように見えます | あらゆる視点から見たデザインにします |
| インラインツールバー | コンテンツのスペースを無駄にし、慣習に反します | コントロールにはオーナメントを使用します |
| 狭い部屋を想定していない設計 | 狭い空間で機能しません | 利用可能な物理空間に合わせて調整します |
| 急激な没入状態の変化 | 混乱を招き、プレゼンスを損ないます | アニメーションを使って段階的に切り替えます |
| 腕を上げ続ける操作 | 数分で身体的な疲労を引き起こします | 腕を体の横に下ろした状態で使えるように設計します |
| カスタムのウィンドウクローム | プラットフォームの一貫性を損ないます | システムのウィンドウコントロールを使用します |
| Z ファイティングが発生するレイヤー | 視覚的なちらつきが生じ、階層がわかりにくくなります | 意図的に深度オフセットを設定します |