優れたvisionOSアプリのデザイン

こんにちは デザインエバンジェリストのSarahです 昨年世界中で開催したVision Proラボで 私のチームの素晴らしいメンバーに 会った方もおられるかもしれません 私のチームの職務は Appleのプラットフォームで開発を行う デザイナーやデベロッパの皆さんに 技術やガイダンスを提供することです このセッションでは visionOSで優れた体験を作り出すために 必要なこととその理由をお話しします セッションでは私達が協力した デベロッパのアプリの中から 独自性があり配慮に富み 品質の基準を引き上げるような 体験を提供するアプリをご紹介します デベロッパのチームメンバーが 開発の中で得た 洞察や学びもお伝えします 内容は多岐にわたりますので 早速始めましょう アプリやゲームの核となるアイデアは 目的が明確で 対象のプラットフォーム向けに 作られていることが重要です まず概要を説明しそれからvisionOSにおける 製品のソリューションについてお話しします

その後イマーシブ体験を受け入れるとは どういうことかを解説し これを様々な方法で卓越して実現している ソリューションをご紹介します

visionOSはユーザーを体験の中心に据えて 設計されており 快適な操作性を保証します そしてそれは皆さんのアプリでも 同様であるべきだと考えます

最高のアプリは魅力的です。 なぜなら高い品質基準をクリアし 細部にまで徹底的な配慮が なされているからです

まずはvisionOSが開く無限の可能性 について探ってみましょう 最初にチームと仕事をする際には、 デベロッパに対して「鍵となるタイミング」 を見つけるように促します それがvisionOSに最適化されたアプリの 重要な瞬間となります。 マインドフルネスアプリを例に 考えてみましょう ゆっくりと脈動する花に合わせて ユーザーは呼吸を整え集中できます 花が広がると 空間に生き生きとした エネルギーが満ちあふれます これはvisionOSならではの体験です 「鍵となるタイミング」は アプリによって異なりますが ここでは空間ソリューションを構築するために チームが採用した戦略をいくつかご紹介します アプリによって新しいことを実現する 方法を考えるのも アプローチのひとつです

