visionOSにおけるインタラクティブな体験のデザイン

「Design interactive experiences for visionOS」へようこそ AppleのExperienceデザイナーの Rose Thomasです クリエイティブディレクターの James Cooperです 本セッションでは Apple Vision Proにおいて インタラクティブなストーリー体験を デザインする方法をご紹介します インタラクティブな体験は 新しいメディアの形式です 映画やテレビなど 一方向型の エンターテインメントが持つ ストーリーテリングの力 ビデオゲームが持つインタラクティブ性 ライブシアターが持つ イマーシブ感と臨場感を 融合させるメディアと言えます インタラクティブな体験は ユーザーを冒険へといざないます ユーザーは物語のキャラクターと 間近で直接出会い ユーザー自身が 物語の登場人物になることもあります 安全に 失敗を恐れず 物語の世界を存分に探検できます 今いる空間を別世界に変える この新しいメディアの 魔法のような体験に没頭できるのです

このメディアは急速に成長しています このような体験は観客とつながる 素晴らしく新しい方法です 空間コンピューティングならではの 可能性を活かして インパクトのあるストーリーを提供できます Apple Vision Proは これらのストーリーを 表現するうえで最適なデバイスです 本セッションでは このプラットフォーム向けに 独自のインタラクティブな体験を開発する際の デザイン上の考慮事項を説明します まず インタラクティブな体験のための 環境を設定し ユーザーを新しい世界にいざなうための 準備を整える方法を説明します 次にJamesが ユーザーを ストーリーに引き込むうえで効果的な インタラクションの活用方法を説明します 最後に あらゆる人が楽しめる体験を デザインするための方法をご紹介します 環境設定から見てみましょう Apple Vision Proでの インタラクティブな体験には 魔法のような特別なパワーがあります ストーリーの世界をユーザーの物理的な設定に 持ち込むことができるのです 「恐竜たちとの遭遇」は Apple Vision Pro向けに開発した インタラクティブなストーリー体験で まさにその実例です ユーザーは 白亜紀の世界を覗くことができ その時代の生き物の存在感を 間近で体感できます この作品はVision Pro App Storeから 無料で入手できます ぜひご体験ください 誰かの空間に1つの完結した世界を 現出させるうえでは 考慮すべき事項が多数あります 幸い visionOSを使えば 様々な方法で ストーリーを展開して ユーザーを 別の世界に引き込むことができます 例えば ウインドウのような一般的なUIで ストーリーを伝えることもできます ボリュームを使って リアルな 3Dコンテンツを表現することもできます ユーザーの周囲を別の世界で包み込み さらに深く ストーリーに引き込むこともできます この3つを 組み合わせて使ってもいいでしょう どのような方法でストーリーを伝えるかは みなさん次第です 「恐竜たちとの遭遇」では ユーザーの目の前に 恐ろしい生物が出現しますが そのような世界に 完全に引き込まれることは 恐竜との触れ合いに慣れていない人には 刺激が強いかもしれません 恐怖を感じる生き物の本能は 6500万年前と変わりませんからね そこで この作品では ユーザーの世界と 現代の世界を融合しました カスタムのRealityKitポータルを デザインして ユーザーは 恐竜たちの世界を 覗き込めるけれど ユーザーと巨大な恐竜たちとの境界線は しっかり保たれるようにしました

ポータルは長方形なので ユーザーは 映画やテレビを見ている感覚で 安心して別世界を 垣間見ることができます これは ユーザーの注意を前方に 集中させることができる点でも効果的です 体験をデザインする時は visionOSのどの構成要素が ストーリーを伝えるうえで最適か考えましょう

映画やテレビを観る時は 毎回 ユーザーが画面を調整する必要は ありませんよね visionOSも同様で 起動時に ウインドウやボリュームが 自動的に空間に配置されます イマーシブ感のある空間体験を デザインする際は コンテンツの起点は デフォルトで頭部の位置になりますが 先ほどの恐竜の例のように カスタム環境を設定するなら コンテンツの表示方法は デベロッパ側で決定できます visionOSでは 魔法のような体験を ユーザーに提供できます

