long forgotten now…

Liquid Glass に対応したアイコンデザインについて。「等間隔になった」デザイングリッドについて、たしかに以前はそうでなかったことを思い出した。レイアウトがしやすくなりそう（どれだけのデザイナーが従来のグリッドを尊重してデザインしていたかは不明だが、、） これまで自社アプリはダークテーマにも対応できてない状態だったが、強制的に Liquid Glass の視覚効果が与えられることによって従来のままではやや不恰好に見えてしまっている。Icon Composer も用意され、これを機に自社他社問わず、放置されていたアイコンの最適化が促進されるかもしれない。

0:00 – Intro

• visionOS のレイヤーアイコンと実際のガラス特性を研究して生まれた「Liquid Glass」マテリアル
• エッジハイライト、曇り(frosty)、透過性を組み合わせて奥行きと内側からの照明効果を実現
• iOSホーム画面ではジャイロ入力に基づいて光が動き、周囲の世界を反射しているような感覚
• 新しい外観モード：
  • モノクロガラス（ライト・ダーク）
  • ティントモード（ダーク・ライト）
    • ダーク：前傾にカラー
    • ライト：背景ガラスにカラーが注入
• 全ての外観モードが iPhone、iPad、Mac で利用可能。Apple Watch でもライトモードアイコンが更新された外観で表示
• App Store 商品ページでも更新されたアイコンが反映

2:20 – Design System

• 統一されたアイコン言語により、デバイス間でのデザインが容易になった
• 角丸四角型 (macOS, iOS)：1024px キャンバスで、よりシンプルで均等に配置され余裕のあるデザイングリッド、より同心円状で丸い角半径
  • macOS では従来、アイコン形状から一部はみ出すケースがあった
  • 形状がキャンバス形状がマスクとして機能し、不規則な形状を回避
  • 既存のアイコンは自動的にリサイズ、マスクまたは拡張されて、新しいマテリアルを適用
• 円型 (watchOS)：1088px キャンバスで、角丸矩形よりも広く、プラットフォーム間の一貫性を実現しやすい
• 新しいテンプレート（Figma、Sketch、Photoshop、Illustrator対応）をApple Design Resourcesで提供

5:18 – Drawing Icons

• レイヤリング：背景と前面レイヤーの基本構造、複数レイヤーの積層で奥行きを表現
  • 1枚の背景レイヤーと、1枚以上の前面レイヤーで構成可能
    • Messages: 背景1枚、前面1枚
    • Podcasts: 背景1枚、前面3枚として立体感ある奥行きを実現
• シンプルさの重視：複雑な3Dオブジェクトや遠近法は避け、フロントビューとフラットな外観を推奨 (e.g. Chess)
• 透過性：新しいマテリアルでの透過性とブラー効果で軽やかさと奥行きを追加
• 「少ないほど良い」原則：重複を減らし、Liquid Glass の効果を活かす（透明感、レイヤーごとの影やスペキュラハイライト）e.g. Photos
• レイヤーの数を減らし、形状に丸みを持たせ、視覚的効果を削除 → Liquid Glass の処理にゆだねる (e.g. Home)
• 細部の配慮：鋭いエッジや細い線を避け、丸い角を使用して光の流れを滑らかに → 要素端の光の動きが滑らかになる (e.g. Settings の歯車)
• 背景：ソフトな明暗グラデーションに加え、白黒背景の代わりに使えるシステムライト・ダークグラデーションを用意
  • グラデーションは、上から下に、明 → 暗
  • 色付き背景を推奨。ライト・ダークモード間の区別を明確にできる

SF Symbols アップデート。もはや高機能すぎて数年前から使いこなせる気がしていない、、が Draw 機能によって、ものによっては Lottie に依存する必要がなくなったかもしれない。グラデーションもシンプルながら表現力を底上げできるので嬉しい。

2:19 – 描画（Draw）

