こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ペルソナ５: The Phantom X」（以下「ペルソナ5X」）のSteam版とiOS版の画面を比較したのでご紹介します。最近ずっとこれやってますね。マイブーム！
以下、目次です。
- プラットフォーム対応
- デバイス対応
プラットフォーム対応
以下は主にプラットフォームの違いによって生まれる対応の違いです。
- Steam版にはランチャーがある
- タイトル起動直後の注意喚起画面にて、iOS版にはタップを促すメッセージが付け加えられている
- Steam版はタイトル画面にゲーム終了ボタンがある
- プラットフォームによって連携できるアカウントが違う
- iOS版には、プッシュ通知の設定がある
- メニューに違いがある
1：Steam版にはランチャーがある
Steam版はゲーム起動時にランチャーがポップアップ表示されます。
毎回表示されるのではなく、更新があった時など、必要に応じて表示されます。
また、スクリーンショットからは読み取りににくいのですが、矩形にはなっておらず、背景が透過するデザインになっています。世界観に合わせた心配りが素晴らしいと感じました。
▲ランチャー画面。世界観に合わせたシルエットが素晴らしい
ランチャー内のコマンドはいくつかあります。
概ねどのような役割を持たせているかの参考までに。
2：タイトル起動直後の注意喚起画面にて、iOS版にはタップを促すメッセージが付け加えられている
タイトル起動直後の注意喚起画面にて、iOS版には「タップで進む」のメッセージが付け加えられていました。
| Steam版 | iOS版 |
 |
 |
|
|
前後にも「画面の明滅に気を付けて」という旨のメッセージが表示されるのですが、そちらの画面ではとくに付け加えられていませんでした。何かしらの事情はあると思うのですが、ここでデザインを分ける理由はわかりませんでした…。
余談ですが、「タップ」という表現は恐らくここにしか使われていない表現です。チュートリアルを含めて「押す」が主流のようです。
翻訳の手間や表記の一貫性の観点から、タップを無くし、押すに統一しても良い気はします。
| 「PRESS」の表記 | 「押す」の表記 |
|
|
|
▲ほかにも「PRESS」や「押す」がある
3：Steam版はタイトル画面にゲーム終了ボタンがある
Steam版はタイトル画面に「ゲームを終了する」ボタンがあります。安全にゲームを終了するための手続きとして必要なのだと推測します。
| Steam版 | iOS版 |
|
|
|
|
|
|
ちなみに「ゲームを終了する」コマンドは他のタイトルでもしばしば見かけるコマンドです。
どの程度一般的な対応なのか気になったため、以下のページにリストにしてみました。
今後、適宜更新したいと思います。
ゲーム内に「ゲームを終了する」コマンドがあるタイトル - ゲームアプリのUIデザイン
4：プラットフォームによって連携できるアカウントが違う
プラットフォームによって、アカウント連携できるサービスも変わります。
「ペルソナ5X」の場合、Steam版はSteamアカウント、iOS版はAppleアカウントと連携ができるようになっていました。
| Steam版 | iOS版 |
 |
 |
|
アカウント連携すると、ゲームの進行状況を保存および移行できます。 |
アカウントを紐付けてゲームの進行状況を確保し、移行可能にします |
よく見ると枠内に表示されているメッセージも少し違っていますが内容的には同じなようです。ユーザーに対して不利益は無いと思いますが、個人的には文字の置き換え時や翻訳時などのケアレスミスを避ける意味で統一する方が良いのかな、と思いました。
5：iOS版には、プッシュ通知の設定がある
iOS版にはプッシュ通知の設定があります。
ゲーム内の設定画面からだけではなく、タイトル画面からもオンオフが切り替えられるのはちょっと珍しいかもしれません。
| Steam版 | iOS版 |
 |
 |
 |
 |
| - |  |
| - |
|
▲iOS版にはプッシュ通知の設定がある
プッシュ通知に限りませんが、ゲームが複数のプラットフォームやデバイスに対応する場合、設定項目は影響を受けることが多くあります。そのため、複数のプラットフォームを横断していないと、開発する際に見落としやすそうな箇所でもあると感じました。
6：メニューに違いがある
6-1：Steam版には交換コードのメニューがある
Steam版には交換コードの機能があり、iOS版には交換コードがありません。
| Steam版 | iOS版 |
 |
 |
