ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

【メインコンテンツ】プレイしたゲーム、参考書籍、用語集などまとめ

こんにちは、ちょこです。このブログでは主にゲームUIの紹介をしています。

ゲーム業界を目指す方、プランナーの方、非デザイナーの方、ゲームUIに興味のある方、その他ゲーム開発者の参考になれば幸いです。

以下、メインコンテンツを紹介いたします。

 

1:紹介させていただいたゲーム

バナー:ゲーム一覧

このブログで紹介したゲームの一覧ページです。
プレイしたことがあるゲームや、UIが気になっていたゲームがあれば幸いです。

紹介させていただいたゲーム

 

 

 

2:参考書籍

参考書籍まとめバナー

ゲームUIデザイナーさんの参考になりそうな書籍の一覧ページです。
自分で購入して読んだ範囲で紹介させていただいています。

参考書籍

 

3:ゲームUIデザイナー向け用語集

読んだ書籍の中で、ゲームUIデザイナーさんに関係のある用語を紹介します。

ゲームUIデザイナー向け用語集

 

4:ゲームUIの画面ナレッジ

画面ごとのナレッジをまとめます。随時編集します。

ゲームUIの画面ナレッジ

 

5:ゲームUIデザイナーにオススメしたい動画

講演や用語解説など、ゲームUIデザイナーさんの学習に参考になりそうなプレイリストです。随時追加、更新いたします。

ゲームUIデザイナーにオススメしたい動画

 

 

6:おすすめのサイト

バナー:おすすめサイト

ゲームUIに関係する記事が多く取り扱われているサイトを紹介します。

おすすめのサイト

 

 

7:ゲームUIデザイナーの参考になりそうな事例の記事

ゲームUIに関係するインタビューや制作事例などの記事を紹介します。 
(採用目的が強い記事は除外)

ゲームUIデザイナーの参考になりそうな事例の記事

 

 

8:タグ一覧

当サイトのタグ一覧ページです。
スマホではタグ一覧が表示されないのでタグ一覧ページを作成しました。

タグ一覧

 

 

9:ゲームUI FAQ

過去に書いた記事が「どのような問題解決になるのか」という視点でまとめたページです。自分自身がデザインをする際に困った時用の備忘録も兼ねています。

ゲームUI FAQ

 

 

10:ゲームUIデザインを検討するメモ

ゲームUIについて感じたことなど。メモ。 

 

11:UE5

UE5の操作について、UIデザイナーが関わりそうな部分のTipsを記載します。

【UE5】初心者向けTips

 

12:ブログ運営

以下はブログ運営に興味のある方向けの記事です。

 

13:その他

「アウタープレーン(アウプレ)」Steam版とiOS版のUIを比較しました(シリーズ第28弾)

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

今回は「アウタープレーン」(以下「アウプレ」)のSteam版とiOS版の画面を比較したのでご紹介します。比較シリーズ第28弾!

ちなみに「アウプレ」はコントローラーをサポートしていないので、Steam版とiOS版とでUIが大きく変わるようなことはありませんでした。

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆
▲「アウプレ」はコントローラーをサポートしていない

以下、目次です。

1:Steam版とiOS版とで、通貨の表示形式が違う

Steam版とiOS版とで通貨の表示形式に違いがありました。
Steam版は(JPY)と表記され、iOS版は(¥)と表記されています。
これは中国の通貨記号も(¥)であり、明確に区別するための措置だと推測します。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261108081859p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

はじめて見たときは変わった対応だと感じたのですが、割と頻出する対応なので、思ったより一般的な対応なのかも…、と考えが変わってきました。

結構見かけるので以下のページでリスト化しています。
マルチプラットフォーム対応:通貨の表示形式が違うタイトル

明確な理由は分からず推測の域を出ませんが、ストアプラットフォームごとの規約や決済システムの仕様の違いに起因するものと見られます。

 

2:Steam版とiOS版とで、オプション項目に違いがある

Steam版とiOS版とでオプション項目に違いがありました。
具体的には「通知」の項目の有無に違いがあります。
各項目ごとに見てみます。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261108081854p:image

グラフィック

  • アンチエイリアス
  • フレーム
  • グラフィック
  • ポストエフェクト
  • モーションブラー
  • 影の品質
  • 残像効果

グラフィック

  • アンチエイリアス
  • フレーム
  • グラフィック
  • ポストエフェクト
  • モーションブラー
  • 影の品質
  • 残像効果
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261108081850p:image

ゲーム

  • 言語
  • ★6レジェンド装備を自動でロックする
  • ロビーUIの自動非表示
  • 画面タップエフェクト
  • 必殺スキル演出
  • ストーリー演出

ゲーム

  • 言語
  • ★6レジェンド装備を自動でロックする
  • ロビーUIの自動非表示
  • 画面タップエフェクト
  • 必殺スキル演出
  • ストーリー演出
- f:id:appgameui:20261108081851p:image
-

通知

  • 全体通知
  • 活力通知
  • アリーナチケット通知
  • 反粒子ジェネレーター通知
  • お知らせ通知
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261108081856p:image

サウンド

  • BGM
  • 効果音
  • ボイス
  • ボイス言語

サウンド

  • BGM
  • 効果音
  • ボイス
  • ボイス言語

「グラフィック」の項目に違いが無かったのは意外でした。
iOS版のスペックに合わせてるのかな…。

 

3:Steam版とiOS版とで、タイトル画面のメニューに違いがある

Steam版とiOS版とで、一部のメニュー項目に違いがありました。
Steam版には「クーポン登録」の項目がありますが、iOS版にはありません。
また、iOS版には「全データダウンロード」の項目がありますが、Steam版にはありません。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

 

その他資料

以下は主要な画面を比較した表です。
UIにおいて大きな違いはないかと思いますが、全体の傾向を把握する際の参考までに。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108081853p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108081852p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108081902p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101303p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101304p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101313p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101314p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101300p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101302p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108103208p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101310p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101312p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261108101301p:image

 

以上がSteam版とiOS版のUIの違いを比較したものです。
マルチプラットフォームのUIをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIについて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。

 

※本コンテンツは非公式のファン制作物であり、関連するIPの権利は株式会社メジャーナインに帰属します。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「アウタープレーン」のガイドラインを確認したところ、以下の記載がありました。

第2条 UGC利用の範囲

本ポリシーを遵守する限り、ほとんどのUGC制作が可能です。例としては以下の通りです。

1. YouTube、Twitch等のプラットフォームでのプレイ動画制作および配信
2. コスプレ写真・動画、ファンメイドグッズ、ファンアートの制作およびコミュニティ/SNSへの投稿
3. ゲーム内スクリーンショットの撮影および共有

◆◆◆◆◆◆◆◆◆

アウタープレーンUGCポリシー — Outerplaneヘルプセンター

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

 

「アルケミアストーリー(アルスト)」Steam版とiOS版のUIを比較しました(シリーズ第27弾)

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

今回は「アルケミアストーリー」(以下「アルスト」)のSteam版とiOS版の画面を比較したのでご紹介します。比較シリーズ第27弾!

以下、目次です。

1:Steam版とiOS版とで、タイトル画面のメニューに違いがある

Steam版とiOS版とで、タイトル画面のメニュー項目に違いがありました。
iOS版には「オススメゲーム」の項目がありますが、Steam版にはありません。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261030003015p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

こういった導線は少し前のコンシューマ系のアプリでしばしば見かけた気がします。
ガラケーの頃でも自社の他タイトルに流す導線もあったので、オンライン系のゲームだと一般的な導線なのかもしれません。

 

2:デバイスに合わせたテキストが表示されている

「アルスト」のタイトル画面では、デバイスに合わせたテキストが表示されていました。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261030003015p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

クリックして進む Touch to start

他の画面では見かけなかったので、かなり限られた範囲の事例かもしれません。

 

3:プラットフォームに沿ったヘルプ内容になっている

ヘルプ画面を見ると、デバイスに合わせたヘルプ内容になっていました。
具体的には、操作方法に関する説明画像やテキストがデバイスに沿った内容になっています。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

 



f:id:appgameui:20261101200735p:image

f:id:appgameui:20261101200737p:image

f:id:appgameui:20261101200736p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101200738p:image

攻撃ターゲットは自動で指定されますが、敵を選択することで変更が可能です。

攻撃ターゲットは自動で指定されますが、敵をタップすることで変更が可能です。

操作方法以外にも対応している箇所はあるかもしれませんが、詳細な点については未確認です。ここでは対応箇所の物量や細かな内容ではなく、有無のみに絞って紹介します。

 

4:フィールド画面の違い

フィールド画面での各種UIの見た目の違いは以下の2点です。

  1. ショップやキャンペーンのアイコンの有無
  2. 右上の通信状況の情報

右上の通信状況の情報の違いに関しては、Steam版はPing値、iOS版はバッテリー残量が表示されています。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101165807p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

5:Steam版ではキーガイドが表示される

Steam版ではキーガイドが表示されていました。
見た限りでは、主にバトル中のスキルコマンドなどに割り当てられているキーが表示されています。

Steam版 iOS版
▼ターゲット未選択時  
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101154614p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼ターゲット選択済み  
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101155113p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

その他、一部の画面のUIにもキーガイドが表示されていました。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101171208p:image

◆◆◆◆◆◆◆◆◆

-

 

 

6:Steam版とiOS版とで、通貨の表示形式が違う

Steam版とiOS版とで通貨の表示形式に違いがありました。
Steam版は(JPY)と表記され、iOS版は(¥)と表記されています。
これは中国の通貨記号も(¥)であり、明確に区別するための措置だと推測します。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101163555p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

7:Steam版とiOS版とで販売されている商品に違いがある

Steam版とiOS版とで販売されている商品に違いがありました。
どちらにも月額コースがありますが、iOS版は自動更新があり、Steam版は自動更新がなく30日間効果が続くようになっています。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101164417p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆



◆◆◆◆◆◆◆◆◆

 

また、注意事項にもiOS版ならではのテキストが用意されています。
UIデザイナーにはあまり関係ない部分かもしれませんが、影響範囲の例として把握しておいても良いかもしれません。

Steam版 iOS版
- f:id:appgameui:20261104002137p:image

-

f:id:appgameui:20261104002138p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261104002136p:image

