-
visionOS向けウィジェットのデザイン
周囲の環境に自然に溶け込む、visionOS 26向けの美しいウィジェットをデザインする方法を学びましょう。ウィジェットのデザインに奥行きを追加し、空間コンピューティングのマテリアル、サイズ、スタイルをカスタマイズする方法について説明します。既存のウィジェットをvisionOS向けに調整する方法や、現実のオブジェクトのような新しいウィジェットをデザインする方法を紹介します。
関連する章
リソース
-
このビデオを検索
「Designing Widgets for visionOS」 へようこそ Jonathanです 後で同僚のMoritzも加わって ウィジェットの詳細も説明します ウィジェットは 常に一目でわかる タイムリーな情報であり アプリを開かなくても 大切な情報にいつでも すばやくアクセスできるようにします 天気予報の確認から次の予定の表示や 目標の進捗状況の確認まで ウィジェットによって 便利なコンテンツに 簡単にアクセスできます このセッションでは これらのアイデアが どのようにvisionOSに拡張されるか そして 人々の空間に馴染みのある ウィジェットをデザインするために このプラットフォームの空間的・視覚的 機能を活用する方法を紹介します visionOSでは ウィジェットが 新しい形になりました 3Dオブジェクトになり 周囲の環境に 自然になじみます 壁 机 棚の上など どこに置かれても アプリの情報を周囲に溶け込ませ いつでも手元で確認できます
Moritzと私で これらを実現する デザインシステムについて説明します ウィジェットの空間内での 振る舞いを決める原則を探り 新しいマテリアル スタイル サイズの 操作に関する実用的なヒントを共有します ウィジェットは見栄えが良いだけでなく 人々が暮らし 働き くつろぐ場所に ふさわしいものです iPadアプリにすでにウィジェットがあるなら もうすばらしいスタートを切っています 互換モードを有効にするだけで 既存のウィジェットは visionOSに移行し 新しい空間的・視覚的な処理が 自動的に適用されます この処理により デザインに 新しい奥行きと立体感が得られ 人々はウィジェットを簡単に自分の環境に 配置できるようになります
また visionOS専用に設計されたネイティブ ウィジェット構築することもできます これにより プラットフォーム固有のサイズや 強化されたビジュアルスタイルを利用でき ウィジェットと周囲の空間との 一体感がより強くなります Music Posterウィジェットは良い例であり 単なる画面上のインターフェイスではなく 部屋に飾るポスターのようなデザインです デザインの指針として Vision Proのウィジェットに関する 4つの基本原則を詳しく見ていきましょう 最初の原則は永続性です visionOSのウィジェットを定義する側面です 誰かが自分のスペースにウィジェットを 置くとその置いた場所にとどまります ウィジェットはその場所に固定され セッションをまたいでも保持されます 部屋を移動しても デバイスを 再起動しても変わりません
それを前提として 次の原則は固定サイズです ウィジェットは一貫した実世界での スケールを持ち どこに置いても バランスよく調和します Music Posterウィジェットは 特大テンプレートサイズを使用しており 印刷されたアートフレームのような 親しみのある寸法になっています 永続性があり サイズが 固定されていることに加えて visionOSのウィジェットは アプリとそのユーザーの双方が 高度にカスタマイズできます ユーザーはウィジェットの外観を自分の 空間に合わせてパーソナライズでき 開発者は様々な空間になじむ ウィジェットのスタイルオプションを 提供できます
最後に 近接認識があります visionOSのウィジェットは その外観とレイアウトを ユーザーとの距離に応じて適応させます 部屋の遠くから見ても 近くで見ても 常に適切なレベルの詳細を表示します これから各原則を1つずつ順に 説明していきます まず永続性と それが人々の空間でのウィジェットの動作を どのように形成してきたかを解説します ウィジェットは部屋に配置されると 永続的にそこに残ります これにより コンテキストを意識した 永続的な体験をデザインする 新しい可能性が広がり ウィジェットは 人々の生活空間に溶け込みます 詳細に入る前に visionOSで人々がウィジェットにアクセス する方法を理解しておくと役立ちます ホームグリッドのウィジェットアプリで 検索して配置できるため 簡単にウィジェットを見つけて あらゆる空間に追加できます ユーザーがウィジェットアプリから ウィジェットを追加すると 最初は切り離された状態で表示され ライブラリウインドウの横に浮かんでいます 空間に固定するには ウィジェットを水平面または 垂直面に配置する必要があります これにより永続的な位置に 固定されます 机 テーブル 棚などの水平面に置くと ウィジェットは それを置く人に 向かってゆっくりと傾きます この微妙な角度により視認性が高くなります 空間で地に足をつけて立っているように 感じさせる影を落とします
ウィジェットを壁に配置すると 表面と一体化するように揃えられ 額縁のようなリアルな影を落とします visionOSのウィジェットは 常にフレーム内に表示され デジタルコンテンツを周囲の環境と つなぐ役割を果たします
visionOSにどのようなウィジェットを 導入するか検討したり ゼロから設計したりする際には それらが部屋の一部であると 考えるとわかりやすくなります
常にコンテキストを意識して デザインしてください ウィジェットは孤立して 浮かんでいるのではなく 人々のキッチン リビングルーム オフィスなどの一部になります 環境はウィジェットの 視認性や利用方法を左右します 早い段階でこれを考慮することで より良い体験を提供できます
例として Weatherウィジェットを取り上げます visionOSでは Weatherは大きな 窓のような フォーマットを採用しています このデザインは 現在の状況を 明確に描写することを優先しており 実際に窓の外を見ているような錯覚を 作り出すことを目指しています テキストサイズは 部屋の向こう側からでも 一目でわかるようにデザインされており 壁に掛けたときの視認性を確保しています スケールや視覚的な存在感の変化は ウィジェットが環境に適応し その空間をより豊かにする好例です 一度ウィジェットを配置すると そのまま残りますが 複数を配置できます visionOSはマルチインスタンス ウィジェットをサポートしています つまり 同じウィジェットの複数の コピーが1つのスペースに存在できます 壁に配置すると 使い慣れたグリッド レイアウトにすっきりとはめ込まれます クロスプラットフォームの デザインガイドラインに従うと ウィジェットはグリッド内の他の要素と 並んでシームレスに収まります
ウィジェットのデザインに関する より一般的なガイダンスについては 同僚のMacによる「Design great widgets」セッションをご覧ください
Visionを使用している間はウィジェットは 現実世界に存在しているため 実際の物体のように振る舞います ウィジェットはすべての 仮想コンテンツの背後に表示されるため 周囲の空間とのつながりが強調されます ウィジェットは物理的な 表面にのみスナップし 仮想環境には固定されず 永続化もされません ウィジェットが空間内で永続化する 仕組みを理解できたところで 空間内でのスケーリングについて 見ていきましょう 2番目の原則は固定サイズです デジタルコンテンツが 実在するオブジェクトと共存する場合 適度なサイズ感が必要です そのため visionOSのウィジェットは 定義済みの 一貫した寸法を持ち 壁 机 棚のどこに置いても 違和感なくなじむように表示されます
他のプラットフォームと同様に visionOSでも複数のウィジェット テンプレートから選択できます ただし ここでは これらのサイズが 現実世界の寸法にマッピングされています つまり 選択したサイズは誰かの空間に 物理的に存在することを意味します 意図を持った設計が必要です ウィジェットを配置する場所を考えましょう 壁に掛けますか それとも 作業スペースの横に置きますか そのコンテキストに適切な サイズを選択してください ウィジェットは実際のオブジェクトと 空間を共有するため レイアウトがこれまで以上に重要です 印刷物や案内表示の原則を 意識してデザインします 明確な階層構造や明瞭なタイポグラフィ 慎重なスケール調整を使用して どの距離から見てもコンテンツが 明確に伝わるようにします サイズがコンテキストを 補助する例を示します 生産性重視のウィジェットを 設計する場合 机の上に簡単に置ける小さいサイズの テンプレートで提供することをお勧めします これはTo Doリストなどに 特に効果的です Mac仮想ディスプレイの隣に配置すれば 仕事をしながらでも 常に一目で確認できます 一方で Vision Proの使用中にユーザーが空間を 装飾できるようにすることが目的の場合は アート作品や写真などの 視覚的に豊かなコンテンツに適した 特大テンプレートサイズの 使用を検討してください その結果 ウィジェットは 存在感のある作品になり インターフェイスというより ウォールアートのように感じられます ここまで 適切なテンプレートサイズを 選択することで ウィジェットが様々な環境に 自然になじむ様子を見てきました ただし サイズは完全に 固定されているわけではありません ユーザーは自分でサイズを 調整することもできます 各テンプレートのサイズはコーナー ハンドルを使用してサイズ変更でき 75%から125%の範囲で拡大 縮小しても レイアウトは維持されます ユーザーはウィジェットのサイズを 変更したり 間近で見たりできるため 常に高解像度のアセットを 使用するようにしてください ここからは同僚のMoritzに バトンタッチして ウィジェットをさらにパーソナルで 表現力豊かなものにし 様々な環境に適応させる方法を解説します こんにちは Moritzです visionOSのウィジェットを パーソナライズする方法について ユーザーがカスタマイズする方法と開発者が 提供するオプションの両面から紹介します これらの選択肢により ユーザーは自然に感じられる方法で ウィジェットをパーソナライズし 自分の環境に合わせることができます
それがどのように実現されているのか 詳しく見てみましょう ウィジェットをデザインする際に その全体的な外観を決定するために 2つのスタイルの処理から選択できます Paperは 印刷物のように落ち着いた スタイルで環境の一部としてよくなじみます Glassは 軽やかなレイヤー構造の外観で 奥行きや 前景と背景の視覚的な分離を もたらします それぞれ空間内で異なる存在感を 生み出すため 適切なスタイルを選ぶことで 意図した体験の質を高めるのに 役立ちます まずPaperから見ていきましょう 印刷物のような外観で 部屋にある実際のオブジェクトのように 感じられるデザインを 目指す場合 Paperは適切な選択肢です この処理では ウィジェット全体が 周囲の照明に応じて変化し 自然に周囲に溶け込むようになります
例えば Music Posterウィジェットは Paperスタイルを使用して アルバムやプレイリストを 壁に掛けた フレーム入りアート作品のように表示します
視覚的には Paperスタイルはいくつかの 主要コンポーネントで構成されています
システムが提供するフレームや 開発者がデザイン・管理するコンテンツと そのすべてを調和させて 周辺の照明への反応を示す 繊細な反射コーティングです Paperが空間に溶け込むことに 重点を置いているのに対し Glassは 明瞭さとコントラストを 強調する別のアプローチを取り 特に情報量の多い ウィジェットに適しています
前景の要素は常にフルカラーで表示され 周囲の照明の影響を受けないため 重要なコンテンツが1日を通して 鮮明で読みやすい状態に保たれます
また Glassでは 前景と背景の間に 視覚的な分離が導入されるので インターフェイスのどの部分を 環境に適応させ どの部分を一貫して表示するかを 決定できます
例えば このNewsウィジェットでは 背景に記事の画像が柔らかい 印刷物のような質感で表示され 前景には記事の見出しが 常に明瞭で読みやすく表示されます
Glassスタイルは 複数のレイヤーで 構成され それらが連携することで 奥行きや 明瞭さ 空間での存在感を 生み出しています
システムによって提供されるフレームは ウィジェットをその表面に固定します 背景（バックプレート）はコンテンツの 背後に配置され 開発者自身が定義できます
UI複製レイヤーは微妙な奥行きを加えます これは インターフェイスを 暗めにした 影のようなもので メインコンテンツのすぐ背後に配置されます
UIレイヤーには テキスト グリフ グラフ などの主要なコンテンツが配置されます 要素は明るく 鮮明で 非常に 読みやすい必要があります
最後に コーティングレイヤーは柔らかい 反射仕上げを加え ウィジェットが 部屋の照明に適応できるようにします これらのレイヤーが組み合わさって Glassスタイルの視覚的構造が形成され 明瞭さ 奥行き 柔軟性が もたらされます
ここまでは ウィジェットの視覚的構造が どのように形成されるかを見てきました 人々がその外観をさらにパーソナライズする 方法を見てみましょう まずは色からです visionOSには システムが提供する 豊富なパレットセットが含まれており 様々な環境で機能するように 設計されています 7つのライトオプションと 7つのダークオプションがあり ユーザーのスタイルに 柔軟に対応できると同時に ウィジェットがどの空間でも 美しく見えるようにしています ウィジェットのデザインにおいて コンテンツをテストする際は システムのカラーパレットの 全範囲を対象にすることが重要です
ウィジェットは 最初は色調整が行われずに デザインのフルカラーで表示されます
配置した後 ユーザーは設定UIで色を選択して ウィジェットをパーソナライズできます
ウィジェットの背景を色の調整に 含めるかどうかを選択できます 写真やイラストを保持するなどの目的で このオプションを選択しなかった場合は 選択したカラーパレットと調和するように 見栄えを確認してください ウィジェットのフレームには 常に色の調整が適用されます 除外することはできません 色とスタイルは ウィジェットが 空間と調和するのに役立ちます マテリアルも 1日を通して照明が変化する 中でウィジェットの印象を形成します
Paperは室内に合わせて自然に薄暗くなり 視覚的な一体感が保たれます 一方 Glassは暗い場所でも前景要素を 明るく読みやすく保ちます マテリアルが様々な照明条件で ウィジェットを自然に見せるように 設置スタイルは周囲の空間との 関連性を形成します
ウィジェットの壁への配置方法は その見え方に大きく影響し 展示されたオブジェクトや その先にある 眺めのように感じられたりします visionOSでは ユーザー選択できる 2つの設置スタイルを提供しています ElevatedとRecessedで Recessedは壁にはめ込まれています
Recessedでは 壁に切り欠きが あるような印象を与え コンテンツは空間に溶け込みます 天気情報や厳選ビジュアルなど イマーシブ または環境コンテンツに最適で 深みを加えることで体験の質が向上します
Elevatedは ウィジェットを 壁の表面に配置するスタイルで 額縁の取り付け方法に似ています 目立たせたいコンテンツや存在感を 持たせるのに適したスタイルで リマインダーやメディア 一目で確認できるデータに最適です
デフォルトはElevatedスタイルですが それには正当な理由があります 垂直面にも水平面にも 対応できるため ほとんどのウィジェットタイプに適した 汎用的な選択肢です
実際 机やテーブルなどの水平面に ウィジェットを配置する場合は 常に Elevatedスタイルが使用されます これは 一貫性のある 親しみやすい 表示を維持するためです
Recessedスタイルは独特の 奥行き感を生み出します 例えば Weatherウィジェットでは 別の場所への窓のような感覚を演出します このスタイルは垂直面でのみ使用できます この効果は位置合わせに依存しており テーブルや机では機能しないからです Recessedは無効化することも 専用の設定にすることもできます ただし これを行うと水平配置が 削除されることに注意してください ユーザーがウィジェットの外観を パーソナライズする別の方法として フレーム幅の調整があります
テンプレートのサイズに関係なく 細いものから太いものまで 5種類のオプションから選択できます
レイアウトをすべての幅でテストして バランスが保たれるようにしてください Recessedスタイルを使用する場合 フレーム幅は固定で カスタマイズできません
フレーム幅 設置スタイル 色調整の すべてがカスタマイズUIに まとめられており ユーザーはウィジェットを自分の空間や スタイルに合わせてパーソナライズできます
標準のオプションはシステムが処理しますが デザインに合わせたカスタム設定を追加して このUIを拡張することもできます
例えば Music Posterウィジェットでは ユーザーはアルバムアートから生成された ライトまたはダークのテーマを選ぶか 時刻に基づいて色調を調整する 自動オプションを選択できます
このようなパラメータを公開することで コンテンツに応じた 意味のあるカスタマイズが可能になり ウィジェットの表現力と適応力が向上します ここまでは ウィジェットの カスタマイズやスタイル設定 どんな空間にも溶け込む 配置の方法を見てきました しかし visionOSのウィジェットを 本当に際立たせる機能がもう1つあります それが近接認識です これにより ウィジェットは ユーザーとの距離を正確に把握できます これにより 情報密度を リアルタイムで調整し ウィジェットが常に読みやすく 関連性が高く 適切な詳細情報を提供するよう設定できます ユーザーが部屋の端から見ているか 間近で見ているかは関係ありません
visionOSには デザインで考慮できる 2つの重要なしきい値があります
Defaultはウィジェットを 間近で見る場合に使用し Simplifiedは遠くから 見る場合に使用します 両方の状態をサポートするために 完全な再設計は必要ありません 必要なのは慎重なレイアウト調整のみで 例えば 細部を削減したり 文字サイズを変更することで どの距離からでもコンテンツの 視認性と効果を保つことができます
例えば Sportsウィジェットでは 遠くから見たときには 最も重要な情報のみが表示されます
ユーザーが近づくと 現在の試合の より詳細な情報が表示されます
スムーズで一貫性のある 体験を提供するために 可能な限り 両方の距離のしきい値間で 共通の要素を維持するようにしてください
これにより レイアウトの連続性を保ちつつ 各要素はどの距離でも 適切なサイズと視認性で 表示されます レイアウトの調整は重要な要素の1つですが 近接性はユーザーによるウィジェットの 操作にも影響を与える可能性があります
ウィジェットは 軽量で一目でわかる インタラクションをサポートします 例えば 生中継の野球の試合の詳細を 表示するボタンを追加できます
近接認識を活用することで ウィジェットのインタラクティブ領域が 常に簡単に操作できるようになります ユーザーが近くにいても 遠くにいても関係ありません ウィジェットに インタラクションが含まれていない場合 タップすると ショートカットとして 近くのアプリが起動されます
近接認識にはどのように アプローチすればよいでしょうか？ すべてのウィジェットに 必要なわけではありませんが 距離に応じて調整することで 明瞭性が大幅に向上します
これはレスポンシブデザインに似ていますが 変化するのは画面サイズではなく視角で ユーザーが近づいたり 遠ざかったりしたときに調整されます レイアウトが調整され 適切なレベルの 詳細情報が表示されます
これまでvisionOSのウィジェットが ユーザーの空間に溶け込み 環境に応じて反応し ユーザーとの距離に適応する 仕組みを見てきました
レイアウトやマテリアルから インタラクションやカスタマイズまで 多くの機会を活用して 実用的でありながら 深くパーソナライズ されたウィジェットを作成できます
最後に 開発作業を始めるにあたって 重要なポイントをいくつかまとめましょう
コンテンツをこの新しい環境にどのように 溶け込ませることができるか考えてください アプリにすでにウィジェットがある場合は それらがユーザーの環境に配置されることで 新しい意味を持つ可能性を検討します ネイティブなvisionOS体験を 構築している場合は 一目で確認でき永続的に表示される どのような種類のコンテンツであれば ユーザーの1日を通して 本当の価値を提供できるか考えてみます
技術的な詳細とアプリにウィジェットを 導入する方法については 「What's new in WidgetKit」を 確認してください
visionOSは ウィジェットに まったく新しい次元への扉を開きました 皆さんが何を構築するか楽しみです ご視聴ありがとうございました あとは空間の調整とセンス どこで終わりにするかの判断だけです ありがとうございました
-
-
- 0:00 - イントロダクション
This session on Designing Widgets for visionOS explores how widgets, traditionally 2D, become 3D objects in visionOS, seamlessly integrating into users' physical spaces like walls, desks, or shelves. The session covers: - Adapting existing iPad widgets: Enabling compatibility mode automatically gives existing widgets a spatial and visual treatment for visionOS. - Building native visionOS widgets: These offer platform-specific sizes and enhanced visual styling for a more integrated feel. - Four core design principles: - Persistence: Widgets stay permanently placed in the user's chosen location. - Fixed size: Widgets have consistent, real-world scales. - Customization: Users can personalize widgets, and developers can offer styling options. - Proximity awareness: Widgets adapt their appearance based on the user's distance.
- 3:36 - 表示の永続化
In visionOS, widgets are designed to seamlessly integrate into users' physical environments, appearing as framed digital content that can be placed on horizontal or vertical surfaces. When placed, widgets tilt, cast shadows, and adapt their scale and format to enhance legibility and create an illusion of being part of the room—such as the Weather widget resembling a window.
- 6:39 - 固定サイズ
The second principle of widget design In visionOS, is fixed size with real-world dimensions. Widgets come in predefined templates that correspond to physical sizes, such as small for desk-top productivity tools like to-do lists, or extra-large for decorative pieces like artwork. This intentional sizing ensures widgets blend seamlessly into users' spaces. Users can also adjust widget sizes within a 25% range, so designers must use high-resolution assets. Thoughtful layout, hierarchy, and typography are crucial, drawing from print and wayfinding principles, to maintain clarity from various distances.
- 8:57 - カスタマイズ
Developers can create widgets with two main stylistic treatments: Paper and Glass. Paper widgets have a print-like, grounded appearance that responds to ambient lighting, blending seamlessly into the surroundings. Glass widgets, on the other hand, have a lighter, layered look with full-color foreground elements that remain sharp and legible regardless of lighting conditions. Users can further personalize widgets through various options such as choosing from a rich set of system-provided color palettes, adjusting the frame width, and selecting between two mounting styles: Elevated (which sits on the surface like a picture frame) and Recessed (which creates the illusion of a cutout in the wall). Developers can also extend the customization UI with custom settings tailored to their specific design, allowing users to make widgets feel more expressive and adaptive to their space and style.
- 17:14 - 近さの認識
In visionOS, widgets utilize proximity awareness to dynamically adjust their content based on the user's distance. Developers can design widgets for two main thresholds: up close and from a distance. This adaptation involves thoughtful layout adjustments, such as scaling back detail or changing type size, to ensure readability and relevance. For instance, the Sports widget displays essential details from afar and reveals more information as the user approaches. Proximity awareness also influences interactions, making touch targets easy to hit regardless of distance. Even non-interactive widgets benefit from this feature, as a tap launches the app nearby.