今回は先日リリースされた、『魔法少女まどか マギカ Magia Exedra』（マドドラ）のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
| ジャンル | ロールプレイングゲーム |
| 対応OS | iOS/Android/Microsoft Windows |
| 開発 | ポケラボ、 f4samurai |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2025年3月27日 |
| キャラ表現 | 2D/3D |
| UIのテイスト | 細かな装飾を施したフラット調のデザイン |
| キャラ獲得方法 | ガチャ |
テレビアニメ『魔法少女まどか☆マギカ』を原作としたゲームアプリ。
魔法少女まどか マギカ Magia Exedraのデザインの特徴
フォントサイズ
1080px ×2340px基準でフォントサイズを探ってみました。
実際のフォント通りではないですが、下記のサイズ感になっています。
横持ちのアプリで、全体的にフォントサイズは小さめ。最近のアプリはフォントサイズが小さくてもかなり許容されていますね。
| ユーザー名 | 28〜30px | 本文 | 30〜32px |
| ヘッダー数値 | 26〜28px | 本文（小） | 24〜26px |
| メインボタン | 32〜34px | 本文（最小） | 20〜22px |
使用されているフォントは「ニューシネマ」、「FOT-筑紫オールドゴシック Std」、英文はフォントを分けている様です。
使用カラー
落ち着いたトーンのアースカラーを中心に構成。
画面では透過やグラデーション、発光させた表現で洗練された今っぽいビジュアルになっています。
NieR Re[in]carnationにカラーリングが似てますが、こちらの方が若干彩度が高め。
これは原作キャラの絵の彩度が高く、背景なども色味がやや多いのでバランスをとっているように感じます。
洗練された繊細な美しい装飾
UI自体は物質的な質感を含まない、フラット調のデザイン。
ですが、メリハリのあるアースカラーで、細かく美しい装飾が施されています。
フラットながらも密度感のある装飾で、作り込まれた印象を感じさせるクオリティの高いデザインになっています。
特にホーム画面のフッターボタン。
ボタン自体の形状もユニークですが、その形状に合わせた装飾も、正座早見表のようで美しい。
モーダルは花の様なモチーフを角に、そしてうっすらウィンドウ下部の背面にも装飾が加えられています。
プレイヤー情報の囲い線も、対角線上に共通した装飾が真新しくて良い。
『マギアレコード魔法少女まどか☆マギカ外伝』の色味
『マギアレコード魔法少女まどか☆マギカ外伝』公式参照
前作の『マギアレコード魔法少女まどか☆マギカ外伝』ではキャラの絵に合わせた彩度の高いカラーリング。
今作とは180度方向性の違いを感じます。
UIアニメーション、3Dアニメーションから感じられるこだわり
UI要素、そして3D要素もかなり気持ちの良いアニメーションが実装されています。
派手すぎず、そして地味すぎず、かなりちょうど良いバランスで相互に存在していて開発者の高い技術を感じさせます。
獲得演出
例えば獲得演出。メリハリのあるアニメーションと、背面で動く装飾。
パーツを細かく分け、常駐でアニメーションさせるでこだわりを感じます。
ホーム
背景やキャラの3Dアニメーションとともに、フッターボタンもさりげなく演出を加えています。
星が巡るようなアニメーションが、シンプルながらも特徴的。
遷移アニメーション
画面がぼやけてホワイトアウトして画面遷移。
記憶に沈むイメージでしょうか。
クエスト
UIを表示するアニメーションも、短めな尺ですが小気味よい演出で、さらにさりげなく背面で装飾がアニメーションしています。
遷移時に軽めでも、部分的に装飾が動くことでこだわりやUI的な耐久性を上げていて、大事にUIを組んでいる感があります。
ローディング
ローディングアニメーションは円形の装飾が回転し、その中をナビキャラクターが走っています。
ローディング感と幻想的な装飾の組み合わせが印象にも残り、美しい。
『魔法少女まどか マギカ Magia Exedra』の各画面を見てみる
ホーム
3D空間に世界観を表現したモチーフ群、そして中央にキャラクター。
UIはうっすら透過させた焦茶ベースに薄黄色のアイコンやテキスト。
全体的に暗めなはずなのに、差し込む光や鮮やかさが逆に不穏な3Dオブジェクトが美しい。
フッターボタンのアイコンは、斜めにカットし色分けされたツートーンで、単調に見えない工夫がされています。アイコン自体も見たことのあるような形状ではなく、ユニークなものになっています。
ヘッダーのアイコン類も、地と図がしっかり意識されていてこれも美しい。
光の間
画面下部、各ボタンの装飾は前述している通り美しいの一言ですが、ボタンの形状がしっかり囲われていなくても背面にうっすら装飾を加えて密度感を上げている手法は参考になります。
また、光を感じるようなグラデーション、色の変化もとても良い。
ガチャ
ガチャ画面は、全画面でピックアップキャラのスキル演出を表示させるタイプ。
ガチャ画面は割とスッキリした印象に感じます。
クエスト
あぁー・・・ボタンのデザインが美しい。
枠からはみ出た英字や、縁取る装飾、挿入されたスチルも光を意識した表現が綺麗。
そしてまた禍々しいオブジェクト表現。
可愛らしいキャラの絵とは裏腹に急に奇妙な要素が差し込まれるのは原作をしっかり意識してのことでしょうか。
クエスト進行画面も、まるで悪夢の様です。
このギャップが、ゲーム全体（そしてコンテンツ）のフックにもなっています。
バトル画面
バトル画面でも、細かな装飾が手が混んでいて良い。
アイコン類はかなり小さく表示されていますが、キャラのパーソナルカラーはしっかり視認できるので問題なし。
3D空間、やや地面が寂しい印象ありますが、スキル演出がまたクオリティが高く、何度見ても飽きない。
まとめ：装飾とアニメーションの美しさがたまらないデザイン
前作アプリゲームから大きくクオリティを上げた本作。
キャラの可愛さ、原作の魅力に相応しいほどの愛を感じる、作り込まれた耐久性のあるUIでした。
おまけ
最近購入した置き時計がかなり良かったのでお勧め。
真鍮製で高級感と重量感、所有欲も満たせます。そして手乗りサイズ。
リモートワーク、もしくは会社のデスクにも置けますよ。