※購入後、コース効果が即時反映されない場合がございます。その場合は『アプリケーションの再起動』などをお試しください。

※購入後、コース効果が即時反映されない場合がございます。その場合は『アプ
リケーションの再起動』、『端末の再起動』などをお試しください。

 

8:Steam版とiOS版とで、システムの項目に違いがある

Steam版とiOS版とでシステムの項目に違いがありました。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261030122357p:image

f:id:appgameui:20261030122356p:image

f:id:appgameui:20261030122355p:image

  1. ヘルプ
  2. お知らせ
  3. キャンペーン
  4. 撮影
  5. エモーションの設定
  6. スタンプの設定
  7. キーコンフィグ
  1. ヘルプ
  2. お知らせ
  3. -
  4. 撮影
  5. エモーションの設定
  6. スタンプの設定
  7. -
  1. 設定ウィザード
  2. カメラ設定
  3. 描画詳細設定
  4. 音量設定
  5. ログ設定
  6. その他設定
  7. -
  8. モード切替
  9. -
  10. お問い合わせ
  1. 設定ウィザード
  2. カメラ設定
  3. 描画詳細設定
  4. 音量設定
  5. ログ設定
  6. その他設定
  7. ゲーム実況・生配信
  8. モード切替
  9. FAQ
  10. お問い合わせ
  1. -
  2. -
  3. アンケート
  4. 利用規約
  5. プライバシーポリシー
  6. タイトルへ
  7. ゲームを終了する
  1. VR
  2. ユーザー辞書登録
  3. アンケート
  4. 利用規約
  5. プライバシーポリシー
  6. タイトルへ
  7. -

主な違いは7つの項目です。
気になった4つの項目をかんたんに紹介します。

  1. キャンペーン
  2. ゲーム実況・生配信
  3. VR切替
  4. ユーザー辞書登録

キャンペーン

キャンペーン(Steam版のみ)
◆◆◆◆◆◆◆◆◆
キャンペーンの項目は今実施しているイベントです。
自分の環境だと経験値2倍などのキャンペーンが実施されている旨が表示されていました。

 

ゲーム実況・生配信

ゲーム実況・生配信(iOS版のみ)
f:id:appgameui:20261101223842p:image
外部サービスである「Mirrativ(ミラティブ)」を起動し、ゲーム配信や視聴をおこないます。

 

VR切替

VR切替
f:id:appgameui:20261101223844p:image

 

VR切替はVRモードでのプレイに関する設定です。
「2DVR」「3DVR」「アナグリフ」の3つの設定があります。
各設定をした際の見た目は以下の通りです。

2DVR 3DVR アナグリフ
f:id:appgameui:20261104003926p:image f:id:appgameui:20261104003927p:image f:id:appgameui:20261104003928p:image
※カメラにジャイロが効いてました  

◆◆◆◆◆◆◆◆◆

※赤青モードの見た目

 

ユーザー辞書登録

ユーザー辞書登録(iOS版)
f:id:appgameui:20261101223847p:image
「ユーザー辞書登録」は任意の文字列と読み方を登録し、速やかに文字入力を行うための機能です。PCだとデフォルトで備わっている機能ですが、iOS版だとデフォルトではないかもしれませんし、ゲームごとに設定できた方が融通が利きそうです。

 

9:Steam版にはキーコンフィグがある

Steam版にはキーコンフィグ機能が用意されていました。
おおまかに以下の3か所で使うキーの割り当てを変更できます。

  • フィールド操作
  • メニュー
  • 戦闘操作

以下、具体的な箇所を紹介します。

キーコンフィグ

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

フィールド操作

  • 前に移動
  • 後ろに移動
  • 左に移動
  • 右に移動
  • オートラン
  • 歩く
  • カメラ上移動
  • カメラ下移動
  • カメラ左移動
  • カメラ右移動
  • 拾う/会話
  • 撮影
  • チャットの入力開始

メニュー

  • メインメニューを開く
  • キャラ画面を開く
  • スキル画面を開く
  • アイテム画面を開く
  • ショップ画面を開く
  • 交流画面を開く
  • システム画面を開く
  • ナビ画面を開く
  • YOMEにプレゼント画面を開く
  • 装備強化画面を開く
  • プレゼントボックス画面を開く
  • マウント

戦闘操作

  • スキル1
  • スキル2
  • スキル3
  • 逃げる/オート
  • ターゲット切替
  • ターゲット切替・逆順

 

10:オプション項目に違いがある

Steam版とiOS版とでオプション項目に違いがありました。
各項目ごとに見てみます。

10-1:設定ウィザード

設定ウィザードはゲームの操作やカメラなど、基本的な操作感に関わる設定が行えるオプションです。iOS版では、画面の向きと向きに合わせた操作の調整ができます。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223741p:image

-

f:id:appgameui:20261101223737p:image

-

f:id:appgameui:20261101223740p:image

-

f:id:appgameui:20261101223738p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223739p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223744p:image

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223745p:image
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101223747p:image
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261101223746p:image
◆◆◆◆◆◆◆◆◆ -
- f:id:appgameui:20261101223748p:image
- f:id:appgameui:20261101223752p:image
- f:id:appgameui:20261101223754p:image
- f:id:appgameui:20261101223756p:image
  1. グラフィック設定
  2. -
  3. -
  4. -
  5. カメラ追跡
  6. 距離
  7. 上下回転
  8. 左右回転
  9. 回転速度
  10. 戦闘カメラタイプ
  11. -
  12. -
  1. グラフィック設定
  2. 画面の向き
  3. カメラ操作
  4. カメラタイプ
  5. カメラ追跡
  6. 距離
  7. 上下回転
  8. 左右回転
  9. 回転速度
  10. 戦闘カメラタイプ
  11. 操作範囲切り替え(横)
  12. 操作範囲切り替え(縦)

 

10-2:カメラ設定

Steam版とiOS版とでカメラ設定に違いがありました。
iOS版ではスワイプやダブルタップ時に、カメラがどのような挙動をするかなど、デバイスならではの操作と対応する挙動を設定できます。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223757p:image

f:id:appgameui:20261101223758p:image

f:id:appgameui:20261101223800p:image

f:id:appgameui:20261101223803p:image

f:id:appgameui:20261101223804p:image

カメラ設定

  • -
  • -
  • 距離
  • 上下回転
  • 左右回転
  • カメラ追跡
  • カメラ追跡速度
  • カメラ追跡開始角度
  • 回転速度
  • -
  • -
  • -
  • -
  • 戦闘カメラタイプ
  • 戦闘時のカメラの振動

カメラ設定

  • カメラタイプ
  • カメラ操作
  • 距離
  • 上下回転
  • 左右回転
  • カメラ追跡
  • カメラ追跡速度
  • カメラ追跡開始角度
  • 回転速度
  • カメラ範囲
  • 範囲反転
  • 操作範囲切替(横)
  • 操作範囲切替(縦)
  • 戦闘カメラタイプ
  • 戦闘時のカメラの振動

 

10-3:描画詳細設定

描画に関しては、ほとんどのオプション項目は同じですが、一部に違いがありました。
表の下に違いをまとめました。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223808p:image

f:id:appgameui:20261101223807p:image

f:id:appgameui:20261101223809p:image

f:id:appgameui:20261101223813p:image

f:id:appgameui:20261101223814p:image

f:id:appgameui:20261101223815p:image

f:id:appgameui:20261101223816p:image

f:id:appgameui:20261101223818p:image

f:id:appgameui:20261101223819p:image

f:id:appgameui:20261101223822p:image

f:id:appgameui:20261101223823p:image

  1. ウィンドウモード
  2. -
  3. 画面の解像度
  4. UIの大きさ
  5. 影表示
  6. ブルーム
  1. -
  2. 画面の向き
  3. 画面の解像度
  4. -
  5. 影表示
  6. ブルーム
  1. エフェクト表示
  2. 戦闘中のエフェクト表示
  3. 戦闘中の仲間のエフェクト表示
  4. 戦闘中の敵のエフェクト表示
  5. エモーションのエフェクト表示
  6. マップ表示
  1. エフェクト表示
  2. 戦闘中のエフェクト表示
  3. 戦闘中の仲間のエフェクト表示
  4. 戦闘中の敵のエフェクト表示
  5. エモーションのエフェクト表示
  6. マップ表示
  1. イベント中の被写界深度
  2. アンチエイリアス
  3. ミニマップ表示
  4. ミニマップサイズ
  5. プレイヤーの座標
  6. 描画制限
  7. -
  1. イベント中の被写界深度
  2. アンチエイリアス
  3. ミニマップ表示
  4. ミニマップサイズ
  5. プレイヤーの座標
  6. 描画制限
  7. タッチエフェクト
  1. キャラクタ表示数
  2. 敵表示数
  3. NPC表示数
  4. 移動エフェクト
  5. 表示する名前
  6. 称号の表示
  1. キャラクタ表示数
  2. 敵表示数
  3. NPC表示数
  4. 移動エフェクト
  5. 表示する名前
  6. 称号の表示
  1. 頭装備の表示
  2. 武器装備の表示
  3. 武器のギミック
  4. アクセサリのギミック
  5. 頭のギミック
  1. 頭装備の表示
  2. 武器装備の表示
  3. 武器のギミック
  4. アクセサリのギミック
  5. 頭のギミック
  1. -
  2. YOMEの吹き出しの表示
  3. 戦闘中のターゲット変更の位置
  4. 言語切り替え
  1. ショップアイコンの表示
  2. YOMEの吹き出しの表示
  3. 戦闘中のターゲット変更の位置
  4. 言語切り替え

 

珍しいオプションは「画面の向き」でしょうか。
縦横対応ならではのオプションだと感じました。

f:id:appgameui:20261102101426p:image

 

「画面の解像度」は見出しは同じでも中身が違うタイプです。
Steam版は縦横の画面サイズ、iOS版はいわゆる画質設定に近いオプションです。

Steam版 iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261102101427p:image

 

10-4:音量設定

音量設定のオプションには違いはありませんでした。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223825p:image

f:id:appgameui:20261101223829p:image

  • BGMの音量
  • 効果音の音量
  • ボイスの音量
  • 環境音の音量
  • ボイスのダウンロード
  • BGMの音量
  • 効果音の音量
  • ボイスの音量
  • 環境音の音量
  • ボイスのダウンロード

 

