空間デザインの原則

♪ メロウ インストロメンタル ヒップホップ ♪ ♪ Nathan Gitter: セッションへようこそ 空間デザインの原則をお伝えします Nathan Gitterです Amy DeDonatoです 私どもはApple Design Teamの デザイナーです 空間オペレーティング システムのための デザインについて確認していきます 周囲には新しいアプリやゲームのための 無限のキャンバスが広がっています Nathan: 奥行き スケール 自然なインプット そして空間オーディオで 従来にはなかった体験が 提供できるでしょう キーとなる瞬間において 既存のアプリをより良くしたり 全く新しいものを生み出すこともできます 新しい場所に行ったり 大切な誰かと体験を分かち合ったりします Amy: 確認すべきことは 多いですが 私たちがお手伝いします Nathan: あなたのアイデアを形にして 人々に愛される体験を 創り出しましょう 素晴らしい空間アプリを 構築する方法についてお伝えします まずは基礎です アプリを親しみのあるものにする方法です 次に人間中心とは何かを確認します それから 空間を活用する 次元の使い方を確認し イマーシブなアプリにします 最後に プラットフォームにマッチした アプリにする方法を確認します では始めましょう 新しい可能性と 親しみのあるもの そのバランスを取りましょう サイドバーやタブ 検索フィールドといった一般的な要素で 探している音楽を 見つけることができます 空間プラットフォームでも すでに知っている要素を使って 音楽を探すことが可能です ウインドウ内に インターフェイスを置くことで 快適に使うことができます ご存じのアプリウインドウ このプラットフォームでは 空間内に存在し 周囲の一部のように感じられます 最初にウインドウについて話をします 適切なサイズについて ポイントシステムについて まずは ウインドウです 新しいビジュアルランゲージを使って ウインドウをデザインしました ガラスのマテリアルが 周りの世界との対比になっています 周囲に対する認識を与え 光の状態に合わせて 調整されます 移動 閉じる サイズ変更の コントロールも提供されます ウインドウバーをつかんで どこへでも移動することができます また 人に向き合うように動きます これにより容易に使用することができます 離すとウインドウは 最終位置に留まります 次はウインドウのサイズの選び方です ウインドウは視界に入りやすいよう デザインされています 柔軟性があり どんなサイズにもなります コンテンツに合わせて 最適なサイズを選びます 例えば Safariは縦長です Webページがたくさん 見えるようにしています Keynoteはフルサイズのプレゼン用では 幅が広くなっています ウインドウに柔軟なシェイプを 持たせることもできます この音楽アプリのように タブバーとツールバーを ウインドウ外へ移動できます コントロールは メインウインドウの上にあります いつでもアクセスでき コンテンツのための 余白を残します または複数セクションによって コントロールとコンテンツを分けます Safariではナビゲーションバーが Webページから離れているため ページに集中できます ウインドウのサイズも変更できます Safariでサイドバーがオープンの際は ウインドウは大きくなり Webページを覆うことなく コントロールが見えるようになっています ウインドウは画面に縛られません 小さくもなるので 視界を遮りすぎません 柔軟なアプリを想像してみましょう 形やサイズを変えることが可能です このプラットフォームでの アプリデザインは楽しいものです もっと大きなキャンバスも 手に入ります 他のプラットフォーム同様に 複数のウインドウが表示できます これが役立つことがあります コンテンツを横並びに表示して 複数のWebページを一度に見るときや 同時に見せるべきアクションを表示できます Keynoteでは プレゼンテーションをするとき スライドは遠くのウインドウに プレゼンター用の表示は 近くの小さなウインドウになります スライドは大きいままで 自分用のウインドウを 表示させることができます アプリのインターフェイスは 単一ウインドウ内が理想的です 複数のウインドウがあると 情報過多になってしまいがちだからです 次はポイントシステムです インターフェイスの拡大縮小を 確かなものにするため ポイントを使ったデザインにしています すでに親しみのある概念でしょう 他の画面に適応するよう インターフェイス要素のサイズを 特定する方法です このプラットフォームでは ウインドウを動かす際に 遠く離れると大きくなり 近くなると小さくなります これにより読みやすく使いやすい インターフェイスになります 他プラットフォームで ポイントを使っていれば インターフェイスの サイズ設定において ボタンのような要素を お馴染みのポイントによって設定します インターフェイスを ポイントでデザインすることで どんな距離からでも機能するようになります "空間ユーザーインターフェイスの デザイン"で 詳細をご確認ください 次にお話するのは 人間中心のアプリのデザインです よいデザインとは人を中心と したものです ここではそれ以上の意味を持ちます 人はデバイスを装着し 目や手を使ってインタラクションし それぞれの空間で 自らの視点を通じて アプリを体験します 空間アプリをデザインする際は 何が見えるか どう動く必要があるかを 考える必要があります 見るという点から始めましょう デバイスを装着して 目の前にある世界を見ます これが人の視野です 中心を見るのが最も簡単です だから重要なコンテンツを中心に置きます 視野は横に広いので ランドスケープレイアウトを使います 例で説明します Safariで全てのタブを 一度に見たいときは 格子状に広げます このレイアウトは人の視野と マッチするよう幅広にしています タブは小さくなっているので 中心からそれほど遠くありません サイドのタブは内側を向いており 読みやすくなっています 頭はずっと同じ位置にはありません 見渡すことがあります つまり イマーシブ体験では コンテンツをもっと広げられますが 一般的には メインのコンテンツを 視野の範囲内に保ちます そうでないと 一度に読むことが難しくなります 人を中心にデザインすることは 人間工学に基づいているとも言えます コンテンツの配置で 人の反応が大きく変わります あらゆる面において物体を 適切な場所に配置しましょう 基本的にはウインドウは 自然な目線位置に沿って配置されます 自然で快適な姿勢のためです コンテンツを配置する際は 人が向いている方向で 頭の高さに対し相対的な形で 配置します これにより　身長や姿勢が異なっても コンテンツを楽しむことができます ソファーにもたれるなど 姿勢が変わっても同じことです コンテンツは手の届く範囲よりも 少し遠くに置くことで インタラクションを促進します 人の後ろや高すぎる 低すぎる位置は避けましょう イマーシブ体験の場合は別です アプリを操作するために動こうと 思っている人ばかりではありません コンテンツを人の視界に固定しないこと 身動きが取れないと感じるからです 代わりに空間に固定することで 空間を自然に見渡すことができます デバイスを装着して動き回ることもできます しかし 動きは最低限で 静止した体験をお勧めします 誰にでも使いやすいアプリになります アプリのコア体験でないなら 動かずにアプリを使用できるよう 設計しましょう 別の席に移動したり 異なる方向を向くこともあります 座る位置が決まったら Digital Crownを長押しして 中心に置き直します コンテンツがまた目の前にきます ウインドウを元に戻すのに アプリ側で特別な設定は必要ありません アプリのコンテンツ位置の再設定は このシステムで可能です 次はアプリの次元に関してです アプリに必要な空間の話をし その後に 奥行きと スケールについて話をします 空間の話から始めましょう 人の周囲にある空間を うまく利用します キャンバスは無限ですが 人の物理的空間は限られています 空間の大きさに関係なく 利用できるアプリにします どんな場所で使われるか わからないためです 利用できる物理的空間によって アプリを制限するのも避けましょう TVアプリを例に説明します 部屋にあるイスのほうへ ウインドウを移動しました この際にまだイスは見えているので 配置しやすくなっています ウインドウを離すとコンテンツが見えます これでアプリの内容が確認でき 使える状態になります 空間におさまるかを 心配する必要がありません システムが自動で処理してくれるからです 映画を観るときは ウインドウ全体がビデオになります そしてパススルーが暗くなります 調光はシンプルでありながらも 空間を最大限に活用できます 映画のウインドウが物理的な部屋と 重なっていても 調光によりコンテンツに集中できます 素晴らしいバランスとなります 人は周囲を依然として認識でき 制限されることはありません いつでも環境を開いて 物理的な部屋を越えた次元に 広げることもできます アプリで大きなコンテンツを表示すれば 力強い体験を生み出すことができます 巨大な映画館に合わせて イマーシブな映画体験を作りました このようなフルスペース体験は 後ほど詳しく説明します アプリに次元を与えるのは奥行きです この空間プラットフォームでは 奥行きが新しい変数となります 階層と焦点のための 力強いツールです 例を見てみましょう 奥行きは 人が空間と どう関わるかに影響します 遠くのコンテンツは大きくします 人は遠くから関わることができます 近くの物体は インタラクションを促します さまざまな側面から 見てみることができます 小さな動きで全ての側面を 見ることが可能です 奥行きをうまく使えば 階層を作ることができます 再度 TVアプリを見てみましょう イマーシブな映画館体験では 再生コントロールは 小さくて近くに配置されます 小さいけれども 映画をコントロールできるとわかります これが映画館のスクリーン上に 配置されたとしたら 大きすぎて 場違いに感じるでしょう このようにな近くの要素は 小さくしますが 遠くの大きな物体よりも 視覚的に優位になります 奥行きは視覚的な手掛かりによって 強化されます 光や影がその例です 先ほどの映画の画面のように 光を発する物体があります 光は床や天井を照らし 部屋での位置を強調します 光を発する物体は 近くの物体に色を映します ほとんどの物体は影を落とします テーブルの上にあるこのウインドウもです これにより しっかりと固定され 空間に統合されて見えます アプリのカスタムオブジェクトも 影を落とすべきです 多くの場合 奥行きは さりげない方が好まれます やりすぎに注意です 気が散ったり 非現実的に見えるからです 人に注意を向けてもらうには さりげない奥行きで十分です モーダルが出てきました ウインドウが少しだけ後ろに下がります さりげない奥行きですが効果的です 奥行きは全てに必要ではありません 例えば文字は 3Dだと読みづらくなります 角度がついていると特にそうです インターフェイスの要素は フラットにします この奥行きと同様に スケールは コンテンツを強調できます 小さな物体は親しみやすく感じます 大きな物体は印象に残ります この湖の上に映る映画のようにです スケールを変えることで 映画を観たときの感覚が 大きく変わります 実物大のスケールが 適している物体もあります 例えば買い物アプリは実物大で 表示されるといいですね コンテンツに合ったスケールを 見つけてみましょう 大きくしたり小さくしたり 試してみましょう ここからさらに イマーシブ体験を活用していきましょう Amyに話をしてもらいます Amy: Nathan ありがとう アプリをイマーシブなものにする 方法をお伝えしていきます イマーシブ体験とはウインドウを越えるものです 周囲の世界を変えていきます 没入度について考えます イマーシブなアプリを作るコツや 心地よい体験の話をします まずは没入度です このプラットフォームでは アプリをダイナミックにできます アプリ体験内の場所に応じて さまざまな没入度の間を 流動的に遷移できます この度合いにはかなりの柔軟性があります 誰かの見え方を拡張したり 新しい場所に連れて行ったり 広範囲にわたります アプリは共有スペースのウインドウ内で 他のアプリと共に表示されます もっとスペースが必要なら 他のアプリが隠れている フルスペースを使用します 共有スペースのウインドウ内で 始めるようにしましょう どのくらいイマーシブにしたいかを 選ぶことができます 例を見てみましょう Keynoteではアプリが ウインドウ内で開きます スライドショーをする際には プレゼンに集中できるよう調光を使います 調光は人をスペースから連れ出さずに コンテンツと人の環境を対比させる シンプルな方法です プレゼンを行う際に 人を大きな舞台に 連れていくことも可能です フルイマーシブな映画館を 味わうこともできます こういった等身大の体験は 大きな空間を必要とします そのためKeynoteはフルサイズになり 他のアプリは隠れます このように 別の場所に アプリが連れて行ってくれます しかしその場所は新しい場所とは限りません 自分のスペース内で存在することもあります 周囲は感じながらも 海を見渡すことができます 今 見えている全てを遮らずに 豊かなイマーシブ体験を 味わうことができます キーボードを使うために 手元が見たい場合にも 役立ちます イマーシブなアプリで 物理的空間との繋がりを感じます 大きな文字がテーブルに影を落としています "ハロー"の文字が 実在しているように見えます 物理的環境と結び付けたい体験なら デザインは柔軟にしましょう 空間は同じではありません 時間と共にも変わるものです どこでも適用できる体験を作りましょう 次はイマーシブなアプリを作成するコツです イマーシブ体験を設計する際に 考えるべきことがあります 人が注目する対象はさまざまです 一度に多くのことが起きていると 圧倒されるかもしれません そのため誘導することが大事です 重要な体験に焦点が当たるようにします マインドフルネスアプリでは 空間にある1つの物体に焦点を誘導します どの方向でも見ることができますが 動いている部分や空間オーディオ カラフルなマテリアルに 焦点が当たります もっと深くリフレクトするときには ゆっくりと花を広がります このようにスムーズで 予想可能なトランジションにし 体験内の異なる状態の間で 連続性を保ちます 人は心地よく感じ 何が起こっているか認識できます もう1つのコツは 現実と混ぜ合わせることです アプリがフルスペースにあれば 部屋の形を使って コンテンツを固定したり 物理的なインタラクションを生み出せます 周囲の環境を認識することで コンテンツがその中で 意味あるものに感じられます 場面全体を空間とブレンドする際は ソフトなエッジを使って アプリと統合させます 突然のトランジションが避けられ コンテンツに集中できます 感動的な体験にするには 生命を感じさせること アニメーションを加えることで 場面に活気が生まれます 湖に広がっていく水などです 空に浮かぶ雲とか 小さな動きで静止した体験に生命を吹き込み ドラマチックにします もっと拡張するためには 音で雰囲気作りをします 空間オーディオで 空間にある物体に音を固定したり… サウンドスケープを作り出し 人を包み込むことができます 詳細については "イマーシブサウンドデザインの詳細"を 確認してください 最後のコツは最小限で多くのことを 小さな効果で大きな印象を残します 映画では 微かな光が床や天井に反射し 空間的な感覚を与えます 映画館にいると感じさせるために 全ての詳細を レンダリングする必要はありません 最後に人を快適に そしてコントロールすること についてお伝えします イマーシブなアプリや その中の人を動かす場合に 大きくて速い動きは避けましょう 方向感覚を失います 代わりに 動いている際に フェードアウトを使います 落ち着いたらフェードで戻します これにより安定した感覚が得られます 人が物理的空間で動くとき イマーシブ体験もフェードアウトします 人が動いている時には 周囲の環境を見せる挙動となります

