こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ゼンレスゾーンゼロ」（以下「ゼンゼロ」）のPC版とiOS版の画面を比較したのでご紹介します。比較シリーズ第26弾！
以下、目次です。
プラットフォームによる違い
1：PC版には、ランチャーがある
「ゼンゼロ」のPC版にはランチャーが用意されていました。
複数のタイトルを横断してて気づいたのですが、HoYoverseのタイトルのランチャーって共通のシステムの上にある感じのデザインになっているんですね。
汎用性の高い機能は個別に開発しなくても済んでいる気がします。
そんな「ゼンゼロ」のランチャーでできることは主に以下の８つです。
- ランチャー設定
- お知らせなどの確認
- 公式サイトやSNSなど外部サイトへの導線設置
- その他のメニュー
- ゲーム設定
- 他タイトルのランチャー
- ゲームのダウンロード
- ゲーム開始
ご興味のある方向けに、各項目の詳細を以下の表にまとめました。
| ランチャーの各項目 |
|
|
|
1-1：ランチャーの一般設定
|
 |
|
1-2：ダウンロード
|
 |
|
1-3：通知
|
 |
|
1-4：ツール
|
|
|
|
1-5：詳細
|
 |
|
2：お知らせなどの確認
|
 |
|
3：公式サイトやSNSなど外部サイトへの導線設置 |
|
|
|
4：その他のメニュー
|
 |
|
5-1：リソースの基本情報
|
 |
|
5-2：ログ情報
|
 |
|
6：他タイトルのランチャー
|
2：PC版とiOS版とで、アカウント連携できるサービスに違いがある
PC版とiOS版とで連携できるサービスに違いがありました。
PC版はGoogleアカウントができます。察するにAndroid版でもGoogleアカウントができそうな気もしてるのですが未確認です。
| PC版 | iOS版 |
|
|
 |
|
|
|
|
|
3：iOS版には、リソースプランが用意されている
iOS版には、初回ダウンロード時にどの程度のリソースをダウンロードするかオプションが用意されていました。
「ゼンゼロ」に限らず、アプリのリソースが増加するに伴って需要が増えてきたオプションだと感じています。
▲ダウンロードするリソースを選べるオプション
4：PC版とiOS版とで、タイトル画面のメニューに違いがある
PC版とiOS版とで、タイトル画面のメニュー項目に違いがありました。
PC版には「終了」の項目がありますが、iOS版にはありません。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
▲PC版にはゲームを終了するコマンドが用意されている
5：iOS版には、SNSにシェアする機能がある
iOS版には、SNSにシェアする機能がありました。
いわゆるガチャ結果画面でのシェア機能が分かりやすい例かなと思います。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
 |
 |
 |
| - | - |
|
| - | - |
|
PC版にもSNSにシェアするボタンはありますが、端末に保存するのみで各プラットフォームへのアクセスはしないようになっています。
▲ガチャ画面ではPC版にも「SNSにシェア」ボタンがある
他にもシェアする場面があったので事例を紹介します。
また、これらの場面ではPC版にはシェアボタンはありませんでした。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
| ▼思い出コレクション | ||
 |
 |
 |
| - | - |
|
| ▼スクラッチくじ | ||
 |
 |
 |
| - | - |  |
| - | - |
|
このようにPC版とiOS版とでシェアボタンの有無の場面に違いがあるようです。
6：PC版とiOS版とで、通貨の表示形式が違う
PC版とiOS版とで通貨の表示形式に違いがありました。
PC版は（JP¥）と表記され、iOS版は（￥）と表記されています。
これは中国の通貨記号も（￥）であり、明確に区別するための措置だと推測します。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
 |
|
結構見かけるので以下のページでリスト化しています。
マルチプラットフォーム対応：通貨の表示形式が違うタイトル
明確な理由は分からず推測の域を出ませんが、ストアプラットフォームごとの規約や決済システムの仕様の違いに起因するものと見られます。
操作デバイスによる違い
1：フィールド画面の違い
フィールド画面では様々なUIが表示されているためか、影響を受けるUIも多い気がします。ここでは以下の４つの事例を紹介します。
- フィールド画面
- バトル画面
- ボンプ操作
- フォトモード
1-1：フィールド画面
フィールド画面の各種UIの見た目は以下の通りです。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
| ▼左上メニュー群 | ||
|
|
 |