10-5:ログ設定

当然ながらログ設定のオプションにも違いはありませんでした。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223830p:image

f:id:appgameui:20261101223831p:image

f:id:appgameui:20261101223832p:image

f:id:appgameui:20261101223833p:image

f:id:appgameui:20261101223835p:image

f:id:appgameui:20261101223839p:image

f:id:appgameui:20261101223838p:image

f:id:appgameui:20261101224849p:image

  • チャット関連
  • ボンド関連
  • パーティ関連
  • システム関連
  • クエスト
  • デイリー/ウィーク
  • 戦闘
  • いいね
  • ジョブチェンジ
  • レベルアップ
  • アイテム
  • 通貨
  • 撮影
  • 自分がダメージを受けた
  • 自分が回復を受けた
  • 自分がバフを受けた
  • 自分がデバフを受けた
  • 仲間がダメージを受けた
  • 仲間が回復を受けた
  • 仲間がバフを受けた
  • 仲間がデバフを受けた
  • 敵がダメージを受けた
  • 敵が回復を受けた
  • 敵がバフを受けた
  • 敵がデバフを受けた
  • チャット関連
  • ボンド関連
  • パーティ関連
  • システム関連
  • クエスト
  • デイリー/ウィーク
  • 戦闘
  • いいね
  • ジョブチェンジ
  • レベルアップ
  • アイテム
  • 通貨
  • 撮影
  • 自分がダメージを受けた
  • 自分が回復を受けた
  • 自分がバフを受けた
  • 自分がデバフを受けた
  • 仲間がダメージを受けた
  • 仲間が回復を受けた
  • 仲間がバフを受けた
  • 仲間がデバフを受けた
  • 敵がダメージを受けた
  • 敵が回復を受けた
  • 敵がバフを受けた
  • 敵がデバフを受けた

 

10-6:その他設定

その他設定の中にあるオプションは操作性やUIに関する内容がまとめられていました。
いくつかのオプションはiOS版のみ用意されていました。

Steam版 iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261101223841p:image

f:id:appgameui:20261101223840p:image

  • -
  • チャットログの透明度
  • 移動パッドの遊び
  • NPCPC ON/OFF
  • -
  • 助っ人機能ON/OFF
  • 決闘機能ON/OFF
  • ソフトウェアキーボード
  • チャットログの透明度
  • 移動パッドの遊び
  • NPCPC ON/OFF
  • オートラン設定
  • 助っ人機能ON/OFF
  • 決闘機能ON/OFF

 

11:iOS版は縦画面でも遊べる

「アルスト」は縦横画面に対応している珍しいタイトルです。
UIは一定のルールの中でレイアウトされ、演出などは個別に対応しています。
特にキャラクターが登場する場合、シーンに合わせてカメラを調整しているように見えます。

以下に主なシーンの事例を紹介します。

縦画面 横画面
▼タイトル画面  
f:id:appgameui:20261030003017p:image f:id:appgameui:20261030003015p:image
▼ログインボーナス画面  
f:id:appgameui:20261030001311p:image f:id:appgameui:20261030001329p:image
▼フィールド画面  
f:id:appgameui:20261030001345p:image f:id:appgameui:20261030001401p:image
▼撮影モード  
f:id:appgameui:20261030122812p:image f:id:appgameui:20261030122810p:image
▼バトル画面  
f:id:appgameui:20261101152430p:image f:id:appgameui:20261101152429p:image
f:id:appgameui:20261101155116p:image f:id:appgameui:20261101155113p:image
▼会話シーン  
f:id:appgameui:20261030002257p:image f:id:appgameui:20261030123201p:image
▼ガチャ演出  
f:id:appgameui:20261101223302p:image f:id:appgameui:20261103234722p:image
f:id:appgameui:20261101223301p:image f:id:appgameui:20261103234724p:image
f:id:appgameui:20261101223303p:image f:id:appgameui:20261103234723p:image
▼マップ  
f:id:appgameui:20261030002251p:image f:id:appgameui:20261030002248p:image
▼キャラステータス  
f:id:appgameui:20261030001416p:image f:id:appgameui:20261030002157p:image
▼装備  
f:id:appgameui:20261030002246p:image f:id:appgameui:20261030002247p:image
▼マウント  
f:id:appgameui:20261030002245p:image f:id:appgameui:20261030002249p:image
▼ガチャ画面  
f:id:appgameui:20261030002252p:image f:id:appgameui:20261030002253p:image
▼賢者石購入  
f:id:appgameui:20261101163556p:image f:id:appgameui:20261101163555p:image

 

 

以上がSteam版とiOS版のUIの違いを比較したものです。
マルチプラットフォームのUIをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIについて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「アルケミアストーリー」のガイドラインを確認したところ、以下の記載がありました。

二次利用・二次創作可能な内容

(1)イラスト、同人誌、マンガ、小説などの作成、展示、配布
(2)フィギュアなど、立体物の作成、配布
(3)コスプレ衣装(全年齢対象)の作成、配布
(4)キャラクターのコスプレ(全年齢対象)、コスプレ写真や動画の公開、配布
(5)通常プレイで撮影された動画や静止画を用いた内容紹介

◆◆◆◆◆◆◆◆◆

二次利用|アソビモ株式会社

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「ゼンレスゾーンゼロ(ゼンゼロ)」PC版とiOS版のUIを比較しました(シリーズ第26弾)

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

今回は「ゼンレスゾーンゼロ」(以下「ゼンゼロ」)のPC版とiOS版の画面を比較したのでご紹介します。比較シリーズ第26弾!

以下、目次です。

 

プラットフォームによる違い

1:PC版には、ランチャーがある

「ゼンゼロ」のPC版にはランチャーが用意されていました。

◆◆◆◆◆◆◆◆◆

複数のタイトルを横断してて気づいたのですが、HoYoverseのタイトルのランチャーって共通のシステムの上にある感じのデザインになっているんですね。
汎用性の高い機能は個別に開発しなくても済んでいる気がします。

そんな「ゼンゼロ」のランチャーでできることは主に以下の8つです。

  1. ランチャー設定
  2. お知らせなどの確認
  3. 公式サイトやSNSなど外部サイトへの導線設置
  4. その他のメニュー
  5. ゲーム設定
  6. 他タイトルのランチャー
  7. ゲームのダウンロード
  8. ゲーム開始

ご興味のある方向けに、各項目の詳細を以下の表にまとめました。

ランチャーの各項目

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

1-1:ランチャーの一般設定

  • クライアント言語
  • スタートアップ設定
  • 終了設定
  • ランチャー更新
◆◆◆◆◆◆◆◆◆

1-2:ダウンロード

  • ダウンロード速度
  • ゲームアップデート
◆◆◆◆◆◆◆◆◆

1-3:通知

  • 通知
◆◆◆◆◆◆◆◆◆

1-4:ツール

  • トラブルシューティング

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

1-5:詳細

  • バージョンチェック
  • クライアントログ
  • 法律情報
◆◆◆◆◆◆◆◆◆

2:お知らせなどの確認

  • お知らせ
  • ニュース
◆◆◆◆◆◆◆◆◆

3:公式サイトやSNSなど外部サイトへの導線設置

  1. HoYoLAB
  2. reddit
  3. X
  4. YouTube
  5. Instagram
  6. TikTok
  7. Discord
  8. LINE
  9. カスタマーサポート

◆◆◆◆◆◆◆◆◆

4:その他のメニュー

  • ゲーム設定
  • デスクトップ画面にショートカットを作成
  • アップデートチェック
  • 一括修復
◆◆◆◆◆◆◆◆◆

5-1:リソースの基本情報

  • ゲームディレクトリ
◆◆◆◆◆◆◆◆◆

5-2:ログ情報

  • ログ情報
◆◆◆◆◆◆◆◆◆

 6:他タイトルのランチャー

  • プチプラネット
  • 崩壊:ネクサスアニマ
  • 崩壊:スターレイル
  • 原神
  • 崩壊3rd

 

2:PC版とiOS版とで、アカウント連携できるサービスに違いがある

PC版とiOS版とで連携できるサービスに違いがありました。
PC版はGoogleアカウントができます。察するにAndroid版でもGoogleアカウントができそうな気もしてるのですが未確認です。

PC版 iOS版

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261022115903p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

  • Facebook
  • X
  • Google アカウント
  • Apple Account
  • Facebook
  • X
  • -
  • Apple Account

 

3:iOS版には、リソースプランが用意されている

iOS版には、初回ダウンロード時にどの程度のリソースをダウンロードするかオプションが用意されていました。
「ゼンゼロ」に限らず、アプリのリソースが増加するに伴って需要が増えてきたオプションだと感じています。

f:id:appgameui:20261021013059p:image
▲ダウンロードするリソースを選べるオプション

 

4:PC版とiOS版とで、タイトル画面のメニューに違いがある

PC版とiOS版とで、タイトル画面のメニュー項目に違いがありました。
PC版には「終了」の項目がありますが、iOS版にはありません。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025162137p:image

◆◆◆◆◆◆◆◆◆

 

 

◆◆◆◆◆◆◆◆◆
▲PC版にはゲームを終了するコマンドが用意されている

5:iOS版には、SNSにシェアする機能がある

iOS版には、SNSにシェアする機能がありました。
いわゆるガチャ結果画面でのシェア機能が分かりやすい例かなと思います。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024200047p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024200045p:image
- -

◆◆◆◆◆◆◆◆◆

- -
  • HoYoLAB
  • X
  • Instagram
  • Facebook
  • TikTok
  • (メニューの開閉)
  • 端末に保存

PC版にもSNSにシェアするボタンはありますが、端末に保存するのみで各プラットフォームへのアクセスはしないようになっています。

◆◆◆◆◆◆◆◆◆
▲ガチャ画面ではPC版にも「SNSにシェア」ボタンがある

 

他にもシェアする場面があったので事例を紹介します。
また、これらの場面ではPC版にはシェアボタンはありませんでした。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼思い出コレクション    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141032p:image
- -

◆◆◆◆◆◆◆◆◆

▼スクラッチくじ    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024193121p:image
- - f:id:appgameui:20261024193120p:image
- -

◆◆◆◆◆◆◆◆◆

