visionOS 空間デザイン
visionOS Spatial Design / 2023– / スタイル / Apple UI
Apple が Vision Pro 向けの指針書で定めた画面の言語。窓はガラスと呼ぶ素材の直立した面で、周囲の実景を透かし、鏡面反射と影で置かれた位置と大きさを伝える。点をピクセルではなく角度で定義するので、遠ざけても見かけの大きさが変わらない。
ひと目で判断
見た目の特徴
- 背景を差し替えられないガラスの直立面。実景が透け、鏡面反射と影が落ちる
- 既定の窓は 1280x720 pt で、開いた直後は約2メートル先、見かけの幅は約3メートル
- 見た要素だけが光るホバー効果。当たり判定は角の丸い一塊にまとめられる
- 枠を持たない volume では、閉じる釦と窓バーが歩いた側へ向き直る
向いている用途
- iPad 向けに作った画面を、実景の上に浮く板として読めるように組み直すとき
- 製品の立体模型を実寸で見せる展示を、枠のない volume として空間に置くとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- SF Pro を使い、本文と見出しは他のプラットフォームより太い段階を選ぶ。文字色は白を既定とし、文字自体に奥行きを与えない。空間の一点に結んだ名札は常に見る人の方へ回す。
- 構成
- 1280x720 pt を出発点にし、内容の形に合わせて縦横比を決める。操作要素の周囲に 16pt 以上の余白を取り、中心どうしは 60pt 以上離す。最小と最大の寸法を必ず決めておく。
- 素材
- 背景はガラスのまま使う。奥行きは影と鏡面反射と色温度で作り、文字には落とさない。窓に入れる立体は浅く保ち、深さが要るものは volume へ移す。
- 注意
- ガラスを不透明な色に差し替えると要素どうしのまとまりが消えて文字が読みにくくなり、周囲が見えないぶん窓そのものが重く感じられる。
- 関連研究
- HIG の windows と spatial layout を読み、点を角度で定義することが版面設計に何をもたらすか確かめる / 画像と説明文をひとつの操作対象にまとめるとき、ホバー効果を当てる領域をどう定義しているか / 1280x720 pt の窓を2メートル先に置いたときの実際の見かけの大きさを測る
関連項目
- リキッドガラス（Liquid Glass）同じ「Apple UI」の系統。visionOS 空間デザインとリキッドガラスの違いを見る
- グラスモーフィズム（Glassmorphism）共通する印象：未来 / 静けさ。visionOS 空間デザインとグラスモーフィズムの違いを見る
Apple UIをさらに見る
同じ「Apple UI」から、共通する印象が多い順に次の項目を選んだ。
- アクア（Aqua）共通する印象：未来。
- ブラシドメタル（Brushed Metal）共通する印象：技術。
- プラチナ（Platinum）共通する印象：技術。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/visionos-spatial
- Markdown
- [visionOS 空間デザイン（visionOS Spatial Design） — デザインスタイル辞典](https://indexstyle.org/ja/styles/visionos-spatial)
- HTML
- <a href="https://indexstyle.org/ja/styles/visionos-spatial">visionOS 空間デザイン（visionOS Spatial Design） — デザインスタイル辞典</a>