『呪術廻戦 ファントムパレード』のUI開発事例 ～呪術廻戦を魅せるためのノンストレスUI～【CAGC2024】

『呪術廻戦 ファントムパレード』はゲームプレイにおいてのストレスの無さにとても好評いただいており、売りとしているハイクオリティなクリエイティブによる世界観表現へのよりスムーズな没入を促しています。
本セッションでは、ノンストレスを実現するために重要であった根本にあるUI思想や、枝葉となるいくつかの開発事例にフォーカスして解説します。

https://cagc.cyberagent.co.jp/2024/session/index.html?id=S6uhsieB

©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD.
Copyright © CyberAgent, Inc.

Transcript

1. 『呪術廻戦 ファントムパレードのUI開発事例』 ~呪術廻戦を魅せるためのノンストレスUI~ リードUIデザイナー / 呪術廻戦 ファントムパレード 今村 優太　Imamura Yuta 1
2. 自己紹介 2
3. 自己紹介 ❖ 今村 優太　Imamura Yuta 株式会社サムザップ　リードUIデザイナー 2014年株式会社サムザップに中途入社。 スマートフォンゲームアプリ運用・新規ゲーム開発を 経て、現在は『呪術廻戦 ファントムパレード』の リードUIデザイナーを担当しています。 サイバーエージェントゲーム事業部の横軸組織 UIUX Labの室⻑を務め、新規開発のサポートにも 携わっています。 3
4. 『呪術廻戦 ファントムパレード』について 4
5. 5 『呪術廻戦 ファントムパレードは、 2018年より「週刊少年ジャンプ」 （集英社）にて連載中の 芥見下々（あくたみげげ）氏による 人気漫画を原作としたTVアニメ 『呪術廻戦』を元にした、作品初の スマートフォンゲームです。 TVアニメ『呪術廻戦』の第1期の物語を 追体験できるだけでなく、福岡を舞台にした 『ファンパレ』オリジナルの ストーリーが楽しめる コマンドバトルRPGとなっています。
6. 『ファンパレ』開発指針 6
7. 1.スマホゲーム史上最高峰の2Dグラフィックで 　キャラクターの魅力を表現 2.奥深さを感じるゲームシステムを 　ストレス無く楽しめる手触りで提供 3.ゲームならではの要素で今までにない 　『呪術廻戦』を体験できる 7
8. UI設計に大切とすること 8
9. 前提として… ゲームUIが持つ特性を理解する必要が あります。 ゲームUIは短時間で遷移を繰り返したり ボタンを連打するなど、他ジャンルの プロダクトに比べ UIを『酷使する』コンテンツです。 9
10. そのため 他ジャンルのプロダクトよりも、 『ストレスの蓄積頻度が増大』する ということになり UIが与える体験への影響のウェイトも 必然的に大きいものになります。 10
11. 細かいストレスの排除に向き合う意識 特に精神的な処理負荷の高いとされる 『認知・判断』の負荷軽減を意識することが重要。 11
12. 以上を踏まえ 1.『UI構造によるストレスの排除』 2.『UIインタラクションによるストレスの排除』 3.『UIインタラクションの開発フロー』 について解説していきます。 12
13. 機能構造の設計について 13
14. 機能構造の整理をする 開発初期に『機能構造の概念図』 のようなものを作成し、ゲームの 全体像や機能の分布を把握 可視化しました。 開発初期からプランナー側からの 要件とデザイナー視点でのFBを 織り込んでおくことが大切です。 14
15. 何がどこに収納されているか 『こんなモノ(機能)はここにある だろう』というユーザーの感覚に 寄り添い、徹底することで直感的な UI構造に近づけることができます。 日常的な部屋や身の周りの整理に 近く、『いつもの場所に片づける』 『ルーティンに適した場所に置く』 事で、余計な思考負荷が減ります。 補助的なもの 入口・アカウント関連 よく使う メイン バトルしたい キャラに 何かしたい 人 物 関 連 物 語 関 連 ガチャ 関連 15
16. UIインタラクション設計について 16
17. 機能遷移コンセプト より感覚的なゲーム内回遊を実現するため 現実の物理的な空間の概念をモチーフにした 演出コンセプトを作成しました。 遷移演出コンセプトを策定 17
18. 深い階層機能への移動は『奥(手前)』 例：入力　→　奥への遷移インタラクション　　→　奥の階層へ進んだ 　　入力　→　手前への遷移インタラクション　→　手前の階層へ戻った 18
19. 深い階層機能への移動は『奥(手前)』 例：入力　→　奥への遷移インタラクション　　→　奥の階層へ進んだ 　　入力　→　手前への遷移インタラクション　→　手前の階層へ戻った 19
20. 並列階層機能への移動は『横』 例：入力　→　横方向への遷移インタラクション　→　並列階層へ移動した 20
21. 並列階層機能への移動は『横』 例：入力　→　横方向への遷移インタラクション　→　並列階層へ移動した 21
22. より『身近な概念と紐づけた表現』を採用し、ゲーム内移動の フィードバックをより感覚的に認知できるよう助ける 22
23. UIインタラクション開発フロー 23
24. どう作ったのか コンセプトとして紹介した遷移挙動や基本インタラクション開発の 手順について紹介していきます。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 24
25. 1.コンセプト策定 インタラクションに関するコンセプトやテーマを策定します。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 25
26. 2.一連の挙動を網羅するVコンテ制作 基本挙動を網羅でき、主要機能間を遷移するイメージを可視化した Vコンテを１本作成し、完成イメージを可視化します。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 26
27. 3.Vコンテを構成する細かい要素に分解 完成イメージとして作ったVコンテを、構成している細かいインタラクション 単位に要素分解し、実装可能レベルの情報粒度やパラメーターに起こします。 点のインタラクション実装のみが先行せず、全体の一体感を担保することに も繋がります。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 27
28. 4.専属エンジニアに共有し短期実装 実装可能レベルの情報粒度やパラメーターに起こしたものを エンジニアに共有し、実装していきます。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 28
29. 4.専属エンジニアに共有し短期実装 この際にタスクフォースチームとして動くことで初期開発のスピードが 格段に向上しました。(デザイナ×1 エンジニア×1のタッグ) このタイミングでUIコンポーネントルールが策定されており、セットで 共通コンポーネントのprefabルールなども進められると効率的です。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 29
30. 5.ブラッシュアップ段階で各インタラクションの尺調整 　テンポ改善を行う 一度完成したものを最終ブラッシュアップのフェーズで意識的に引き算する 機会を設けることが非常に効果的。 過剰に盛られたインタラクションなどが最適化されることで、入力に対して のフィードバックもより俊敏なものになり、 ユーザーの『UIを駆使できている』感覚を高めることに繋がります。 この感覚は『ノンストレスな直感的なゲームプレイ』に必要な要素です。 コンセプト 策定 Vコンテ 制作 実装準備 実装 改良 30
31. まとめ 31
32. ◆ ゲームUIの特性を理解しストレスを排除する。 ◆ 『こんなモノ(機能)はここにあるだろう』に寄り添った構造に。 ◆ 身近な概念と紐づけた表現で感覚的に理解しやすいUI体感に。 ◆ １本のVコンテから要素分解して少数精鋭で集中実装。 まとめ 32
33. ご清聴ありがとうございました！ ©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD. 33