JigSpaceは デモやプレゼン資料向けに 3Dアセットを視覚化するアプリです このジェットエンジンの例をご覧ください 驚くほど細部が正確に再現されており 内部の電気配線を確認したり 少しずつ分解して 内部を見たりすることができます 基準としてアセットは写真のようにリアルで 高いビジュアル品質が求められます そうすることで 説得力と魅力が感じられます 新しいことを実現するには コンテンツに命を吹き込むことが必要です この吸気ファンの エアシミュレーションのように アニメーションが実際のシナリオを どのように再現できるかを考えてください また現実世界では扱うのが困難なモデルの 操作方法を提供することもできます たとえば、リアルタイムで分解をしたり 材料を交換したり、 デザインの変更をすることができます 優れたソリューションの構築には 時間がかかります。 そしてそれらは 反復とプロトタイピングの結果です Loonaを見てみましょう Loonaは心安らぐアクティビティ、 ストーリー、環境音を組み合わせて シーンを優雅なアニメーションで映し出し リラックスや心地よい眠りに 導いてくれるiOSアプリです このUIをvisionOSの ウインドウ体験で使用するのも 妥当な選択肢でしたが チームは別のアプローチを採用しました Loonaの共同創設者 Sergey Gonchar氏のコメントです 私たちは プロトタイプを多数作成する という方針をまず明確にしました このプラットフォームならではの 最高の体験を見つけたかったからです これは チームが作成したスクーターの 初期のコンセプトスケッチです 2Dで描かれたプロトタイプは 立体的に感じられ 分解していじってみたいという 気持ちにさせてくれます 時間はかかりましたが これらのスケッチは3Dモデルに進化し 独自の生命を帯び とても楽しく 驚くほど精妙で繊細な アニメーションを持つようになりました Vision Proでは Loonaはリラクゼーション空間ゲームで 3Dの瞑想的なパズルを含み それらが鮮やかで生き生きとした アニメーションのシーンに変化します このゲームで使用しているジェスチャは すべて標準のものです タップしてピースを拾い 特定の位置まで移動させて リリースします パズルを完成させると 華やかな アニメーションが表示され達成感が得られます このアプローチはiOS向けアプリから 少し逸脱したものでしたが インタラクティブな要素と 3Dシーンは本当に楽しく 空間プラットフォームに 適したものになりました 意図を持った体験を考える際に 共有しておきたい最後のポイントは 補完的な要素の構築です この方法は visionOSプラットフォームでは あまり一般的ではない 大きな機能セットを備えるアプリの場合に 特に有効です Lowe’sがその好例です Lowe’sのiPadおよびiOS向けのアプリは 在庫管理から店舗内地図、商品計算まで 機能が満載です 同社はvisionOSに完全特化したアプリ 「Lowe’s Style Studio」を構築しました イマーシブな3Dキッチンシーンで 壁面保護材から家電まで あらゆるものをカスタマイズできます この体験をバーチャル空間に取り込むことで 簡単にアイデアを試したり 製品を組み合わせて見た目を確認したり デザインの方向性や個人のスタイルを 洗練させることができます ユーザーのジャーニーを完結させるために クロスプラットフォームを完全統合しました 保存したスタイルボードに各種デバイスから アクセスでき継続性が保たれます このページで個々のアイテムの購入、 在庫の確認、近くの店舗にある 製品の検索ができます JigSpace、Loona、Lowe'sは まったく異なる製品ですが それぞれのソリューションは 彼らの体験をVision Proへ変換することに 意識的に焦点を当てていました アプローチが 明確な意図に基づいていたのです プラットフォーム向けに構築する際は ARKitやRealityKitなどの ネイティブフレームワークを考慮して デバイスの機能を最大限に 活用してください アプリのvisionOSでの性能を 最適化する方法を特定するために 開発の開始前にアイデアを練り テストする時間を取りましょう Vision Proにおける優れたアプリは イマーシブ体験のスペクトラムを考慮します 実現する方法は多岐にわたりますが ここでは参考になる例を3つご紹介します

イマーシブなアプリは 人々を新しい世界に連れて行きます そしてこれは、完全なイマーシブ体験により 実現することができます この分野の成功例が Fifth Star LabsのSky Guideです ユーザーは自分だけのプラネタリウムに いるような感覚を体験します 夜空に輝く精彩にあふれた星座を鑑賞できます 世界中どの場所からでも星空を観察し オーロラを見ることさえできます 星座を空から抜き取ってより詳しく学んだり 手を双眼鏡にして 拡大したりすることもできます

