Design for spatial user interfaces

ハイライト

Apple は visionOS 向けの空間 UI ビジュアル言語を確立しました。3 層の 3D アイコン、ガラス素材のウィンドウ、動的 Vibrancy 効果、空間環境向けに調整されたフォントウェイトとタイポグラフィにより、iOS 開発者の知識を空間計算プラットフォームへ移せます。

主要内容

3D アイコン設計

visionOS のアイコンは立体オブジェクトです。ユーザーがアイコンを見るとわずかに膨らみ、システムが自動でハイライトと影を加え、層間の深度を強化します（01:25）。

設計はシンプルです。最大 3 層の 1024×1024 正方形画像を用意します。背景層は塗りつぶし正方形、2 つの前景層は透明背景です。システムが円形にクロップしガラス効果を追加します。グラフィックは中央に置き、端に近づけないでください。膨張時にずれて見えます。

ガラス素材（Glass Material）

visionOS には従来のライト/ダークモードはありません。ウィンドウはシステム定義のガラス素材を使い、環境光に応じてコントラストと色バランスを動的調整します（03:15）。

ガラス素材の特性:

環境光と仮想コンテンツを透過させる
ハイライトと影が空間での位置とスケール感を強化
背後のコンテンツをうっすら見せ、遮断感を減らす

ウィンドウに単色背景は避けてください。不透明ウィンドウが多すぎると圧迫感があります。領域分割には深い素材、インタラクティブ要素の強調には浅い素材を使います。

タイポグラフィ調整

空間環境での可読性のため、visionOS はフォントウェイトを調整します（05:56）。

iOS の Body は Regular、visionOS は Medium
iOS のタイトルは Semibold、visionOS は Bold
字間（tracking）をわずかに増加

2 つの超大見出しスタイル（Extra Large Title）が追加され、空間の横幅レイアウトに適しています。

Vibrancy 効果

Vibrancy は可読性の鍵となる仕組みです。背景から光と色を抽出し、前景コンテンツ（テキスト、シンボル、塗り）を際立たせます（06:57）。

3 つのモードがあります。

Primary: 標準テキスト
Secondary: 説明文、脚注、サブタイトル
Tertiary: より低い階層の情報

ガラス素材は背後の色を映すため、カラフルな要素は背景に飲み込まれることがあります。多くの場合、白いテキストとシンボルで常に明瞭に保ちます。

詳細

人間工学レイアウト

visionOS では主に目と手で操作するため、身体の快適さを考慮する必要があります（09:25）。

首の左右回転範囲は上下より大きいです。大きなキャンバスには縦長より横長比率を選びます。Freeform の canvas は横に伸びます。

最も重要な情報は視野中央に置きます。高すぎ・低すぎる配置は避けます。

ターゲット領域サイズ

インタラクティブ要素のタップ領域は少なくとも 60pt です（10:36）。視覚サイズは小さくて構いません（標準ボタンは 44pt）が、周囲に少なくとも 8pt の余白が必要です。

ボタンを積むときは標準システムボタンを使い、間隔は少なくとも 16pt。大きいボタンは周囲余白を少なくて済みます。

Focus Feedback（フォーカスフィードバック）

システムコンポーネントにはフォーカスフィードバックが組み込まれ、ユーザーが見ると要素がわずかに明るくなります（12:04）。どこが操作可能か伝えます。

リストやメニュー設計では、項目間に少なくとも 4pt の間隔を取り、フォーカスフィードバックの重なりを避けます。カスタム操作領域は形状を定義し、システムが hover 効果を正しく表示できるようにします。

同心円角

ネスト要素の角丸は同心に保ちます。式は単純です。内側の角丸半径 + 内外の間隔 = 外側の角丸半径（13:37）。角丸は continuous corners に設定し滑らかに保ちます。

visionOS の Tab Bar は縦型で、ウィンドウ左側に固定されます（16:32）。注視するとラベル付きで展開し、視線を外すと自動収納。軽量に保ち、6 項目を超えないでください。

Sidebar と Tab Bar はウィンドウ内で共存し、二次ナビゲーションを提供します。

Ornaments（装飾コントロール）

Ornament は visionOS の新しい提示方式で、コントロールをウィンドウ前方の独立したガラスコンテナに置きます（17:34）。

ツールバーや常駐コントロールに適しています。ウィンドウ下部に置くときは下端と 20pt 重ね、メインウィンドウと一体化させます。Ornament は出現/消失でき、展開してより多くの内容を表示できます。

メニュー、Popover、Sheet

visionOS ではメニューと popover はウィンドウ境界を超えられ、デフォルトで中央表示されます（19:54）。

ボタンが popover を起動すると、ボタンは selected 状態（黒字白地）になります。これはシステムパターンです。通常状態に白背景ボタンは使わないでください。

Sheet はモーダルビューとして親ウィンドウと同じ Z 位置に表示され、親は後退して暗くなります。二次 sheet はさらに手前に押し出されます。

重要ポイント

やること: 既存 iOS 音楽プレイヤーを visionOS に適応し、ガラス素材と ornament で Now Playing コントロールを作る。
価値: Music App は ornament のベストプラクティスを示しており、再生コントロールがコンテンツを遮らず常にアクセス可能。
始め方: .glassBackgroundEffect() でコントロール背景を作り、再生コントロールをウィンドウ下部の ornament に配置。
やること: 空間フォトアルバム App を設計し、Extra Large Title で年見出しを作って没入感を演出する。
価値: 超大見出しスタイルは空間の横幅レイアウトに適し、ガラス素材と組み合わせて写真を主役にできる。
始め方: .font(.extraLargeTitle) と .font(.extraLargeTitle2) を Vibrancy 効果と組み合わせ、どんな背景でも文字を明瞭に保つ。
やること: volumetric window で商品モデルを表示する 3D 製品展示 App を開発する。
価値: volumetric window で任意角度から 3D モデルを見られ、ガラス素材で UI がモデルの注意を奪わない。
始め方: WindowGroup + .windowStyle(.volumetric) で体積ウィンドウを作り、内部で Model3D に USDZ を読み込む。
やること: 多人協業対応の空間ホワイトボード App を作る。
価値: 横幅レイアウトは横に伸びるキャンバスに適し、Focus Feedback で操作可能要素が分かる。
始め方: 横長比率のウィンドウを使い、インタラクティブ要素は 60pt ターゲット領域を維持し、同心円角でツールパネルを設計する。