このようにPC版とiOS版とでシェアボタンの有無の場面に違いがあるようです。

 

6:PC版とiOS版とで、通貨の表示形式が違う

PC版とiOS版とで通貨の表示形式に違いがありました。
PC版は(JP¥)と表記され、iOS版は(¥)と表記されています。
これは中国の通貨記号も(¥)であり、明確に区別するための措置だと推測します。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024201148p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

結構見かけるので以下のページでリスト化しています。
マルチプラットフォーム対応:通貨の表示形式が違うタイトル

明確な理由は分からず推測の域を出ませんが、ストアプラットフォームごとの規約や決済システムの仕様の違いに起因するものと見られます。

 

操作デバイスによる違い

1:フィールド画面の違い

フィールド画面では様々なUIが表示されているためか、影響を受けるUIも多い気がします。ここでは以下の4つの事例を紹介します。

  1. フィールド画面
  2. バトル画面
  3. ボンプ操作
  4. フォトモード
1-1:フィールド画面

フィールド画面の各種UIの見た目の違いは以下の通りです。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028001257p:image
▼左上メニュー群    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼右上メニュー群    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼ミニマップなど    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼メインコマンド    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼左下    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

同ジャンルの他タイトル同様、やはりメインコマンドはバーチャルスティックのUIに違いが見られます。
タイトルによって若干の違いはありますが、iOS版は直感的な操作や押しやすさを強く意識し、PC版は画面の圧迫感を低減するようなデザインが求められている印象を受けました。

後にも触れますが、iOS版では各ボタンのレイアウト調整ができるオプションも用意されていました。このようなオプションがあることで、個々人に合わせた操作のしやすさが調整できるようになっています。

f:id:appgameui:20261024201138p:image
▲iOS版ではボタンのレイアウト調整が可能

 

1-2:バトル画面

バトル画面のUIを比較した表は以下の通りです。
こちらもフィールド画面同様、画面右下にあるメインコマンド群のUIに違いが見られました。PC版はボタンを画面端に配置し、iOS版は押しやすいように大きさや位置を調整しているデザインです。

また、連携スキル発動時はデバイスに合わせたテキストが表示されています。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261029023025p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼連携スキル発動時    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024101839p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

中ボタンを押してキャンセル

Aを押してキャンセル

画面の空白部分をダブルタップしてキャンセル

 

 

1-3:ボンプ操作時

ボンプ操作時のUIの見た目は以下の表の通りです。
ゲームモードによってメインコマンドに違いはありますが、基本的なレイアウトは同じです。PC版はキャラクターが見やすいレイアウト、iOS版は押しやすさを重視したレイアウトになっています。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼ホロウ内部    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024105749p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼マルセルの迷宮プレイ時    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024110052p:image
 

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

 

 

1-4:フォトモード

フォトモードでも見た目に違いがありました。
以下は各UIパーツごとに比較した表です。
撮影ボタン、撮影時のカメラ設定などのメニューの見た目に違いがありました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025100014p:image
▼シャッターボタン    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼モード切替など    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼カメラ位置調整    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

-

-

◆◆◆◆◆◆◆◆◆

▼その他    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

-

▼自撮りモード    
f:id:appgameui:20261025100015p:image

◆◆◆◆◆◆◆◆◆

-

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼フォトモードのメニュー    
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025100013p:image
◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

個人的に面白いと感じたのはカメラ向きの調整と、カメラ位置の調整のUIの扱いです。どちらも基本的には方向キーの操作になると思うのですが、どう落とし込むかは意外と難しいかもしれません。
過去にプレイしてきたタイトルだと見落としていた気もするので、改めて気になりました。

◆◆◆◆◆◆◆◆◆
▲向き調整のUI

2:フィールド画面以外の違い

フィールド画面以外のUIにもデバイスごとの違いがありました。
ここでは以下の2つの事例を紹介します。

  1. リングメニュー
  2. ミニゲーム
  3. TVアレイ
  4. アイコンだけのタブ
  5. 2Dオブジェクトを移動・回転できる場面
  6. ピンチイン・アウトで拡大・縮小できる画面
2-1:リングメニュー

「ゼンゼロ」ではリングメニューはどの操作デバイスでも使えますが、よく見るとリング中央のグラフィックがデバイスに合わせたデザインになっていました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024205038p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▲リング中央のグラフィックがデバイスに合わせてデザインされている

 

2-2:ミニゲーム

ゲームセンターなどで遊べるミニゲームはフォーマットに沿ったデザインになっていました。
PC版では左右対称の余白は同程度のデザインで、iOS版では方向キーのある左側が広く取られた左右非対称のデザインになっています。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼データ再接続    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025082908p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025103141p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025103142p:image
 ◆◆◆◆◆◆◆◆◆  ◆◆◆◆◆◆◆◆◆  f:id:appgameui:20261025103143p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025103140p:image

▲ミニゲームは一定のフォーマットに沿ったデザイン

 

2-3:TVアレイ

TVアレイでのUIの見た目の違いは以下の通りです。
大きくは変わらないのですが、iOS版ではバーチャルスティックを利用して操作する方式と、画面をタップして操作する方式の2つが用意されているのが特徴的です。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
- -

f:id:appgameui:20261025214448p:image

   

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025214450p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

Dまたは「TVモニター」を押して移動

Lスティックを右方向に入力、または右を押して移動

「TVモニター」を押して移動

 

ちなみに、iOS版のみTVアレイモード開始時に操作方法の設定画面が表示されていました。これに限らず、デバイスごとに操作方法が違う場合、個別に操作を案内するデザインは見かけることがあります。

f:id:appgameui:20261025214451p:image
▲TVアレイモード開始直後に操作方式が選べる

具体的には「インフィニティニキ」での事例です。
初めて自転車に乗るときなど、操作方法を設定できるように案内されます。
複数の操作が用意されている場合、操作を始める前にデフォルトの操作をユーザーに確認、決定させる流れになっている点は共通していると感じました。

自転車の操作設定 筏の操作設定

▲「インフィニティニキ」での事例(© 2024 Infoldgames, ALL RIGHTS RESERVED.)

 

2-4:アイコンだけのタブ

「ゼンゼロ」にはタブボタンが採用されている画面がいくつもあります。基本的にはPC版とiOS版とでレイアウトの違いはないのですが。アイコンのみのタブの場合、例外的にレイアウトに違いがありました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024201146p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▲「ゼンゼロ」全体で見ると特殊な事例

 

少し補足します。
見る限り、「ゼンゼロ」ではタブのデザインは主に以下の3つのバリエーションがありました。

  1. シンプル枠、汎用性高い
  2. グラフィック寄り、汎用性低い
  3. アイコンだけ
PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼シンプル枠、汎用性高い    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028101128p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028101129p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028101047p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028101045p:image
▼グラフィック寄り、汎用性低い    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028101115p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261029221620p:image
▼アイコンだけ    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261028101127p:image

このような感じです。
このように、アイコンだけのタブでも横に並べる時と縦に並べる時が混在しており、タブの見た目だけでは一概にレイアウトの違いについて述べられない状況です。
したがって、どのようなルールになっているか、外から窺い知ることは困難であるため、例外的な対応として取り上げてみました

 

2-5:2Dオブジェクトを移動・回転できる場面

2Dオブジェクトを移動・回転できる場面において、操作デバイスによってUIも変わっていました。パズル系のミニゲームのUIでもしばしば見かける気がします。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141031p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

このように、マウス操作とタッチ操作はオブジェクトを直接触るイメージのUI、
コントローラー操作は間接的に編集操作を行うイメージのUI、という感じです。

 

また、周辺のUIでもアイコンの表示の有無など、僅かながら違いが見られました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141033p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆
 

◆◆◆◆◆◆◆◆◆

  • ビューボタン:シェア
  • RT:カメラリセット
  • X:仮想カーソルを呼び出す
  • Y:UI非表示
  • B:OFFにする
 

 

2-6:ピンチイン・アウトで拡大・縮小できる画面

iOS版において、ピンチイン・アウトで拡大・縮小できる画面でもUIに違いが見られました。特に注目したいのはiOS版にある「指でピンチイン・ピンチアウトできます」という案内です。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025162138p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

- -

◆◆◆◆◆◆◆◆◆

- -

指でピンチイン・ピンチアウトできます

ピンチイン・ピンチアウトはPC版にはない操作であり、スクロールバーでしか拡縮できないと考えるユーザーも一定数いると予想できること、この画面自体が拡縮できるマップに見えにくいこと、などを懸念したのかな、と推測します。

 

2-7:その他個別対応

その他、ボタン単位で調整が入り、レイアウトに違いがある箇所が散見されました。
正直現段階ではルールが分かってないのですが、事例として記載します。
対応パターンとしては概ね以下の4パターンに分けられそうです。

  • パターンA(ボタンの置き換え)
  • パターンB(ボタンの追加)
  • パターンC(ボタンあり/テキスト表示)
  • パターンD(ボタンなし/テキスト表示)

それぞれ紹介します。

 

・パターンA(ボタンの置き換え)

「ゼンゼロ」でよく見るのはボタンアイコンを置き換える対応です。
基本的には画像の置き換えで済むため、レイアウトの調整は起きません。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

・パターンB(ボタンの追加)

また、キーボード操作時、iOS版にはアイコンは設置せず、コントローラー操作時にボタンアイコンを追加するパターンもしばしば見かけます。
軽微な調整は発生する可能性はありますが準備していれば回避可能です。
こちらもレイアウト単位での調整不要かと思います。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141036p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆

 

・パターンC(ボタンあり / テキスト表示)

キーボード操作時にはボタンが設置され、コントローラー操作時にはテキスト表示になるパターンもありました。
作り方によってコストは変わりそうですが、基本的にはレイアウトに調整が入ります。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141036p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

・パターンD(ボタンなし / テキスト表示)

キーボード操作時にはボタンなどがなく、コントローラー操作時にはテキスト表示になるパターンもあります。これもレイアウトに影響があるかもしれません。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024193119p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

…という感じで、いくつかのパターンに分けられるのですが、規則性がよく分からないので「なぜパターンAではなく、パターンBを使っているんだろう…?」と感じることもしばしばあります。

