こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「 ヘブンバーンズレッド」（以下「ヘブバン」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。
デザインの対応方針などの参考になれば幸いです。
以下、目次です。
- プラットフォーム対応
- デバイス対応
- ダイアログの規則性
- その他
- ギャラリー
かなり長い！
目次を眺めて気になった項目だけ見ていただければ…。
プラットフォーム対応
1：プラットフォーム独自の機能、導線を設置する
1-1：Steam版では、タイトル画面とゲーム内に「ゲームを終了する」コマンドを設置する
以下の場所に「ゲームを終了する」コマンドがあったよ。
- タイトル画面
- メニュー画面
- 自動周回プレイ中
タイトル画面：下から２番目に「ゲームを終了する」ボタンがあります。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
メニュー画面：端末の外側、やや押しにくい位置に「ゲームを終了する」ボタンがあります。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
自動周回プレイ中：キーボード操作時は画面下部に「ゲームを終了する」ボタンがあり、コントローラー操作時はXでゲームを終了できます。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
1-2：iOS版では、タイトル画面とゲーム内に「アセットの整理」と「応援レビュー」コマンドを設置する
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
1-3：利用できる機能に合わせてアイコンをデザインする
プラットフォームによって利用できる機能が異なる場合、機能に合わせてアイコンのデザインを変更していた。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
- 1-1：Steam版では、タイトル画面とゲーム内に「ゲームを終了する」コマンドを設置する
- 1-2：iOS版では、タイトル画面とゲーム内に「アセットの整理」と「応援レビュー」コマンドを設置する
- 1-3：利用できる機能に合わせてアイコンをデザインする
このように、ゲームをプレイするプラットフォームやデバイスの違いによって、機能の有無やアイコンのデザインが変わるケースがありました。
2：プラットフォームによって販売する商品が異なる場合がある
プラットフォームが異なると一部商品のラインナップも異なる場合がありました。
「ヘブバン」の場合、月額パスの有無が目立った商品でしょうか。iOS版には月額パスがあり、Steam版には販売されていませんでした。
タブでも分かれているので目立ちますね。
| iOS版 | Steam版 |
 |
|
|
|
|
月額パスの商品概要が記載されたページを一部紹介します。商品説明や条件など、細かく記載されています。
このように、プラットフォームが異なる場合、商品のラインナップにも影響が及ぶ可能性があることを覚えておくと良いかもしれません。
3：プラットフォームに合わせて、各種オプション項目を最適化する
プラットフォームによってオプション項目が異なる場合があります。
「ヘブバン」の例を以下の表にまとめました。
太字になっているのがプラットフォーム固有のオプション項目です。
| iOS版 | Steam版 |
 |
 |
