Design widgets for visionOS

ハイライト

visionOS 26 における Widget は、Persistence（永続性）、Fixed Size（固定サイズ）、Customization（カスタマイズ性）、Proximity Awareness（距離認識）の 4 つの原則によって定義されます。

主要内容

iPad の Widget は画面上の矩形領域であり、アプリの延長線上にある存在です。一方、Vision Pro 上の Widget はそれとは異なり、部屋の中に置かれた「物体」として扱われます。壁に掛ければ絵画のように、机に置けば写真立てのように振る舞います。デバイスを再起動しても、その位置に留まり続けます（01:22）。

課題は具体的です。開発者は「画面の中の UI」を作ることに慣れすぎています。Vision Pro 向けの Widget をデザインする際、従来の発想のままだとデザインが歪んでしまいます。フォントサイズをスマートフォンの比率で縮めたり、背景をアプリのトーンに合わせたりすると、距離が離れた瞬間に判読できなくなるのです。Apple が示す回答は、Widget を実在の物体として設計するというものです。サイズは現実世界のセンチメートルにマッピングされ、マテリアルは部屋の環境光に応じて変化し、距離によって表示する情報量が変わります。

Session は Jonathan と Moritz の 2 人の講師による分担構成で、前半が Persistence と Fixed Size、後半が Customization と Proximity Awareness を扱います。すでに iPad 向け Widget を持つアプリであれば、compatibility mode を有効にすることでそのまま移植できます。visionOS 専用のサイズやマテリアルを活用したい場合は、Native Widget として実装する必要があります。

詳細

Persistence: 一度置いたら動かない（02:14）

ユーザーが Widgets app から Widget をドラッグして取り出すと、まずは library window の脇に浮かんだ状態でアタッチされます。永続的な状態にするには、物理的な面（机や棚といった水平面、あるいは壁などの垂直面）にスナップさせる必要があります。

水平面に置かれた Widget はユーザー側にわずかに傾き、影を落とすことで「設置感」を演出します。壁面に貼られた Widget は表面と同一平面上に並び、絵画のように影を投影します。Widget は常にあらゆる仮想コンテンツの背面に表示され、「この部屋に属している」という感覚を強調します。同一の Widget は複数インスタンスをサポートしており、壁面に複数並べると自動的にグリッドへ snap します。

Fixed Size: 現実世界へのマッピング（06:41）

各テンプレートサイズは、物理的な意味として固定されています。Music Poster Widget は extra-large を採用し、額装されたポスター 1 枚に相当する大きさになります。To-Do リストは small を使い、Mac Virtual Display の脇に貼り付けても視界を遮りません。

ユーザーは四隅の affordance を使って 75%〜125% の範囲でスケーリングできますが、レイアウトの比率は保たれます。間近で覗き込まれる可能性があるため、すべての素材は高解像度のリソースで用意する必要があります（08:39）。

Paper vs Glass: 2 種類のマテリアル（09:21）

Paper スタイルでは Widget 全体が環境光に応答するため、「実物感」のあるコンテンツ（アルバムジャケット、ポスターなど）に向いています。これはシステム提供の Frame、開発者がコントロールする Content、そして全体に統一感を与える Coating Layer の 3 層で構成されます。

Glass スタイルはコントラストを重視し、前景のコンテンツは常に元の色を保ち、環境光の影響を受けません。背景については、応答に参加させるかどうかを選択できます。News Widget は Glass を採用しており、編集画像が背景として柔らかく部屋に溶け込み、見出しは前景で常に明瞭に保たれます。Glass のレイヤー構造はより複雑で、Frame、Backplate、UI Duplicate Layer（メインコンテンツの背後で影感を生み出す層）、UI Layer（テキストやアイコン）、Coating Layer から成ります。

Customization: カラーパレットとマウント方式（12:34）

システムは 14 種類のカラーパレット（ライト 7 種 + ダーク 7 種）を提供します。Widget はデフォルトでは untinted の状態で本来の色を表示しますが、ユーザーが設定すると Widget 全体が tint されます。開発者は背景を tinting の対象から外す（写真やイラストを保持する）ことができますが、Frame は常に着色対象に含まれ、除外できません。

