Principles of spatial design

ハイライト

Apple は visionOS の空間設計における5つの原則をまとめました。親しみやすさ、人を中心に据えること、次元を活かすこと、段階的な没入、そしてプラットフォームらしさです。

主要内容

空間計算とは、iPad App を部屋に浮かべることではありません。Nathan Gitter と Amy DeDonato は、Music、Safari、Keynote、TV、Mindfulness、Photos などのシステム App の例を通じて、空間設計がまず抑制から始まる理由を説明します。

（01:25）第1の原則は親しみやすさです。ユーザーは依然としてサイドバー、タブ、検索ボックス、ウィンドウを必要とします。新プラットフォームはこれらを廃止したわけではなく、空間に置いただけです。ウィンドウはガラス素材を使い、現実世界とのコントラストを保ちながら環境認識を維持します。システムは移動・閉じる・リサイズのコントロールを提供し、ユーザーがウィンドウをドラッグすると常にユーザーに向き、コンテンツの可読性を保ちます。

（02:49）ウィンドウサイズはコンテンツで決まります。Safari は縦に長い Web ページの閲覧に適した高いウィンドウ、Keynote はスライドの横方向スペースに適した広いウィンドウです。ツールバーやタブバーはウィンドウの外に伸ばせ、Music のようにコントロール層をメインコンテンツの上に浮かせられます。Safari でサイドバーを開くとウィンドウが広がり、Web ページを覆いません。Apple の助言は明確です。ウィンドウは大きくしすぎず、単一ウィンドウを優先し、複数ウィンドウはすぐにユーザーの管理負担になります。

（04:32）第2の原則は人中心設計です。ユーザーはデバイスを装着し、目と手で操作し、自分の部屋で App を体験します。重要なコンテンツは視野の中央に置き、人間の視野が横に広いためレイアウトは横向きを優先します。Safari のタブ概要が例です。タブはグリッドに広がり、左右のタブは内側に回転して読みやすくします。

（06:36）人間工学がコンテンツ配置を決めます。システムはデフォルトで自然な視線上にウィンドウを置き、快適な姿勢を促します。カスタムコンテンツはユーザーの頭部と向きに相対的に配置し、身長・座り方・ソファに横になるシーンにも対応すべきです。多くのコンテンツは腕の長さよりやや遠くに置き、遠距離操作を促します。ユーザーの背後、高すぎる・低すぎる位置は避けます。コンテンツを視野に固定しないでください。「目に張り付く」感覚を生みます。空間にアンカーし、ユーザーが自然に首を回して観察できるようにします。

（08:21）第3の原則は次元です。空間は無限ですが、ユーザーの物理的な部屋は小さいかもしれません。ウィンドウ型コンテンツはシステムが部屋との関係を処理するため、椅子や壁を貫通する心配は開発者には不要です。動画コンテンツは dimming で利用可能空間を広げられます。TV App で映画を再生すると、画面はウィンドウ全体を占め、周囲の passthrough が暗くなります。ユーザーは自分がどこにいるか分かりつつ、注意はコンテンツに向けられます。

（09:57）深度は新しい階層ツールです。遠くの大きなコンテンツは視聴に、近くの小さなコントロールは操作に適しています。TV の没入シネマでは再生コントロールを小さく近くに置きます。コントロールは小さくても、遠くの巨大スクリーンより視覚的優先度が高くなります。コントロールを映画スクリーンに貼り付けると大きすぎて不釣り合いに感じます。光と影で深度を強化します。発光物体は近くの表面を照らし、通常の物体は影を落とします。テキストは一般に 3D にしないでください。斜めから見ると読みにくくなります。

（12:37）第4の原則は段階的没入です。App は Shared Space のウィンドウから始め、重要な瞬間に Full Space に入れます。Keynote は通常のウィンドウで開き、再生時は dimming でプレゼンに集中し、リハーサル時だけ完全な劇場に入ります。Apple はウィンドウから始め、ユーザーに没入度を制御させることを推奨します。

（15:00）没入体験は注意を導く必要があります。Mindfulness は動き、空間オーディオ、カラフルな素材で空間中の花に焦点を引き、深い瞑想では花が拡大してユーザーを包みます。遷移は滑らかで予測可能にし、何が起きているかユーザーに伝えます。部屋の融合は柔らかいエッジを使い、シーン境界の唐突さを避けます。微細なアニメーションと空間オーディオで静止シーンを生き生きとさせられ、完全な劇場を描かなくても床や天井のかすかな反射でシネマ感を伝えられます。

（17:35）快適さは硬い制約です。ユーザーの位置や没入空間を動かす必要がある場合、大きく速い動きは避けます。移動中はコンテンツをフェードアウトし、安定後にフェードインすることを推奨します。ユーザーが身体を動かすと没入体験もフェードアウトし、現実環境を見えるようにします。没入モードの出入りには明確な入口を設け、短いラベルと展開・折りたたみ矢印など馴染みのあるアイコンを使います。