例えば、以下の場面ではコントローラー操作時でもキーボード操作時同様の枠で囲われた画像を利用すればレイアウト調整をせずに済むはず…と考えているのですが、この辺りの判断がよく分からず規則性もよく分からない…となっています。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141036p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▲デザインが分けられている

 

3:デバイスに合わせたテキストが表示されている

「ゼンゼロ」ではチュートリアルメッセージを中心に、デバイスに合わせたテキストが表示されていました。
見る限り、移動に関する操作ではデバイスに合わせたテキストに置き換えられる確度が高い印象を受けました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024095642p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

WSADで目標エリアまで移動しましょう

スティックで目標エリアまで移動しましょう

スティックで目標エリアまで移動しましょう

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024205037p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

(W/S/A/D)を押して移動。
マウスを動かして視点を変更。
(左クリック)を押して『通常攻撃』。
(右クリック)を押して『回避』と『ダッシュ』。

 

(Lスティック)を入力して移動。
(Rスティック)を入力して視点を変更。
( X ) を押して『通常攻撃』。
( A )を押して『回避』と『ダッシュ』。

 

 (バーチャルスティック)を入力して移動。
画面をスワイプして視点を変更。
(攻撃アイコン)を押して『通常攻撃』。
(移動アイコン)を押して『回避』と「ダッシュ』。

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025234231p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

H.D.Dシステムには倍速再生機能があり、テキスト表示、ボイスおよびTVモニターの映像を加速させることが可能。
「左クリック」または「L Shift」を長押しすることで、映像を倍速で再生できる。

H.D.Dシステムには倍速再生機能があり、テキスト表示、ボイスおよびTVモニターの映像を加速させることが可能。
( A )を長押しすることで、映像を倍速で再生できる。

H.D.Dシステムには倍速再生機能があり、テキスト表示、ボイスおよびTVモニターの映像を加速させることが可能。
画面を長押しすると、映像を倍速で再生できる。

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025214449p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

現在いるイベントマスを(左クリック)、または( F )を押すと、イベントが再度発生します

( A )を押すと、イベントが再度発生します 現在いるイベントマスをタップすると、イベントが再度発生します

 

4:PC版とiOS版とで、オプション項目に違いがある

PC版とiOS版とでオプション項目に違いがありました。
各項目ごとに見てみます。

4-1:画面

最も違いが多かったのがこのカテゴリです。
パフォーマンスの最適化を推進したり、グラフィックのリッチさを求める場合、特に影響が大きいのかもしれません。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201134p:image

f:id:appgameui:20261024201135p:image

グラフィック

  • 表示モード
  • 画質

グラフィック

  • 表示モード
  • 画質

グラフィック

  • -
  • 画質

カスタム

  • フレームレート
  • 垂直同期
  • レンダリング精度
  • AA
  • グローバル・イルミネーション

カスタム

  • フレームレート
  • 垂直同期
  • レンダリング精度
  • AA
  • グローバル・イルミネーション

カスタム

  • -
  • -
  • レンダリング精度
  • AA
  •  -
  • シャドウ品質
  • SFX品質
  • シェーディング
  • -
  • キャラグラフィック
  • キャラクター動的解像度
  • シャドウ品質
  • SFX品質
  • シェーディング
  • -
  • キャラグラフィック
  • キャラクター動的解像度
  • シャドウ品質
  • SFX品質
  • -
  • フレームレート
  • キャラグラフィック
  • -
  • シーンクオリティ
  • 異方性サンプリング
  • 反射
  • ボリュームフォグ
  • ブルーム
  • モーションブラー
  • ディストーション
  • 通行人の数
  • カラーフィルター
  • シーンクオリティ
  • 異方性サンプリング
  • 反射
  • ボリュームフォグ
  • ブルーム
  • モーションブラー
  • ディストーション
  • 通行人の数
  • カラーフィルター
  • シーンクオリティ
  • -
  • -
  • ボリュームフォグ
  • ブルーム
  • -
  • -
  • -
  • カラーフィルター

 

4-2:操作

操作のカテゴリにも違いが多く見られました。
操作性の良し悪しに大きく影響を及ぼす項目が多く、調整の需要も多いのかもしれません。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201136p:image

f:id:appgameui:20261024201137p:image

操作

  • UIレイアウトホットモード
  • カメラ感度(X軸)
  • カメラ感度(Y軸)
  • カメラ反転(X軸)
  • カメラ反転(Y軸)
  • 手動ロックオン切替の感度
  • カメラの自動回転

操作

  • UIレイアウトホットモード
  • カメラ感度(X軸)
  • カメラ感度(Y軸)
  • カメラ反転(X軸)
  • カメラ反転(Y軸)
  • -
  • カメラの自動回転

操作

  • UIレイアウト
  • カメラ感度(ドラッグ)
  • カメラの自動回転
  • 戦闘中、ボタンスワイプで操作可能
  • ボタン配置設定
  • ジャイロ機能
  • -
  • リングメニュー設定
  • TVアレイでのカメラ移動速度
  • -
  • OK/キャンセルボタンの配置入れ替え
  • リングメニュー設定
  • TVアレイでのカメラ移動速度
  • -
  • -
  • リングメニュー設定
  • TVアレイでのカメラ移動速度
  • TVアレイのバーチャルスティック
    ▼ボタン配置設定
 -  -

f:id:appgameui:20261024201138p:image

    ▼リングメニュー設定
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201140p:image

 

4-3:キーボード/コントローラー

主にキーボードとコントローラーのキーコンフィグです。
アサインされているコマンドが多く、項目も長くなりました。
また、iOS版にはこのカテゴリはありませんでした。

PC版(キーボード&マウス) PC版(コントローラー)

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

汎用

  • インタラクト
  • 移動(前)
  • 移動(後)
  • 移動(左)
  • 移動(右)
  • 視点操作(上)
  • 視点操作(下)
  • 視点操作(左)
  • 視点操作(右)
  • マウス呼び出し
  • プロキシノートを確認

汎用

  • インタラクト
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -
  • -

戦闘

  • 通常攻撃
  • 回避
  • 特殊攻撃
  • 終結スキル
  • キャラ切替-前のメンバー
  • キャラ切替-次のメンバー
  • 連携スキル-左
  • 連携スキル-右
  • 連携スキル-キャンセル
  • 手動ロックオン
  • キャラ特殊能力
  • 詳細

戦闘

  • 通常攻撃
  • 回避
  • 特殊攻撃
  • 終結スキル
  • キャラ切替-前のメンバー
  • キャラ切替-次のメンバー
  • 連携スキル-左
  • 連携スキル-右
  • 連携スキル-キャンセル
  • 手動ロックオン
  • キャラ特殊能力
  • -

ボンプ

  • ボンプ攻撃
  • ボンプスキル
  • ボンプジャンプ
  • ボンプ飛びつき
  • ボンプの終結スキル
  • ボンプの特殊能力

ボンプ

  • ボンプ攻撃
  • ボンプスキル
  • ボンプジャンプ
  • ボンプ飛びつき
  • ボンプの終結スキル
  • ボンプの特殊能力

メインシティ

  • ダッシュ
  • 歩きとダッシュの切替
  • インターノット
  • DM
  • マップ
  • クイックナビ
  • 写真を撮る
  • -

 

 

メインシティ

  • ダッシュ
  • -
  • インターノット/戦術アイテム-左
  • DM
  • -
  • クイックナビ/戦術アイテム-右
  • 写真を撮る/戦術アイテム-下
  • 時間帯/秘話中断/戦術アイテム-上
  • 倉庫
  • エージェント
  • イベント
  • クイック手帳
  • エリーファンド
  • 変調
  • ストア
  • リングメニュー
  • 機能メニュー
  • チャット
  • キャラ/時間帯切替
  • 秘話中断
  • 依頼追跡
  • 追跡切替
  • Fairy代行モード
  • キャンペーン
  • 営業再開
  • ゲームセンターからのお誘いに応じる
  • 「迷い路の謎」戦術アイテム1
  • 「迷い路の謎」戦術アイテム2
  • 「迷い路の謎」戦術アイテム3
  • 「迷い路の謎」戦術アイテム4

-

-

メインシティ-同時押しボタン

  • リングメニュー/同時押しボタン[開始ボタン]
  • [反応ボタン]エージェント/探査編成
  • [反応ボタン]イベント
  • [反応ボタン]クイック手帳
  • [反応ボタン]エリーファンド
  • [反応ボタン]変調
  • [反応ボタン]キャンペーン
  • [反応ボタン]営業再開
  • [反応ボタン]依頼追跡
  • [反応ボタン]追跡切替
  • [反応ボタン]Fairy代行

探査

  • 編成

-

TVアレイ

  • イベント開始
  • 長押しで加速
  • 加速ボタン

TVアレイ

  • -
  • -
  • 加速ボタン
  • レゾブレムの確認
  • アイテムを見る
  • 侵蝕症状を確認
  • バッグを開ける
  • エージェント情報
  • カメラリセット
  • カメラ上移動
  • カメラ下移動
  • -
  • -
  • -
  • -
  • -
  • カメラリセット
  • カメラ上移動
  • カメラ下移動

 

4-4:サウンドと振動

サウンドと振動(触覚)のカテゴリです。
サウンドの違いに関してはバックグラウンドでミュートにするかどうかの設定ですね。

振動に関してはiOS版とコントローラー操作時のみ調整できる項目です。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201139p:image

f:id:appgameui:20261024201141p:image

音声

  • メイン音量
  • BGM音量
  • ボイス音量
  • 効果音音量
  • アンビエント音量
  • 再生デバイス
  • バックグラウンドでミュート

音声

  • メイン音量
  • BGM音量
  • ボイス音量
  • 効果音音量
  • アンビエント音量
  • 再生デバイス
  • バックグラウンドでミュート

音声

  • メイン音量
  • BGM音量
  • ボイス音量
  • 効果音音量
  • アンビエント音量
  • 再生デバイス
  • -
-

触覚フィードバック設定

  • コントローラーの振動

触覚フィードバック設定

  • -
- -
  • 触覚フィードバック
  • 戦闘触覚フィードバック
  • 戦闘時の振動強度
  • 演出時の振動強度
  • 触覚フィードバックデバイス

 

4-5:言語

言語のカテゴリです。
多くのゲームの場合、このカテゴリは字幕の言語やゲームボイスの言語の設定があるだけですが、「ゼンゼロ」ではキーボード配列の設定ができることが珍しいと感じました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024201142p:image