例えば 「恐竜たちとの遭遇」を開くと 最初にクレジットが流れて スタート画面が表示されます これはユーザーを世界に引き込むための 最適な方法ですが もう一つ目的があります 「恐竜たちとの遭遇」では バックグラウンドでARKitを使って ユーザーのいる空間の状況を把握し 最適なポータルの配置を見つけています コンテンツの配置をデザインする時は シーン認識や 頭部の位置の検出などの機能を使って ユーザーがいる空間に コンテンツが 適切に配置されるようにすれば ユーザーは 環境設定に煩わされずに ストーリーに集中できます Vision Proには どこにでも 持ち運べるという強みがあるので ユーザーは 自宅でも公園でも 飛行機の中でもストーリーを体験できますが このような場所の自由さを考慮して コンテンツの表示方法を選ぶ必要があります 居間や屋内では適切な設定が 公園などの 屋外にはそぐわないことがあります 「恐竜たちとの遭遇」をデザインした時は ポータルを 広々とした壁に 映し出すことを想定していました 広い部屋や屋外で ユーザーが体験を開始した場合も この設定は同様に機能し 4メートルの大きな平面の ポータルが広がります ただし そのようなスペースがない場合は 体験が自動的に調整されます 狭い部屋で壁が小さい場合 ポータルは壁を突き抜けるのではなく ユーザーを包み込むように 映し出されるので イマーシブ感は損なわれません 空間が限られていて 目の前のスペースがもっと狭い場所や バスや飛行機の中などでは ユーザーから一定の距離を取って ポータルが映し出され 背景が暗くなるので イマーシブ感が維持されます 制御できない要素まで考慮した あらゆる 空間向けの体験のデザインは不可能です それがイリュージョンの限界ですが 体験が映し出される場所を 生じうる変化を考慮したうえで想定すれば 一般的な設定を構想できます 最後に 空間コンテンツのデザインに関する 重要なヒントをお伝えします それは デバイスでのテストでは 想定外のことが起こるということです デザイン段階で想定していた ビジュアルや操作感は テストしてみるまで 実際の効果はわかりません アイデアのプロトタイプを作成し できるだけ多くデバイスで試しましょう うまくいくと思っていたことが 思い通りにいかなかったり 逆に 思いがけないことが うまくいったりするものです ここからはJamesが ストーリーに命を吹き込む方法について 説明します 環境を設定できたところで インタラクションについて見ていきましょう インタラクティブなアートが 他のメディアと根本的に異なるのは ユーザーが主体性を持っているという点です インタラクティブ性を通じてユーザーを 能動的な参加者にすることができます 最高のインタラクティブなストーリーは 物語と主体性の調和です ユーザーが操作できる部分と 伝えるべきストーリーを バランスよく調和させる必要があります どちらか一方に重点を置くのではありません あなたのストーリーであると同時に ユーザーが作るストーリーでもあるのです このセクションでは 両者の適切な バランスを実現する方法を説明します まず インタラクティブ性を 導入する方法を確認しましょう 多くの人は 空間コンテンツに 圧倒される可能性があります 重要なのは ユーザーがスムーズに 体験に入り込めるようにすること 体験の世界のトーンを明確に設定すること ユーザーがインタラクションの方法を 容易に理解できるようにすることです 「恐竜たちとの遭遇」の開発当初 ユーザーはインタラクション要素に 自然に気づくだろうと考えていましたが 初期段階のテストでわかったのは ユーザーがこの体験を 受動的な体験と考えていたということです インタラクティブな要素の存在に 気づいていなかったのです