優れた環境とは 奥行きと サイズの感覚が正確に再現されており 識別しやすくその場に適したリアルな対象を 説得力のある空間に映し出す環境です ただし カスタム環境がVision Proの すべてのアプリに適しているとは限りません これがイマーシブ感をもたらす唯一の方法 ではないことに留意してください この点は見落とされがちですが 人々の周囲の物理的な環境とどのように 統合できるかも考慮しましょう HalfbrickのSuper Fruit Ninjaを 見てみましょう フルーツを手でスライスすると 果汁が壁に飛び散り 切れ端がユーザーの周囲の 実際の空間の壁面で跳ね返ります デバイスのセンサーが 周囲の壁や面をスキャンするため 非常に反応性に優れており プレイするたびに異なる体験を楽しめます また Trufflesというブタの キャラクターなどが ユーザーやその周囲の空間と どうやり取りするかがよく練られています Super Fruit Ninjaの ゲームプレイプログラマーのリーダー Samantha Turner氏のコメントです Trufflesはイチゴやフルーツを追いかけます ユーザーはTrufflesと遊んだり撫でたりできて 現実世界にとてもよく溶け込みます 机やベッドに飛び乗ったりもします 本当に楽しいですよ イマーシブ体験を実現するには ユーザーがアプリやゲームの一部として 考えられていると感じてもらう方法を 探ることが重要です イマーシブ感をもたらすもう一つの方法は 入念なサウンドデザインにより 優れた 聴覚効果が生まれる瞬間を実現することです 音がイマーシブ体験の一形態である 理由を説明するために まずvisionOSで音がどのように 処理されるかを説明します デバイスのセンサーは 部屋のサイズや素材など 空間の物理的な特性を把握します 次に インタラクションの対象が そこに実在するように感じさせるために システムが反響効果を追加します この精巧な認識レベルと 正確な再生機能によって Vision Proの空間オーディオは 非常にパワフルなものになっています iOSの触覚がユーザーへのフィードバック の一形態であるのと同様に 音を単なる背景の音楽としてではなく ユーザーを導き 励まし ユーザーに報酬を提供する 機会として捉えることが重要です Shapes and Storiesのパズルゲーム Blackboxが好例といえるでしょう バブルのそれぞれがパズルを表しています これらのパズルは デバイスの技術を活用して ゲーム世界を探索するよう促します このゲームは難易度が高く創造的で パズルを解くのに苦戦する場合は 時には少し恥ずかしいこともあります 実際にプレイしてみれば お分かりいただけるでしょう 音は体験の根幹となる部分です Blackboxのサウンドデザイナー Gus Callahan氏のコメントです 共鳴する音に関して私たちは 問いかけました 「この弾力性をどのように空間的で 体験的なものに変換できるか？」 音が対象に応じて伸び プレイヤーが楽器のように 音とやり取りができるように したかったのです これらすべての デザイン要素が組み合わさると 対象との1対1の感覚体験に 非常に近いものになります 音はユーザーにイマーシブ体験を与える 素晴らしい方法であり アプリに命を吹きこみ より心に残るものにします visionOSは入力方法、快適さ、 使いやすさを独自の方法で考慮できるように デザインされています これが重要である理由と 皆さんのアプリでの 活用方法を説明します