言語

  • ゲーム言語
  • キャラボイス
  • キーボード配列

言語

  • ゲーム言語
  • キャラボイス
  • -

言語

  • ゲーム言語
  • キャラボイス
  • -

 

中を見てみると「汎用」「フランス語」「ドイツ語」の3つから選べるようになっています。あまり気にしたことなかったですが、多言語対応する際には注意が必要かもしれません。

◆◆◆◆◆◆◆◆◆

 

4-6:アカウント

アカウントに関するカテゴリです。
iOS版ではプッシュ通知の設定が行えます。それ以外の項目には違いはありませんでした。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024201143p:image

アカウント

  • カスタマーセンター
  • プライバシーポリシー

アカウント

  • カスタマーセンター
  • プライバシーポリシー

アカウント

  • カスタマーセンター
  • プライバシーポリシー
- -

プッシュ通知(デバイス設定で通知を許可した場合のみ有効)

  • バッテリー満タン

 

4-7:その他

その他のカテゴリです。
既存のカテゴリに当てはめられなかった項目が並んでいるように見えます。
多くの項目は共通ですが、戦闘中の操作に関する項目のみ、PC版とiOS版とで違いがありました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201144p:image

f:id:appgameui:20261024201145p:image

その他の設定

  • 戦闘ダメージ表示
  • 連携スキルのモード
  • -
  • -

 

その他の設定

  • 戦闘ダメージ表示
  • 連携スキルのモード
  • -
  • -

 

その他の設定

  • 戦闘ダメージ表示
  • 連携スキルのモード
  • 連携スキルのキャンセル
  • モバイル端末:前のエージェントへ交代
  • 街でのダッシュ
  • 会話を一文字ずつ表示する
  • 日常戦闘のリザルト演出加速
  • メインストーリーの難易度
  • 挑戦のヒント
  • ボンプのプラグイン-クイック使用
  • TVアレイの加速設定を維持
  • TVアレイでのカメラの歪みによる影響
  • 街でのダッシュ
  • 会話を一文字ずつ表示する
  • 日常戦闘のリザルト演出加速
  • メインストーリーの難易度
  • 挑戦のヒント
  • ボンプのプラグイン-クイック使用
  • TVアレイの加速設定を維持
  • TVアレイでのカメラの歪みによる影響
  • 街でのダッシュ
  • 会話を一文字ずつ表示する
  • 日常戦闘のリザルト演出加速
  • メインストーリーの難易度
  • 挑戦のヒント
  • ボンプのプラグイン-クイック使用
  • TVアレイの加速設定を維持
  • TVアレイでのカメラの歪みによる影響

 

その他資料

以下は主要な画面を比較した表です。
大きな違いはないかと思いますが、全体の傾向を把握する際の参考までに。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024193122p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024193119p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024200310p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024200046p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024205036p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024205034p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025103139p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261026081305p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261029221621p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025082907p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025082906p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025141030p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025141029p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025141034p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201147p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024205035p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201150p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201151p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201152p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261025234351p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261024201555p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261024201554p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025234819p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025234836p:image

◆◆◆◆◆◆◆◆◆

ドラッグ操作で切り替え

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261025234853p:image

 

以上がPC版とiOS版のUIの違いを比較したものです。
マルチプラットフォームのUIをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIについて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「ゼンレスゾーンゼロ」のガイドラインを確認したところ、以下の記載がありました。

3 二次創作活動の許可範囲
(1) イラスト、マンガ、小説などの同人誌の制作、展示、頒布、公開
(2) キャラクターのコスプレ衣装の制作、展示、頒布、公開
(3) キャラクターのコスプレ写真・動画の制作、展示、頒布、公開
(4) 当社コンテンツのグッズ、モチーフ料理等の制作、展示、公開
(5) ゲーム実況配信及び動画投稿(これに関しては、以下の禁止事項に抵触しない限り、営利目的・非営利目的を問わず、自由に行っていただいて構いません。)

前項のいずれかの活動を行う際は二次創作であることを創作物と共に明記してください。

◆◆◆◆◆◆◆◆◆

 二次創作に関するガイドライン

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「鳴潮」PC版とiOS版のUIを比較しました(シリーズ第25弾)

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

今回は「鳴潮」のPC版とiOS版の画面を比較したのでご紹介します。比較シリーズ第25弾!

以下、目次です。

 

プラットフォームによる違い

1:PC版には、ランチャーがある

「鳴潮」のPC版にはランチャーが用意されていました。
これくらいの規模やジャンルのゲームだと確実に用意されている印象を受けます。

「鳴潮」のランチャーでできることは主に以下の11項目です。

  1. ランチャー設定
  2. お知らせなどの確認
  3. 公式サイトやSNSなど外部サイトへの導線設置
  4. その他のメニュー
  5. ゲーム設定
  6. ダウンロードするリソースの品質設定
  7. キャラクター情報を連携
  8. 購入ページ
  9. 一部UIの非表示
  10. ゲームのダウンロード
  11. ゲーム開始

多機能!ランチャー設定、ゲーム設定など基本的な機能に加え、ゲームアカウントの情報をランチャーからも確認できる機能も付いています。
ご興味のある方向けに、各項目の詳細を以下の表にまとめました。

ランチャーの各項目

◆◆◆◆◆◆◆◆◆

1-1:一般

  • 言語
  • 起動設定
  • 画面を閉じる時
  • ランチャー表示設定

◆◆◆◆◆◆◆◆◆

1-2:ダウンロード

  • ダウンロード速度

◆◆◆◆◆◆◆◆◆

1-3:情報

  • ランチャーについて
  • ランチャーのログ
  • 規約とポリシー

◆◆◆◆◆◆◆◆◆

2:お知らせなどの確認

  • お知らせ
  • ニュース

◆◆◆◆◆◆◆◆◆

3:公式サイトやSNSなど外部サイトへの導線設置

◆◆◆◆◆◆◆◆◆

 4:その他メニュー

  • ゲーム設定
  • バージョンチェック
  • リソース修復
  • ショートカット作成
  • ゲームを強制終了

◆◆◆◆◆◆◆◆◆

5-1:ゲーム情報

  • アンインストール
  • ディレクトリ
  • その他の起動設定

◆◆◆◆◆◆◆◆◆

 5-2:ログ

  • ゲームログ

◆◆◆◆◆◆◆◆◆

6:ダウンロードするリソースの品質設定

  • 最高
  • 高画質
  • 標準

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

7:キャラクター情報を連携

  • プレイヤー名
  • ユニオンレベル
  • 各種リソース

◆◆◆◆◆◆◆◆◆

8:購入ページ

◆◆◆◆◆◆◆◆◆

いわゆるチャージセンターとも呼ばれるページです。
ゲーム内アイテムが購入でき、購入したアイテムはゲーム内から受け取れるようです。

◆◆◆◆◆◆◆◆◆

9:一部UIの非表示

一部UIを非表示にすることができます。
なんだろう、この機能…。ビジュアルをよりよく見たい人向けなのかな…。
ランチャーでユーザーにやらせたいことはゲームの起動だと思うので、
目的と一致してないような…?特殊な状況下でニーズがあるのかな…。

 

 

2:iOS版には、SNSにシェアする機能がある

iOS版には、SNSにシェアする機能がありました。
いわゆるガチャ結果画面でのシェア機能が分かりやすい例かなと思います。

iOS版
f:id:appgameui:20261017214959p:image

◆◆◆◆◆◆◆◆◆

  • X
  • Facebook
  • Instagram
  • TikTok

 

シェアは画面右下のアイコンから行えます。

◆◆◆◆◆◆◆◆◆

 

シェアできるタイミングや場所は以下が挙げられます。
他にもあるかもしれませんが、基本的なタイミングはこれくらいなのかなと思います。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼ガチャ結果画面    
- - f:id:appgameui:20261017214954p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017215003p:image
▼観光スポット    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261020223343p:image

 

3:PC版とiOS版とで、チュートリアルに違いがありそう

PC版とiOS版とでチュートリアルに違いがありそうです。
「ありそう」と歯切れが悪いのは部分的に推測が混じっているためです。
確認したのは以下の場面です。

iOS版では「スティックを動かして移動」とあります。
f:id:appgameui:20261017115110p:image

この後、PC版でも確認しようとしたのですが、PC版ではこのようなチュートリアルは表示されませんでした。
表示されなかった理由は分かりませんが、もしかするとiOS版でこのチュートリアルを表示した時点でチュートリアル閲覧完了フラグが立っているのかも…?

そんな感じで「鳴潮」のチュートリアルのデザインを比較するコストはやや重そうなので省略!

 

操作デバイスによる違い

1:フィールド画面の違い

フィールド画面では様々なUIが表示され、影響を受けるUIも多い気がします。
ここでは以下の7項目の事例を紹介します。

  1. フィールド画面
  2. 水泳時
  3. フォトモード
  4. オブジェクト操作
  5. 鉤縄
  6. 鳥のレース
  7. 会話シーン
1-1:フィールド画面

操作デバイスによってフィールドのUIにも違いがありました。
基本的には以下の対応にまとめられるのかな、と思います。

  • PC版ではキーガイドが表示されている
  • 表示されているメニューが違う
  • 攻撃やダッシュなど、メインアクションのアイコンの位置や大きさが違う
  • iOS版では操作中のキャラのアイコンは表示されない(スペースの節約?)

コントローラー版で表示されているメニューが少ないのは、画面の情報量を絞ることでユーザーの認知負荷を軽減し、操作ミスを防ぐための設計だと推測されます。
後に紹介しますが、リングメニューでコマンドが選択できるようになっていると、リストで選ぶよりも手数の面で有利なんですよね。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261016013047p:image

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

1-2:水泳時

水泳時のUIは以下の通りです。
専用のアイコンが用意されていますね。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115033p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

1-3:フォトモード

フォトモードでも見た目に違いがありました。
以下は各UIパーツごとに比較した表です。
撮影ボタン、撮影時のカメラ設定などのメニューの見た目に違いがありました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115035p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼撮影メニュー    

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261020223629p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

1-4:オブジェクト操作