イマーシブ体験の出入口を 明確にしましょう 人を誘導する短いラベルや 折りたたみ矢印などの シンボルを使います 最後の原則です プラットフォームに合うような アプリを作りましょう 素晴らしいアプリ体験を作るには デバイス固有の機能を 活用することです このプラットフォームに適したアプリは 人の空間を活用した 豊かなイマーシブ体験です アプリは短時間だけ使うものではありません 例えばフリーボードは 大きなクリエイティブ空間を提供します 全てのコンテンツを一度に見て プロジェクトに集中できます 空間に取り入れたいと思うような 価値あるアプリ 関わりたくなるアプリを 開発しましょう 今日のまとめをする前に 学んだことをあなたのアプリに 適応してみましょう プラットフォームへの新しいアイデア または既存のものを 合わせるかもしれません 可能性はたくさんあります まずはアプリやゲームの １つの側面に焦点を当てましょう 空間もしくは没入です 空間でのみ体験できるような カギとなる瞬間を見つけます 写真アプリでの例を見てみましょう 既存のプラットフォームで 慣れ親しまれている アプリのコアとなる機能は何か ライブラリを参照したり 特別な思い出を再発見したり パノラマ写真での再体験であったり お気に入りの写真を見つけるのは 容易なことのようです ウインドウのインターフェイスと 親しみのあるナビゲーションで 探しているものがすぐに見つかります 特別な写真を見つけると 空間に大きく映し出され 周囲の光がおさえられます iPhoneで見るのと同じ写真ですが 等身大サイズで見るのは素晴らしい体験です パノラマ写真を見ると 重要な瞬間を思い出せます 実際にそこにいかのように感じられます 無限の空間でのみ実現できる パノラマ写真の活用方法です アプリの重要な瞬間を考えてみましょう １つの特徴的な機能に着目することで すでにあるコンテンツ内で 体験をユニークなものにします その瞬間を奥行きやスケールで高められるか 誰かの空間を変化させられるか タスクに集中させたり 感情を呼び起こしたり 思い出に残る体験ができます 過去の瞬間を再体験したり 別の誰かの立場から見たりします 豊かなビジュアルと高再現性のオーディオで リアルに感じられます 新しいことをたくさんお伝えしました 周囲の空間を利用して 親しみのある 本物のイマーシブ体験を生み出します その他のセッションとして 入力 ユーザーインタフェイス SharePlayやサウンド についてのものがあります

Nathan: 可能性の宇宙が広がっています 今日学んだ原則が きっとこれから役に立つことでしょう Amy: ご視聴ありがとうございます ♪