|
| ▼右上メニュー群 | ||
|
|
|
|
| ▼ミニマップなど | ||
|
|
|
|
| ▼メインコマンド | ||
|
|
|
|
| ▼左下 | ||
|
|
|
|
同ジャンルの他タイトル同様、やはりメインコマンドはバーチャルスティックのUIに違いが見られます。
タイトルによって若干の違いはありますが、iOS版は直感的な操作や押しやすさを強く意識し、PC版は画面の圧迫感を低減するようなデザインが求められている印象を受けました。
後にも触れますが、iOS版では各ボタンのレイアウト調整ができるオプションも用意されていました。このようなオプションがあることで、個々人に合わせた操作のしやすさが調整できるようになっています。
▲iOS版ではボタンのレイアウト調整が可能
1-2：バトル画面
バトル画面のUIを比較した表は以下の通りです。
こちらもフィールド画面同様、画面右下にあるメインコマンド群のUIに違いが見られました。PC版はボタンを画面端に配置し、iOS版は押しやすいように大きさや位置を調整しているデザインです。
また、連携スキル発動時はデバイスに合わせたテキストが表示されています。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
|
| ▼連携スキル発動時 | ||
 |
 |
 |
|
|
|
|
|
中ボタンを押してキャンセル |
Aを押してキャンセル |
画面の空白部分をダブルタップしてキャンセル |
1-3：ボンプ操作時
ボンプ操作時のUIの見た目は以下の表の通りです。
ゲームモードによってメインコマンドに違いはありますが、基本的なレイアウトは同じです。PC版はキャラクターが見やすいレイアウト、iOS版は押しやすさを重視したレイアウトになっています。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
| ▼ホロウ内部 | ||
|
|
|
 |
|
|
|
|
| ▼マルセルの迷宮プレイ時 | ||
 |
 |
 |
|
|
|
|
1-4：フォトモード
フォトモードでも見た目に違いがありました。
以下は各UIパーツごとに比較した表です。
撮影ボタン、撮影時のカメラ設定などのメニューの見た目に違いがありました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
| ▼シャッターボタン | ||
|
|
|
|
| ▼モード切替など | ||
|
|
|
|
| ▼カメラ位置調整 | ||
|
|
|
|
|
- |
- |
|
| ▼その他 | ||
|
|
|
- |
| ▼自撮りモード | ||
 |
 |
 |
|
|
- |
|
|
|
 |
|
| ▼フォトモードのメニュー | ||
 |
 |
 |
 |
|
|
個人的に面白いと感じたのはカメラ向きの調整と、カメラ位置の調整のUIの扱いです。どちらも基本的には方向キーの操作になると思うのですが、どう落とし込むかは意外と難しいかもしれません。
過去にプレイしてきたタイトルだと見落としていた気もするので、改めて気になりました。
▲向き調整のUI
2：フィールド画面以外の違い
フィールド画面以外のUIにもデバイスごとの違いがありました。
ここでは以下の２つの事例を紹介します。
- リングメニュー
- ミニゲーム
- TVアレイ
- アイコンだけのタブ
- 2Dオブジェクトを移動・回転できる場面
- ピンチイン・アウトで拡大・縮小できる画面
2-1：リングメニュー
「ゼンゼロ」ではリングメニューはどの操作デバイスでも使えますが、よく見るとリング中央のグラフィックがデバイスに合わせたデザインになっていました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
|
|
|
|
|
▲リング中央のグラフィックがデバイスに合わせてデザインされている
2-2：ミニゲーム
ゲームセンターなどで遊べるミニゲームはフォーマットに沿ったデザインになっていました。
PC版では左右対称の余白は同程度のデザインで、iOS版では方向キーのある左側が広く取られた左右非対称のデザインになっています。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
| ▼データ再接続 | ||
|
|
|
 |