そこで 先ほどRoseが説明したように 最初のクレジットで これから体験が始まることを ユーザーに意識させるようにしました クレジットの後に オンボーディングの画像を追加して ユーザーに積極的な探索を促すとともに 体験に登場する生物が ユーザーの姿を認識して 反応することがあると明確に説明しました これは新しいメディアなので インタラクションに関する前例がありません ですから このように 明確に説明することが非常に重要です そうした説明があれば 気づきにくいような インタラクションも作成できます 「恐竜たちとの遭遇」は キャラクターがメインとなる体験なので インタラクション方法の説明にも キャラクターを使うのが自然です それが この蝶です 蝶はユーザーに近づいてきて 動きで注意を引きます 目の前に来ると 円を描くように飛びます あまりに近いので ユーザーが自然に手を伸ばすと ユーザーの指や手に蝶がとまります 最初のインタラクションで 体験全体のイメージをつかんでもらうのです ユーザーが認識しやすいような 見慣れた物体 キャラクター パターンを 登場させてユーザーにインタラクションを促し 距離の近さ 動き 音などのヒントで ユーザーの反応を引き出します 最初のインタラクションは ユーザーが気軽に実行できるような 手軽でシンプルな 親しみやすいものにしましょう 次はキャラクターの説明です ストーリーを成功させるための鍵は 登場するキャラクターであり インタラクションの要素を追加することで ユーザーは キャラクターと 新しい方法でつながれるようになります 空間キャラクターをデザインする時は 目の動き ユーザーに近づく動き 手やその他の身体部分での操作を活用して キャラクターが ユーザーの空間で 生き生きと行動し 反応するようにします 「恐竜たちとの遭遇」では 最初に蝶が ユーザーの目の前に現れますが このストーリーの主役は恐竜たちです ポータルの起動後 初めて登場する恐竜は イシサウルスの赤ちゃん Izzyです 近頃では 恐竜が歩き回る光景も あまり目にしないので 私たちはよく Izzyを子犬や子猫になぞらえて 自然の中で 子犬や子猫に出会ったら 人々はどう反応するだろうかと考えました Izzyは体験の間ずっと ユーザーを見ていて 発話に耳を傾けます アニメーションでIzzyの愛らしさを表現し Izzyが岩をよじ登ったり 滑り落ちたり 可愛い声で鳴いたりするようにしました Izzyを見たユーザーは自然に 近寄ってみたいと思うでしょう ユーザーは 蝶を追いかけているIzzyに近づいて 岩の上に乗るよう促すこともできます 岩の上に乗ったIzzyは ユーザーが触れるのに ちょうどいい高さになります 賢い子でしょう？ こうしたインタラクションは 自然に起こるようにデザインされています さりげないジェスチャや 動きを検出するシステムを開発して Izzyがユーザーを見つけて その手の匂いをかぐようにしたり ユーザーがIzzyを なでられるようにしたりして 本物の動物とのような 信頼関係を築けるようにしました もちろん もっと大きな恐竜が 目の前に現れた場合は 触れ合いたいという気持ちが 自然に生まれないかもしれません 相手が肉食恐竜の場合はなおさらです

ユーザーが感じうる恐怖心を 和らげるよう意識してデザインしたのが 好奇心をもってユーザーに近づいてくる ラジャサウルスのRajaです

Rajaは ユーザーの頭や手の動きを追いかけ ユーザーの動きをずっと見ています

ユーザーが近づくとRajaは後ろに退き ユーザーが退くと近づいてきます ユーザーが近づきすぎると 噛みつこうとします

ユーザーが動かなくても Rajaはユーザーをずっと見ています 独自のキャラクターをデザインする時は まず 実世界にいる似たような動物と 人々がどのように触れ合うか 考えてみるとよいでしょう visionOSには キャラクターとのリアルな インタラクションをデザインするための 優れた機能が多数用意されています ユーザーの頭部の位置を把握して アイコンタクトを維持するような シンプルなものでも ストーリーの体験を充実させるうえで 大きな効果があります 手や身体を使ったユニークな インタラクションをデザインしたら インタラクションが可能な場面と そうでない場面を明確に示す必要があります 「恐竜たちとの遭遇」のルールでは インタラクションは キャラクターがポータルの境界上 または ユーザーの空間にいる時のみ可能です Rajaは この境界に達するまでは ユーザーを見たり 手の動きを追ったりすることができますが それ以外のインタラクションは制限されます Rajaがポータルの境界を越えて ユーザーの空間に入り込むと 「触れるなら触ってみろ」とでも 言うように ユーザーに近寄り頭を下げます このパターンは 「恐竜たちとの遭遇」の すべてのキャラクターに共通しています キャラクターはこの時 ユーザーの目を見ている必要があります 近づいて目を合わせることで 自然に インタラクションのきっかけが生まれます 獲物の気配や ライバルによる テリトリーへの侵入に気づいて Rajaの注意が そちらに向けられているような時は インタラクションができないことが ユーザーに自然に伝わります Rajaがポータルの中に戻ったら インタラクションの機会は終了し Rajaは安全な距離を保てる位置に戻ります カスタムのインタラクションを デザインする時は それらがどのように そしていつ機能するか または機能しないかについて ストーリーの世界全体で 一貫性のあるルールを設定しましょう 近づいた際のキャラクターの反応などを 通じて インタラクションに 制限があることを ユーザーにさりげなく示せます これらのルールは ユーザーが ストーリーのキャラクターやその世界と どのようにやり取りできるかの ガイドとなります どのようなインタラクションを いつ行えるかに関する ルールの一貫性が イマーシブ感を維持するための鍵となります 「恐竜たちとの遭遇」では 冒頭の場面で 蝶と手で触れ合えることを ユーザーに伝えます そのあとユーザーは IzzyやRajaとも 手で触れ合うことができます 手によるこのようなインタラクションが 突然できなくなったら 体験の一貫性が途切れてしまい せっかくのイマーシブ感が台無しになります バーチャルキャラクターとの触れ合いは 楽しいことが重要です ユーザーの積極的な関与を促すには どのような行動や反応が リアルで自然なのかを考え 直感的なジェスチャ 明確なサイン 一貫性のあるインタラクションにより そうした行動を引き出す方法を 検討しましょう それを基盤として 空間オーディオにより イマーシブ感を高め さりげないヒントで ユーザーの注意を引き 現実感のある インタラクションを実現できます 「恐竜たちとの遭遇」では 多彩な空間オーディオの音源を駆使して 世界に命を吹き込んでいます また 様々なエミッタで 風の音で背景の環境を表現したり 雷鳴で重要なシーンを演出したりしています

