今回は『メダロットサバイバー』(メダサバ)のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
ジャンル |
|
対応OS | iOS/Android |
開発 | イマジニア株式会社 |
価格 | 基本無料(一部ゲーム内課金あり) |
リリース日(日本) | 2025年2月10日 |
キャラ表現 | 2D |
UIのテイスト | ポップ寄りのSF風、メカテイストデザイン |
キャラ獲得方法 | ガチャ |
メダサバは、1997年に発売されたゲームボーイソフト、『メダロット』のスマホアプリゲームで、ゲームシステムはヴァンサバ系と呼ばれる1バトル内でスキルを成長させて無数の敵を薙ぎ倒していく爽快感抜群のゲームです。
メダロットサバイバーのデザインの特徴
フォントサイズ
1080px ×2340px基準でフォントサイズを探ってみました。
フッターボタン | 42~44px | ホームサブボタン | 28〜30px |
ヘッダー数値 | 42〜44px | 本文 | 38〜40px |
メインボタン | 38〜40px | 本文(最小) | 22〜24px |
使用フォントはロダンNTLG Proかと思ったんですが、若干違うっぽい。ルイカ系かタイプラボっぽさもあり。
(というかこれらの書体デザイナー同じなようですね)
文字の横線が水平になっており、ロボットの無骨感・無機質感、
メダロットの持つ有機的なラインを曲線が表現しているかのようで、かなり良いフォント選定かと思います。
テキストのジャンプ率調整
そして感動したのが、「ひらがな」と「漢字」のテキストサイズを変えているところ。
「漢字」は120%程度拡大されているのかな?テキストが適度に区切られていて、かなり読みやすい。
斜体になっている点も、SFっぽい見出し装飾のラインに沿っていて統一感があるし、メカっぽいデザインに合ってます!
使用カラー
UI、背景共に青系統と白をベースにした配色。GジェネETも似たような配色でしたね。
こちらは彩度が高めで、メダロットのポップさを引き立てるカラーリングになっています。
それらのベースカラーにオレンジや緑、赤が散りばめられていますが、雑多な感じはしなくバランスよく使用されています。
まるでディックブルーナの、決められたカラーを使っていくかのような印象で実はかなり計算された配色になっているのではないでしょうか。
イラスト調のアイコンが多用された、見た目にも華やかなUIデザイン
フッターやサブボタンには、ピクトアイコンではなくカラフルな配色で表現されたイラスト調のアイコンが使用されています。
メダロットが持つポップな印象を感じさせる、世界観や表現が統一された良デザインです。
ゲーム全体的に軽快な操作性
仕様自体がシンプルなことも影響していると思うのですが、UIの遷移からやれることもかなりシンプル。
そしてさらに「ガチャ演出」や「強化演出」の尺の短さ、「バトル開始演出」がそもそも存在しない、など、全体的なゲームの遷移も含めた演出が軽快で操作がしやすい!
ゲームを開発する上で、制作リストに上がってくる一つ一つの演出も、「ここまで削ってしまっていいのか・・・」と驚愕するほどの軽快さです。
実は必要ないのかも、を突き詰めたデザインに感じられます。
また、ここまで軽快な動作とヴァンサバのゲーム性から、かなりカジュアルな印象にもっていけているのも
プレイのハードルが下がり良いポイントなのかもしれません。
絶妙なラインで取り入れられたメダロットの原作要素
自分はメダロットシリーズについては確か「メダロット2」あたりまでプレイしていたと記憶していますが、ウリは「頭部」「右腕」「左腕」「脚部」のパーツを組み合わせ、コアとなる「メダル」を設定してオリジナルのメダロットを構築して戦う点だったと思います。
今作ではパーツの組み替えは出来ず、メダルも違う形で実装されています。
編成枠が6個あり、それぞれ空のメダルに構築済みで、かつテーマで統一された素の状態のメダロットを編成していくようなイメージ。
ただ、バトル中に使える技=メダロットを取得していくことで、擬似的にパーツを組み替えて様々な技を駆使して攻略していく形にしたのかなと想像しています。
『メダロットサバイバー』の各画面を見てみる
ホーム
画面中央には「壁紙」扱いでメダロットの全身絵が表示されていて、カスタマイズ可能。
メダロットの2D絵はクオリティ高くてポージングや配色もかなりカッコいい!めちゃくちゃテンション上がります。
その絵とバランスを取るように、UIのパーツ感や配色で構成されています。
うっすらと背景や「ロボトル」ボタンがアニメーションしていて、必要な箇所を必要な分強調していてメリハリがついています。
編成
縦画面なので、操作が必要な要素は下部にある程度集約されています。
合成もよく使いますが、まぁギリ許容範囲内のレイアウト。
とはいえ編成やレベルアップもシンプルで、合成がやや複雑な程度でそこまで滞在時間も長くない機能なので良さげです。
ビーストマスターカッコいい!
ガチャ
ガチャはかなりシンプルで、ガチャTOPにアニメーションもなければ確認ウィンドウも出ません。
普段は画像中央の玉は白ですが、ピックアップキャラが出る時だけかな?金色に光ります(たまたま出ました)
また、ガチャの施策的にはあと数回引くとURが出る、などの期待感の煽り方が良さげです。
研究
研究画面は、プレイヤーのレベルによって戦闘が有利になる、強化解放機能ですね。
ピクトアイコンが、どれもメカっぽさを意識していてかなり良いです。
グラデーションのかけ具合も面白い、まるでホログラム投影しているような表現です。
ロボトル(バトル)
最後にロボトルという、インゲームのバトル機能。
所謂ヴァンサバ系ゲームとのことですが、経験値ジェムを獲得していき、Lvが上がるたびにスキルが解放されていく気持ちよさがめちゃくちゃ楽しい。
5段階強化した後、「バースト」という最終解放状態になりますが、1段階目から5段階目は割と順当な強化なのに対して、バーストするとスキルの強さが段違いに強化され、その爽快感が病みつきになります。
こういった何度もプレイしたくなるような仕様ってとても大事ですよね。
他社のゲームシステムを踏襲しながらも、ビジュアルの良さとレスポンスの良さに加えた根本のシステムの気持ちよさが合わさり、それが独自性につながる。
そして「バトル開始」「バトル終了」演出も何もなくヌルッとバトルが始まりますが、逆に軽快さを感じて「意外と演出っていらないのかも・・・」と考えさせられました。
まとめ:演出を省きシンプルに削ぎ落とした仕様と、間違いないシステムの爽快感
最初見た時の「演出の物足りなさ」が、細かいデザインや仕様の配慮を目にするたびに「あえて演出を省きレスポンスの良い体験に仕上げている」と感じさせられる設計でした。
加えて、世に認められたゲームシステムの本来の爽快感をも引き出し、軽快で爽快なアプリに仕上げています。
目当ての機体が出なかった時は毎回似たような体験に終わってしまいがちですが、強機体を引き当てた後の体験がめちゃくちゃいいので是非、リセマラ頑張って爽快なバトルを体験してみてください。