• 新機能「Draw」追加。手書き風アニメーションでシンボルをパスに沿って描画
• Draw On（登場）と Draw Off（消失）の2つのアニメーションプリセット
  • それぞれ既存の再生オプションをサポート
    • By Layer：デフォルト、レイヤーごとに開始時点が異なる
    • Whole Symbol：すべてのレイヤーをまとめて描画、各パスのアニメーションが同時開始終了し、素早い
    • Individually：新しいオプション、レイヤーごと逐次的にアニメーション実行する
• シンボルごとに描画方向を柔軟に設定可能（例：左右、中心から外など）
• 複雑なシンボルもサポート
  • 例：矢印の矢を遷移沿って移動させる
• Variable Draw（進捗や強度を描画で表現）も新たに追加
  • 例：ダウンロードやワークアウトの進捗、温度計
  • SF Symbols app で確認可能

6:02 – マジック置換

• Magic Replaceが強化され、関連シンボル間のアニメーション遷移がより滑らかに
• 同じエンクロージャ（囲い）を持つシンボル間で、囲いを維持しつつ他の部分を置換
• Drawアニメーションと組み合わせて、より表現力豊かな遷移が可能に

7:01 – グラデーション

• シンボルにグラデーション（線形グラデーション）を適用可能に
  • 光が当たっているような印象を与えられる
• すべてのレンダリングモードで利用可能
• 特に大きなサイズで立体感や奥行きを強調したい場合に有効

8:02 – カスタムシンボル

• カスタムシンボルにもDrawやグラデーションなど新機能を活用可能
• Drawアニメーションには「ガイドポイント」を描画パス上に配置して描画経路を指定（パスに少なくとも２つ必要）
• ガイドポイントには開始点・終了点に加え、中間点を加えて複雑なパスを構成する
• ガイドポイントには複数種類があり、複雑なパスや複数サブパスにも対応
  • 複数のサブパスで開始・終了点を共有
  • コーナーポイント：急カーブや鋭い角に特別な処理が求められるため指定
• 複数パスが存在する場合は、それぞれに描画パスと方向のルールセットを指定
• 中心からアニメーションする場合、双方向描画をアノテート
  • 開始点の両側にガイドポイントを配置するとシステムが自動的に双方向性を認識する
• 適応型（addaptive）エンドキャップ
• アタッチメント（例：矢印の先端）も火病が要素としてガイドポイントに紐付けてアニメーション可能
• 重なり合うパスや複雑な形状にも柔軟に対応するための詳細設定が用意
• カスタムシンボルは Regular、Ultralight、Black の3つのウェイトでガイドポイントを設定すれば、他のウェイトは自動補間される
  • Regular 以外でガイドポイントが不正になった際調整が必要、その時ガイドポイントの順序に注意（ポイント番号を表示可能）
• 可変描画（Variable Draw）もカスタムシンボルで利用可能

20:52 – 新しいAPI

• SwiftUIでは symbolEffect モディファイアで Draw アニメーションを適用
  • .symbolEffect(.drawOn, isActive: isHidden)
  • .symbolEffect(.drawOn.indicidually, …)
• AppKit・UIKit でもDraw On/Off を指定してアニメーション可能
• Variable Draw やグラデーションも API で簡単に指定可能
  • .symbolVariableValueMode(.draw)
  • .symbolColorRenderingMode(.gradient)
• コード例は SF Symbols アプリの「Copy Code」ボタンから取得可能
• 新機能を活用するには SF Symbols 7 ベータ版のダウンロードと、カスタムシンボルの再設計・注釈付けが推奨

visionOS 26 におけるスタイラスやゲームコントローラへの対応について。コントローラには興味なかったが、近い将来 Apple Pencil が 6DoF 対応し、Vision Pro でも利用可能になる伏線と見てチェックした。

実は、XRコンテンツにおけるコントローラ／ハンドトラッキングの是非については過去にも（当時）Oculus Quest での体験をもとに考察したことがあった。

Oculus: ハンドトラッキングに感じる課題

