今回は『Shadowverse: Worlds Beyond（シャドバ ビヨンド）』 のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
| ジャンル |
|
| 対応OS | iOS/Android/PC（Steam、Epic Games Store） |
| 開発 | Cygames |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2025年6月17日 |
| キャラ表現 | 2D |
| UIのテイスト | 美麗ファンタジー風 |
| キャラ獲得方法 | パック開封（ガチャ） |
シャドバ ビヨンドは、2016年6月17日にリリースされた『Shadowverse』の新作タイトルです。
シャドバ ビヨンドのデザインの特徴
フォントサイズ
1080px ×2340px基準（縦画面）でフォントサイズを探ってみました。
| フッターボタン | 28px〜30px | ヘッダータイトル | 44px〜46px |
| ヘッダー数値 | 36px〜38px | 本文 | 32px〜34px |
| メインボタン | 36px〜38px | 本文（最小,ルビ） | 16px〜18px |
使用フォントはA P-OTF 解ミン 月 StdN かと思います。隷書体をベースに横組みでも綺麗に揃うデザインのようです。
フォント自体は前作も同様のようなので、シリーズとして一貫した雰囲気を貫いているように思います。
明朝体のシリアスな雰囲気と格式の高さを感じさせる、トーンにマッチしたフォントですね。
使用カラー
前作のダークで重厚な雰囲気と比べて今作はUIは青系をベースに比較的明るい雰囲気になっています。
比較的明るいとはいえ、暗めなネイビーから明るめなライトブルーのグラデーション、そこにおそらくゴールドを意識したカラーリングのフレームやアイコンが配置されています。
前作では重厚なゴールド、もしくは燻んだ真鍮のような色合いでしたが、今作では洗練された、立体感軽めのゴールドといった雰囲気です。
これまた格式を感じる、落ち着いた高級感が全体的に漂うカラーリングになっています。
洗練された装飾美
前作の、『神撃のバハムート』よりも重厚な金属感を感じさせる装飾よりも、全体の調和が取れた洗練された装飾加工。
グラデーションはおそらく2〜3色に、1px程度のシャドウとハイライトをいれてるかな、という雰囲気。
装飾自体は長方形の機能ボタンを見てみると、曲線に角を組み合わせたデザイン。そしてうっすら絵の際にも装飾が施されてますね。
うっすらといえば、カード一覧画面の背面装飾にもダイナミックに配置された装飾があります。
この辺りの表現はグランブルーファンタジーっぽさもあって良いですね。
装飾だけ見ても独自性があって作り込まれている様子が伺えます。
アニメーションも美しい
細かいUIアニメーションも美しい。
独自性のある装飾とメリハリのあるアニメーション、煌めくパーティクル。
バトル後のWINは装飾自体はほとんどなくシンプルですが、背面にモヤがうっすら表示されていたり、ホーム画面のランクマッチボタンは宝石部分の輝きがめっちゃいい。
光の表現は取り入れるとかなりエモーショナルな雰囲気に持っていけるので、全体的に取り入れられている本作はどの画面を見ても印象的ですね。
 |
 |
 |
 |
UIが２種類ある！
シャドバビヨンドでは通常のカードバトルと、ユーザー同士のコミュニケーションができるパークそれぞれで異なるデザインのUIが取り入れられています。
こちらはホーム画面からパークボタンを押した際の画面。
装飾は地続きな形状ですが加工がフラットな表現に差し代わっています。
他画面では絵自体にうっすら装飾が入っていたものも、この画面では排除されています。
パーク内のUIはフラットデザインになっています。
カードバトル＝ファンタジーの装飾表現、パーク内のユーザー同士のコミュニケーション空間＝ストーリー性がないためフラットデザインが最適、みたいな認識が正しいでしょうか。
それぞれの画面の役割に応じてUIの表現を切り替えていて、無理に統一したり折衷したりしない点が素晴らしいと感じます。
メニュー内のアイコンも、部分的に２種類用意されている・・・
『シャドバビヨンド』の各画面を見てみる
ホーム
シャドバビヨンドでは、ホーム背景としてキャラがセンターに配置されています。
タップするとランダムなモーションとセリフが表示され、プリコネ的な雰囲気も感じさせます。
前作のシャドバのようにカードがぐるっと配置されるよりもメッセージ性の高い画面になっています。
フッターはボタンの形状ではなくアイコンとラベルのみ。このおかげで背景キャラの表示領域をしっかり確保してます。
各種TOP画面
どの画面もボタンのデザインがめちゃくちゃいい。
プラクティスをチェスの駒風オブジェクトで例えていたり、他にも各機能をわかりやすく表現したデザインになっていて、リッチ感、装飾美と機能美がかけ合わさっています。
バトル
バトル画面はリーダーキャラが配置され、どのデッキを選択しているかわかりやすいようになっています。
ゴールドのグラデーションも一定ではなく、その上に配置されたバトルボタンが配色的にわかりやすくなっています。
カードバトル画面は馴染みあるレイアウトで、UIの装飾や表現は他UI同様洗練されています。
シャドバビヨンドでは超進化というシステムが追加されていて、戦略性が増しています。
カード図鑑
シャドバビヨンドでは、カードを獲得した際に図鑑に登録される演出が組み込まれています。
自分の獲得したカードが一覧で見れるのはニヤニヤポイントとしてかなり重要ですね。
パーク
他のユーザーとのコミュニケーション用機能です。
3D空間を自由に動き回り、フレンド申請やプロフィール閲覧なんかもできます。
バーチャル空間に飛び込んでいくかのような表現は、遊戯王マスターデュエルの戦闘開始シーンにも似てますね。
まとめ：９年の時を経て、しっかり時代感にアップデートしたUI
前作のシャドウバースから、新作として世に出すにあたり、前作のデザインテーマを踏襲しつつもしっかりと今っぽさを取り入れた洗練されたUIでした。
シャドバビヨンドでは前作の重厚感を若干抑えて表現されている点も洗練された見た目にする上で重要な調整だったのではないでしょうか。
ちなみにシャドバビヨンドを意気揚々とプレイし出したのですが初っ端から３連敗したため、「そういえばシャドバ下手勢だったな・・・」と改めて認識しました。
とにかく期待していた以上にクオリティの高いUI表現でした、めちゃくちゃ良いです！
