今回は『ペルソナ５ The Phantom X』(以下ペルソナ5X) のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
| ジャンル |
|
| 対応OS | iOS/Android/PC(Steam®/Google Play Games) |
| 開発 | ATLUS. SEGA. |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2025年6月26日 |
| キャラ表現 | 2D/3D |
| UIのテイスト | スタイリッシュデザイン |
| キャラ獲得方法 | ガチャ |
ペルソナ５Xは、2016年9月15日にリリースされた『ペルソナ5』の新作タイトルです。
ペルソナ5Xのデザインの特徴
フォントサイズ
1080px ×2340px基準（縦画面）でフォントサイズを探ってみました。
| （スマホ）メニューボタン | 30px〜32px | ヘッダータイトル | 28x〜30px |
| ヘッダー数値 | 34px〜36px | 本文 | 28px〜30px |
| ADVメニュー | 28px〜30px | 本文（最小） | 20px〜22px |
メインの使用フォントはロダンカトレア、スランプ かと思います。
おそらくシステムフォントとしてスランプ、画像素材としてロダンカトレアや他にもいくつかのフォントを組み合わせて使用されています。
フォントが与える印象やムード的なものはかなり大きいので、1種のフォントで妥協せず用途ごとに切り分けてる点が凄すぎます。
使用カラー
ベースカラー、サブカラー等の分け方は諸説ですが、大まかな使用カラーはこんな感じです。
（『ペルソナ5』の開発インタビューではサブカラーは使用しない方針だったようです。）
ほとんどグラデーションは使わずベタ塗りの配色ですが、特徴的なデザインや、ベタ塗りはベタ塗りでも微妙に色の変化をつけていたりと細かい調整が入れられていてすごい・・・
限定UP!の配色が２色の黄色で表現
契約（ガチャ）画面などでは全面青系の配色にしたりと、ポイントで切り分けていますが全体の明度感やコントラストを維持しています。
怒涛のスタイリッシュデザイン
『ペルソナ5』から引き継がれている“ポップパンク”というコンセプトのデザイン。
インタビュー記事にもある通り、ダイナミックで動的、前述の通り配色もコントラストバッキバキでこれまたスタイリッシュ。
ダイナミックなのにも関わらず、細部の装飾が細かくてめちゃくちゃカッコいいです。
装飾の細部の処理として、タイトルフレームやアイコンのフチに関する調整。
微妙にずらしたり部分的に膨らませたりすることでダイナミックさを細部に行き渡らせています。
この処理、グラフィティアートっぽさやパンクっぽさ、特にストリート感を微かに感じます。
また、版画や切り絵の繊細さも感じられるので、見ていて飽きない。
その細かい調整が、このテイストのデザインにありがちな綺麗にまとまり過ぎてつまらなくなりがちなデザインを大きく解消している点がめちゃくちゃ良いなと感じました。
シルエットを生かしたアイコンデザイン
編成キャラのアイコン。
シルエットに部分的に白を入れて、光が当たってる感や立体感を取り入れ、かつどのキャラかがわかるような細かい表現。
キャラ名や見出しテキストにひと工夫
名前の一部分、地と図を入れ替えたり、文字色を部分的に変える、フォントサイズや傾きを変えるなどの工夫が世界観をしっかり表現していてとても良い。
怪文書を新聞の切り抜きで作り上げるような怪しい雰囲気が醸し出されていて、怪盗感があります。
メリハリ＆ダイナミックなアニメーションがかっこいい
バトルリザルトの演出がヤバカッコ良すぎる
とにかくアニメーションがかっこいい。
UI単体としてではなく、アニメーションをつけることを見越したデザインになっていると感じます。
背景の彩度を減らし、UIとアニメーションが強調されるような配色や動きが記憶にしっかり焼き付けられるほど印象的。
細かいエモーションアイコンもそれぞれの持つ印象値を表現したアニメーションがつけられています。
『ペルソナ5X』の各画面を見てみる
基本画面
基本的にキャラを操作しつつ、編成や契約をしたい場合にボタンやメニューからタップして遷移する形。
3D空間の細かいオブジェクトも良い・・・。
左上に今いるマップの地図が表示されていて、課金に関連する機能とイベントがその横に配置されている感じでしょうか。
その他の機能は右下のメニューから選択する感じですね。
基本両手での操作を推奨するレイアウトです。
メニュー
メニューはスマホ画面を表示しているような表現。
各機能のアイコンもしっかりデザインスタイルを取り入れられていて独自性があります。
編成
編成画面は、斜めに切り取られたキャラが並んでいます。
よく見ると、キャラ間の間隔もあえて不揃いにしている感がありますね。キャラとペルソナの切り取り方がカッコ良い。
シナジー
プレイヤーと各キャラとの好感度を確認できる画面。
キャラサムネイルの並べ方や、名前、好感度の表示、CVの入れ方など既存のスマホゲームの概念をぶち壊すようなレイアウト。
ユーザーが必要な情報にすぐにアクセスしやすいレイアウトが重要な場合もありますが、こういった大胆なレイアウトでも必要な情報であれば探しに行くでしょうし、ゲーム的な見た目の面白さを重視しても良さそうですね。
アイテムを獲得した際のポップアップも、フレームにサムネイルを収める形ではない表現。
こういった細かい表示でも、他画面とのスタイルをブラさずにデザインされている点が素晴らしい。
交換
こちら交換画面。左側にタブ切り替え。どの画面でも汎用のUIを流用している感がないのが衝撃。
ミッション
交換所とは違う、リスト型の上部タブ切り替え。タブの赤部分がアクティブ表示で使用されていて視認しやすいです。
こういった画面で汎用背景を用意して軽く動かして、という考えでUIを設計したりしますが、どの画面もユニーク・・・！
アワード
アワード画面。金のオブジェクトの表現がこれまたかっこいい。
これもグラデーションを使用せず、ベタ色の組み合わせてしっかりゴールドを表現しています。
立体感があり、トロフィーっぽい感じの表現でつい達成したくなる。
これもまた左側のタブ切り替えボタンが交換画面とも違う、各画面ごとにデザインを変えても、スタイルやアクセントカラーを使用するというルールが一貫しているため、迷うことは少なそうです。
契約
こちらガチャ機能です。どの画面もカッコええ・・・
ピックアップキャラの名前の表示、それぞれ角度も違いますが近接のレイアウトやペルソナはこのフォント、キャラはこのフォント、みたいなルールを徹底しているのでただただカッコいいデザインとして受け取ってしまいます。
よくある、スキル動画を全画面で流すようなダイナミックさではなく、細かいデザインやレイアウトのカッコよさで構成されてる点がめっちゃいい。
設定
設定画面。スライダーUIが星型になっていて、細かい点までこだわりを感じます。
各項目の設定内容を、リスト左側の「？」アイコンタップで詳細説明を表示するなど、デザインに馴染ませている点も良い。
イベント
イベント画面も角イベントごとにレイアウトや表現が全く違っていて凄過ぎます。
チケットの半券のような表現をデザインスタイルに組み込んでいたり、ダイナミックにキャラを配置していたりと、どんな設計思想があったらこんなデザインに仕上げられるのか不思議でなりません。。
バトル
バトル画面でもデザインスタイルをしっかり引き継ぎ表現されています。
スマホでの操作もあるので、画面右側に項目を集中させている感じでしょうか。
とにかくバトルの演出もスタイリッシュでダイナミック。
まとめ：原作のデザインをしっかりスマホ版に落とし込んだデザイン
ペルソナ5をずっと気になりつつも触れてこなかったのですが、今回スマホアプリとしてリリースされてやっとプレイすることができました。
各画面が独立したデザインに見えて、一本筋の通った一貫したデザインスタイルが統一感を保っていて、画面とUIが一体となって表現されている点が素晴らしかったです。
3D、2D、イラストと担当が分かれる分、それぞれ独立してデザインを起こしがちですが、ディレクターやアートを統括する方、そしてじつ作業する方々の意識レベルと協業体制が相当強いのだと感じました。
また、グラデーションを使わない分、ベタでのっぺりしてしまう可能性があるデザイン表現でも、細かい装飾の調整や、背景などにも要素をふんだんに組み込んで繊細さとダイナミックさを両立している点がすごい。
UIがゲーム全体のムード、雰囲気を作り出している点が大変刺激になりました。
自分はガッチガチにデザインパーツやルールを組んで設計しがちなので、今後の開発で参考にしていきたいと思えるデザインでした。
