[WWDC23] 空間デザインの原理原則 講演 翻訳＆まとめ
こんにちはKeijiroh（@keijirohn）です。
WWDC 2023でApple Vision Proが発表されました。
Principles for spatial designという、空間コンピューティングのデザインの原理原則についての講演を翻訳＆まとめます。
講演してくれたのは、Nathan Gitter (@nathangitter)とAmy DeDonatoのお二人です。
イントロ
NathanとAmyです。
この講演では、空間コンピューティングのOSにてどのようにデザインするかお伝えします。空間コンピューティングでは、無限にあるキャンバスにてアプリやゲームを楽しめます。
概要
Depthやスケール、自然な入力、空間オーディオを用いて、今まで体験出来なかったエクスペリエンスを作ることが出来ます。
またこれまでのアプリも体験を向上させることが出来ます。もしくは全く新しい体験を作ることが出来ます。
新しい空間へ行ったり、
体験をあなたの大切な誰かと共有することが出来ます。
本日は空間コンピューティングでの、素晴らしいアプリの作り方をお伝えします。
ユーザーに馴染みのあるデザイン
空間コンピューティングでは、全く新しい体験を作ることができますが、どの様にユーザーの馴染みのあるデザインとバランスを取るかをお伝えします。
一般的なサイドバー、タブ、検索ウィンドウなどは、そのまま空間コンピューティングでも使うことで、ユーザーが簡単に信頼度が高く音楽を探すことができます。ユーザーはどの様に使うか既に知っています。
ユーザーはアプリウィンドウに慣れています。空間コンピューティングでは、ウィンドウを現実世界に馴染んだ状態で置くことができます。
ウインドウ
ウィンドウについて説明します。
空間コンピューティング向けのウィンドウをデザインしました。ガラス素材のウィンドウを使うことで、現実世界と差異を作っています。ユーザーは現実世界にも注意を向けることができ、現実の照明状況に応じて明るさを変化させます。
ウィンドウを移動、閉じる、リサイズする機能をもっています。
ユーザーはウィンドウを持って移動させることができますが、いつでもウィンドウの向きがユーザーの正面になるように、自動にウィンドウを回転させます。これにより、読んだり使ったりするのが簡単になります。
ウインドウサイズ
次にサイズ変更についてです。
ウィンドウはField of Viewの中にフィットするようにデザインされていますが、どの様なサイズにも変更することが出来ま
コンテンツに応じて、最適なウィンドウサイズを選びましょう。
例えばSafariさと縦長に置いて、ブラウジングしやすくします。
キーノートだと横長にして、プレゼンテーションに最適なサイズにします。
またタブバーやツールバーは、メインのウィンドウレイヤーの上に置くことが出来ます。アクセスしやすく、メインコンテンツを邪魔することもありません。
例えばSafariでは、ナビゲーションバーはメインのウェブサイトから離して表示させることで、ユーザーはメインコンテンツに集中することができます。
またSafariでサイドバーを表示させた時は、ウィンドウサイズが大きくなりウェブページ部分を邪魔することはありません。サイドバーが不要な時は最小限のウィンドウサイズにすることで、ユーザーの現実世界の視界を邪魔することもありません。
他のプラットフォームと同様に、複数のウィンドウを持つことが出来ます。サイドバイサイドでブラウジング出来たりします。
キーノートでは、プレゼンテーション用スライドを一つのウィンドウに大きく遠くに表示させ、プレゼンター用のウィンドウを近くに小さく表示させます。これによりプレゼンテーション用を大きい状態で保てます。
理想的には、一つのウィンドウで纏める方が良いです。複数のウィンドウを持つとユーザーはそれらを管理しなければなりません。
ボタンサイズ
次にボタンのサイズについてです。ウィンドウのスケール管理は適切にされます。
例えば、スマホとタブレットではそれぞれ適切なスケールに調整されています。
空間コンピューティングでは、ウィンドウが遠くに行くと拡大され、近くに来ると縮小されます。これにより可読性が高く、使いやすいインタフェースとなります。
ボタンを設置する時は、サイズを考慮して設置しましょう。詳細は"Design for spatial user interfaces"をご覧ください。
Human-centeredデザイン
次にHuman centeredデザインについてです。良いデザインはいつもHuman centeredです。
フィールドオブビュー（FoV）
Field of Viewから見てみましょう。
Field of Viewの中で真ん中は一番見やすいエリアです。メインのコンテンツはここに配置するようにしましょう。
例えばSafariで開いているタブを全て表示させる時は、Field of Viewに合わせてワイドに表示させます。タブを縮小することで、全体を確認できます。また外側のタブは少し内側に傾けることで、ユーザーは読みやすくなります。
ユーザーは頭を固定する必要はなく、好きな方向を見ることが出来ます。コンテンツは様々な場所にワイドに配置することが出来ます。しかし一般的には、メインコンテンツはField of View内に配置しましょう。そうすると簡単に読んだり、全体を一度に理解することが出来ます。
エルゴノミクス
次はErgonomicsについてです。バーチャルオブジェクトは快適な位置に置きましょう。
デフォルトでは、自然な目線の先にウィンドウが配置されるようになっています。これは快適な姿勢です。コンテンツはユーザーの顔の先にユーザーを向くように配置しましょう。
ユーザーに応じて身長が違ったり、ソファに座っているときなど違った角度が良い時もあります。
通常は、ユーザーから離してコンテンツを配置しましょう。手が届く範囲より遠くに配置することで、直接操作ではなく遠隔操作としてユーザーが操作出来ます。特定の意図が無い限り、ユーザーの後ろや高すぎる、低すぎる位置にコンテンツを配置することは避けましょう。
顔の動きに合わせてついてくる様にウィンドウを設置するのではなく、ウィンドウを空間に配置しましょう。これによりユーザーは自由に周りを見渡せることが出来ます。
ユーザーの動き
次はユーザーの動きについてです。私達はユーザーが最小限の動きのみであまり動かない体験を推奨しています。そうすることで多くのユーザーにとって使いやすいアプリとなります。
デジタルクラウンを長押しすると、正面を変更することが出来ます。これにより、正面を再度設定することが出来ます。アプリの中で何か特別な実装をする必要はないです。システムのリポジションを使います。
３次元空間の活用
次はDimentionalについてです。
スペース
まずはスペースについてお話します。
良いアプリはユーザーの周りの空間をうまく使います。空間のキャンバスは無限ですが、ユーザーの物理的な空間は限られています。どんなユーザーのいる空間でもうまく動作するようにアプリを作りましょう。また特定の場所でののみ動作するアプリは避けましょう。
例えば、TVアプリでは、ウィンドウを動かした時椅子と重なったとしても、ウィンドウの移動が完了したらコンテンツが見える様にします。システムが自動で調整するので、どの様に各ユーザーのスペースでウィンドウがフィットするかは考慮しなくて良いです。
映画を見る時は、ウィンドウを大きくし、パススルーは暗くします。ディミング機能はシンプルですが、スペースを最大限活用する方法として良いです。現実世界のオブジェクトと重なっていたとしてもディミングするとユーザーはあまり気にしなくなります。
深度
次はDepth（深度）についてです。
空間コンピューティングにおいては、Depthは新しい変数です。ヒエラルキー構造やどれにフォーカスを置くかなどに使えます。
コンテンツを遠くに置くと大きく表示出来て、遠隔操作でユーザーはインタラクションできます。
近くに持ってくると、簡単に角度を変えながらコンテンツを確認することが出来ます。
Depthを使うことで、ヒエラルキー構造を簡単に作れます。
映画アプリでは、コントローラーを小さく近くに配置します。簡単に映画のコントロールが出来ると理解できます。もし映像ウィンドウに配置すると、すごく大きくなってしまいます。
ライトや影などのビジュアルによって、Depthは理解が強化されます。
ウィンドウの光と色を床に反射させることで、ウィンドウの位置を理解できます。
また影を落とすことも有効です。多くのオブジェクトに使えます。
Depthの表現方法は僅かな表現にしましょう。
例えばウィンドウが少し後ろに下がる場合も、僅かな影で大きな効果を得られます。
全てにDepthが必要な訳ではありません。文字などはDepthをつけると角度をつけた時などに理解しずらくなります。出来る限りフラットにしましょう。
スケール
Scaleもコンテンツを強調するのに使えます。
小さなオブジェクトは、軽くてパーソナルで個人向けの様な印象を与えます。
大きい映画ウィンドウなどのオブジェクトは、湖で見ているように印象的に感じます。
ショッピングなどのアプリでは、実在サイズで表示するほうが効果的です。
没入感
次は没入感についてです。
空間の広がり
アプリはユーザーの状態に応じて、ダイナミックに変化させることが出来ます。フレクシビリティがあります。
空間を他のアプリとシェアしながら使うことも可能だし、一つのアプリで全ての空間を使うことも可能です。
キーノートを準備している時は、オープンスペースで操作し、
スライドショーだとディミングさせて、プレゼンに集中します。ディミングは効果的に集中出来るので、別の空間に移動する必要ないです。
さらにリハーサルだと、フルスペースで背景をステージに変えます。没入してリハーサルできます。この時は他のアプリは隠されています。
フルスペースは別の場所に連れて行く体験だけでなないです。その場所にいながら体験することも可能です。現実のキーボードやコントローラーを見ながら操作する時に役立ちます。
helloの影を作ることで、helloが実際に現実空間にいるような印象を与えます。
それぞれのユーザーの空間は多様なので、時間によっても変化します。いつでもどこでも対応できる体験となるようにアプリを作りましょう。
ティップス
ティップスを紹介します。
一度に大量の情報を提示すると、ユーザーは混乱します。体験の中で一番大事なポイントに集中出来るようにしましょう。
例えばマインドフルネスアプリでは、提示するオブジェクトは１つにします。空間オーディオとカラフルなマテリアルのみです。
体験に集中している時は、スムーズに花を散らせる様に変化させます。
フルスペースでコンテンツを表示させている時は、現実世界とのインタラクションを増やすことで、コンテンツと現実世界を意味のあるように結びつけます。
またスムースなエッジを使うことで、自然に馴染みます。
コンテンツを生きているように提示することが重要です。
水面に波紋が出来たり、雲が空を移動しているような、僅かな変化をつけることで、生きたコンテンツになります。
空間オーディオも効果的に使えます。
音がなる箇所から空間オーディオで鳴らしたり、
全体から聞こえる様にします。
詳細は"Explore Immersive Sound Design"をご覧ください。
僅かなエフェクトで、大きなインパクと与えられます。
映画アプリだと僅かな光の反射を提示するだけで、その位置にあるような印象を与えられます。実際の映画館のような雰囲気を作る必要はありません。
快適性
最後にComfortについてです。
アプリを移動させる時は、大きく早い移動をさせるのは避けましょう。ユーザーを混乱させます。
動かす時はフェードアウト、止める時はフェードインさせながら、移動させます。
ユーザーが空間を移動する時は、フェードさせながら現実空間の絵に切替えます。
フルスペースに入ったり出たりさせるためには、わかりやすく小さなラベルを作るのも効果的です。
信頼性
最後に信頼性についてです。
アプリは瞬時に起動され、一度に全てのコンテンツを見ることができなければなりません。
アプリ内での大事な体験を決める
アプリを開発する際、空間でしか体験出来ないキーとなる体験を見つけましょう。
例えば写真アプリではこれまでのスマホアプリと同様に、簡単に写真を見つけられ、慣れた操作でブラウジングさせます。
しかしお気に入りのアプリを見つけたら、大きく表示させ、周りを暗くします。
パノラマ写真になると、さらに大きく囲むように表示し、そこにいるような体験にします。この体験は空間コンピューティングでしか作れません。
Next Step
この記事が気に入ったらサポートをしてみませんか？