パススルーしない没入型VRコンテンツ内において、コンテンツへ対しての触覚やグリップ感を違和感なく表現するにはコントローラが優位だと考えた。ハンドジェスチャーにはその正確さや、触覚を伴う繊細なフィードバックに限界があるので（コントローラ一辺倒な体験設計は好ましくないだろうが）空間アクセサリを伴うユースケースの充実に期待したい。

0:00 – スタート

• visionOSでは「目と手」による入力が基本だが、より細かい制御、ボタン入力、触覚フィードバックを可能にする空間アクセサリのサポートを追加。
• サポートされるアクセサリ：
  • PlayStation VR2 Sense controller: ゲームに適したボタン、ジョイスティック、トリガーを搭載。標準ジェスチャー（タップなど）でシステムナビゲーションも可能
  • Logitech Muse: 先端とサイドボタンで可変入力が可能なフォースセンサーと強力な触覚フィードバックを搭載。生産性・クリエイティブアプリに適した精度
• アクセサリは full space アプリ、shared space アプリの両方で使用可能。
• Apple Vision Proのカメラとアクセサリのセンサーを組み合わせて位置と回転をトラッキング

2:41 – 彫刻アプリの構築

• セットアップ:
  • Xcodeの機能エディタで「Spatial Gamepad」にチェックを入れて空間ゲームコントローラーサポートを追加
  • アプリのplistで「Accessory Tracking Usage」の説明を記述（例：「Tracking accessory movements to carve into virtual clay」）
• アクセサリの接続:
  • GameController フレームワークを使用して空間アクセサリとの接続を検出
  • GCController（ゲームコントローラー）と GCStylus（スタイラス）の両方がGCDevice プロトコルに準拠。
  • 接続・切断イベントをリッスンし、productCategory が「Spatial Stylus」または「Spatial Controller」かどうかを確認
• 仮想コンテンツの表示:
  • full space / shared space 両方で使え、プライバシー保護のため認証されたアプリのみ動き追跡可
  • AccessoryAnchoringSource を作成し、アクセサリの「aim」位置にターゲット
  • AnchorEntity を作成し、accessory ターゲット、aim 位置、トラッキングモードを指定
  • トラッキングモード：
    • predicted: 低遅延だが急激な動きでオーバーシュートする可能性。
    • continuous: 高精度だが高遅延
• インタラクションの実装:
  • SpatialTrackingSession に .accessory を追加してアクセサリの AnchorEntity のトランスフォームを取得。
  • 実装例
    • アクセサリが粘土に入った時に素材を削除し、触覚フィードバックを発生

13:37 – ARKitによるアクセサリのトラッキング

• ARKit AccessoryAnchorの4つのプロパティ：
  • handedness: アクセサリを握っている手（左/右）
  • relativeMotion: 空間内での相対的な動き。
  • relativeRotationalMovement: 空間内での相対的な回転運動。
  • trackingState: トラッキング品質（センサーやカメラのカバレッジが低下すると品質も低下）
• RealityKitとARKitの連携:
  • SpatialTrackingSession が実行中で設定されている場合、RealityKit AnchorEntity から ARKit AccessoryAnchor を取得可能
  • AnchorEntity の ARKitAnchorComponent にアクセスし、ARKitAnchorを取得して AccessoryAnchor にキャスト
• リアクティブツールバーの表示:
  • アクセサリアンカーからheld chirality（利き手）を取得。
  • 左利きの場合は正のX方向、右利きの場合は負のX方向にツールバーを表示

14:45 – デザインに関する考慮事項

• UIとの相互作用:
  • ビューにゲームコントローラー入力（ボタンやトリガー）をジェスチャーの代わりに受信するよう指示可能
  • 標準の手ジェスチャーとゲームコントローラーの両方を入力として処理可能
  • SwiftUIビューで .receivesEventsInView 修飾子を設定してジェスチャーイベントも受信