オブジェクト操作時の見た目は以下の通りです。
iOS版ではオブジェクトを直接操作できますが、キーボードやコントローラー操作時はキーが割り当てられています。

対象をターゲッティングする操作はデバイスの影響を大きく受けるのだと感じました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼構え    
f:id:appgameui:20261019000140p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼オブジェクト持ち上げ    
◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261019000141p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼照準    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261019000142p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

1-5:鉤縄

鉤縄を扱う時の見た目は以下の通りです。
コントローラー操作時はモードを切り替えるUIが用意されています。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017165104p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

 

 

◆◆◆◆◆◆◆◆◆  

 

1-6:鳥のレース

ラジコンのようなミニゲームのUIは以下の通りです。
ダッシュとブレーキでラジコンをコントロールします。iOS版ではアイコンが左側にあるのが特徴的です。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261019003226p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

1-7:会話シーン

会話シーンのUIは以下の通りです。コントローラー操作時のUIは意外でした。
他画面同様にアイコンの近くにキーガイドを表示する形式ではなく、ボタンのアイコンとテキストを表示するUIになっています。ここのデザインを共通化するか、違うデザインにするか、どちらも見かけるため、開発者の好みがありそうです。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017164952p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

 

2:フィールド画面以外の違い

フィールド画面以外のUIにもデバイスごとの違いがありました。
ここでは以下の2つのシーンの事例を紹介します。

  1. スライダーがある画面
  2. メニュー画面
2-1:スライダー

スライダーが使われている画面にて、デバイスごとの違いがありました。
マウス操作、タッチパネル操作時は直接スライダーを選択、操作できますが、
コントローラー操作時はスティックやLRボタンで操作することができます。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115037p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115041p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

2-2:メニュー画面

メニュー画面では「タイトルを終了するボタン」の有無に違いがありました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017140618p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017140619p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

コントローラー操作時にはボタンを長押しすることでゲームを終了できます。
長押しにすることで、誤ってゲームを終了することがないようにしているのかな、と考えます。

 

3:デバイスに合わせたテキストが表示されている

「鳴潮」では、一部の画面ではデバイスに合わせたテキストが表示されていました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
▼ミニゲーム:バク宙    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017142609p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▼アイテム獲得    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017140444p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

「鳴潮」の場合、そこまで細かくデバイスごとのテキストを出し分けしていないようですが、チュートリアルのような具体的な操作を促す場面ではある程度デバイスに合わせたテキストを表示しているようです。

 

4:PC版とiOS版とで、オプション項目に違いがある

4-1:音声

以下は音声の項目です。
基本的な内容は同じですが、PC版の「非アクティブ時にミュート」という項目はiOS版にはないため、見落とされがちかもしれません。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261017115042p:image

音量

  • 全体の音量
  • ボイス音量
  • 音楽音量
  • SE音量
  • 背景音量
  • システム音量
  • 非アクティブ時にミュート

音量

  • 全体の音量
  • ボイス音量
  • 音楽音量
  • SE音量
  • 背景音量
  • システム音量
  • 非アクティブ時にミュート

音量

  • 全体の音量
  • ボイス音量
  • 音楽音量
  • SE音量
  • 背景音量
  • システム音量
  • -

 

4-2:グラフィック

以下はグラフィックの項目です。「基本設定」「カスタマイズ」の項目に分けられています。PC版とiOS版とで許容できる負荷に違いがあるためか、描画周りに関して細かく設定に違いが見られました。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261017115043p:image

f:id:appgameui:20261017115045p:image

f:id:appgameui:20261017115051p:image

f:id:appgameui:20261017115052p:image

f:id:appgameui:20261017115053p:image

基本設定

  • 端末情報
  • グラフィックプリセット
  • 画面モード
  • 解像度
  • 表示スタイル
    • 全画面フィルター
    • アイケアモード

基本設定

  • 端末情報
  • グラフィックプリセット
  • 画面モード
  • 解像度
  • 表示スタイル
    • 全画面フィルター
    • アイケアモード

基本設定

  • -
  • グラフィックプリセット
  • -
  • 解像度
  • 表示スタイル
    • 全画面フィルター
    • アイケアモード

カスタマイズ

  • -
  • 最大フレームレート
  • 垂直同期
  • エフェクト品質
  • 影品質
  • ディテール設定
  • アンビエントオクルージョン(AO)
  • ボリュームフォグ
  • ボリュームライト
  • モーションブラー

カスタマイズ

  • -
  • 最大フレームレート
  • 垂直同期
  • エフェクト品質
  • 影品質
  • ディテール設定
  • アンビエントオクルージョン(AO)
  • ボリュームフォグ
  • ボリュームライト
  • モーションブラー

カスタマイズ

  • MetalFX
  • 最大フレームレート
  • -
  • エフェクト品質
  • 影品質
  • ディテール設定
  • アンビエントオクルージョン(AO)
  • -
  • -
  • -
  • アンチエイリアシング(AA)
  • ブルーム効果
  • NPCの数
  • 敵被ダメージ表現
  • 自動調整機能
  • ダメージ数字表示
  • 物理アニメーション
  • アンチエイリアシング(AA)
  • ブルーム効果
  • NPCの数
  • 敵被ダメージ表現
  • 自動調整機能
  • ダメージ数字表示
  • 物理アニメーション
  • アンチエイリアシング(AA)
  • ブルーム効果
  • -
  • 敵被ダメージ表現
  • -
  • ダメージ数字表示
  • 物理アニメーション
  • 演出時の画面表現
  • マルチモードで他プレイヤーのエフェクト表示
  • キャラクターのダメージ表現
  • 背景インタラクト
  • 植生のほかし効果
  • 植生密度
  • 自動露出
  • 描画距離
  • 演出時の画面表現
  • マルチモードで他プレイヤーのエフェクト表示
  • キャラクターのダメージ表現
  • 背景インタラクト
  • 植生のほかし効果
  • 植生密度
  • 自動露出
  • 描画距離
  • 演出時の画面表現
  • マルチモードで他プレイヤーのエフェクト表示
  • キャラクターのダメージ表現
  • -
  • -
  • 植生密度
  • -
  • -

詳細オプション

  • 異方性フィルタリング
  • NVIDIA DLSS
    • アップスケーラー・超解像
    • シャープネス

詳細オプション

  • 異方性フィルタリング
  • NVIDIA DLSS
    • アップスケーラー・超解像
    • シャープネス

詳細オプション

  • 異方性フィルタリング
  • -
    • -
    • -

iOS版の項目にある「全画面フィルター」「アイケアモード」について補足します。

◆◆◆◆◆◆◆◆◆


『鳴潮』Ver2.7予告特別通信によると、全画面フィルターはVer2.4で実装された機能でしたが、Ver2.7ですべてのプラットフォームで利用できるようになりました。(42:53)
主に画面の色味を変更することで、異なるビジュアル効果を体験できるとのことです。

f:id:appgameui:20261017214953p:image

 

同番組によると、アイケアモードは全画面フィルターの拡張機能として追加されました。プリセットとしてライトモード、ダークモードが用意され、プレイ環境の明暗に応じて選択することで、画面のエフェクト表現や映像の見やすさを最適化できます。

これにより、目の負担を軽減することも期待しているようです。

f:id:appgameui:20261017214958p:image
▲アイケアモード

 

また、PC版にある「端末情報」を選択すると以下のような項目と画面が表示されます。

  • CPU
  • グラフィックカード
  • グラフィックドライバー
  • グラフィックAPI
  • メモリ
  • VRAM
  • インストール先のドライブ
  • Windowsのバージョン

◆◆◆◆◆◆◆◆◆

ユーザーがカクつきを感じた際のセルフチェックを助ける、マルチプラットフォームならではの優れた配慮だと感じました。

 

4-3:コントロール

以下はコントロールの項目です。大きく分けると「カメラ設定」「インプット設定」があり、「インプット設定」においてPC版とiOS版とで違いが見られます。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261017115054p:image

f:id:appgameui:20261017115055p:image

f:id:appgameui:20261017115058p:image

f:id:appgameui:20261017115059p:image

カメラ設定

  • カメラ水平感度
  • カメラ垂直感度
  • 照準時カメラ水平感度
  • 照準時カメラ垂直感度
  • 画面の振動強さ
  • 非戦闘時カメラ距離
  • 戦闘カメラ距離
  • カメラリセット
  • 移動カメラ軌道修正
  • 戦闘カメラ軌道修正
  • エイムアシスト

カメラ設定

  • カメラ水平感度
  • カメラ垂直感度
  • 照準時カメラ水平感度
  • 照準時カメラ垂直感度
  • 画面の振動強さ
  • 非戦闘時カメラ距離
  • 戦闘カメラ距離
  • カメラリセット
  • 移動カメラ軌道修正
  • 戦闘カメラ軌道修正
  • エイムアシスト

カメラ設定

  • カメラ水平感度
  • カメラ垂直感度
  • 照準時カメラ水平感度
  • 照準時カメラ垂直感度
  • 画面の振動強さ
  • 非戦闘時カメラ距離
  • 戦闘カメラ距離
  • カメラリセット
  • 移動カメラ軌道修正
  • 戦闘カメラ軌道修正
  • エイムアシスト

インプット設定

  • 攻撃目標
  • 移動方式切替感度
  • ソアー時の操作上下反転
  • オートラン
  • オートスプリント 

インプット設定

  • 攻撃目標
  • 移動方式切替感度
  • ソアー時の操作上下反転
  • オートラン
  • オートスプリント

インプット設定

  • 攻撃目標
  • 移動方式切替感度
  • ソアー時の操作上下反転
  • オートラン
  • オートスプリント 
  • コントローラー:バイブレーション強度
  • コントローラー:バイブレーション範囲
  • コントローラー:バイブレーション強度
  • コントローラー:バイブレーション範囲
  • -
  • -
  • コントローラー:カメラ操作左右反転
  • コントローラー:カメラ操作上下反転
  • コントローラー:左スティックのデッドゾーン
  • コントローラー:右スティックのデッドゾーン
  • コントローラー:アダプティブトリガー
  • コントローラー:カメラ操作左右反転
  • コントローラー:カメラ操作上下反転
  • コントローラー:左スティックのデッドゾーン
  • コントローラー:右スティックのデッドゾーン
  • コントローラー:アダプティブトリガー
  • コントローラー:カメラ操作左右反転
  • コントローラー:カメラ操作上下反転
  • コントローラー:左スティックのデッドゾーン
  • コントローラー:右スティックのデッドゾーン
  • -