|
|
交換コード項目なし |
▲交換コード画面
この辺りの事情について、ざっくりと「Appleのガイドラインで決まってて〜…」というような認識だったのですが、せっかくの機会なのでAIにも聞いてみました。
曰く、ガイドラインの3.1.1に抵触する可能性が高いとのことでした。
コンテンツや機能をアンロックするため、ライセンスキー、拡張現実マーカー、QRコード、暗号通貨、暗号通貨ウォレットなど、アプリ独自の方法を用いることはできません。
また、2015年8月29日に「モンスターストライク（モンスト）」がApp Storeから削除されニュースにもなっていました。
- モンスターストライク、App Storeから消える。原因はシリアルコードか（篠原修司） - エキスパート - Yahoo!ニュース
- ※重要※ 【iOS】「シリアルコード」のご利用停止について | モンスターストライク(モンスト)公式サイト
2025年11月時点ではiOSのガイドラインも2015年から変わっており、以前とは環境や事情も異なるかもしれません。
しかし、「ペルソナ5X」の場合でも相変わらずリターンに対してリスクが大きすぎると判断し、iOSでは機能の実装を見送った可能性が高いと推測しました。
6-2：iOS版にはダウンロードの項目がある
iOS版にはダウンロードの項目があります。
内容としては、必要なリソースを分割し、ユーザーの任意のタイミングでダウンロードできる仕組みです。
| Steam版 | iOS版 |
|
|
|
ダウンロード項目なし |
|
iOS版でのダウンロード画面の見た目は以下の通りです。
| 必要なリソースタブ | 拡張リソースタブ |
 |
 |
このようなダウンロード機能が、Steam版になく、iOS版にあるのはネットワーク環境が関係していると推測します。
Steam版でプレイする場合は常時ネットワークに接続していると考えられますが、iOS版ではネットワークに接続しているかどうか含め、回線状況は変化します。そのため、リソースのダウンロードするタイミングをユーザーがコントロールできると助かる場面もあるのかなと思います。
ユーザーに判断させるため、ややゲームに慣れている人向けな機能だと思いました。
デバイス対応
以下は主に操作デバイスの違いによって生まれる対応の違いです。
- Steam版のコントローラー操作時にはリングメニューがある
- Steam版にはボタンガイドが表示される
- iOS版にはデジタルパッドのUIが表示される
- 操作デバイスに合わせたチュートリアルが用意されている
- Steam版のコントローラー操作時にはカレント状態がある
1：Steam版のコントローラー操作時にはリングメニューがある
Steam版にはリングメニューがあります。iOS版にはありませんでした。
複数のコマンドに対して一手でアクセスできるため、様々な場面で採用される便利なUIのひとつです。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
2：Steam版にはボタンガイドが表示される
Steam版にはボタンガイドが表示されます。
「ペルソナ5X」の場合は主に以下の２パターンに分類できます。
- 画面下部に表示
- アイコンなどの近くに表示
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
 |
 |
 |
|
|
|
とはいえ、必ずしも表示しているわけではありません。
ボタンガイドが表示されていないコマンドは、どのように入力すれば良いのか直感的に分かりにくいです。この辺りの塩梅は難しいところかもしれません。
3：iOS版にはデジタルパッドのUIがある
iOS版にはデジタルパッドのUIがあります。
キャラクターを移動させようと画面を押下すると、画面左下に表示されるデザインです。表示される位置は固定です。
| iOS版 |
 |
|
|
構造的に指で隠れやすく見えにくいのですが、このUIがあることで移動入力していることが伝わります。
というのも、画面左下付近を操作するとキャラクターの移動ですが、中央や右側を操作するとカメラ移動の操作に切り替わります。
キーボード&マウス操作やコントローラー操作と比較してiOS版はガラス面を触れる操作であるため、触覚的なフィードバックが弱く、キャラクター操作とカメラ操作の境界も曖昧な見た目になっているのだと推測します。
そのため、このように視覚的なフィードバックが重要になるのかもしれません。
4：操作デバイスに合わせたチュートリアルが用意されている
デバイスによってチュートリアルのガイドに違がありました。iOS版にはマップを見渡す際の操作の案内として、指でスワイプするように案内しています。
| iOS版 |
 |