マウント方式は 2 種類用意されています。Elevated（壁面の外側に貼り付け、写真立てのような見た目）と Recessed（壁の中に埋め込み、窓のような感覚を演出）です。Recessed は垂直面でしか利用できません。机の上では「埋め込まれた」ビジュアルが成立しないためです。Weather Widget はデフォルトで Recessed を採用しており、天気を見つめる窓のように振る舞います。開発者は Elevated のみ、Recessed のみ、あるいは両方をサポートするかを選択できますが、Recessed のみを選ぶと水平面に置く能力を失う点に注意してください。

枠の太さは 5 段階で調整可能で、テンプレートサイズとは独立しています。Recessed スタイルの場合、枠の太さは固定です。

Proximity Awareness: 距離認識（17:15）

システムは Widget に対して 2 つの閾値を提供します。Default（近距離向けの詳細なレイアウト）と Simplified（遠距離向けの簡略レイアウト）です。Sports Widget は遠くからはスコアのみを表示し、近づくと試合の詳細が展開されます。

Apple はこの仕組みを、レスポンシブデザインを空間方向に拡張したものになぞらえています。応答する次元は angular size（視野角の大きさ）であり、ユーザーと Widget の距離に応じて変化します。2 つのレイアウトを設計する際は、共有要素をできるだけ残し、スケール遷移が自然になるようにしましょう。

Widget にインタラクション（ボタンなど）が含まれる場合、proximity はインタラクション領域のサイズに影響し、近距離でも遠距離でもタップしやすいことを保証します。インタラクションを持たない Widget の場合、タップ動作は「近くでアプリを起動する」になります。

重要ポイント

• Widget を「アプリのウィンドウ」ではなく「部屋の中の物体」として設計する: なぜ取り組む価値があるのか — visionOS の Widget は物理空間にアンカリングされるため、判断軸が画面座標から部屋のコンテキストへと変わります。どう始めるか — ペンを取る前に、まずどのシーンに登場するかを決めましょう。キッチン？リビング？それともデスクの上？このシーンがテンプレートサイズ、マテリアル（Paper か Glass か）、情報密度を決定します。

• 14 種類のシステムカラーパレットすべてでデザインを検証する: なぜ取り組む価値があるのか — Frame は常に tinting の対象になり、ユーザーは自由に配色を切り替えられるため、未検証のパレットではコントラスト崩壊が起きる可能性があります。どう始めるか — Widget のスクリーンショットを 7 つのライト Tint と 7 つのダーク Tint に重ねてみましょう。テキストが読めなくなったり色が衝突したりするケースについては、backplate を tinting の対象に含めるかどうかを調整します。

• 遠距離シーン向けに Simplified レイアウトを設計する: なぜ取り組む価値があるのか — visionOS Widget は壁に掛けて使われることが多く、3 メートル先からの可読性が利用されるかどうかを決めます。どう始めるか — Default レイアウトを 3 メートル離れた場所から評価し、「この距離だと全く判読できない」要素を洗い出します。それを削ぎ落とした Simplified レイアウトを作成し、共有要素を残して切り替えがスムーズになるよう配慮しましょう。

• Elevated を優先し、ウィンドウのメタファーが成立する場合のみ Recessed を選ぶ: なぜ取り組む価値があるのか — Recessed は水平面への配置能力を失うため、「向こう側を眺める」コンテンツ（天気、風景）でなければそのトレードオフは見合いません。どう始めるか — Widget のコンテンツに「視界」のセマンティクスがあるかを自問し、なければ Elevated に留めましょう。

• すべての素材を高解像度で用意し、iPad 寸法のまま書き出さない: なぜ取り組む価値があるのか — ユーザーは 75%〜125% の範囲でスケーリングでき、間近に寄って確認することもできるため、ぼやけた素材はすぐに気付かれてしまいます。どう始めるか — extra-large テンプレートの実表示サイズの 2 倍で書き出し、visionOS の実機で検証しましょう。

関連 Session

• Design hover interactions for visionOS — visionOS 上の hover や look at といった空間インタラクションの設計指針。
• What’s new for the spatial web — visionOS 26 で Web 側に追加された空間機能のアップデート。
• Design great widgets — クロスプラットフォーム Widget 設計の汎用原則。本セッションでも基礎として何度も引用されています。
• What’s new in WidgetKit — 関連する技術実装。これらのデザイン原則をコードに落とし込む方法を解説。