|
|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
▲ミニゲームは一定のフォーマットに沿ったデザイン
2-3：TVアレイ
TVアレイでのUIの見た目の違いは以下の通りです。
大きくは変わらないのですが、iOS版ではバーチャルスティックを利用して操作する方式と、画面をタップして操作する方式の２つが用意されているのが特徴的です。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
| - | - |
|
|
|
||
|
|
 |
 |
|
|
|
|
|
Dまたは「TVモニター」を押して移動 |
Lスティックを右方向に入力、または右を押して移動 |
「TVモニター」を押して移動 |
ちなみに、iOS版のみTVアレイモード開始時に操作方法の設定画面が表示されていました。これに限らず、デバイスごとに操作方法が違う場合、個別に操作を案内するデザインは見かけることがあります。
▲TVアレイモード開始直後に操作方式が選べる
具体的には「インフィニティニキ」での事例です。
初めて自転車に乗るときなど、操作方法を設定できるように案内されます。
複数の操作が用意されている場合、操作を始める前にデフォルトの操作をユーザーに確認、決定させる流れになっている点は共通していると感じました。
| 自転車の操作設定 | 筏の操作設定 |
 |
 |
▲「インフィニティニキ」での事例（© 2024 Infoldgames, ALL RIGHTS RESERVED.）
2-4：アイコンだけのタブ
「ゼンゼロ」にはタブボタンが採用されている画面がいくつもあります。基本的にはPC版とiOS版とでレイアウトの違いはないのですが。アイコンのみのタブの場合、例外的にレイアウトに違いがありました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
 |
 |
 |
|
|
|
|
▲「ゼンゼロ」全体で見ると特殊な事例
少し補足します。
見る限り、「ゼンゼロ」ではタブのデザインは主に以下の３つのバリエーションがありました。
- シンプル枠、汎用性高い
- グラフィック寄り、汎用性低い
- アイコンだけ
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
| ▼シンプル枠、汎用性高い | ||
|
|
 |
 |
|
|
 |
 |
 |
 |
 |
|
|
 |
 |
| ▼グラフィック寄り、汎用性低い | ||
|
|
 |
 |
|
|
 |
 |
| ▼アイコンだけ | ||
|
|
 |
 |
このような感じです。
このように、アイコンだけのタブでも横に並べる時と縦に並べる時が混在しており、タブの見た目だけでは一概にレイアウトの違いについて述べられない状況です。
したがって、どのようなルールになっているか、外から窺い知ることは困難であるため、例外的な対応として取り上げてみました
2-5：2Dオブジェクトを移動・回転できる場面
2Dオブジェクトを移動・回転できる場面において、操作デバイスによってUIも変わっていました。パズル系のミニゲームのUIでもしばしば見かける気がします。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
 |
 |
 |
|
|
|
|
このように、マウス操作とタッチ操作はオブジェクトを直接触るイメージのUI、
コントローラー操作は間接的に編集操作を行うイメージのUI、という感じです。
また、周辺のUIでもアイコンの表示の有無など、僅かながら違いが見られました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
 |