|
|
5：Steam版のコントローラー操作時にはカレント状態がある
Steam版のコントローラー操作時にはカレント状態が用意されています。webの言葉を借りるなら『hover』に相当する状態です。
このカレント状態はUIパーツの見た目に合わせて色々な見た目が用意されていることが多いです。「ペルソナ5X」でも複数の見た目が用意されていました。
以下に代表的な見た目を紹介します。
- 赤帯
- シアン帯
- ボタンの色変更
- 枠で囲う
- 座布団を敷く
- 例外（キーボード＆マウスとコントローラー操作時の両方にある
- 例外（テキストリンク
5-1：赤帯
彩度の高い赤い帯が目立つデザインです。背景が黒でも白でも採用されています。色そのものの特性として、誘目性が高いことも目立つ要因のひとつかもしれません。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
少しトーンの低い茶色に重ねても、トーンが違うためか比較的目立ちます。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
5-1：シアン帯
周囲に赤色が採用されているケースなど、赤い帯が使いにくい場面ではシアンが採用されていました。自然には無い色のせいか独特な配色のせいか、赤同様に目を引く色だと感じます。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
5-3：色変更
帯のように何かを重ねるのではなく、既存のUIパーツの色変更をする場面もありました。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
5-4：枠で囲う
カレント中の項目を枠で囲うデザインも見受けられました。
枠のデザインの場合、項目を囲うサイズを自由に変えられる点が汎用性が高いです。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
5-5：座布団を敷く
項目の下に座布団が表示されるデザインも見かけました。
実装方法にもよりますが、アルファ値の変更や表示非表示を切り替えるような見た目です。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
5-6：例外（キーボード＆マウスとコントローラー操作時の両方にある
「ペルソナ5X」の場合、多くの場面でコントローラー操作時にのみカレント状態がありましたが、一部の画面ではキーボード＆マウス操作時でもカレント状態がありました。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
5-7：例外（テキストリンク）
キーボード＆マウス操作時にテキストリンク部分をカレントするとテキストリンクが青くなります。一方コントローラー操作時はテキスト部分が選択できないため、カレント状態も存在しません。少し特殊な例かもしれません。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
 |
 |
 |
|
|
|
|
|
|
6：Steam版には、キーコンフィグ機能がある
Steam版にはキーコンフィグ機能があります。
キーボード＆マウス操作時とコントローラー操作時で項目に違いがあります。
キーアサインが複雑なのか珍しい例だと考えます。
| Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
キーボード＆マウス操作時のキーコンフィグ画面は以下の５つのタブに分かれています。
- 共通
- 都市
- 潜入
- バトル
- 活動
それぞれ紹介します。
キーボード＆マウス操作時（共通タブ）
複数の場面で有効な操作とキーアサインです。
| Steam版（キーボード＆マウス） |
|
|
|
キーボード＆マウス操作時（都市タブ）
街で有効な操作。アサインされているキーが多いです。
| Steam版（キーボード＆マウス） |
|
|
キーボード＆マウス操作時（潜入）
潜入時のキーアサイン。比較的シンプルな操作です。
| Steam版（キーボード＆マウス） |
|
|
|
キーボード＆マウス操作時（バトル）
バトル時のキーコンフィグ。階層が浅く同時に複数のコマンドを実行できるためか、主要な操作に対して使用するボタンの数が多い印象です。
| Steam版（キーボード＆マウス） |
|
|
|
キーボード＆マウス操作時（活動）
活動は野球や釣りなどの操作。
「ペルソナ5X」に限りませんが、ミニゲーム系は操作がシンプルで、操作体系も独立する傾向があるため、比較的柔軟なキーアサインができる印象があります。
| Steam版（キーボード＆マウス） |
|
|
|
コントローラー操作時
コントローラー操作時のキーコンフィグは以下の通りです。
見て分かる通り、キーボード＆マウス操作時にあった「共通」「都市」「潜入」「バトル」「活動」といったタブがありません。
「全体」と「バトル」といった見出しだけあり、シンプルな画面になっています。
このことから、キーボード＆マウス操作時とコントローラー操作時とで設計思想が異なることが分かります。
具体的にはキーボード＆マウス操作時はショートカットキーの割り当てが豊富で階層を浅くでき、コントローラー操作時は階層を経てコマンドを選択する設計になっていると感じました。このような設計は今までプレイしてきたマルチプラットフォーム対応のゲームにはなかった特徴なので興味深く感じました。
| Steam版（コントローラー） |
|
|
|
以上が操作デバイスによるUIの違いの紹介でした。
マルチプラットフォームのUIをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ペルソナ５: The Phantom X」のガイドラインを確認したところ、以下の記載がありました。
株式会社セガおよび株式会社アトラス（以下、2社を「当社」）は、多くの皆様に気持ちよく「ペルソナ５: The Phantom X」を親しんでお楽しみいただけるよう、静止画または動画、ストリーミング動画（以下「動画等」）の配信に関するガイドラインを制定しました。
動画配信の範囲
個人または法人格のない団体は、非営利の目的に限り「ペルソナ５: The Phantom X」および当社が知的財産権を所有している各種素材（以下「本コンテンツ」）を題材に、動画等の配信をすることができます。
動画等の配信を行うオンラインサービスが提供している機能（例／YouTubeのパートナープログラム等）から副次的な収益が発生しても営利目的の利用とはみなしません。
『ペルソナ５: The Phantom X』 動画等配信に関するガイドライン|P5X
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
