3D空間を扱うUI表現とユーザビリティ

本スライドは「Spectrum Tokyo Festival 2023」の登壇資料です。
https://fest2023.spctrm.design/

【概要】
近年の技術進展により、3Dの表現能力が増してきたことで、メタバースが再び注目を浴びています。UIデザインの分野においては、一般的なWebサービスやアプリとは別の観点が求められます。従来のUIデザインから一歩進んで、ユーザーがより直感的に、そして没入感を持って体験できるデザインが必要とされています。

本セッションでは、そのような3Dの仮想空間に特化したUIの表現方法についてご紹介します。
3D特有のインタラクションとその特徴について、複雑な画面設計や操作手法、表現を中心に詳しく解説します。また、ユーザビリティの観点から、3D空間でのUIがどのように直感的かつ快適な操作体験を提供するかのポイントをご共有します。

Transcript

1. 3D空間を扱うUIの 表現とユーザビリティ
2. 自己紹介 小澤 晶徳 (Akinen) 株式会社ambr デザイナー 面白法人カヤックにてエンジニアとして入社 後、デザイナーに転向。EdTech、InsurTech を経て、本年９月よりambrにジョイン。
3. 仮想空間及びユーザー体験を創造するメタバースクリエイティブ事業 メタバースクリエイティブスタジオ事業 メタバースコミュニティサービス事業
4. 今回お話すること 3D空間を扱うアプリデザインにおいて、 ユーザビリティを高めるには 何を意識すべきか？ Usable Emotional
5. ユーザビリティ ・目的の操作が達成できる ・ユーザーにとって容易に理解・操作できる ・ストレスや混乱が最小限に抑えられている Usable＝使いものになる
6. アフォーダンス Usable
7. The Future Is Coming. 1980 2010 2030 1) internetTECHIES: https://www.clickonf5.org/gadgets/smartphones-technology-evolution/10338 2) Nreal Air: https://tokusengai.com/_ct/17524014 過渡期
8. SFと実際 1) Minority Report(2002): https://www.re-thinkingthefuture.com/rtf-architectural-reviews/a5674-an-architectural-review-of-minority-report/ 2) Apple Vision Pro:
9. 「押せる」 UIへの人類の適応 1980 2010 過渡期 2030 平面 物理ボタン ３D空間上のボタン
10. UIの探求も必要である一方で、 頻繁に行う操作 ほど既存のUIに合わせるのが望ましい。 ユーザーの認知に合わせる ＝操作方法がわかる
11. 「Bondee」 アプリ画面より引用
12. UIと 「没入感」 文字 シンボル
13. 自然に文字は存在しない ユーザーは現実とデジタルの境界を 意識せず、シームレスに操作できる シンボル・サイン、 ジェスチャー操作を活用する 「Sky 星を紡ぐ子どもたち」 ゲーム画面より引用
14. 画面は覗き込む窓である 画面 UI ３D空間を覗き込む窓 情報の付与・行動の補助
15. 心地よい操作性 Usable
16. ３Dは、 疲れる 2D 3D 情報過多 ミニマム
17. Game Feel (Game Juice) ゲームをプレイしたときの心地よさ、快適さ 3C カメラ 􀌞 コントロール 􀧐 キャラクター 􀉩
18. カメラ 3D空間を映すには、カメラが必要。 カメラの操作性・自由度がユーザビリティに 直結する。 カメラ越しに世界を見ている
19. コントロール 抽象化できるもの、素早く実行した い操作に向いている 空間を探索したり、オブジェクトを 移動するなど、空間を直接扱う動作 2D： 素早くシンプルな動作 3D: インタラクティブな操作
20. キャラクター 自己投影感があり、操作性・カスタム性を 高めることで愛着を持たせることが可能。 アバターがいるだけで 空間の存在意義・物語性が生まれる
21. 愛着を持てるUI Emotional
22. MVP？ Minimum Viable Product Usable
23. Usable Emotional MVP Minimum Viable Product
24. エモーショナルデザイン UIは「タスクを完了するための手段」 だけではない。 機能性だけでなく人を惹きつける要素 が必要。 Emotional = 情緒的な https://winworldpc.com/product/microsoft-excel/97
25. 機能性 認知しやすさ 魅力 感情 エモさ
26. 3Dにおける 「エモさ」 シェーダー アニメーション サウンド 世界観に厚みを持たせ、没入させる役割
27. まとめ ・現在は3DUIの過渡期であり、 ユーザーの認知と没入感を重視した デザインが求められる。 ・単に機能的であるだけではなく、 感情的（Emotional）な要素を加え てユーザーの愛着を引き出すことが 重要。 Usable Emotional
28. ご清聴ありがとうございました @_akinen AMAでご意見・ご感想をお待ちしております！