|
グラフィック
バトル
衣装着せ替え
その他
|
グラフィック
バトル
衣装着せ替え
データ引き継ぎ設定
キーボード＆マウス
コントローラ 連続入力の速度設定
その他
|
この表からは主に以下のことが読み取れます。
- Steam版では、ゲーム画面の表示解像度やフルスクリーンとウィンドウモードを切り替える項目が用意されている
- Steam版では、アンチエイリアスやシャドウ品質など、画質をより細かく設定できる項目が用意されている
- Steam版では、マウスやコントローラーの挙動に関する項目が用意されている
- iOS版では、画質設定に関してプリセットが用意されている
…などでしょうか。
また、上記の表には含まれていませんが、通知のオプションの有無も大きな違いです。
▲iOS版には通知の設定項目がある
このように、プラットフォームが違うことでオプション項目にも影響が及ぶ可能性があることを覚えておくと良いかもしれません。
デバイス対応
「ヘブバン」はタッチパネル、キーボード&マウス、コントローラーなど複数のデバイスに対応しています。使用するデバイスによって、UIの設計にも影響する場合があります。目立つところでは、キーボード&マウス、コントローラー操作時にはボタンガイドが表示されます。
このボタンガイドの表示は、主に以下のルールでレイアウト設計されているように見えました。
- 基本的には画面右下に表示する
- 右下に表示できない場合は左下に表示する
- ボタン位置と置き換え表示する場合がある
- ボタンに隣接して表示
- ボタンの中に表示
以下、これらの基本ルールについて補足します。
1：「ヘブバン」におけるボタンガイドの基本
1-1：基本的には画面右下に表示
「ヘブバン」の場合、基本的にボタンガイドは画面右下に表示されています。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
▲ADVパートでは画面右下にボタンガイドが表示されている
右下に表示される理由は様々考えられますが、主に視線誘導が関係していると考えます。上で紹介した会話パートなどは要素が少なく分かりやすいのですが、左から読む文章の場合、右下に視線が誘導されます。そのため、操作方法を確認しやすいレイアウトになります。
1-2：右下に表示できない場合は左下に表示する
「ヘブバン」の場合、基本的にボタンガイドは画面右下に表示されるのですが、例外もあります。例えば、メニュー画面では画面左下にボタンガイドがあります。
これは画面右下にボタン類が表示されるデザインであり、ボタンガイドを表示するスペースがないことが理由だと考えます。いずれにしろ、ボタンガイドは右下には表示せず、空いている左下のスペースに表示しています。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
▲メニュー画面ではボタンガイドは左下に表示
このように、臨機応変にボタンガイドの表示位置を変更していることがわかります。
1-3：ダイアログの中にボタンガイドを表示する場合もある
「OK/キャンセル」のような汎用的な確認ダイアログの場合、ダイアログの中にボタンガイドを表示しています。
画面右下にボタンガイドを表示すると、質問と選択肢が離れてしまい、直感的な可否の判断が難しくなるなどが関係しているのかもしれません。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
▲ダイアログの中にボタンガイドを表示する場合もある
1-4：ボタンガイドはボタンの傍に表示することも多い
ボタンガイドをiOS版でもあるようなボタンの画像の近くに表示するケースもあります。ガチャ画面では以下の３点の事例が確認できます。
- 「10回ガチャを引く」の画像の中にYボタンのボタンガイドが表示されている
- ガチャを切り替えるためのタブボタン画像の横にRスティックのボタンガイドが表示されている
- 有償石を購入するためのボタン画像の下にRTのボタンガイドが表示されている
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
▲ボタン画像の中に表示するケースとボタン画像に隣接する位置に表示するケース
ちなみに、このようにボタンの画像近くにボタンガイドを表示する条件として、役割が複数あるボタンの場合、画像の近くにガイドを表示する傾向がある、と考えます。
例えば以下のボタンようなケースです。
- タブボタン…画面遷移、見出しの役割がある
- 押すと数量が増減するボタン…増減の変化
- ボタンの中にアイテム数が表示されている…ガチャ回すボタン
- ボタンを押すとキャラクターがアクションする…話しかけるなど、同じボタンを使用するが、対象によってアクションが変化するケース
これらの役割があるボタンを画面下部のボタンガイドに置き換えてしまうと、見出しやアイテムの個数など、重要な情報が画面に表示されなくなります。そのため、ボタンガイドを表示する場合、画面下部以外の場所に表示する必要がありそうです。
| 画像 | 役割 |
|
|
|
|
|
|
|
|
|
|
|
|
▲ボタン画像の近くにボタンガイドを表示するケース
上記の表にまとめられたボタンのように、複数の役割があるボタンである場合、ボタン画像の近くにボタンガイドを表示する傾向があると感じました。
2：ボタンガイドについて補足
「ヘブバン」ではボタンガイドは、基本的には画面下部、ボタン画像の近くに表示しています。
その際、いくつかのルールの補足が見られました。
【補足】
- ボタンガイドを表示している場合、iOS版で表示していたようなボタン画像は表示しない
- ダイアログの「×（閉じる）」ボタンは、ボタンガイドの有無に関わらず表示する
- ミニマップは、ボタンガイドの有無に関わらず表示する
- ライブゲーム中は独自のボタンガイドデザイン
2-1：ボタンガイドを表示している場合、iOS版で表示していたようなボタン画像は表示しない
「ヘブバン」では、ボタンガイドが表示されている機能の場合、iOS版で表示していたようなボタン画像は表示しないようにしています。
言葉だと直感的に伝えるのが難しいかもしれません。ADVパートの画面を例に補足します。
iOS版やキーボード＆マウス操作時はオートやスキップといった画像が表示されていますが、ボタンガイドが表示されているコントローラー操作時には画像が表示されなくなります。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
▲ボタンガイドを表示する場合、iOS版で表示していたようなボタン画像は表示しない
ADV画面以外にもこの特徴が見られます。
このように「ヘブバン」では基本的にはボタン画像、ボタンガイドのどちらか片方が表示されているデザインになっています。
2-2：ダイアログの「×（閉じる）」ボタンは、ボタンガイドの有無に関わらず表示する
「ヘブバン」では基本的にはボタン画像、ボタンガイドのどちらか片方が表示されているデザインになっています。しかし、いくつか例外もあります。
例えば、ダイアログの「×（閉じる）」ボタンもそのひとつです。
「×（閉じる）」ボタンはボタンガイドがあっても表示されます。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
▲ボタンガイドが表示されても閉じるアイコンは表示されている
2-3：ミニマップはボタンガイドの有無に関わらず表示する
ミニマップもボタンガイドの有無に関わらず表示されるUIです。
考えてみれば当然の話ですが、ボタンガイドがあってもミニマップが見えなくなると困ります。
| ミニマップ | ボタンガイド |
 |