乗り物のインプット設定

  • 加速維持
  • スピードブースト維持
  • ドリフト加速サポート
  • 動力ドリフト
  • 乗り物滑空時の上下操作反転

乗り物のインプット設定

  • 加速維持
  • スピードブースト維持
  • ドリフト加速サポート
  • 動力ドリフト
  • 乗り物滑空時の上下操作反転

乗り物のインプット設定

  • 加速維持
  • スピードブースト維持
  • ドリフト加速サポート
  • 動力ドリフト
  • 乗り物滑空時の上下操作反転

 

4-4:入力設定

以下は入力設定の項目です。操作デバイスごとに細かく設定が用意され、結果的に多くの違いがあるように感じます。

また、PC版では操作しているデバイスに応じてデフォルトでアクティブになる項目が変わります。デフォルト値が違うだけで、どちらの設定にもアクセスできます。

キーボード&マウス操作時 コントローラー操作時

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▲操作しているデバイスに応じてデフォルトが切り替わる

 

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

f:id:appgameui:20261017115101p:image

-

システム画面

  • 決定/キャンセル
  • ルーレット設定
-

-

-

基本

  • キーバインド
  • ジョイスティックモード

戦闘・探索

  • 目標選択・切替
  • 前へ
  • 後へ
  • 左へ
  • 右へ
  • -

戦闘・探索

  • 目標選択・切替
  • -
  • -
  • -
  • -
  • 移動
 -
  • 歩き・走り切替
  • -
  • 基本攻撃(押しで通常攻撃・長押しで重撃)
  • ダッシュ・回避
  • ジャンプ
  • -
  • カメラリセット
  • 基本攻撃(押しで通常攻撃・長押しで重撃)
  • ダッシュ・回避
  • ジャンプ
 -
  • 共鳴スキル
  • 共鳴解放
  • 探索モジュール
  • クイックアクセス
  • 音骸スキル
  • 照準モード切替
  • -
  • -
  • 登り時に落下取得・インタラクト
  • 共鳴スキル
  • 共鳴解放
  • 探索モジュール
  • クイックアクセス
  • 音骸スキル
  • 照準モード切替
  • 取得・インタラクト
  • コンボボタン・メイン
  • -
 -
  • キャラ1に切替
  • キャラ2に切替
  • キャラ3に切替
  • キャラ4に切替
  • -
  • 任務追跡
  • 挑戦中止
  • キャラ1に切替
  • キャラ2に切替
  • キャラ3に切替
  • キャラ4に切替
  • 登り時に落下
  • 任務追跡
  • -
-

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

 



 

戦闘・探索

  • 加速・前進
  • ブレーキ・バック
  • -
  • 左に曲がる
  • 右に曲がる
  • ドリフト走行
  • バニーホップ
  • バニーホップ
  • スピードブースト
  • スピードブースト
  • -
  • 探索モジュール
  • 降りる・(長押し)離脱ストライク
  • ストライク
  • 空中ウィリー

戦闘・探索

  • 加速・前進
  • ブレーキ・バック
  • 左/右に曲がる
  • -
  • -
  • ドリフト走行
  • バニーホップ
  • -
  • スピードブースト
  • -
  • 取得・インタラクト
  • 探索モジュール
  • 降りる・(長押し)離脱ストライク
  •  -
  • -

-

  • カメラ切り替え
  • クイックアクセス
  • キャラ1に切替
  • キャラ2に切替
  • キャラ3に切替
  • キャラ4に切替
  • 任務追跡
  • 挑戦中止
  • -
  • カメラ切り替え
  • クイックアクセス
  • キャラ1に切替
  • キャラ2に切替
  • キャラ3に切替
  • キャラ4に切替
  • -
  • -
  • コンボボタン・メイン
-
- -

乗り物

  • 移動・旋回
  • キーバインド
  • ジョイスティックモード
- -

操作方法

  • コントローラーモード

iOS版にある「キーバインド」について補足します。
キーバインドは「基本」と「乗り物」の2種類のモードごとに用意されています。
基本的には、アクション系のスマホゲームでよくある、UIのレイアウトを調整する画面です。アイコンの位置、サイズを調整できます。

f:id:appgameui:20261017214956p:image
▲「基本」のキーバインド

 

f:id:appgameui:20261017214948p:image
▲「乗り物」のキーバインド

 

4-5:言語

以下は言語の項目です。こちらはPC版、iOS版ともに同じ設定項目でした。

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115102p:image

表示言語

  • 言語選択

ボイス言語

  • ボイス選択
  • ボイスリソース管理
  • 共鳴者ボイス設定

表示言語

  • 言語選択

ボイス言語

  • ボイス選択
  • ボイスリソース管理
  • 共鳴者ボイス設定

表示言語

  • 言語選択

ボイス言語

  • ボイス選択
  • ボイスリソース管理
  • 共鳴者ボイス設定

 

4-6:その他

こちらはその他の項目です。
iOS版にはPC版には無い、システム通知設定やリソースのダウンロード設定があります。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115103p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115105p:image

-

-

システム機能

  • システム通知

インタフェース設定

  • 没入感重視モード
  • マルチプレイヤー名を表示
  • バイク運転時のHUDを非表示
  • ストーリー中に登場人物の名前を非表示

インタフェース設定

  • 没入感重視モード
  • マルチプレイヤー名を表示
  • バイク運転時のHUDを非表示
  • ストーリー中に登場人物の名前を非表示

インタフェース設定

  • 没入感重視モード
  • マルチプレイヤー名を表示
  • バイク運転時のHUDを非表示
  • ストーリー中に登場人物の名前を非表示 

プレイヤーオプション

  • 漂泊者切替

システム機能

  • ログアップロード

プレイヤーオプション

  • 漂泊者切替

システム機能

  • ログアップロード

プレイヤーオプション

  • 漂泊者切替

システム機能

  • ログアップロード

アカウント

  • 引換コード

アカウント

  • 引換コード

アカウント

  • 引換コード 

-

-

バージョンチェック

  • 現在バージョン

リソース管理

  • -
  • リソースクリーンアップ

リソース管理

  • -
  • リソースクリーンアップ

リソース管理

  • リソースダウンロード
  • リソースクリーンアップ

 

4-7:アカウント

以下はアカウントの項目です。こちらもPC版、iOS版ともに同じ設定項目でした。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115107p:image

アカウント

  • ユーザーサポート
  • 利用規約
  • プライバシーポリシー

アカウント

  • ユーザーサポート
  • 利用規約
  • プライバシーポリシー

アカウント

  • ユーザーサポート
  • 利用規約
  • プライバシーポリシー

 

5:ショートカットホイールの有無やデザインに違いがある

操作デバイスによって、ショートカットホイールの有無やデザインに違いがありました。
注目したいのはコントローラー操作時のショートカットホイールには、「探索モジュール」と「システムアクセス」に分けられている点です。

◆◆◆◆◆◆◆◆◆

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆  
 

◆◆◆◆◆◆◆◆◆

 
▼設定    
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017140445p:image
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆  

ちなみに、iOS版でもショートカットホイールの設定ができるのはiOS版でコントローラー操作を行うことを想定しているためだと考えられます。

 

余談

余談です。
キャラクター画面のデザインの意図がちょっとよく分からなかったのでメモ。

「崩壊:スターレイル」や「アークナイツ:エンドフィールド」「七つの大罪:Origin」など、同ジャンルのキャラクター画面のキャラクターアイコンはLRで切り替えられます。コントローラー操作の場合、直感的な操作やメンタルモデルに倣ってか、キャラクターアイコンは横に並べられています。

崩壊:スターレイル アークナイツ:エンドフィールド 七つの大罪:Origin
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆

▲キャラクターアイコンは横に並べられ、LRで切り替えられる

 

この挙動は「鳴潮」でも同じです。
ですが、「鳴潮」の場合はキャラクターアイコンが縦に並べられています。

PC版(キーボード&マウス) PC版(コントローラー) iOS版
◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115036p:image

▲「鳴潮」のキャラクター画面

 

◆◆◆◆◆◆◆◆◆
▲キャラクターアイコンが縦に並べられている

なので、直感的な操作でもなく、既存ゲームと異なる操作という点で学習コストがかかるデザインになっています。

あえてこのデザインを採用する意図があると思うのですが、今のところ理由が分からず…。横に並べられている画面も存在するので、UIのルール的には許容されているとは思うのですが…。

 ストア画面  プロフィール編集

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

▲横に並べられている例

 

ギャラリー

PC版(キーボード&マウス) PC版(コントローラー) iOS版

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261016013046p:image
     

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115040p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017115041p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆  

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆  

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆  

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆

 

◆◆◆◆◆◆◆◆◆

- f:id:appgameui:20261018233754p:image

◆◆◆◆◆◆◆◆◆

- f:id:appgameui:20261018233753p:image

◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆ f:id:appgameui:20261017142611p:image

 

以上がPC版とiOS版のUIの違いを比較したものです。
マルチプラットフォームのUIをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIについて簡単にまとめて紹介しています。
もし良かったら話のネタ程度に他の方に紹介していただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。
「鳴潮」のガイドラインを確認したところ、以下の記載がありました。

個人または法人格のない団体が行うことができる非営利利用の例

  • イラスト、フィギュア、人形その他の立体工作物の作成、展示、配布
  • 同人誌の作成、展示、配布
  • コスプレ衣装の作成、展示、配布
  • コスプレ写真やコスプレ動画の配布、展示、上映、ウェブサイト上での公開

 ただし、以下の場合においては利用を禁止させていただきます。

  • 当社コンテンツのイメージを逸脱する、又はイメージを損なう内容
  • 第三者の権利を侵害する、または公序良俗に反する内容
  • 直接的に当社コンテンツの素材(イラスト、映像、動画、音声、楽曲、テキスト等)をコピー、スキャン、サンプリング、トレース等で使用するなど、創作性が無いまたは低いもの
  • 当社、もしくは公式と詐称しての活動
  • 当社または当社の関係者と誤解されるかのような印象を与えるような内容
  • その他当社が不適切と判断した内容

 

二次創作について

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