|
|
2-6：ピンチイン・アウトで拡大・縮小できる画面
iOS版において、ピンチイン・アウトで拡大・縮小できる画面でもUIに違いが見られました。特に注目したいのはiOS版にある「指でピンチイン・ピンチアウトできます」という案内です。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
|
| - | - |
|
| - | - |
指でピンチイン・ピンチアウトできます |
ピンチイン・ピンチアウトはPC版にはない操作であり、スクロールバーでしか拡縮できないと考えるユーザーも一定数いると予想できること、この画面自体が拡縮できるマップに見えにくいこと、などを懸念したのかな、と推測します。
2-7：その他個別対応
その他、ボタン単位で調整が入り、レイアウトに違いがある箇所が散見されました。
正直現段階ではルールが分かってないのですが、事例として記載します。
対応パターンとしては概ね以下の４パターンに分けられそうです。
- パターンA（ボタンの置き換え）
- パターンB（ボタンの追加）
- パターンC（ボタンあり/テキスト表示）
- パターンD（ボタンなし/テキスト表示）
それぞれ紹介します。
・パターンA（ボタンの置き換え）
「ゼンゼロ」でよく見るのはボタンアイコンを置き換える対応です。
基本的には画像の置き換えで済むため、レイアウトの調整は起きません。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
|
|
|
|
|
|
・パターンB（ボタンの追加）
また、キーボード操作時、iOS版にはアイコンは設置せず、コントローラー操作時にボタンアイコンを追加するパターンもしばしば見かけます。
軽微な調整は発生する可能性はありますが準備していれば回避可能です。
こちらもレイアウト単位での調整不要かと思います。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
 |
 |
・パターンC（ボタンあり / テキスト表示）
キーボード操作時にはボタンが設置され、コントローラー操作時にはテキスト表示になるパターンもありました。
作り方によってコストは変わりそうですが、基本的にはレイアウトに調整が入ります。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
|
|
|
|
|
|
・パターンD（ボタンなし / テキスト表示）
キーボード操作時にはボタンなどがなく、コントローラー操作時にはテキスト表示になるパターンもあります。これもレイアウトに影響があるかもしれません。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
 |
 |
 |
|
|
|
|
…という感じで、いくつかのパターンに分けられるのですが、規則性がよく分からないので「なぜパターンAではなく、パターンBを使っているんだろう…？」と感じることもしばしばあります。
例えば、以下の場面ではコントローラー操作時でもキーボード操作時同様の枠で囲われた画像を利用すればレイアウト調整をせずに済むはず…と考えているのですが、この辺りの判断がよく分からず規則性もよく分からない…となっています。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
|
|
|
|
|
|
▲デザインが分けられている
3：デバイスに合わせたテキストが表示されている
「ゼンゼロ」ではチュートリアルメッセージを中心に、デバイスに合わせたテキストが表示されていました。
見る限り、移動に関する操作ではデバイスに合わせたテキストに置き換えられる確度が高い印象を受けました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
|
|
WSADで目標エリアまで移動しましょう |
スティックで目標エリアまで移動しましょう |
スティックで目標エリアまで移動しましょう |
|
|
 |
 |
|
|
|
|
|
（W/S/A/D）を押して移動。 |
（Lスティック）を入力して移動。
|
（バーチャルスティック）を入力して移動。 画面をスワイプして視点を変更。 （攻撃アイコン）を押して『通常攻撃』。 （移動アイコン）を押して『回避』と「ダッシュ』。 |
|
|
 |
 |
|
|
|
|
|
H.D.Dシステムには倍速再生機能があり、テキスト表示、ボイスおよびTVモニターの映像を加速させることが可能。 |
H.D.Dシステムには倍速再生機能があり、テキスト表示、ボイスおよびTVモニターの映像を加速させることが可能。 |
H.D.Dシステムには倍速再生機能があり、テキスト表示、ボイスおよびTVモニターの映像を加速させることが可能。 画面を長押しすると、映像を倍速で再生できる。 |
|
|
 |
 |
|
|
|
|
|
現在いるイベントマスを（左クリック）、または（ F ）を押すと、イベントが再度発生します |
（ A ）を押すと、イベントが再度発生します | 現在いるイベントマスをタップすると、イベントが再度発生します |
4：PC版とiOS版とで、オプション項目に違いがある
PC版とiOS版とでオプション項目に違いがありました。
各項目ごとに見てみます。
4-1：画面
最も違いが多かったのがこのカテゴリです。
パフォーマンスの最適化を推進したり、グラフィックのリッチさを求める場合、特に影響が大きいのかもしれません。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
|
|
|
グラフィック
|
グラフィック
|
グラフィック
|
|
カスタム
|
カスタム
|
カスタム
|
|
|
|
|
|
|
4-2：操作
操作のカテゴリにも違いが多く見られました。
操作性の良し悪しに大きく影響を及ぼす項目が多く、調整の需要も多いのかもしれません。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
 |
 |
