今回は『SDガンダム GGENERATION ETERNAL（ジージェネレーション エターナル）』（GジェネET）のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
| ジャンル |
|
| 対応OS | iOS/Android |
| 開発 | 株式会社バンダイナムコエンターテインメント |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2025年4月16日 |
| キャラ表現 | 3D |
| UIのテイスト | フラット調のSF風、メカテイストデザイン |
| キャラ獲得方法 | ガチャ |
1998年に発売された、PlayStation用ソフトSDガンダム GGENERATIONシリーズの、新作スマホアプリです。
GジェネETのデザインの特徴
フォントサイズ
1080px ×2340px基準でフォントサイズを探ってみました。
| フッターボタン | 34~36px | ホームサブボタン | 28〜30px |
| ヘッダー数値 | 30〜32px | 本文 | 34〜36px |
| メインボタン | 32〜36px | 本文（最小） | 26〜28px |
おそらくUDフォントが使用されていると思うのですが、フォント選定段階で読みやすく、コントラストやサイズも適切で可読性と視認性がとても良いです。
使用カラー
UI、そして背景共に青系統の色味が多い印象。
まずはベースカラーとサブカラーの彩度で差をつけ、色相をある程度近い色でまとめる。
その上でアクセントカラーや機体の色味が乗るのでメリハリがついて視線が自然に重要なポイントに向かうようになっています。
SF風のUIにしてはかなり珍しく装飾がかなり細かい
SF風のUI、メカっぽいUIはこれまでにかなり目にすることがありましたが、GジェネETのUIはそれらのテイストを取り入れつつも細かな装飾により、今っぽいハイクオリティな見た目に。
ポジティブボタン（主導線）は青く発光し、アニメーションしており自然に誘導される仕組みに。まるでモニタがアクティブになっているような雰囲気。
ネガティブボタンは逆にモニタがoffになっているような印象で、実物のモチーフと連動しているかのような仕組みが面白いです。
しかも色味も美しくちょっと暖色が入っている点も良く、装飾も無理している感がなくクオリティが高い。
クオリティの高いUIは安心感があり、プロダクトに対する開発者の温度感が感じられて今後も期待できます。
ポジティブボタンのアニメーションはこちら。
装飾に合わせて光が外側に移動していく表現がエモーショナルでとても良いです。
原作の世界観と、操作性を両立したUI
操作性が重要な画面は一覧性を重視しシステマチックに、世界感を感じさせられる画面ではオブジェクトを配置した画面に。
ゲーム全体がシステマチックに寄り過ぎると味気なくなりますし、世界観を感じさせるようなオブジェクトだらけのUIだと操作性や学習コストが高くなるため、バランスがかなり大事になります。
本作はきちんとメリハリがあって、バランスのとれたUIに感じます。
過去作から最新作まで揃ったSD機体
SD機体について初代から最新作まで、かなりの数が実装されているようです。
これはファンにとっても嬉しいですし、自分のような幾つかのシリーズしか観ていないプレイヤーでも嬉しい！
自分の推しは彗星とSEEDです。
『SDガンダム GGENERATION ETERNAL』の各画面を見てみる
ホーム
ロケーションは基地内か戦艦か。
UIはインゲームに進むためのボタンが右下付近に大きく配置されており、押しやすい位置に。
フッターの現在選択されている画面は発光し強調されて大変わかりやすい表示になっています。
強調表示されているボタン以外は透過していて、UI全体で階層を感じる奥行きが表現されています。
中央のSDはサイズ感や傾きを調整できるようになっていて、ユーザーの理想の表示に近づけられるような配慮も。
グローバルフッターボタン
非アクティブなフッターボタンはなんとイラスト調の表示で大変凝っています！
各アイコンで色味を感じさせながらも、ぱっと見の印象は青紫っぽいトーンで統一されていて美しい。
強調表示の場合はアイコンも発光しているような表現で、さらに奥行きも感じられるような仕組みが。
アイコンデザイン自体も独自性があり、ガンダムの世界観を感じさせます。
強化
通常、キャラリスト的な画面では「顔のアップのみをトリミングしたサムネイル」が一般的ですが、GジェネETではSDキャラの等身を活かしたほぼ全身表示。
この表現にすることにより、機体の差がわかりやすく、シルエットも大きく違いが出るので見た目も華やかです。
ユニットデータではホーム画面と同じSD機体表示。
画面右から下部にかけて、SDを囲むようにステータスが表示されています。
キャラクターデータは、パイロットの写真をタブレット的なもので閲覧しているようなイメージでしょうか。
システマチックな表現の中に、世界観設定を感じさせるような画面が出てくるとグッときます。
また、キャラクターが斜めに表示されている点も、背景のデスクに馴染んでいる感を強調しています。
開発
開発画面は基地内部のようなロケーション。
GジェネETの背景画像は、どの画面もアングルが一定でなく、その場面で一番カッコよく見えるような画角になっているように感じます。アニメっぽい表現ですね。
各作品のロゴとともに、SDの機体が設計図のような表現で組み込まれており、各機能ごとに考えて作り込まれている感があります。
マイベース
戦艦も収容できるほどの巨大な基地。
変に説明せず、こういった機能、画面を用意するだけでこのゲームの世界観や規模感を自然にプレイヤーが把握できる作りになっているので大変効果的です。
「自分はプレイヤーとしてここを拠点に活動するんだな」という感じが刷り込まれし、想像も膨らみますね。
また、スライドするとさらに奥にも建物があり、世界に広がりを感じます。
ガシャ
バンダイナムコ系のアプリは「ガシャ」表記ですね。
UIの背面では割とオーソドックスな表現ですが、SDのモーションが表示されています。
他機能と違い、画面全体がアニメーションしているので華があり、温度感も高い画面に設計しやすい。
獲得したいという欲求、モチベーションにも繋げやすく効果的です。
出撃
まずは出撃準備。
リスト表示よりも大きめに表示されたSDサムネイルは、出撃準備画面用に用意されたものでしょうか。
虹色の色合いがとてもいいですね。
ゲーム系で最高レアリティを表現する際に、七色からいくつか色を間引くとカッコよくなるんですが、GジェネETもオレンジや黄色を間引いて美しく仕上げています。
戦闘画面
戦闘画面も、安心感のあるガンダムシミュレーション。行動させる機体を選択するまでマス目が表示されないので、臨場感もあります。
ボタンのデザインもピクト系のアイコン表現でかっこいい。
戦闘中の演出は3DのSD機体がゴリゴリ動いてこれもめちゃくちゃいいです！
バトルリザルトのオレンジの色味、透明感と背景ぼかし、発光、左右に伸びるSF調のデザインライン、さまざまな要素が組み合わさってこれもまた良い。
ゲーム全体のデザインが高いクオリティで積み上げられており、プレイしていて安心感と充実感のあるデザインです。
まとめ：既存SF風デザインの中でもレベルの高いデザイン
今までの単調になりがちなSF風デザインでも、装飾の細かさや透過処理、発光表現やアニメーションで高いクオリティに昇華させたレベルの高いデザインでした。
今後さまざまなテイストのUIでも、きめ細かさやアニメーションなどでクオリティの高いUIを目指せるという指針にもなり得るプロダクトです。