|
▲ボタンガイドの有無に関わらずミニマップは表示される
このように、ボタン画像が何かしらの機能にアクセスする以外の役割を持っている場合、表示させておく必要があると推測します。
2-4：ライブゲーム中は独自のボタンガイドデザイン
「ヘブバン」にはゲーム内で遊べるライブゲームがあります。上から流れてくるノーツをタイミング良く押すミニゲームです。
▲ライブゲームの画面
ライブゲーム中はデバイスに合わせてボタンガイドが表示されています。デバイスごとの操作方法は以下の通りです。
| タッチパネル（iOS版） | 画面をタップ |
| キーボード&マウス | 割り当てられたボタンを押下 |
| コントローラー | 割り当てられたボタンを押下 |
▲デバイスと操作方法の対応表
以下はデバイスごとのゲーム画面です。
また、ボタンガイドが表示されている箇所をトリミングしています。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
▲ノーツやエフェクトなどが無い状態のライブゲーム画面
ブログで紹介していないゲームも含めて、過去にプレイしたゲームを振り返ると、ミニゲームのように独立したレイアウト設計が採用される画面の場合、既存のルールに当てはまるのが難しいからか、ユニークなデザインルールが採用されることが多いように感じます。
3：タッチ操作、マウス操作、コントローラー操作によって操作方法を示すアイコンを出し分けしている
「ヘブバン」のいくつかの画面では、スワイプやドラッグなど、デバイス独自の操作方法とアイコンが採用されていました。
デバイスが変わるとアイコンのデザインが流用しにくい場合があります。そこで操作するデバイスに合わせたアイコンが用意されていました。
以下の2つの画面を例にあげます。
- ジオラマ画面
- スタイル詳細
3-1：ジオラマ画面
ジオラマ画面では用意された2D、3Dのグラフィックなどを組み合わせて、任意のグラフィックがデザインできます。
配置するグラフィックの移動はドラッグ&ドロップで行います。
操作方法を分かりやすく伝えるため、iOS版では指を使った画像、キーボード&マウス操作時はマウスの画像が使われています。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
▲指の画像 |
▲マウスの画像 |
|
▲iOS版では指の画像、キーボード&マウス操作時はマウスの画像が表示されている
3-2：スタイル詳細
スタイル詳細画面ではスタイルに対応したキャラクターの3Dモデルが鑑賞できます。
先ほどのジオラマ画面同様に、iOS版では指を使った画像、キーボード&マウス操作時はマウスの画像が使われています。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
▲ iOS版では指の画像、キーボード&マウス操作時はマウスの画像が表示されている
また、アイコンをよく見ると使用する指の本数や押下するマウスのボタンが表現されています。
どのように操作するのか、アイコンを通じてより正確に伝えようとしている意図が感じ取れます。
このように、デバイスに合わせた操作方法を画像で伝える場合、デバイスに合わせて画像を用意するケースも見られました。
4：キーコンフィグ機能を用意する
デバイスによってはキーコンフィグ機能に対応することもあります。
「ヘブバン」の場合、キーボード操作時はキーコンフィグが有効になります。具体的にどのような場面、操作に対応しているのか、以下の５つの項目を紹介します。
- 共通
- フィールド
- ノベル
- バトル
- ライブゲーム
4-1：共通タブ
▲キーボード＆マウス操作時の一般的なダイアログ画面
キーコンフィグ画面の【共通】タブでは、UIにおける汎用性の高い場面の操作が管理されています。
【共通】タブで管理されている操作は以下の通りです。
| 共通 |
|
|
|
共通
|
このように【共通】タブでは、確定、キャンセルを始めとし、様々な画面に共通する操作について、割り当てられているボタンを変更できます。
ただ、一部変更できない操作もありました。私のデバイスや環境の問題なのか、元々変更できない設定なのかなど、条件や詳細については確認できていません。
以下、割り当てられているボタンが変更できない操作の一覧です。
- ダイアログ内のチェックボックス
- イラスト/3Dモデル表示の切り替え
- 移動/選択肢の選択
- 移動/選択肢の選択
- 移動/ページの移動
- 移動/ページの移動
▲一部の操作は「変更」のボタンが表示されておらず、割り当てるボタンが変更できない
4-2：フィールドタブ
▲キーボード＆マウス操作時のフィールド画面
キーコンフィグ画面の【フィールド】タブでは、フィールドマップ移動時の各種操作が管理されています。
【フィールド】タブで管理されている操作は以下の通りです。
| フィールド |
|
|
|
フィールド
|
ちなみに「？？？って何？」と思って調べたところ、イベント中の特殊アクション（トランスポートアクション）を指しているようでした。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
イベント中の特定のタイミングのみ、Shiftキーなどの操作を行うと特殊アクションが実行されます。
▲瞬間移動のようなアクションが実行される
ちなみに「？？？」の表示は上記操作が解放された後、正式な項目名が表示されるように変化しました。かなりレアケースだと思いますが、運用するゲームの場合、このようなデザイン設計もあるんですね…
| 解放前 | 解放後 |
 |
 |