今日ご紹介するアプリはすべて 最小限の身体の動きで 楽しむことができます Vision Proは頭に装着し 視線で操作するデバイスであり アプリがどんな場所で 使用されるかはわかりません Super Fruit Ninjaでは 手でフルーツを切る 物理的なアクションがあるため 実際に体を動かす感覚を体験できます とはいえ プレイヤーが その場で歩く必要はありません プレイエリアには ゲームプレイ中にプレイヤーが この境界内に留まるよう促す 特定の形状のガイドが表示されます ユーザーに動く必要がないことを伝える 非常に効果的な方法だと思います JigSpaceのモデルは このF1カーのように実物大のこともあり 物理的なスペースが許せば 周りを歩き回ることができます その一方 スペースが限られている場合は 縮小もできます 動きを最小限に抑えることはユーザーの 安全性確保という点で重要であり 物理的なスペースには変動要素があることを 考慮することが大事です アプリの人間工学上の快適さを確保するには 必要なウインドウの数を最小限に抑え インターフェイスの一貫性を 維持するのが重要です Vision Proの優れたアプリは 無限のキャンバスを想定して構築されます この用語はアプリがもはや画面のサイズの 制約を受けないという考えを反映しています これによりアプリの柔軟性は 大幅に高まりますが 一方でアプリの一貫性を保ち 混乱を避けるためのガードレールも 考慮する必要があります アプリのコンテンツとUIはウインドウ内に 収める必要があります タブバーやツールバーなどのコントロールは ウインドウ外にも配置できますが それでもビューに固定されています これにより アプリで提供される コンテンツ自体と そのナビゲーション方法が明確に区別されます 配置の変更や物理的なスペース上での 整理もしやすくなります 「空間」とは ボタンやUIをユーザーの視界に 無造作に浮かべてもいいという 意味ではありません 無限のキャンバスを使って ソリューションをさらに進化させ 一貫した体験を提供するよう デザインされたアプリの好例がPGA Tourです アプリのメインウインドウには ライブストリームや トーナメント情報が表示されます そしてボリュームには コースの対応する部分と ショットトレイルのリプレイが表示されます このアプリの優れている点は スポーツエンターテインメントを より高度な形で提供するという意図のもとで コンテキストを考慮した 拡張現実をうまく活用している点です またこのアプリは 各コンテンツを 別のウインドウで表示したりせず ユーザーがコンテンツを整理し 移動させる手間もかからない点でも 優れています 配置を固定することで一貫性と 管理のしやすさが向上しています 視覚的に快適な体験とは 実世界と調和するように設計された オペレーティングシステムの 一部であるように感じられるものです ウインドウに使用される ガラス素材もその一つです visionOSにはライトモードや ダークモードの概念がないため ガラスはシステムを通じて レンダリングされ ユーザーの環境の照明に インテリジェントに適応します 私のチームで深く議論したトピックの一つが ブランディングの問題です たとえばRed Bullは 世界トップクラスの認知度と 確立されたブランドイメージを持っています Red Bullのシニアプロダクトデザイナー Kelly FitzGerald氏のコメントです 私たちはテレビやモバイルアプリで RedBull TVのブランド要素と 同じダークブルーの背景色を使用していました しかしVision Proの導入を始めたとき パススルーの採用を検討するようになりました 確立されたブランド要素を優先するか 使いやすさを優先するかを 決める必要に迫られたのです Red Bull TVアプリでは 同社のアイデンティティに強く結び付いた 質の高いビジュアルイメージによって ブランドを強調するという方法を選びました 一方 メインビューをスクロールする際は ウインドウの残りの部分に ガラスの背景が使用されるため 1色のみの背景色にはなりません このように 快適さや 使いやすさを損なわずに ブランドを組み込む方法を 見つけることが重要です 1色の背景色をウインドウに使用すると 視覚により 集中が妨げられ 快適さが損なわれる可能性があります 1色の背景色は ユーザー環境の照明に適応せず 周りへの視界を遮ってしまいます Red Bullはもう一つ配慮の行き届いた アプローチを採用しています 画像読み込み時の短い時間に Red Bullブランドのダークブルーを 表示するようにしたのです これらの各々は小さなブランディングですが 積み重なると大きな効果が生まれます visionOSの要素の多くには ホバーエフェクトが実装されています これはユーザーがどこを見ているか フィードバックを与えてくれます Carrot Weatherは天気予報の確認を 楽しく愉快にしてくれるアプリです 個性豊かで 様々なプラットフォーム向けに よく作り込まれています インターフェイスには多くのデータと 情報を表示する必要がありますが ホバーエフェクトが適切に使用されています 時間ごとの気温など 詳細を表示するインタラクティブな要素には すべてホバーエフェクトが使われています 日の出や日の入りの時間など 簡単に読めるようなデータには ホバーエフェクトは必要ありません 追加してしまうとより混乱を招き インターフェイスが複雑になるでしょう インタラクティブな要素には 十分なタップ領域が必要です 少なくとも60ポイントのスペースが 必要になります ホバーエフェクトが小さすぎると ユーザーはアプリの操作に 非常に細かい操作が必要だと感じ ストレスや不快感につながります ホバーエフェクトが 適切にデザインされていれば ユーザーは迷いなく操作することができます ここで一つのアプリに注目し ユーザーに楽しさを提供するうえで 卓越したデザインがどう役立つかを 詳細に説明します これは私のお気に入りのvisionOSアプリ Algoriddimのdjayです 楽しい体験は ユーザーが現実世界に 期待することを実現し Appleの空間認識機能を 活かすことで生まれます djayは ユーザーがDJアプリに期待することを すべて体現しています 2つのターンテーブル トーンアーム テンポ同期機能を備えた 極めてリアルなDJセットアップです ターンテーブルはユーザーの目の前の 腕の届く範囲に配置されており 直接操作できます 実際のターンテーブルと同じように レコードをスクラッチしたり トーンアームを上げたり テンポを調整したりできます ユーザーは通常 手の届く範囲であれば 十分に近いと感じるため インタラクティブであることを期待します 空間体験をデザインする際は 次の原則に従うことが重要です インタラクティブなコンテンツは ユーザーの近くに配置しましょう そのうえで それらをユーザーが 再配置したり 間接的に操作したりできるのはかまいません 周囲のコンテンツに対するユーザーの意識は アニメーションと動きによって 大きく影響されます アプリを起動すると まずはトラックを選択する必要があります 音楽アイコンの輪郭が 点滅していることに気付くでしょう 音楽ライブラリをタップするよう 目立たない方法で伝えてくれています シンプルですが大きな効果があります 動きとアニメーションは ユーザーの注意を特定の要素に向け 操作可能であることを知らせる 優れた方法です 人は生来的に動きとアニメーションに敏感で 受け入れやすいからです djayのチームは現実世界と 同じようなカスタムジェスチャを 構築することで 操作をユーザーが 慣れ親しんだ動作に対応させました DJがヘッドフォンを片耳にだけ 当てているのを見たことがあるでしょうか？ これは次のトラックをプレビューして 現在再生中の曲との シームレスなミックスを準備するためです ご想像の通り djayでも同じことができます 片手を耳に当てると スピーカーから次の曲が聞こえます