各キャラクターにも 空間オーディオの音源を複数使用しており キャラクターの足と尻尾には 全方向性のエミッタを

口には指向性のエミッタを配置しています

さらに 音楽はサラウンドミックスで 空間化されており ポータルが開く前と閉じた後に ユーザーの意識を場面に引きつけます

空間オーディオは ユーザーの注意を 特定の対象に向けたい時にも有効です Izzyが登場する場面では 岩の裂け目から 鳴き声が聞こえてきます Rajaが初めて登場する時は 大きな低い足音が左側から聞こえ 何者かが近づくのが感じられます ユーザーの背後から イシサウルスの鳴き声がして Rajaがその声に気を取られる場面では 本当に部屋の中で鳴き声がしているような 感覚になるでしょう 空間オーディオを駆使することで 世界に命を吹き込み イマーシブ感をさらに強化できます キャラクターやオブジェクトに 圧倒的な存在感を与え 場面の雰囲気を設定し ユーザーの注意を引くために どの場面でオーディオを活用できるか 考えてみましょう ユーザーの主体性は 他のメディアにはない インタラクティブ体験の強みです この世界では インタラクションを通じて ユーザーは自己を表現できます ストーリーとユーザーの主体性を バランスよく融合させ ご紹介したインタラクションの ガイドラインに従えば 生き生きとした 真に魅力的な ストーリーの世界を実現できます ここからはRoseに戻します ありがとうございました インタラクティブな体験の鍵となるのは その世界とやり取りする誰かです つまり ユーザーが必要なのです 優れたインタラクティブ体験は ユーザーを念頭に置いてデザインされており ユーザーが世界の一部となるための 様々な手段が用意されています 本セッションで一番重要なポイントは デザインを考えるうえでの中心は ユーザーであるということです 「恐竜たちとの遭遇」の開発で 最初に取り組んだのは ユーザーにどのような体験をしてほしいか 計画を策定することでした 完璧なストーリーの旅を楽しんでもらい 適切なタイミングで特定の行動をし 想定通りの方法でインタラクションを してほしいと考えました しかし このメディアで重要なのは 主導権をユーザーに持たせることです 体験とストーリーの主役はユーザーなのです こちらからの指示をより細かくするほど ユーザーの主体的な行動を妨げることになり 体験が直感的でなくなってしまうことに 私たちは気づきました 行動を促す何のサインもないのに Izzyと遊ぼうとしている チームメンバーを見たことが この体験をもっと自由なものにする きっかけになりました ユーザーの選択を常に尊重する そんな体験を提供する方法を考えましょう 作り手が意図するものとは 異なる行動も 尊重されなければなりません そして 何度もテストしてください 作成した体験を協力者に試してもらい その世界との どのような インタラクションを望んでいるか観察し その実現に注力しましょう 構築した世界とキャラクターたちが ユーザーの自然な要望に 応えられるようになれば ストーリーをさらに 楽しんでもらえるでしょう ただ 忘れてはいけないのは 「何も選ばない」のも ユーザーの主体的な選択だという点です ユーザーがインタラクションを 行いたくないと思うなら それでいいのです ユーザーに主導権を与えるということは その体験との関わり方を ユーザー自身に 決めてもらうということです ユーザーは「恐竜たちとの遭遇」を 様々な方法で体験できます 従来のように 映画館で映画を観るような 体験がしたいなら ゆったり落ち着いて観賞し 緊迫とその解決の場面に満ちた 雄弁に語られるストーリーを体験できます ユーザーは蝶を見つけ Izzyに出会い Rajaが地響きと共に登場する場面を見て 緊張感あふれる結末に到達するまで ポータルを通じた体験を味わうでしょう ユーザがより積極的に関わりたい場合 相応しい形で応えられます IzzyとRajaは ユーザーが受け身であるか 敬意を持っているか または強引かどうかに応じて 非常に異なる行動をとります 冒険心が旺盛なユーザーは さらに多くの 発見ができるようになっています ユーザーのインタラクションによって ストーリーの展開と結末は変わります 覚えておいてください 作り手が伝えたいものと ユーザーが 体験したいストーリーは違うかもしれません すべての選択肢を予測することは できませんが ユーザーの決定を常に尊重するような 体験を構築しましょう もしもユーザーが あなたが伝えたいストーリーに そぐわない行動を取ろうとしても 世界内の境界線をデザインして 優しく元に戻すことを検討してください 体験をデザインするにあたっては ストーリー全体を通して ユーザーの感情がどのように推移するか 考えることも大切です あなたが好きな映画について 考えてみてください その映画では 緊張と緩和の場面が交互に訪れ 最後に満足のいく結末で 幕を閉じるのではないでしょうか アクション場面が連続すると ワクワクするかもしれませんが 結末に至る前に ユーザーが疲れてしまわないよう 息抜きできる場面を設けることが大切です インタラクティブな体験でも インタラクションが絶え間なく続くと 身体的に疲れるので ユーザーが息抜きできる時間を 設けることが さらに重要になります ラジャサウルスが登場する場面では 緩急をつけるために アクションや インタラクションが多い場面と 息抜きできる場面を組み合わせています ユーザーの心に 多様な感情を 喚起できるようにしましょう ゆったりとした場面と速い場面を 交互に組み合わせるのもおすすめです ユーザーのためのデザインを 構想するうえでは あらゆる人の心に響く アクセシブルな体験にすることも重要です Apple Vision Proには 様々な アクセシビリティ関連の機能があります 例えば オーディオトラックの クローズドキャプション VoiceOverのナビゲーション バリアフリー音声ガイド ダイナミックタイプによる 画面上のUI表示などです これらの機能をできるだけ多く 体験に取り入れましょう 「恐竜たちとの遭遇」は 音声と視覚を フルに活かした体験であるため バリアフリー音声ガイドへの 対応は不可欠です

