「カオスゼロナイトメア」のUIを褒める！
今回は『カオスゼロナイトメア』のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
$$
\begin{array}{|l|l|l|} \hline
\text{ジャンル} & \text{ダークファンタジーロールプレイングゲーム}\\ \hline
\text{対応OS} & \text{iOS/Android/PC}\\ \hline
\text{開発} & \text{SUPER CREATIVE / スマイルゲート}\\ \hline
\text{価格} & \text{基本無料（一部ゲーム内課金あり）}\\ \hline
\text{リリース日（日本）} & \text{2025年10月22日}\\ \hline
\end{array}
$$
$$
\begin{array}{|l|l|l|} \hline
\text{キャラ表現} & \text{2D}\\ \hline
\text{UIのテイスト} & \text{繊細なフラット＆メカデザイン}\\ \hline
\text{キャラ獲得方法} & \text{ガチャ}\\ \hline
\end{array}
$$
開発、運営ともに韓国の企業で、カードプレイで行動を選択し敵を倒すRPGです。
カオゼロのデザインの特徴
フォントサイズ
1080px ×2340px基準（縦画面）でフォントサイズを探ってみました。
$$
\begin{array}{|l|l|l|} \hline
\text{フッターボタン} & \text{32px}\\ \hline
\text{ホームサブボタン} & \text{23〜24px}\\ \hline
\text{ヘッダー数値} & \text{26〜28px}\\ \hline
\text{本文（小）} & \text{28〜30px}\\ \hline
\text{メインボタン} & \text{40〜42px}\\ \hline
\text{本文（最小）} & \text{24〜25px}\\ \hline
\end{array}
$$
メインの使用フォントはGoogle FontsのNoto Sans Japaneseかと思われます。
もし間違いなければGoogleFontsはUnityへの組み込みの許諾がOKだったはずなので、各言語対応をする上でも最適な選択かと思います。
全体的に級数は平均的な数値で、フォントのウェイトが軽めなのですっきりして見えます。
UI装飾も割と細めのラインを多用しており、全体のトーンとしてまとまっているのが印象的です。
使用カラー
ホワイトトーンのベースカラーをメインに、バトルが絡む緊張感ある画面では暗めのトーンに変わったりと印象値をコントロールしている感じがあります。
そこに発光感のあるアクセントカラーが、ベタだったりグラデーションがかけられていたりと細かな調整が加えられながら配色されていて美しい。
繊細でエモーショナルなメカニックテイストUIデザイン
非常に繊細で細かいラインを用いた装飾やアイコンが用いられていて、かなり洗練されています。
モチーフは独自のグリッドが背面に配置されていたり、電子回路やIDっぽい表示など、メカニックな要素がところどころで感じられます。
ですが、じっくり見てみると「星」、「天体」のモチーフの方が多く目に入ってきます。
メカニックなUIトーンに、天体要素をプラスすることでラインやモチーフが硬くなりがちな表現に曲線や美しいグラデーションでエモーショナルに仕上げている点がめちゃくちゃ参考になります。
カードの裏面の天体図の表現、そして美しいグラデーション。
メカニックな表現だけだと画面が単調になることが多いのですがこういった要素を追加することでグッと感情に刺さる画面に仕上げられています。
繊細なギミックのUIアニメーション
細かく施されたパーツを、そのデザインから期待される演出で表現されていて気持ちの良いアニメーション。
色使いもかなり気を配られている印象があり、絶妙な色変化がこれまたエモーショナルです。
『カオスゼロナイトメア』の各画面を見てみる
ホーム画面
星を見下ろすような戦艦内部のような表現。
プレイヤーは司令席目線でしょうか。暗い宇宙空間にぼんやりと青白い光があって美しい。
UIは基本的に白いアイコンと白いテキストでかなりシンプルですが、アイコンは世界観に沿った独自性を感じられるデザイン。
キラキラっとした装飾には発光表現が用いられています。
選択中の機能アイコンやバナーには多色が使われていて、粗密、コントラストがしっかり効いています。
機能ラベルの下に読めない架空の文字みたいなものが配置されていて、こういうポイントもいいですよね。
バトル
バトルは『Slay the Spire』のような、行動カードを選択して攻撃や補助を行なっていくスタイル。
カード自体のデザイン、イラストもめちゃくちゃ綺麗ですが、行動キャラが左からカットインしてアニメーションする動きもハイクオリティ。
何気にキャラごとのチャームポイントもしっかり動きで強調してるっぽい。
この辺りのギミックはゲームとしての視覚的魅力での訴求も意識されているなと感じます。
カードを使っていく新鮮さだけでなく、キャラや演出でもしっかりクオリティ高く魅せていく点がとても良いです。
キャラの必殺技を使った時のアニメーションも、このゲーム特有のシステムである「崩壊」もとにかく絵的なクオリティがとても高い。。
戦闘員
キャラの詳細画面、背景はキャラごとにテーマカラーとして差し代わるようです。
どの画面もすっきりまとまりつつも、それぞれ違った表現を取り入れて差別化している。
「エゴ発現」のパースのかかったUIも急に入ってくると新鮮で良い。
そしてぼんやりグラデーションがかかっていたり光が差し込むような表現の取り入れ方がとても上手いです。
救出
という名のガチャ。
ガチャの演出の流れは一般的なソーシャルゲームと同じではありますが、もちろんしっかりクオリティ高い。
光の表現やキャラの動き、全く違和感なく全体が美しく仕上がっています。
メカニックかつ天体っぽい表現がここぞとばかりに盛り込まれています。
その他
任務のTOPページ。
巨大ボタンの配置だけじゃなく、少しボタン範囲から飛び出したり、キャラを目一杯はみ出させたりと文字通り枠に捉われない表現がめっちゃいい。
ショップ周りの紫〜青のグラデーションも綺麗。
実績画面も発光した表現や細かい装飾がとても美しいですね。
まどマギの細かなUIも想起させます。
カード周りのイラストとデザインもめっちゃいい。それぞれしっかり差別化しつつ、グラデーションやキラッとひかる光の表現がかっこよさを底上げしてます。
メカニック&天体のUI、イラスト＆アニメーションの複合的なハイクオリティデザイン
単純にメカっぽいデザインだけでなく、単調になりがちなそのテーマに天体モチーフをプラスしてかなりエモい表現が組み込まれたUIでした。
クオリティも最近のアプリゲームに並ぶ完成度で後発でも引けを取りませんし、ゲームシステムも真新しさがあって高いバランスの取れたゲームです。
とにかくテーマの掛け合わせやフックの強さを感じるめちゃくちゃ参考になるデザインでした。