|
|
操作
|
操作
|
操作
|
|
|
|
| ▼ボタン配置設定 | ||
| - | - |
|
| ▼リングメニュー設定 | ||
 |
 |
|
4-3：キーボード/コントローラー
主にキーボードとコントローラーのキーコンフィグです。
アサインされているコマンドが多く、項目も長くなりました。
また、iOS版にはこのカテゴリはありませんでした。
| PC版（キーボード＆マウス） | PC版（コントローラー） |
|
|
|
|
汎用
|
汎用
|
|
戦闘
|
戦闘
|
|
ボンプ
|
ボンプ
|
|
メインシティ
|
メインシティ
|
|
- |
|
- |
メインシティ-同時押しボタン
|
|
探査
|
- |
|
TVアレイ
|
TVアレイ
|
|
|
4-4：サウンドと振動
サウンドと振動（触覚）のカテゴリです。
サウンドの違いに関してはバックグラウンドでミュートにするかどうかの設定ですね。
振動に関してはiOS版とコントローラー操作時のみ調整できる項目です。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
 |
 |
|
|
音声
|
音声
|
音声
|
| - |
触覚フィードバック設定
|
触覚フィードバック設定
|
| - | - |
|
4-5：言語
言語のカテゴリです。
多くのゲームの場合、このカテゴリは字幕の言語やゲームボイスの言語の設定があるだけですが、「ゼンゼロ」ではキーボード配列の設定ができることが珍しいと感じました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
言語
|
言語
|
言語
|
中を見てみると「汎用」「フランス語」「ドイツ語」の３つから選べるようになっています。あまり気にしたことなかったですが、多言語対応する際には注意が必要かもしれません。
4-6：アカウント
アカウントに関するカテゴリです。
iOS版ではプッシュ通知の設定が行えます。それ以外の項目には違いはありませんでした。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
 |
 |
 |
|
アカウント
|
アカウント
|
アカウント
|
| - | - |
プッシュ通知(デバイス設定で通知を許可した場合のみ有効)
|
4-7：その他
その他のカテゴリです。
既存のカテゴリに当てはめられなかった項目が並んでいるように見えます。
多くの項目は共通ですが、戦闘中の操作に関する項目のみ、PC版とiOS版とで違いがありました。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
|
|
|
その他の設定
|
その他の設定
|
その他の設定
|
|
|
|
その他資料
以下は主要な画面を比較した表です。
大きな違いはないかと思いますが、全体の傾向を把握する際の参考までに。
| PC版（キーボード＆マウス） | PC版（コントローラー） | iOS版 |
|
|
 |
 |
|
|
|
|
|
 |
 |
|
|
 |
 |
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
 |
|
|
|
|
 |
|
|
|
 |
|
|
 |
|
|
|
 |
 |
|
|
|
 |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
 |
|
|
|
 |
|
|
|
 |
|
|
|
 |
|
|
|
 |
|
|
 |
 |
|
|
 |
 |
|
|
 |
 |
|
ドラッグ操作で切り替え |
 |
 |
以上がPC版とiOS版のUIの違いを比較したものです。
マルチプラットフォームのUIをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIについて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ゼンレスゾーンゼロ」のガイドラインを確認したところ、以下の記載がありました。
3 二次創作活動の許可範囲
(1) イラスト、マンガ、小説などの同人誌の制作、展示、頒布、公開
(2) キャラクターのコスプレ衣装の制作、展示、頒布、公開
(3) キャラクターのコスプレ写真・動画の制作、展示、頒布、公開
(4) 当社コンテンツのグッズ、モチーフ料理等の制作、展示、公開
(5) ゲーム実況配信及び動画投稿（これに関しては、以下の禁止事項に抵触しない限り、営利目的・非営利目的を問わず、自由に行っていただいて構いません。）前項のいずれかの活動を行う際は二次創作であることを創作物と共に明記してください。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