ヘッドフォンの実物を使う必要はなく 音声キューのお馴染みの動作をまねた ジェスチャのみで操作できます しかし この体験を実現する過程では 興味深い課題がいくつかありました 誤認識の可能性を考慮する 必要があると気付いたのです たとえば 髪を触ったり Vision Proのストラップを調整したりすると 誤認識が起こり得ます AlgoriddimのCEO兼共同創設者である Karim氏にどう対処したかを聞いてみましょう ジェスチャを正確に認識させるためには 何度もユーザーテストを行い フィードバックを集める必要がありました フィードバックの収集は非常に重要です ユーザーがアプリを使用する多様なやり方や 想定と異なるユーザーの行動には 驚かされることがしばしばです 決まった通りの解釈方法にとらわれず よりアプローチしやすいシンプルなアプリを 構築する機会を見逃さないようにしましょう djayのターンテーブルを 詳しく見てみましょう ターンテーブルのアナログな形態は ずっと以前から変わっていませんが 関連するテクノロジーは大きく進化しています たとえば テンポの調整やトラックの同期は 従来型のハードウェアでは複雑な作業です 慣れていない人にとっては DJを始めたくても諦める理由になります Algoriddimチームは これを機会と捉えました 3D環境をデザインするにあたり 「DJが手動でテンポを 合わせる必要があるのか？」 「このプロセスを完全に自動化できたら？」 と問い直したのです 抽象化することで 複雑さが軽減されるだけでなく ユーザーがDJの創造的な側面に より集中できるようになりました 複雑さを解消することで ユーザーはアプリの中で最も心に訴えかける 要素をさらに楽しめるようになります 最後に 皆さんがvisionOSアプリの構築を始めるのに 役立つリソースをいくつかご紹介します Appleのヒューマンインターフェイス ガイドラインでは 最新の情報と ベストプラクティスを確認できます パターンやコンポーネントについて 知りたい場合は ここで最新のガイドラインを 確認してください Appleのデザインリソースはプロトタイピング を迅速化するうえで役立ちます FigmaとSketchのキットには ネイティブコンポーネントの 広範なライブラリがあるため アセットをご自身で 再構築する必要はありません ご紹介したすべてのアプリは Apple Vision ProのApp Storeで 入手できますので ぜひご自身で試してみてください ご視聴ありがとうございました