WWDC25：Design widgets for visionOS

visionOS 26 のアップデートのうち、まず試したのがウィジェットだった。紙やガラスといった素材感や光沢感をデジタルに落とし込むことで、実空間に存在する家具と共存するように設計されている。一貫して仮想コンテンツと一線を画するコンセプトだったのが印象的だった。近接認識なる機能によって、ユーザーとの距離に応じたコンテンツのだし分けができるとは知らなかった。

---

0:00 – イントロダクション

• visionOSにおけるウィジェットは、ユーザーの現実空間に設置できる3Dオブジェクト
• 既存のiPadアプリのウィジェットは、互換モードを有効にするだけでvisionOSに持ち込むことができ、自動的に空間的な見た目に変換される
• ネイティブで構築することで、visionOS専用のサイズや、より空間に統合された見た目を実現できる
• デザインの核となる4つの原則は「永続性」「固定サイズ」「カスタマイズ性」「近接認識」

3:36 – 表示の永続化

• 一度空間に配置されたウィジェットは、セッションをまたいでも、部屋を移動しても、デバイスを再起動してもその場に固定され続ける
• ウィジェットはホームグリッドの「ウィジェット」アプリから探し、空間に追加する
• 机のような水平面、または壁のような垂直面に配置することで、その場に固定される
  • 水平面上に配置した時は、わずかにユーザー側に傾き、平面に影を落とす
• ウィジェットは常にフレーム（枠）内に表示される：デジタルコンテンツと周囲環境とを繋ぐ役割
  • 新しいウィジェットを考える際は、それが部屋の一部であること（コンテクスト：キッチン、リビング、オフィス、、）を意識する
    • 例: 天気ウィジェット：実際の窓のような錯覚を生み出す
• 同じウィジェットの複数のインスタンスを一つの空間に配置することも可能
• ウィジェットは現実世界に存在するように振る舞う
  • 常に仮想コンテンツの背後にレンダリングされる
  • 常に物理環境の平面にスナップされる

6:39 – 固定サイズ

• ウィジェットは現実世界の寸法に対応した、一貫性のあるサイズを持つ
• テンプレートサイズ（小、中、大、特大）は物理的な大きさにマッピングされるため、設置される文脈（机の上、壁など）を考慮して選択することが重要
  • 生産性向上ツールでデスクの上に置くなら、小さなテンプレサイズ
  • 壁掛けのアートワークなら特大のテンプレサイズ
• 現実のオブジェクトと空間を共有するため、印刷物や案内表示の原則を意識したデザインが必要
  • 明確な階層構造、明瞭なタイポグラフィ、慎重なスケール調整
• ユーザーはウィジェットのサイズを75%から125%の範囲で調整できる
  • 加えて間近で見ることもできるため高解像度のアセットを使用することが推奨

8:57 – カスタマイズ性

• スタイル:
  • Paper: 周囲の光に反応し、印刷物のように空間に溶け込むスタイル
    • Coating layer
    • Content layer: 空間に溶け込ませるための反射コーティング
  • Glass: 前景と背景に視覚的な分離を生み出し、前景の情報を常に鮮明に保つ軽量なスタイル、情報量の多いウィジェットに適している
    • Background
    • Duplicate UI layer: UIを暗めにした影により微妙な奥行きを加える
    • UI layer
    • Coating layer: 柔らかい反射仕上げ、部屋の照明に適応
• 色:
  • システムが提供する豊富なカラーパレット（ライト7種、ダーク7種）をユーザーが選択し、ウィジェットを着色できる
• マウンティングスタイル:
  • Elevated: 壁掛けの額縁のように表面に配置される
    • 水平・垂直両面に対応し、デフォルト設定
  • Recessed: 壁に埋め込まれたような見た目で、窓のような奥行き感を出す
    • 垂直面でのみ利用可能
    • 無効化が可能
• フレーム幅:
  • 細いものから太いものまで5段階の幅をユーザーが選択できる（Recessed スタイルでは不可）
• カスタム設定:
  • 標準のカスタマイズUIに加え、アプリ固有の設定（e.g. Musicのアルバムアートに合わせたテーマ or 時刻による自動調整）を追加できる

17:14 – 近接認識

• ユーザーとの距離に応じて、ウィジェットが表示する情報を動的に調整する。
• 2つの状態:
  • Default（近距離）: 詳細な情報を表示　90m まで
  • Simplified（遠距離）: 一目でわかるよう、必要不可欠な情報のみを表示
• 距離に応じてボタンを追加するなど、距離に応じたインタラクション領域の変更が可能
  • インタラクションが含まれていなければ、ウィジェットタップでアプリ起動