• 没入感の向上:
  • 完全空間アプリでは .persistentSystemOverlays APIでホームインジケーターを非表示
  • .upperLimbVisibility APIで上肢とアクセサリを非表示
• 適応的サポート:
  • 空間アクセサリと手の両方に対応することで、より多くのユーザーをサポート
  • ARKit は今年さらに高速で手をネイティブトラッキング
• App Store バッジ:
  • 「Spatial game controller support」: 空間アクセサリトラッキング付きゲームコントローラーをサポート
  • 「Spatial game controller required」: 空間アクセサリトラッキング付きゲームコントローラーが必須

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（遠距離）: 一目でわかるよう、必要不可欠な情報のみを表示
• 距離に応じてボタンを追加するなど、距離に応じたインタラクション領域の変更が可能
  • インタラクションが含まれていなければ、ウィジェットタップでアプリ起動

visionOS 関連のアップデート。visionOS 26 にアップデートしてから、ウィンドウにボタンが増えたので何かと思ったらこれのことか。今のところ身近に共有できる相手（Vision Pro ホルダー）がいないし、共有したいコンテンツも思いつかないのだが、、コンテンツのシェアリングは今のスマホやノートだと、物理的に身を寄せ合う必要があって限界があるため、今後グラス型のようにカジュアルユースなデバイスが登場するとしたら、体験共有のシームレスさが大きな売りのひとつになるかもしれない。

0:56 – 近くの人との体験共有の詳細

• 各ウインドウのバーに新設された「共有」ボタンから、近くの人を選んで簡単に共有開始。
  • 共有されたウインドウは、全員の空間で同じ位置・サイズで表示され、ウインドウバーが緑色に変化。
  • まるで部屋にあるかのように指し示したりインタラクトすることが可能
  • 誰でもウインドウの移動・リサイズが可能で、全員の表示が同期。
  • デジタルクラウンで再センタリングも可能。手がウインドウに重なると内容がフェードし、人物が見やすくなる。
• FaceTime との連携で、リモート参加者も空間に「ペルソナ」として登場し、近くの人と自然に混在可能。
  • ペルソナの表示位置は、共有するウィンドウのタイプ（e.g. volumetric）による
  • iOS/macOS など他プラットフォームからの参加者は、ウインドウ横にビデオ表示。
• デフォルトでは「閲覧のみ」共有（他の人がアプリを持っていなくてもOK）。
• インタラクティブな体験には SharePlay を採用。
  • visionOS の既存 SharePlay アプリは追加対応不要で近くの人と共有可能。
  • SharePlay の新APIで、近くの人向け体験を強化可能。

5:35 – 共有メニューからの共有の許可

• 新しい Share メニューで GroupActivity を公開することで、ユーザーが簡単に共有を開始可能。
• Volumetric ウインドウでは、アクティビティを公開していれば Share メニューが使える
  • 実装例の紹介
• ImmersiveSpace ではウインドウバーがないため、アプリ内ボタンで共有開始を促す設計が必要。
• 共有開始時に GroupSession を取得し、SharePlay を開始。
• supportsGroupImmersiveSpace を true に設定し、全員の空間を同期。

9:15 – 近くにいる参加者の体験の向上

• 新APIで「近くの参加者」と「リモート参加者」を判別可能。
  • GroupSession の ParticipantStateから .isNearbyWithLocalParticipant .localParticipant で判別　　
  • 物理的に近い人同士を同じチームに割り当てるなど、空間に応じた体験設計が可能。

10:37 – ユーザーの相対位置へのコンテンツの配置

• 参加者の空間内の位置（ParticipantState.pose）を取得し、各ユーザーの近くにコンテンツを配置するよう実装可能。
• pose はリアルタイム追跡ではなく、共有開始や再センタリング時に更新。
• seat pose（固定座席位置）も取得可能で、空間テンプレートのカスタマイズも可能。

13:20 – 共有されたメディア再生の調整