（18:24）最後の原則はプラットフォームらしさです。優れた visionOS App は、ユーザーが自分の空間に招きたくなる価値があるべきです。Photos は馴染みのあるライブラリウィンドウを保ち、特別な写真を見つけたら実寸に近いサイズに拡大して環境を暗くします。パノラマは撮影場所に戻ります。鍵はすべての機能を空間化することではなく、空間プラットフォームでしか成立しない決定的な瞬間を見つけることです。

詳細

設計チェックリスト

1. Familiarity
   - Does it preserve navigation structures users recognize?
   - Does it prioritize windows for the main interface?
   - Does it avoid jumping straight into Full Space?

2. Ergonomics
   - Is main content in the center of the field of view?
   - Does it use horizontal layouts to match wide vision?
   - Is content placed along the natural sight line, slightly beyond arm's length?
   - Does it avoid head-locked content?

3. Dimension
   - Is depth used for hierarchy and focus?
   - Are nearby controls kept small and clear?
   - Do glowing objects have reflections, and ordinary objects have shadows?
   - Is text kept flat?

4. Immersion
   - Does it start from a window and let users decide to go deeper?
   - Does Full Space have clear entry and exit paths?
   - Are scene transitions smooth and predictable?

5. Platform nativeness
   - Is there a pivotal moment that only works on a spatial platform?
   - Does it avoid mechanically moving an entire legacy app into space?

キーポイント:

• コードなしの設計 Session で、実践の入口は API 呼び出しではなくプロダクトレビューチェックリスト
• 各項目は transcript のシステム App 例に由来
• 設計レビューや visionOS 移行評価で項目ごとに確認するのに適している

ウィンドウ設計原則

Window size: driven by content, smaller is better
- Safari: tall window for long web reading
- Keynote: wide window for slide proportions
- Music: toolbar floats outside the main window, leaving room for content
- Safari sidebar: window widens when expanded, without covering the webpage

Window count: single window by default
- Multiple windows only for side-by-side content or independent actions that must work together
- Keynote playback: large, distant slides + small, nearby presenter display

キーポイント:

• 空間に画面境界はありませんが、大きすぎるウィンドウは視野を遮ります
• 複数ウィンドウは管理コストが増え、デフォルト設計にすべきではありません
• ツールバーは矩形ウィンドウの輪郭から外せます。空間プラットフォームの新しい自由度です

transcript に登場する没入モードの例

Windows in Shared Space
  Keynote and Photos both start with familiar windows for the main interface, keeping users in control

Window playback + Dimming
  Keynote presentations and TV movies dim the surroundings to help users focus on content

Room-visible experiences in Full Space
  Some immersive scenes still keep the real room visible so users can see hands, keyboard, or controllers

New environments in Full Space
  Keynote rehearsal takes users to a theater; environments can extend beyond the physical room

キーポイント:

• transcript に登場する設計パターンの例であり、Apple の正式分類表ではありません
• Dimming はコンテンツ集中の手段で、ウィンドウ再生やプレゼンシーンで使えます
• Full Space でも部屋を見えるままにできます。周囲環境を完全置換する必要はありません

重要ポイント

• 写真 App に「記憶を拡大する」瞬間を設計する: リスト、アルバム、検索はウィンドウのまま。最も重要な写真を開いたとき、実寸に近いサイズに拡大し、環境をわずかに暗くする。パノラマは半没入モードで撮影場所に戻れる。

• 教育 App に近くのコントロール・遠くのコンテンツの教室を作る: 教材やモデルは遠くに大きく置き、章ナビと再生コントロールは近くの小パネルに。階層が明確で、遠いコンテンツに手を伸ばす必要がない。

• 製品 3D 展示を実寸体験にする: EC や工業デザイン App ではウィンドウで閲覧し、選択後にモデルを机や部屋に実寸で配置。影と環境光で物体を着地させ、すべての UI を 3D にしない。

• 没入シーンに安全な退出経路を追加する: すべての Full Space に明確な「没入を終了」ボタンを。短いラベルと馴染みのアイコンを使い、シーン移動時はフェードアウトしてからフェードイン。視点の強制移動は避ける。

関連セッション

• Design for spatial user interfaces — ウィンドウ、ツールバー、コントロール、空間 UI コンポーネントの詳細解説
• Design for spatial input — 目と手の入力の設計ルール
• Design considerations for vision and motion — めまい、疲労、視覚的不快感を防ぐ設計制約
• Build spatial experiences with RealityKit — これらの設計原則を RealityKit コンテンツに落とし込む