国内最大規模のゲーム業界カンファレンス「CEDEC2026」が、2026年7月22日（水）から7月24日（金）までの日程で開催されました。
最終日となる24日（金）には、Cygamesのアートディレクター 中村 元宣氏と、シニアデザイナー 萩尾 心氏が登壇し、「『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～」と題した講演が行われました。
約10年にわたって親しまれた『Shadowverse』の続編として、2025年にリリースされた『Shadowverse: Worlds Beyond』。前作のプレイヤーが持つ親しみや操作の慣れに応えつつ、新作にふさわしい驚きや納得感をどのように構築していったのか。本稿では、UIデザインの設計思想とアニメーション演出の具体的アプローチなどを包括する「インタラクションデザイン」について語られた講演内容をまとめます。
TEXT / 高橋 祐介
EDIT / 浜井 智史
登壇者の中村 元宣氏はUIおよび演出領域のアートディレクターを、萩尾 心氏はUIデザイナーチームのリーダー兼リードデザイナーを担当している
2016年にサービスを開始し、対戦型デジタルカードゲームの代表格として長年市場を牽引してきた『Shadowverse』。その続編となる『Shadowverse: Worlds Beyond』（以下、『シャドバWB』）もまた、3DCGのステージを舞台にリッチなエフェクトを楽しめるデジタルカードゲームです。
『Shadowverse: Worlds Beyond』正式サービス開始PV
『シャドバWB』では、アバターを操作して他のプレイヤーと直接コミュニケーションが取れるバーチャル空間「シャドバパーク」など、前作にはなかった遊びが追加されています。
前作が積み上げた大きな支持と歴史を継承しつつ、同時に「新作としての驚き」を届けることを主軸に据えた本作においては、UIデザインおよびアニメーション演出をいかに刷新するかが極めて困難な課題となりました。
「シャドバパーク」ロビーの様子（動画は『シャドバWB』公式サイトより引用）
そこで『シャドバWB』の開発に際しては、UIデザインおよびアニメーション演出を統括する概念である「インタラクションデザイン」が重視されました。この概念は、スムーズな情報伝達や満足度の高い操作感といった、総合的なUX（ユーザー体験）を担うものとして位置づけられています。
インタラクションデザインを進めるにあたって最大の壁となったのは「適切な変化」の基準をどこに置くかという点です。前作からの変化が乏しければ「代わり映えがない」と見なされかねませんが、逆に劇的な変化をさせてしまうと、プレイヤーが長年培ってきた慣れや愛着を損なうことが懸念されます。
このトレードオフを解決するべく、既存のプレイヤーにとって馴染み深い「前作らしさ」を適切に「継承」しつつ、新作としての納得感を生み出す変更や追加にも「挑戦」するという、2つの方向性から最適なバランスを探るアプローチが採られました。
UIデザインのビジュアルコンセプト策定にあたり、前作の要素をどの程度キープし、どの程度刷新すべきかという視覚的バランスの判断が大きな課題となりました。
そこで、UIデザインにおいて継承する部分を「シャドバらしさ」、 挑戦する部分を「新作らしさ」と定義し、それぞれの要素をキーワードとしてまとめました。
「シャドバらしさ」については、「ダークファンタジーを軸とした暗いイメージ」「アンティーク感や物質感のある装飾」「荘厳なニュアンス」といった要素として言語化し、ディレクター、アートディレクター、UIリーダー間で認識の統一が図られました。
一方で、「新作らしさ」にあたる要素についてはスタッフへのヒアリングを実施。多数のキーワードが挙げられた中から「洗練」「モダン」「高級」「繊細」へと要素を絞り込み、以下のような方向性で複数のデザイン案が試作されました。
しかし、これらの提案はいずれも感覚的な内容に留まっていたため、どれも漠然と的を射ているように受け取られてしまい、ひとつに確定できない状況に陥りました。
その解決策として、抽出したキーワードが持つ意味を要素分解して再定義する手法を採用。
例えば「モダン」というキーワードは、「近代的」「明るい」「フラット」「直線的」「色数が少ない」といった要素に分解され、その逆の「伝統的」「暗い」「物質感がある」といった要素はモダンから離れるものと位置づけられました。
そのほかのキーワードに関しても、以下のように要素へと分解されていきました。
〈高級〉
→ 色・装飾・形状・質感
色数を絞りつつ、あえてアンティークな雰囲気の装飾をあしらうことで高級感を表現
〈繊細〉
→ サイズ感・装飾量
過度な装飾を避け、細い線やフェード処理を活用することで重厚感を軽減
〈洗練〉
→ 画面構成
余計なものを省いて整頓し、黄金比などを意識した配置へ
さらに、視覚的に前作と比較できる「評価ゲージ」を作成し、前作の基準値に対して明度、質感のフラットさ、色数の絞り込み、線の細さなど、今作の要素をどの程度変化させるかを定義。これにより、チーム全体でキーワードに対する認識が統一されました。
この指針に基づき作成を進めた結果、カードモチーフやレイアウトといった「シャドバらしさ」や操作感を維持しつつ、装飾デザインや質感、サイズ感を進化させた「新作らしさ」の具現化に成功したとのことでした。
UIデザインにおいては、ユーザーが目標を達成するために必要な身体負荷と認知負荷の総量を指す「インタラクションコスト」の見直しも行われました。
身体負荷はタップやスクロールといった身体的アクションの行いやすさに、認知負荷は画面内での情報の把握や判断のしやすさに影響します。
開発当初、インタラクションコストを見直すためデッキ編成画面の試作が行われました。前作から身体負荷および認知負荷を軽減するため、以下の2つの工夫が盛り込まれました。
〈身体負荷の軽減〉
デッキ編成作業の「保存する」ボタンを、右手で操作しやすい右下へ配置変更
〈認知負荷の軽減〉
手持ちカードの一覧性を高め、一度に確認できるカード枚数を前作の2倍以上に拡大することで、カードを探しやすい仕様に変更
しかし、この試作はディレクターからは「操作しにくい」との指摘を受けます。要因を分析・検討した結果、前作で習慣化していた操作感が失われているとの結論に至りました。
保存ボタンの位置を変更したことで、前作の配置に慣れていたユーザーにとっては「ボタンが見つからない」という新たな認知負荷を生む結果に。
また、カードの表示数を増やしたことに伴い、スワイプの操作方向を「下から上」から「左から右」へと変更したことも前作とのギャップを生み、使いづらさを覚える要因となっていました。
ある側面における負荷を軽減する施策が、「前作の操作感との乖離」という別の負荷を新たに生み出してしまったのです。
これを受けて、身体負荷・認知負荷に「学習コスト」を加えた3つの要素を『シャドバWB』におけるインタラクションコストと定義し直しました。その結果、ユーザーの習慣が強く影響する画面においては「学習コスト」の軽減を優先して「継承」を主体とする方針となりました。
学習コストを重く見た例として、デッキ構成画面などでは前作ユーザーの操作習慣が顕著であったため、前作のレイアウトや操作感を踏襲しています。
一方、認知負荷の軽減を優先した例としては、サプライショップの画面構造が一律の階層に整理されたことを紹介。左タブでカテゴリ間を移動可能にすることで、目的のアイテムを探しやすく改善されました。
『シャドバWB』では、1つのゲーム内で2つの異なるUIテイストを取り入れるという、前作にはなかった挑戦が行われています。しかし開発にあたり、ゲーム全体の世界観と、今作から追加されたバーチャル空間「シャドバパーク」の世界観との間で、大きなギャップが浮き彫りになるという問題が発生しました。
作品全体の世界観は、頭身の高いキャラクターとリアルな背景によるシリアスで重厚なスタイルで描かれています。一方で「シャドバパーク」は、低頭身のデフォルメされたキャラクターと明るくポップな世界観で構成されています。
当初は両者のUIテイストを統一する方向で検討していましたが、ゲーム全体で使用するシャープで繊細なUIをそのまま「シャドバパーク」の画面に流用したところ、ポップでデフォルメされた世界観の中にUIが埋もれてしまい、明らかな不整合が見て取れました。
そこで、それぞれの世界観に合致したUIを別途設計し、作品中で共存させるという判断がなされました。
なお「シャドバパーク」のUI制作においても、作品全体のビジュアルコンセプト策定で得た知見を活用。「シンプル」「フラット」「明るめの色合い」という方向性を定義することで、感覚だけに頼った試作を避け、効率的なブラッシュアップが可能となりました。
ゲーム全体と「シャドバパーク」のUIテイストは、各要素において明確な対比が設けられている。
鋭角で線が細く、フェード処理を効かせたゲーム全体のUIに対し、「シャドバパーク」では丸みを帯びたシルエットとシンプルな装飾、フラットな単色下地を採用し、親しみやすさを感じさせるデザインとなっている
異なるテイストのUIを構築した上でも、ゲーム全体を通して操作感の一貫性は徹底して維持されました。たとえば、プレイヤーが2つの世界を行き来しても同一の操作が可能となるように、視線を画面左上から右下へと動かしながら操作するレイアウト構成が共通化されています。
本講演で語られる「アニメーション演出」とは、UIパーツ1個1個の振る舞いや文字演出、3Dシーン全体を用いた空間演出までを含む、画面作りの要素全般を指しています。
アニメーション演出は、UI側のビジュアルコンセプトを踏まえつつ、双方のデザイナーが連携しながら構築されました。こちらにおいても「継承」と「挑戦」のふたつが大きなテーマとなりました。
バトル開始演出は、対戦ステージの提示、対戦者の情報（称号・ランク・使用スキンなど）の表示、そして先攻・後攻の抽選を行う重要なプロセスです。内部処理的には、バトルシーンのロードや通信の同期を行うための時間としても必須の工程となっています。
開発当初は、前作から引き継ぐべき情報量の多さや重要性から、情報量の維持と見た目の刷新の両立が難しく、前作と代わり映えしないことが課題となりました。
これを打開するため、キービジュアルのイラストを演出に活用する案を導入。これが大きな手応えを得たため、他のキャラクターでの実現性やスケジュール試算、カメラワークの検証などを各セクションで並行して進め、動画によるプロトタイプが作成されました。
画面レイアウトは、キャラクターがバトルに向けて対峙する構図をイメージしつつ、将来的なキャラクター追加に対応できるよう余白を広めに確保しています。UIに関しても、前作と同等の情報量を保ちながら、ビジュアルコンセプトに沿った繊細な装飾と、抜け感のあるモダンな意匠が用意されました。
最終的には、準備画面からロード画面を挟むことなくシームレスに盤面へ移行する構成を実現しました。演出表現や先攻・後攻抽選のシームレス化により、対戦開始までの全体的な時間も短縮されています。
対戦後の勝敗演出においては、敗北の事実が強調されることでユーザーのネガティブな感情が増幅されてしまうのを防ぐことが課題でした。
そこでまず、演出によって生じる「プレイヤーの嬉しさ」を数値化。前作の演出バランスを「勝利時 +100（嬉しい）」「敗北時 -100（悲しい）」とした場合、本作では「勝利時 +200（もっと嬉しい）」「敗北時 0（ニュートラル）」を目標値として設定しています。
調整後の敗北演出では「LOSE」という直接的な表記が撤廃され、キャラクターの表情も平常トーンを維持したまま素早くリザルト画面へ移行するなど、プレイヤーに過剰なストレスを加えない配慮がなされています。
対照的に勝利演出では、勝利確定時のスローモーションとズーム効果が追加。さらには相手キャラクターの周囲が爆発し、ステージの崩壊をダイナミックに描く演出も盛り込まれました。
そのほかの演出でも嬉しさの数値を事前に定め、表示時間やインターバル、エフェクトの分量を調整。ランク昇格時は「+500」、グランプリ優勝は「+1000」など、局面ごとに演出のスケール感を数値化することで、チーム内での明確な判断基準として機能するようになったとのことです。
本作のバトルシステムは前作をベースとしつつも、快適なプレイ体験を追求するため、細部において演出の短縮とテンポ改善が重ねられています。
講演では、ターン開始・カードプレイ・進化・攻撃・ターン移行といった同一操作を可能な限り速く行った場合において、前作と本作の処理時間を比較した動画が公開され、全体で約26％もの時間短縮が達成されたことが紹介されました。
具体的には、各要素において以下のような短縮が施されています。
〈ターン表示〉
演出のつなぎを高速化し、カードドローまでの待機時間を短縮
〈カードプレイ〉
盤面配置から操作可能になるまでのラグを削減
〈進化演出〉
キャラクターアニメーションの尺は維持しつつ全体のテンポを底上げし、約1秒短縮
〈攻撃判定・光線〉
盤面攻撃時の光線余韻カットなど、待機時間を排除
このような細かい積み重ねにより、演出の華やかさを維持したまま操作テンポの高速化が実現されました。
アニメーション演出における「挑戦」については、本作の目玉新機能である「超進化」の演出制作と、ホーム画面などにおける「世界観遷移アニメーション」が具体例として取り上げられました。
従来の「進化」を超える新システムとして、今作では「超進化」が追加されています。ただし、カットインやエフェクトを豪華にするだけでは「進化」との差別化が難しいという課題がありました。
そこで、新たなゲームシステムとして検討されていた「無敵化」「吹き飛ばし」の仕様に視覚演出を連動させることを決め、「カードの巨大化」という表現を追加。
盤面の変化やリーダーへ向けての吹き飛ばしなど、演出の過程と結果に大きな変化を加えることで、通常の「進化」とは一線を画すスケール感と迫力が表現されています。
ホーム画面などの遷移においては、カードをモチーフとしたスムーズなアニメーションという前作の良さを踏襲しつつも、新作感を打ち出す新たな遷移表現が模索されました。
そこで、UIデザインの刷新やコンテンツごとの背景変化、そして「Worlds Beyond」という「異なる世界を渡る」タイトルを踏まえて、「ワープ」「トンネルを進むような遷移」「境目を感じさせないシームレス感」をキーワードに設定しました。
動画でのプロトタイプの検証を進める一方で、実機による試行も開始。SRデバッガーなどのツールを用いてのチェックや、ブラー処理の切れ目のミリ秒単位での修正などを重ねていきました。
なお、この設計思想はホーム画面の遷移に留まらず、ゲーム全体へと拡張されました。バトルやストーリー、シャドバパークといった全く異なる世界を遷移する演出も同じテーマで設計され、ゲーム全体で一貫した遷移演出が完成しました。
続いて、高度な演出表現と物量を実現するための「チーム体制の見直し」について紹介されました。
UIアニメーションや画面演出は、キャラクターアニメーションやエフェクト、UIデザインとは領域が異なりつつも、複数領域を横断する分野であり、担当領域の策定が難しいことが課題となります。同社では、この領域を担うスタッフを「アニメーションデザイナー」として位置づけています。
近年のゲーム演出のリッチ化に伴い、従来の「1人のデザイナーがプロトタイプ作成から実機実装までを一貫して行う」体制では、開発難度や制作ボリュームへの対応が困難となりました。
そこで、専任アニメーションデザイナーのスキルセットに応じて、以下のように完全分業・協業体制へシフトさせることで、アニメーション演出のクオリティ追求と大規模な物量への対応が両立されました。
〈プロトタイプ担当〉
演出提案・ビジュアル化
〈実装担当〉
技術再現・最適化
『シャドバWB』の開発チームは「継承」と「挑戦」という二軸を掲げ、前作から引き継ぐべき要素と刷新すべき要素の最適なバランスを模索し続けました。コンセプトの言語化やアニメーションのテーマ設計などを通じ、視覚的デザインから動的な演出・操作感に至るまで「インタラクションデザインとしての超進化」を目指してきたことが伺えます。
インタラクションデザインの成果は、定量的・数値的な評価が難しい領域ですが、リリース直前の体験会アンケートでUI・演出表現・テンポの良さに対して高い評価の声が多数寄せられたそうです。
リリース後も機能追加や各種改修が進められていますが、本講演のテーマである「継承と挑戦」のプロセスはリリース後も継続し、高いクオリティの体験を提供し続けていくとのことでした。
講演終了後には質疑応答が実施。たとえば「制作中、同じ演出を何百回と見る中で、客観性を維持するためにどのような工夫ができるか」という質問に対しては、解決策として「制作に全く関わっていない他セクションの人」に見てもらうことを徹底し、リアクションや表情を見て判断していたと語られました。
なお、本講演で使用されたスライドは「CEDiL」で公開されています。併せてご確認ください。
『Shadowverse: Worlds Beyond』公式サイト『Shadowverse: Worlds Beyond』続編開発におけるUIデザイン・アニメーション演出の「超進化」 ～継承と挑戦を両立するデザイン手法～ - CEDEC2026ゲームメディアや、劇場アニメのプログラム（いわゆるパンフレット）などに関わるようになり四半世紀。「クリエイターがどのように考え、作品を作っているのか」はつねに大きな関心事です。
インディゲームの文化的側面や、クラウドやAIなどゲーム周辺の技術にも興味アリ。
西川善司が語る“ゲームの仕組み”の記事をまとめました。
Blenderを初めて使う人に向けたチュートリアル記事。モデル制作からUE5へのインポートまで幅広く解説。
アークライトの野澤 邦仁（のざわ くにひと）氏が、ボードゲームの企画から制作・出展方法まで解説。
ゲーム制作の定番ツールやイベント情報をまとめました。
CEDECで行われた講演のレポートをまとめました。
UNREAL FESTで行われた講演のレポートやインタビューをまとめました。
GDCで行われた講演などのレポートをまとめました。
CEDEC+KYUSHUで行われた講演のレポートやイベントレポートをまとめました。
GAME CREATORS CONFERENCEで行われた講演のレポートをまとめました。
Indie Developers Conferenceで行われた講演のレポートやインタビューをまとめました。
ゲームメーカーズ スクランブルで行われた講演のアーカイブ動画・スライドやレポートなどをまとめました。
東京ゲームショウで展示された作品のプレイレポートをまとめました。
BitSummitで展示された作品のプレイレポートをまとめました。
ゲームダンジョンで展示された作品のプレイレポートをまとめました。
日本と文化が近い中国でゲームを展開するための知見を、LeonaSoftware・グラティークの高橋 玲央奈氏が解説。
インディーゲームパブリッシャーの役割や活動内容などを直接インタビューします。
