【ゲームメーカーズスクランブル2026】『Shadowverse: Worlds Beyond』UIとアニメーションで実現する最高のユーザー体験を叶えるプロトタイピング

2026/08/30　ゲームメーカーズスクランブル2026

Transcript

1. ゲームメーカーズ スクランブル2026 『Shadowverse: Worlds Beyond』 UIとアニメーションで実現する最高のユーザー体験を叶えるプロトタイピング 株式会社Cygames インタラクションデザイン UIチーム / 酒井 春華・山内 彩愛 インタラクションデザイン アニメーションチーム スペシャリスト / 吾妻 大揮 1 /115
2. 自己紹介 インタラクションデザイン UIチーム インタラクションデザイン UIチーム インタラクションデザイン アニメーションチーム / スペシャリスト 酒井 春華 山内 彩愛 吾妻 大揮 2024年より『Shadowverse: Worlds Beyond』の開発に合流。 新規施策や運用素材制作を担当した後、サブ リーダーとしてスケジュール管理や制作環境 の整備など、リリース後の運営にも携わる。 2025年に『Shadowverse: Worlds Beyond』の開発に合流。 新規施策のUI設計やリーダースキン、カー ドパックロゴ制作、UIチーム内のグラ フィック一次監修などを担当。 前作『Shadowverse』でリーダースキンの アニメーション制作、プレミアムカードの 監修業務を経て、『Shadowverse: Worlds Beyond』の開発に合流。開発初期からUIア ニメーションや画面演出の制作に携わり、後 に監修を担当。 2 /115
3. 3 /115
4. はじめに 『Shadowverse: Worlds Beyond』 4 /115
5. プロトタイピングとは 「アイデアや仕様をもとに、試作品を作ること」 ①つくる ②検討する ③意見交換・ 改善する 5 /115
6. UIとアニメーションのプロトタイピングについて UIのプロトタイピング アニメーションのプロトタイピング 複数の画面案をつくり、 レイアウトや情報設計を検討する 完成イメージを動画でつくり、 動きやテンポを検討する 共通 見栄えと手ざわりを早い段階から確かめる 6 /115
7. プロトタイピングで目指すこと 自分たちが本当に作りたい “最高のゲーム体験”をまず形にすること 7 /115
8. Cygamesにおけるプロトタイピングの役割 制限にとらわれすぎず、理想のゲーム体験を突き詰める 絵や動きとして具体化 職種を超えて意見の出し合い 全員で“最高”を目指すための最初の一歩 8 /115
9. アジェンダ 1. UIのプロトタイピングについて 2. アニメーションのプロトタイピングについて 3. 継承される「最高のコンテンツ」 4. まとめ 9 /115
10. 1.UIのプロトタイピングについて 10 /115
11. UI制作で見えた課題と、制作フローの改善 11 /115
12. 開発体制と初期フロー ①プランナー発注 ②UIデザイン制作 ③アニメーション 制作 工程を順番に進める形 12 /115
13. 見えてきた課題① 無難で作りやすい画面に寄ってしまう もっとこだわれる…！ 13 /115
14. 見えてきた課題② ユーザー体験の確認が後回しになってしまう 思ったよりサクサク遊べない…！ 14 /115
15. 見えてきた課題 課題① ベストな画面や体験を 作り切ることが難しい… 無難で作りやすい 画面に寄ってしまう 課題② ユーザー体験の確認が 後回しになってしまう プロジェクト全体が 前に進みづらくなる 15 /115
16. 課題解決のために そもそも… Cygamesのゲーム開発としてどうあるべきか 16 /115
17. Cygamesの掲げるビジョンとは！ 「最高のコンテンツを作る」 そのために……より良い体験を前提にした 開発方針が必要 17 /115
18. プロトタイピングの進め方の変更点 ユーザー体験をもっと前工程で確認する UI ＆アニメーション UI ＆アニメーション 全ての セクション UI ＆アニメーション 初期段階から 連携して検討 体験の 早期確認 早い段階から 議論 サイクルを 早く回す 18 /115
19. 開発方針の変更点 完成してから見せる 一緒に考える 19 /115
20. 一緒に考える開発の取り組み プロトタイプの進捗を「見える化」 案出し中 レイアウトは完成 20 /115
21. プロトタイプと検討状況を見える化 進捗や検討状況を一覧で確認できる体制に変更 関係者全員が同じ情報をもとに確認、相談できるように！ 21 /115
22. 進捗の見える化によって 変化した画面制作実例 22 /115
23. Miroの活用方法 複数人で同時に編集できるオンラインホワイトボード 23 /115
24. 導入前の課題 UI画面の制作に関わる人数・セクションが多く 全員が進捗を把握できていなかった UI 他セクション ？ 24 /115
25. 画面進捗を見える化する仕組みの導入 UI画面進捗の見える化 関わる全てのセクションに展開 アニメーション デザイナー プランナー エンジニア デバッガー プロジェクト マネージャー 25 /115
26. 実例：メニュー第一階層画面の案出し 実際の第一階層画面 26 /115
27. 工夫① たくさん案を出す 最初からたくさんの案を作り、並べて見られるようにする 27 /115
28. 得られた効果 たくさん案を出すことで… 他スタッフもたくさん 案出しをする相乗効果 様々な案を見ることで アイデア出しの質の向上 28 /115
29. 工夫② テキストでメモを残す 選ばれた案やFBなどをメモで残す 調整後 調整前 29 /115
30. FBを踏まえて、さらに検証 案をかけ合わせてより良い案を作成 合体！ 30 /115
31. FBを踏まえて、さらに検証 第3稿を作成 調整後 調整前 31 /115
32. 試行錯誤を重ねて完成へ 第3稿 完成版 FB内容 ・拡張性を考え、パネル数変更でも見栄えを担保できるようパズルとチュートリアルを一つに ・パネルのイラストを主張したいので、下部分のアイコンの土台を外し主張を抑える 32 /115
33. 試行錯誤を重ねて完成へ 第3稿 途中経過 完成版 FB内容 途中経過が残っていることで ・拡張性を考え、パネル数変更でも見栄えを担保できるようパズルとチュートリアルを一つに ・パネルのイラストを主張したいので、下部分のアイコンの土台を外し主張を抑える なぜこの完成形になったのかを後からでも追いやすくなっている 33 /115
34. 没案も、次の判断材料になる 方向性で迷う時間を減らし、次の案出しに活かす！ 34 /115
35. スムーズにUI画面開発を進められるように before after • 最新の制作状況が UI以外に伝わりづらい • 最新状況を関係者が把握できる • 認識ズレや手戻りが 発生しやすい • 早い段階で相談・改善できる • 認識ズレや手戻りを減らせる 35 /115
36. 導入した成果 方針の変更に向けたアプローチ 実装も含めて 早い段階から 議論する 試して改善する サイクルを 早く回す Miro UIプロトタイピングを プロジェクト全体で進めるための 重要な共有基盤 36 /115
37. 進捗の見える化で得たこと 3つの改善が得られた！ 開発状況を リアルタイムで把握 できるようになった アイデア出しの 質の向上 体験を試して直す という一連の流れの スピード向上 完成 37 /115
38. UIプロトタイピングパートのおさらい • UIプロトタイピングの進め方を見直した • UIモック画面の案や進捗を見える化する • 早い段階から、関係者みんなで画面を見て考え、試す こうした試行錯誤のサイクルを早く回すことが より良いユーザー体験に繋がる！ 38 /115
39. ２．アニメーションのプロトタイピングについて 39 /115
40. 動画形式のプロトタイプ 40 /115
41. 動画形式のプロトタイプ 使用ツール • Adobe After Effects メインツール。主にUIパーツの画像をインポートして アニメーションを作成する。 • Blender 3DCG要素も入るプロトタイプ作成に使用。 エフェクト用のメッシュ作成に使うことも。 など 41 /115
42. 動画形式のプロトタイプ メリット デメリット ・確認の高速化 ・認識ズレの防止 ・演出クオリティの追求 ・直接組み込めない ・操作して確認できない 42 /115
43. アニメーション制作で意識していること 43 /115
44. アニメーションで意識していること 見栄え ワクワクさせる、かっこいい演出 ・丁寧な動き 余韻や予備動作を入れ、上質かつ見やすく！ ・見ていて楽しい 派手な動きやかっこいい演出で盛り上げる！ 44 /115
45. アニメーションで意識していること 手ざわり ストレスのない、快適な動き ・すぐ反応して動く ボタンを押した瞬間にすぐリアクションがある！ ・待ち時間が少ない 操作ができない状態を減らしサクサク動作！ 45 /115
46. アニメーションで意識していること 見栄え ワクワクさせる、かっこいい演出 ・丁寧な動き 余韻や予備動作を入れ、上質かつ見やすく！ ・見ていて楽しい 派手な動きや、かっこいい演出で盛り上げる！ 手ざわり ストレスのない、快適な動き ・すぐ反応する ボタンを押した瞬間に、すぐリアクションがある！ ・待ち時間が少ない 操作ができない状態を減らし、サクサク動作！ 46 /115
47. アニメーションで意識していること 見栄え ワクワクさせる、かっこいい演出 ・丁寧な動き 余韻や予備動作を入れ、上質かつ見やすく！ 手ざわり ストレスのない、快適な動き ・すぐ反応する ボタンを押した瞬間に、すぐリアクションがある！ × 動きに時間を使ってしまう ・見ていて楽しい 派手な動きや、かっこいい演出で盛り上げる！ ・待ち時間が少ない 操作ができない状態を減らし、サクサク動作！ × 演出が入る分、操作できない時間が長くなる 47 /115
48. アニメーションで意識していること 見栄え ワクワクさせる、かっこいい演出 ・丁寧な動き 余韻や予備動作を入れ、上質かつ見やすく！ × 動きに時間を使ってしまう ・見ていて楽しい 派手な動きや、かっこいい演出で盛り上げる！ × 演出が入る分、操作できない時間が長くなる 手ざわり ストレスのない、快適な動き ・すぐ反応する ボタンを押した瞬間に、すぐリアクションがある！ × 変化が唐突になる ・待ち時間が少ない 操作ができない状態を減らし、サクサク動作！ × 短い時間で単純な動きしかできなくなる 48 /115
49. アニメーションで意識していること 見栄え ワクワクさせる、かっこいい演出 ・丁寧な動き 余韻や予備動作を入れ、上質かつ見やすく！ × 動きに時間を使ってしまう ・見ていて楽しい 派手な動きや、かっこいい演出で盛り上げる！ × 演出が入る分、操作できない時間が長くなる 手ざわり ストレスのない、快適な動き ・すぐ反応する ボタンを押した瞬間に、すぐリアクションがある！ × 変化が唐突になる ・待ち時間が少ない 操作ができない状態を減らし、サクサク動作！ × 短い時間で単純な動きしかできなくなる どちらも大事なのに、アプローチが真逆！ 49 /115
50. アニメーションで意識していること 各画面の分布図 見栄え 手ざわり 50 /115
51. アニメーションで意識していること 各画面の分布図 見栄え バトル開始演出 ホーム画面 手ざわり 51 /115
52. 事例①「バトル開始演出」 52 /115
53. リリースされているバトル開始演出 53 /115
54. 前作のバトル開始画面 最初は前作『Shadowverse』と同じ、上下分割のレイアウトの方針で進行 54 /115
55. 待ち時間のタイミングの変化 前作シャドバ 待ち時間発生 ロード画面無し シャドバWB 待ち時間発生 55 /115
56. バトル開始演出の変遷 一番最初のラフイメージ 流れの確認と合わせて提案も加えた動画を作成 56 /115
57. バトル開始演出の変遷 要件にはなかった、背景に3Dのステージを動かし続ける案も一緒に提案！ 以後ステージとカメラワークがこの演出のメイン要素に！ 57 /115
58. バトル開始演出の変遷 背景が上下に分断されてしまっている 中央の線を消してしまうと キャラが切れているのが目立ってしまう 58 /115
59. バトル開始演出の変遷 前作のレイアウトから一旦離れ、 簡易的にレイアウトを変えた動画を作成して提案 59 /115
60. バトル開始演出の変遷 背景の見え方の問題は解消 60 /115
61. バトル開始演出の変遷 まだ盛り上がりに欠けるんじゃないか？ 61 /115
62. バトル開始演出の大改修 各セクションのキーパーソンが集まりブレスト会議！ 激しく盛り上がり を感じる演出 にしたい！ (アニメーション) 対戦する二人の 対峙感が必要！ (レイアウト/イラスト) 62 /115
63. バトル開始演出の大改修 対峙感を出すレイアウトの検討 63 /115
64. キービジュアルの採用 キービジュアルがまさに理想的な対峙しているイラストだった 64 /115
65. キービジュアルの採用 キービジュアルがまさに理想的な対峙しているイラストだった これを使えばいいのではないか？！ 65 /115
66. キービジュアルの採用 「新レイアウト案 + 仮キャラクターモーション」 を作成 66 /115
67. カメラワークの追加 「疾走感のあるカメラワーク案」も並行して作成 67 /115
68. 新バトル開始演出案 68 /115
69. バトル開始演出の変遷 細かい表現や見た目を引き続きプロトタイプで検討 69 /115
70. 先攻/後攻の抽選演出の検討 先攻/後攻の抽選部分をプロトタイプで何パターンも試作 70 /115
71. ほぼ完成イメージのプロトタイプ 71 /115
72. 各セクションで協力！ プロトタイプがあったから共通のゴールに向けて、 各セクションが連携してスムーズに前進できた！ イラスト キャライラスト 3DCGアーティスト 背景3D UIデザイナー アニメーション デザイナー 画面レイアウト キャラクターモーション UIアニメーション エンジニア 実装 負荷検証 72 /115
73. プロトタイプと完成した演出比較 最終的なプロトタイプ 完成した演出 73 /115
74. Cygamesのプロトタイピング 初期案 ブレイクスルー ブラッシュアップ 74 /115
75. 事例②「ホーム画面の課題」 75 /115
76. ホーム画面 76 /115
77. 初期のホーム画面 無難だけど、かなりシンプルな画面に… 77 /115
78. 初期のホーム画面 前作を踏襲しすぎて古くなってしまう… 78 /115
79. UIデザインの改修 UIデザインとアニメーションの大規模改修を実施 もっとわかりやすく！楽しいホーム画面にしよう！！ 79 /115
80. 最初のプロトタイプ 80 /115
81. 平行して実装作業を進行 できるところから並行して進行！ 【プロトタイプ】 【プロトタイプ】 ブラッシュアップ 【実装】 プロトタイプ反映 方向性決め 【実装】 手ざわり調整 【実装】 相談 / 先行実装 81 /115
82. 細かい動きまで詰めたプロトタイプ • 修正前と比べて目に優しい調整 • シャドバらしさ(カード要素)の追加 82 /115
83. 「手ざわり」も考慮しつつ調整 操作したときのことも想像しながら制作 83 /115
84. 「手ざわり」の検証 実際のテンポ感・ユーザー体験の検証 84 /115
85. プロトタイプの役割完了 細かな手ざわりは実際に操作したほうが早い！ プロトタイプ担当 実装担当 プロトタイプは ひとまず完了です！ OK! 実装進めますね！ 次は実際に操作して、 細かい触り心地を 調整しましょう！ 85 /115
86. 細かい「手ざわり」の調整 高速で操作してもうるさくなりすぎない見た目に 86 /115
87. 完成したホーム画面 87 /115
88. アニメーションプロトタイピングパート のおさらい 88 /115
89. アニメーションプロトタイピングパートのおさらい • 動画で「理想の見栄え」を早期に可視化する • 「見栄え」と「手ざわり」の最適なバランスを探る • 具体的な「完成イメージ」をチームで共有し、再現する 妥協のない理想をチームで形にすることが 心を動かすゲーム体験に繋がる！ 89 /115
90. アニメーションプロトタイピングパートのおさらい 理想の体験をチームで実現するための共通の地図 90 /115
91. 3.継承される「最高のコンテンツ」 91 /115
92. 運用でも最高のユーザー体験を 作り続けるために 92 /115
93. リリース後も続く緊張感 仕様・デザイン・実装全部を意識しながら 決まったスケジュールで作らなければならない 定期的にデザインをする必要がある 93 /115
94. 立ち返る原点 『仕様にとらわれすぎないで、 まず自分がカッコいいと思う デザインをつくることが大事』 94 /115
95. 解決策のステップ デザイン作る まず自分の ベストデザインを 作る エンジニアと相談 プランナーと相談 実装が難しければ エンジニアと相談 スケジュールが タイトな場合は プランナーと相談 95 /115
96. 解決策のステップ デザイン作る まず自分の ベストデザインを 作る エンジニアと相談 プランナーと相談 実装が難しければ エンジニアと相談 スケジュールが タイトな場合は プランナーと相談 プロトタイピングの考え方に繋がる！ 96 /115
97. 課題が放置されやすい状態 制作中の困りごとがUIセクション内で 見えづらい状態だった 困っていることの例 訴求画像の 制作工数が大きい フォルダが多く必要な UI素材を探しづらい いつか誰かが解決してくれるだろう…と思ってしまう 97 /115
98. 課題が放置されやすい状態 制作中の課題がUIチーム内で 見えづらい状態だった 困っていることの例 デザインの検討やクオリティ調整に フォルダが多く該当画面の 訴求画像の 使える時間が削られてしまっていた 制作工数が大きい UI素材を探しづらい いつか誰かが解決してくれるだろう…と思ってしまう 98 /115
99. 運用でも改善サイクルを止めない 課題抽出ミーティング 目的 • 困りごとを個人の中だけに留めず、 UIセクションの課題として見える化すること • 課題を解消し、改善のサイクルを止めないこと 99 /115
100. 課題抽出ミーティングの取り組み 月に1度、UIスタッフで課題を出し合う場を作った 課題管理用のボード 100 /115
101. ミーティングの流れ 全員で困っている ことを出し合う 課題解決担当を 決める 次回MTGで 進捗を共有 データ管理や作業環境 業務に関わることなど 業務の合間に対応 (※業務優先) 解決したら次の課題 対応中なら 担当継続する 101 /115
102. 実例：素材差し替えの自動化 ①課題が出る 困っていること 訴求画像の点数が多く、差し替え作業に時間がかかる 102 /115
103. 実例：素材差し替えの自動化 ①課題が出る 困っていること 課題付箋を貼る 訴求画像の点数が多く、差し替え作業に時間がかかる 新規施策のUI作成や デザイン調整に使える時間が 減ってしまう… 103 /115
104. 実例：②担当を決めて改善に進める 担当が明確になることで 「いつか誰かがやるだろう」という状態を防ぐ 担当ごとに課題を割り振る 担当者が順次対応を進める 担当者が 順次対応を進める 104 /115
105. 実例：②担当を決めて改善に進める 発注書 CSVを生成 自動化ツール起動で 素材が差し替わる ひな形のpsd 105 /115
106. 実例：②担当を決めて改善に進める ワンクリックで画像が差し変わることで時間短縮になる 制作時間を 10分→1分に短縮！ 106 /115
107. 実例：②担当を決めて改善に進める ワンクリックで画像が差し変わることで時間短縮になる 制作時間を 10分→1分に短縮！ 107 /115
108. 実例：③確認して改善 導入して終わりではなく 試して改善するサイクルを回す ①導入 ②検討する ③意見交換・ 改善する 108 /115
109. 課題抽出ミーティングの効果 before after • 訴求画像の制作点数が多い • 発注書の内容をもとに自動で 差し替え • 素材の差し替えに時間が かかる • 手作業によるミスも多い • 作業時間を短縮 • デザイン調整に時間を使える ように ユーザーに届く画面のクオリティアップに より多くの時間を使えるようになった！ 109 /115
110. 改善サイクルを早く回せるように 課題抽出ミーティングを運営 改善するサイクルを早く回す • 課題の見える化 課題解決によって作業効率が 上がり、クオリティアップのた めに時間が使える！ • 担当が決まり改善が進んだ 110 /115
111. 最高のユーザー体験を作り続けるために プロトタイプを作って検証する時間が必要 たくさん時間を使えるように… 日々の制作課題を見える化し、早く改善 111 /115
112. 最高のユーザー体験を作り続けるために 課題抽出ミーティング プロトタイピングやクオリティアップに使える 時間を生み出し 最高のユーザー体験を作り続けるための 土台を整える仕組み 112 /115
113. 4.まとめ 113 /115
114. 「最高のユーザー体験」のために • 検証を重ねる仕組み プロトタイピングで実現 • クオリティの追究 理想を形にし、実現方法をさぐる • 継続可能なチーム 課題解決を仕組み化する これらが揃うことで ユーザーに最高の体験を届け続けることができる！ 114 /115
115. 115 /115