▲「？？？」の表示が変化していることが分かります
このように機能が拡張されるコンテンツの場合、予め対応するキーが登録され、キーコンフィグの項目名が変化することもあるようです。
4-3：ノベルタブ
▲キーボード＆マウス操作時のノベル（会話パート）画面
キーコンフィグ画面の【ノベル】タブは、いわゆる会話パート中の各種操作が管理されています。
【ノベル】タブで管理されている操作は以下の通りです。会話ログの表示など会話パート限定の操作、且つ利用頻度の高い操作がまとめられています。
| ノベル |
|
|
|
ノベル
|
キーボード&マウス操作時の会話パート画面を見ると、どのコマンドにどのボタンが割り当てられているか表示されていません。
例えば、「スピード変更」、「会話の自動再生」、「オプションの表示」などはボタンの割り当ては表示されていません。
| キーコンフィグ部分 | ADV画面 |
|
|
|
▲キーコンフィグに含まれていない機能がある
このようにすべての機能にキーが割り当てられている、あるいはキーコンフィグが有効であるとは限らないようです。
4-4：バトルタブ
▲キーボード＆マウス操作時のバトル画面
キーコンフィグの【バトル】タブは、バトル中の各種操作が管理されています。
【バトル】タブで管理されている操作は以下の通りです。
| バトル |
|
|
|
バトル
|
たくさんありますね。
ただ、不思議なことに「行動開始」「オートバトルの有効/解除」はバトル画面を見る限り、ショートカットが割り当てられているように見えますが表示されていません。
▲キーコンフィグ画面ではショートカットキーが表示されていない
▲バトル中の画面下部には「Enter：行動開始」「R：AUTO ON/OFF」が表示されている
以下は「行動開始」と「オートバトルの有効/解除」にボタンを割り当てようとした際の確認ダイアログです。
| 行動開始 | オートの有効 |
|
※変更しようとしているキーには以下の操作が割り当てられています 「確定」 入力されたキーを以下の操作に変更しますか？ 「行動開始」 |
※変更しようとしているキーには以下の操作が割り当てられています 「オートの有効/解除」 入力されたキーを以下の操作に変更しますか？ 「オートバトルの有効/解除」 |
▲キーの割り当てを変更する際の確認ダイアログ
どうやらバトル中の行動開始はキーコンフィグでは「確定」として扱われています。つまり表記揺れした上で他の用語と被っているようです。
ひとつずつ説明します。
- バトル中では「行動開始」と呼称されている操作がキーコンフィグ画面では「確定」と呼称されている
- 「行動開始」はバトル中とキーコンフィグ画面とで違う操作を指している
- 「オートバトルの有効/解除」と「オートの有効/解除」は異なる操作である
という感じです。
キーコンフィグの項目の名前を考える際、呼称には注意した方が良いのかもしれません。
4-5：ライブゲーム
▲キーボード＆マウス操作時のライブゲーム画面
他のキーコンフィグとは別の場所にありますが、ライブゲームのキーコンフィグもありました。
【ライブゲーム】のキーコンフィグは以下の通りです。キーボード操作時のみレーンに対応するボタンを変更できます。コントローラー操作時のボタンの割り当て変更は見た感じ出来なさそうでした。
| ライブゲーム（キーボード操作） | ライブゲーム（コントローラー操作） |
|
|
|
|
ライブゲーム（キーボード操作）
|
ライブゲーム（コントローラー操作）
|
割り当てるボタンを変更する場合は専用の画面に遷移します。iOS版にはない画面ですね。
「ヘブバン」の場合は以下のような見た目の画面に遷移します。
▲割り当てるボタンを変更する画面
ダイアログの規則性
「ヘブバン」には様々な見た目のダイアログがあります。ここではボタンガイドの表示パターンに注目し、以下の4パターンに分類しました。
- 閉じるだけのダイアログ
- 購入数設定のあるダイアログ
- 基本ダイアログ
- 購入数設定のあるダイアログ2
以下、それぞれの詳細を記載します。
1：閉じるだけのダイアログ
OKボタンのみの閉じるだけのダイアログはシンプルなデザインルールで構成されています。
iOS版やキーボード&マウス版であるようなボタン画像をボタンガイドに置き換えて表示しています。
以下は、「ヘブバン」における一般的なダイアログとボタンガイドの箇所をトリミングした表です。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
▲ボタン画像とボタンガイドを置き換えて表示
非常に分かりやすいデザインルールだと感じました。
2：OKキャンセルで構成されたダイアログ
OK、キャンセルで構成されたダイアログも汎用性の高いダイアログのひとつです。
先ほどのダイアログからボタンがひとつ増えていますが、同じようにボタン画像をボタンガイドに置き換えるデザインです。
以下は、OK、キャンセルで構成されたダイアログとボタンガイドの箇所をトリミングした表です。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
▲ボタン画像とボタンガイドを置き換えて表示
これも非常に分かりやすいデザインルールだと感じました。
3：購入数設定のダイアログ
アイテムの使用数や購入数を設定できるUIコンポーネントがあるダイアログも汎用的なダイアログのひとつです。
このタイプのダイアログは数量変更のボタン画像の近くにボタンガイドを表示します。増減に対応するボタンが何であるか伝わりやすいデザインだと思います。
以下は、アイテム購入時のダイアログとボタンガイドの箇所をトリミングした表です。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
▲増減ボタンの近くにボタンガイドを表示する
4：購入数設定のダイアログ２
OK、キャンセルの表示がないダイアログもあります。
例えば、アイテム売却時のダイアログが例にあげられます。
以下は、アイテム売却時のダイアログとボタンガイドの箇所をトリミングした表です。
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
▲アイテム売却時のダイアログ
これまで紹介してきたダイアログのデザインルールと異なる点として、以下の2点をあげます。
- 画面下部にボタンガイドが表示されている
- Yボタンが売却ボタンに割り当てられている
ここではＹボタンが売却ボタンに割り当てられています。
これはＡやＢだと誤操作する可能性があるため、他の場所よりも丁寧な意思決定を求める場合、他の場所とは異なるボタンで意思決定をさせているのだと推測します。
このようなデザインは他の場面でも見ることができます。
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
|
|
|
▲Yボタンがアサインされる例
その他
その他、分類できなかった要素を記載します。
1：ヘルプの文言や画像はスマホ版で統一
見た限り、「ヘブバン」のヘルプはデバイスに関わらずスマホ版の表現で統一されていました。キーボードやコントローラー操作時でも「タップ」という表現や、画面をタップするように促す画面イメージが使われています。
「ヘブバン」はSteam版よりもスマホ版が先にリリースされたため、スマホ版を基準にデザインしているのかもしれません。
▲デバイスが変わってもヘルプは変化しない
▲「タップ」という表現で統一されている
▲画面をタップするイメージが使われている
2：チュートリアルに影響がある
「ヘブバン」ではゲーム開始直後のチュートリアル、具体的には初めて戦闘に向かう場面でキャラの進行方向をナビゲートする際、ボタンガイドの表示に差異があったと記憶しています。それ以外の場所では未確認です。
すべてのチュートリアルに対応するのは大変ですが、ゲーム開始直後のチュートリアルだけはデバイスに合わせて丁寧に説明したいと考えても良いのかもしれません。
ギャラリー
以下は主要な画面でプラットフォーム、デバイスの差異を比較した資料です。
基本的にはiOS版のデザインをいくつかのパターンに分けて、Steam版に落とし込んでも不都合が起きないルールが作られていると感じました。
- タイトル画面
- ホーム画面
- マップ
- ADVパート
- 部隊編成
- バトル中
- バトル自動周回中
- ジオラマ
- ライブゲーム
- プロフィール
- メニュー画面
- 部隊
- 着せ替え
- スタイル詳細
- キャラ選択
- 3Dキャラモデル表示
- ガチャ画面
- ショップ画面
- イベント画面
- イベントシェア
- 設定画面
1：タイトル画面
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
 |
 |
|
|
 |
 |
 |
 |
 |
2：ホーム画面
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3：フィールド
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
4：ADVパート
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
5：部隊編成
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6：バトル中
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
7：バトル自動周回中
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
8：ジオラマ
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
9：ライブゲーム
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
10：プロフィール
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
11：メニュー画面
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12：部隊
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
13：着せ替え
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14：スタイル詳細
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
15：キャラ選択
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
16：3Dキャラモデル表示
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
17：ガチャ
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
18：ショップ
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
19：イベント
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20：イベントシェア
| iOS版 | Steam版（キーボード＆マウス） | Steam版（コントローラー） |
|
|
|
|
|
|
|
|
|
|
|
|
21：設定
 |
 |
 |
|
|
|
以上です。
モバイルとPCのUIの違いについて知りたい方の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。
個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿（ストリーミング配信を含むものとし、以下同様とします。）するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