• visionOS 26の AVPlayer/AVPlaybackCoordinator で、近くの人同士のメディア再生を完全同期するよう設計
  • 物理的に近いと、参加者のデバイスからの音ズレが顕著なため
• GroupSession と連携し、音声・映像の遅延やエコーを防止。

15:38 – 複数のウインドウのサポート

• 新APIで、複数 WindowGroup のうちどれをSharePlay対象にするかを明示的に指定可能。
• .groupActivityAssociation 修飾子で、共有対象ウインドウを切り替え可能。

16:50 – アンカーされたコンテンツの共有

• ARKitの新APIで、物理空間に固定した WorldAnchor を近くの参加者と共有可能。
  • ImmersiveSpaceは空間全体が動くため、物理的な位置固定に必要
  • WorldTrackingProvider を使用した実装方法の紹介
• sharedWithNearbyParticipants を true にしてアンカーを作成し、全員のデバイスで同じIDで同期。
  • worldAnchorSharingAvailability
  • これにより、家具配置アプリやコラボ体験など、物理空間を活かした共有体験が実現。
• SharePlay 外でも独自のネットワークレイヤでも共有可能（ビジネス用アプリ）

visionOS に関連するセッションビデオから。カスタムでホバーエフェクトが実装できるようになったとは、登場当初から期待していたが、いざ対応されると驚きだった。これまでは形状しかカスタマイズできなかった。ウェブアプリと同様にホバー表現が多様化するだろう、視線操作においてどんなインタラクションが有効であるかは良い題材になりそうだ。

0:33 – 基本知識

• 重要なコンテンツは正面に配置し、インタラクティブ要素は丸みのある形状（円、ピル、角丸長方形）を推奨
• 正確な操作のため、各要素は最低60ポイントのスペースを確保
• 3Dオブジェクトも同様に、60ポイントは1m先で約4.4cmに相当
• すべてのインタラクティブ要素にハイライト効果を適用し、カスタムコンポーネントや3Dオブジェクトにも同様の効果を追加

1:57 – カスタムエフェクト

• 標準のハイライト効果に加え、独自のアニメーション（カスタムホバーエフェクト）を作成可能
  • standard appearance
  • hovered appearance
• カスタムエフェクトは、アクション実行には使えない
  • 例: ダウンロードボタンを見つめただけではダウンロードは実行できない
• アニメーションは3タイプ、用途により使い分け
  • 即時 instant: 見たら即時アニメーション
    • ボタンの先にさらに選択肢があることを示すインジケータの表示
    • 動画シークバーに残り時間のtooltipを表示
  • 遅延 delayed: 遅れて表示
    • ボタン下に表示されるタイトル tooltip
    • Safari profile button
  • 段階的 ramp: インスタントx遅延の段階展開
    • Environment icons: はじめ拡大だけ→しばらく後カプセル型に展開
• ベストプラクティス：
  • アンカー要素を組み込む: e.g. タイトル
  • テキストの位置を固定
  • 隠れた要素は可視要素から表示か、見た即時に表示
  • 効果は控えめに
  • 予期しない動きを避ける
• 実機でのテストと細かな調整が重要

9:37 – 注視してスクロール

• 「Look to Scroll」機能で、視線だけでスクロールが可能に
• スクロールビューの端を見つめると自動でスクロールが始まる
• 主にリーディングやブラウジング用途のビューで有効化を推奨
• UIコントロールが多いリストや、パララックスなど特殊なアニメーションを伴うビューには不向き
• スクロールビューはウィンドウ全体を使い、明確な境界を設けると自然な体験になる

12:23 – 持続的なコントロール

• 動画プレイヤーなどの自動非表示UIは、ユーザーが注視している間は表示を持続し、視線を外すと非表示に
• 標準では手を加えずに適用されるが、カスタムコントロールの場合は、持続表示の挙動を自分で有効化する必要がある
• メディアコントロールやセッションコントロールなど、遅延非表示UI全般で推奨