「さらに4匹のイシサウルスの赤ちゃんが 姿を現しました」 バリアフリー音声ガイドによって コンテンツがさらに豊かになります ユーザーが選んだ行動に応じて 情報が調整されるため ガイドのダイアログは コンテンツ自体と同様に動的です 「恐竜たちとの遭遇」の ほとんどのインタラクションでは 身体の動きやジェスチャが必要ですが あらゆる人が体験にアクセスできるように カスタムのインタラクションシステムを 開発しました ビデオゲームのモーダルのように機能し システムジェスチャや VoiceOverおよび滞留コントロールなどの アクセシビリティ機能で操作できます 私たちの願いは この体験を利用するすべての人に 発見の喜びと魔法のような感覚を 味わってもらうことでした 代替的なインタラクション方法の提供は その取り組みの重要な部分です ユーザーが どのようなトーンで インタラクションしたいかを 大まかに選べるような表現で 質問するようにしました か を選択すると 実際にそのように動いた場合と同じ反応を 恐竜から得ることができます このオプションをオンにしても インタラクションの 基本のシステムは変わりません 恐竜たちはユーザーを見ることができ 空間内のユーザーの動きを追いかけ その動きに反応し続けます ユーザーは 体験の途中でいつでも 自分に最適な方法を選択できます 体験に取り入れる カスタムの インタラクションをデザインする時は すべての人のアクセスを可能にするには どの代替システムが必要か検討しましょう では最後に Jamesにまとめてもらいます ありがとうございます 幅広いトピックにわたって 優れたインタラクティブ体験の開発に 役立つ情報を解説しました インタラクティブ体験の開発は 時として困難ですが これらの学びを活かせば 必ず道は開けると確信しています ぜひ自信を持って開発に挑んでください みなさんが どのようなストーリーを Apple Vision Proで実現するか楽しみです ご視聴ありがとうございました