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

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

「ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅」プラットフォームやデバイスによってUIの見た目や挙動にどのような違いがあるか比較しました

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

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

 

今回は「ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅」(以下「DQM3」)からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。デザインの対応方針などの参考になれば幸いです。

以下、目次です。

かなり長い!
目次を眺めて気になった項目だけ見ていただければ。

 

プラットフォーム対応

まずはプラットフォームの違いによってUIに影響がある要素を以下の4つに分類しました。

  1. プラットフォーム独自の画面を用意する
  2. プラットフォーム独自の機能、導線を設置する
  3. プラットフォーム独自の情報を表示する
  4. プラットフォームに合わせて、各種オプション項目を最適化する

 

1:プラットフォーム独自の画面を用意する

1-1:起動時の注意喚起画面を用意する

Steam版では、ゲーム起動直後に著作権侵害に対して注意喚起する画面が表示されていました。
この画面はSwitch版でも表示されていました。会社にもよりますが、据え置き機のゲームだと比較的みかける印象です。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲注意喚起する画面

 

2:プラットフォーム独自の機能、導線を設置する

複数のプラットフォームでリリースする場合、プラットフォームならではの導線を設置するケースもあります。ここでは3例紹介します。

  1. iOS版のタイトル画面では、ゲームセンターや追加データダウンロードの導線がある
  2. Steam版では、タイトル画面とゲーム内に「ゲームをやめる」コマンドがある
  3. iOS版では、サポートIDが確認できる

それぞれの詳細を説明します。

 

2-1:iOS版のタイトル画面では、ゲームセンターや追加データダウンロードの導線を設置する

iOS版の場合、Steam版にはない以下の4つの導線が追加されていました。

  1. ゲームセンター
  2. クラウド
  3. おすすめゲーム
  4. 追加データダウンロード
Steam版 iOS

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

f:id:appgameui:20240916181039p:image
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲プラットフォームによって機能や表示する導線に違いがある

 

見る限り、Game Center機能の利用やクラウドでのデータ管理が可能なようです。
追加データダウンロードが設置されている理由は、ユーザーの任意のタイミングでWifiに接続された環境でデータをダウンロードできるようにしているのだと推測します。

f:id:appgameui:20240916181052p:image
クラウドのボタンをタップした後の画面

 

2-2:Steam版では、タイトル画面とゲーム内に「ゲームをやめる」コマンドを設置する

Steam版では、タイトル画面とゲーム内に「ゲームをやめる」コマンドが設置されていました。
iOSアプリであれば直接アプリを落としてゲームを終了させる方法が一般的なので、プラットフォームによる違いを感じました。

Steam版 iOS

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

f:id:appgameui:20240923222016p:image

▲タイトル画面の例

 

Steam版 iOS

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

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲Steam版は「タイトルに戻る」「ゲームをやめる」がある

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
iOS版はタイトル画面に戻る導線のみ

▲ゲーム内の例(システム画面)

 

3:プラットフォーム独自の情報を表示する

3-1:Steam版では、選択中の項目のキャプションを表示する

Steam版では、選択中の項目のキャプションを画面下部に表示しています。
iOS版では、キャプションが表示できない代わりに、メッセージをダイアログに表示する方法が採用されています。

キャプションを採用する場合はレイアウトに影響があるため、考慮漏れは避けたい要素だと感じました。

Steam版 iOS

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

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

f:id:appgameui:20240923225848p:image
f:id:appgameui:20241103222727p:image

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

▲システム画面>画面設定>明るさ設定

 

3-2:iOS版では、サポートIDを表示する

iOS版の場合、ゲーム内からサポートIDが確認できます。
Steam版の場合、Steamのアプリからサポートに繋がるため、このような違いがあるのだと推測します。

Steam版

iOS

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲Steam版の場合、サポートIDの項目がない

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
iOS版の場合、サポートIDが表示される

▲システム画面>その他

 

4:プラットフォームに合わせて、各種オプション項目を最適化する

「DQM3」ではプラットフォームによってオプション項目に違いがありました。
以下の2点を紹介します。

  1. 画質設定の最適化
  2. 表示設定の最適化

 

4-1:画質設定の最適化

画質設定画面では、Steam版はiOS版と比較して画面設定の項目が細かく編集できます。以下の項目はSteam版にのみ設定できる項目です。

アンチエイリアスの設定などはゲームによってはiOS版にもありそうですね。
あくまで「DQM3」の例として認識するのが良いかと考えます。

Steam版 iOS

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

  1. グラフィック品質
  2. アンチエイリアス
  3. フレームレート
  4. 垂直同期

f:id:appgameui:20240923230101p:image

  1. グラフィック品質

▲Steam版とiOS版の画質設定画面を比較した表

 

4-2:表示設定の最適化

Steam版ではスクリーンモードや解像度が設定できます
厳密にはプラットフォームではなくディスプレイによる違いですが、このような設定の有無もiOS版との大きな違いだと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲システム画面>画面設定>表示設定の各種設定項目

 

バイス対応

対応するデバイスによってUIにも違いが生まれています。今回は以下の5つに分類しました。

  1. バイスにあわせて、テキストを変更する
  2. バイスにあわせて、UIコンポーネントの位置を調整する
  3. バイスにあわせて、デザイン調整(グラフィック&レイアウト)
  4. バイスにあわせて、操作性のちがいを調整する
  5. バイスにあわせて、オプション項目を追加

 

1:デバイスにあわせて、テキストを変更する

1-1:Press Any Key ⇔ Touch Screen

「DQM3」の一部テキストはデバイスにあわせて適切に使い分けられていました。

例えばタイトル画面では、キーボード&マウス、コントローラーで操作する場合「Press Any Key」、タッチパネルで操作する場合「Touch Screen」と表示されていました。

バイスにあわせて適切な言葉を使うことで、ユーザーに違和感を与えることなくゲームが遊べるようになっています。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

 

f:id:appgameui:20240916181039p:image

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

▲タイトル画面での事例

 

1-2:各種ボタン名 ⇔ タップするアイコングラフィック

「DQM3」では宝箱をしらべたり、キャラクターに話しかける際、キーボード、コントローラー、タッチパネル、それぞれのデバイスで使用するボタンが異なります。結果的にヘルプに表示されるテキストにも違いが生まれます

「DQM3」のヘルプでは、使用するボタンやアイコンのグラフィックを表示していました

キーボード&マウス コントローラー タッチパネル

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲「Fキー」で調べたり…

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲「Yボタン」で調べたり…

 

f:id:appgameui:20240916140523p:image

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲アイコンをタップして調べたり…

▲各デバイスの用語を使った説明文になっている

2:デバイスにあわせて、UIコンポーネントの位置を調整する

2-1:アイテム獲得時のテキスト(画面中央下部に表示 ⇔ 画面左上に小さく表示)

「DQM3」では操作するデバイスによってアイテム獲得時のテキストの位置が異なります

キーボード&マウス、コントローラー操作時は、 テキストが画面中央下部に表示されます。タッチパネル操作時は画面左上に小さく表示されます。

キーボード&マウス コントローラー タッチパネル

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲画面下部に表示

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲画面下部に表示

f:id:appgameui:20240916085926p:image

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲画面左上に表示

▲アイテム獲得時のメッセージ

 

3:デバイスによって、ボタンの表示の有無に違いがある(画面下部にボタンガイドを表示するケース)

一般的なビデオゲームにおいて、何かしらのコマンドを実行する際、キーボードやコントローラーの場合は手元の物理ボタンを押し、タッチパネルの場合は画面に表示されているボタンを押す必要があります。

このように、操作するデバイスによって画面に表示する情報、優先度、見せ方が異なる場合があります。

ここでは「DQM3」のケースを以下の3つに分類します。

  • ボタンガイドを画面下部に表示するケース
  • ボタンガイドを画面内のボタンやアイコンの近くに表示するケース
  • ボタンガイドを適宜表示するケース
  • ボタンガイドを画面に表示しないケース

 

まずは「ボタンガイドを画面下部に表示する」ケースです。大まかな対応範囲の参考になれば幸いです。

  1. 「メニューコマンド」の実行方法
  2. 「ルーラコマンド」の実行方法
  3. 「地図」を表示する手段
  4. 「UIを非表示」にする手段
  5. 「カメラ位置をリセット」する手段
  6. 「倍速戦闘、おまかせ戦闘」のON/OFFを切り替える手段
  7. 「各種設定を初期値」にする手段
3-1:「メニューコマンド」の実行方法(ボタン操作 ⇔ アイコンタップ)

フィールド画面からメニュー画面に遷移したい場合、キーボード操作時はCキー、コントローラー操作時はXボタン、タッチパネル操作時は画面上のポーチアイコンをタップします。

どのデバイスでも常にボタンが表示されているため、導線は強めです。

キーボード&マウス コントローラー タッチパネル
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ f:id:appgameui:20240916181505p:image◆◆◆◆◆◆◆◆◆◆◆◆◆◆

▲メニューボタンの表示の有無を比較した表

 

3-2:「ルーラコマンド」の実行方法(ボタン操作 ⇔ アイコンタップ)

ルーラを実行したい場合、キーボード操作時はZキー、コントローラー操作時はLTボタン、タッチパネル操作時は画面上の翼がデザインされたアイコンをタップします。

どのデバイスでも常にボタンが表示されているため、導線は強めです。

キーボード&マウス

コントローラー

タッチパネル

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

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

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

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

f:id:appgameui:20240916181505p:image

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

▲ルーラコマンドの表示の有無を比較した表

 

3-3:「地図」を表示する手段(ボタン操作 ⇔ アイコンタップ)

地図を表示したい場合、キーボード操作時はXキー、コントローラー操作時はメニューボタン、タッチパネル操作時は画面上のボタンをタップします。

どのデバイスでも常にボタンが表示されているため、導線は強めです。

キーボード&マウス

コントローラー

タッチパネル

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

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

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

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

f:id:appgameui:20240916181505p:image

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

▲地図を開く手段を比較した表

 

3-4:「UIを非表示」にする手段(ボタン操作 ⇔ アイコンタップ)

ルーラを実行したい場合、キーボード操作時はPキー、コントローラー操作時はビューボタン、タッチパネル操作時は画面上のミニマップをタップします。

どのデバイスでも常にボタンが表示されているため、導線は強めです。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916181505p:image

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

▲UIを非表示にする手段を比較した表

 

3-5:「カメラ位置をリセット」する手段(ボタン操作 ⇔ アイコンタップ)

カメラの位置をリセットしたい場合、キーボード操作時はIキー、コントローラー操作時はRスティック押し込み、タッチパネルは画面上のカメラアイコンをタップします。

キーボード&マウス

コントローラー

タッチパネル

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

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

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

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

f:id:appgameui:20240916181505p:image

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

▲カメラ位置をリセットする手段を比較した表

 

3-6:「倍速戦闘、おまかせ戦闘」のON/OFFを切り替える手段(ボタン操作 ⇔ アイコンタップ)

倍速戦闘、おまかせ戦闘を切り替えたい場合、キーボード操作時はZキー及びCキー、コントローラー操作時はLTボタン及びRTボタン、タッチパネル操作時は画面上の倍速アイコン及びおまかせ戦闘アイコンをタップします。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

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

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

f:id:appgameui:20240916081722p:image

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

▲倍速戦闘、おまかせ戦闘を切り替える手段を比較した表

 

3-7:「各種設定を初期値」にする手段(ボタン操作 ⇔ アイコンタップ)

細かい部分では、 操作するデバイスによって各種設定を初期値に戻す手段も違いがありました。
各種設定を初期値にする場合、キーボード操作時はXキー、コントローラー操作時はXボタン、タッチパネル操作時は画面上の初期設定に戻すボタンをタップします。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240923230414p:image

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

▲設定を初期値に戻す手段を比較した表

 

4:バイスによって、ボタンの表示の有無に違いがある(画面内にボタンガイドを表示するケース)

次に「ボタンガイドを画面内のアイコンの近くに表示する」ケースです。

どのデバイスでも同じレイアウトにしたい場合、ボタンガイドをアイコンの近くに表示する方法もあります。「DQM3」では以下のような表示方法がありました。

  1. ボタンガイドを枠の中に表示する
  2. 枠のサイズを調整する
4-1:枠の中にアイコンを表示する

戦闘結果画面では、スキルの割り振りボタンの枠の中にボタンガイドが表示されていました。
ボタンの枠内に表示している理由は以下の要素が関係しているかと考えます。

  • ゲームをプレイしている上で、頻繁にアクセスする機能である
  • ダイアログで表示しており、画面下部に表示しにくかった
キーボード&マウス コントローラー タッチパネル

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

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

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

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

 

f:id:appgameui:20240916081714p:image

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

▲枠の中にボタンガイドを表示する見せ方

 

4-2:枠のサイズを調整する

枠の中にボタンガイドが入らないケースも考えられます。

「DQM3」のモンスターのお気に入りアイコンを見ると、キーボード及びコントローラー操作時は、タッチパネル操作時と比較してやや幅が広くなっていました。グラフィック同士が被らないように調整され、細部のこだわりがうかがえました。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

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

▲ボタンガイドをアイコンに隣接させる見せ方。アイコンの枠の幅を変えている

 

5:デバイスによって、ボタンの表示の有無に違いがある(適宜表示するケース)

続いて「ボタンガイドを適宜表示する」ケースです。

5-1:はなすコマンド(ボタン操作 ⇔ アイコンタップ)

キャラクターが話しかけたい相手に近づくと、キャラクターの近くにガイド及びアイコンが表示され、はなすコマンドが有効だと分かります。このように必要に応じて表示されるUIもあります。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916181505p:image

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

▲相手に近づくと「はなす」のUIが表示される

 

5-2:あけるコマンド(ボタン操作 ⇔ アイコンタップ)

キャラクターが未開封の宝箱に近づくと、あけるコマンドが表示されます。はなすコマンドと同じ挙動です。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916085913p:image

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

▲宝箱に近づくと「あける」のUIが表示される

 

6:デバイスによって、ボタンの表示の有無に違いがある(表示しないケース)

最後に「ボタンガイドを表示しない」ケースです。画面内にコマンドのボタンガイドが表示されないため、ユーザーは操作を覚えている必要があります。

 

6-1:「戻る」の表示(ボタン操作 ⇔ アイコンタップ)

「DQM3」ではキーボード、コントローラー操作時は戻るのボタンを表示せず、タッチパネル操作時には戻るボタンを表示していました。
決定、キャンセル、コマンド選択時のカーソル入力など、基本操作のボタンガイドは表示されていませんでした。このような見せ方は他のゲームでもよく見かけるかと思います。

キーボード&マウス コントローラー タッチパネル

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

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲ボタンガイドがない

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

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

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

▲ボタンガイドがない

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

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

▲戻るボタンの表示の有無を比較した表

 

7:デバイスにあわせて、操作性のちがいを調整する

バイスによっては、ゲームの操作性に違いが生まれるケースがあります。

例えば、タッチパネルだとスワイプ操作ができますが、コントローラーではスワイプ操作はできません。このように、バイス固有の操作を採用している場合、他のデバイスではどのような操作に置き換えるか考える必要があります。
以下に「DQM3」での事例を紹介します。

7-1:スクロール操作(キー操作 ⇔ スティック操作 ⇔ スワイプ操作)

「DQM3」のマップ画面では、マップ拡大時のみマップのスクロールができます。

スクロールする方法はキーボードはキー入力、コントローラーはLスティック操作、タッチパネルはスワイプ操作です。

キーボード操作はスクロールする軸が4方向に限られますが、スティック操作は無制限であるため、より滑らかにマップを動かせます。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916181528p:image

▲スクロールする方法を比較した表

 

7-2:ズーム【段階】(キー操作 ⇔ スティック操作 ⇔ 拡縮ボタンタップ)

「DQM3」ではマップをズームすることができます。
キーボード操作時はQまたはLキー、コントローラー操作時はRスティック、タッチパネル操作時は拡大、縮小の2段階を切り替えるボタンをタップします。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916181521p:image

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

▲ズームする方法を比較した表

 

7-3:ズーム【無段階】(キー操作 ⇔ スティック操作 ⇔ ゲージ操作)

「DQM3」ではモンスターの3Dモデルを拡大表示できます。
キーボード操作時はQまたはLキー、コントローラー操作時はRスティック、タッチパネル操作時はスライダーを操作します。タッチパネル操作時のみ瞬時にズームができます。ちなみに、キーボード操作であってもズームしながら回転はできませんでした。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

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

▲モンスターの3Dモデルのズームしたときの見た目を比較した表

 

7-4:3Dモデルの回転(キー操作 ⇔ スティック操作 ⇔ スワイプ)

「DQM3」ではモンスターの3Dモデルを回転することができます。
キーボード操作時はKまたは:キー、コントローラー操作時はRスティック、タッチパネル操作時は画面をスワイプします。

比較して気付いたのですが、スワイプでモデルを回転させると加速度がついています。
このようにデバイスによって若干挙動が異なる場合もあるようです。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

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

▲モンスターの3Dモデルを回転させたときの見た目を比較した表

 

7-5:タブ切り替え(ボタンでタブ切り替え ⇔ スワイプ操作でタブ切り替え)

「DQM3」ではタブを切り替える際、キーボード操作時はQまたはEキー、コントローラー操作時はLまたはRボタン、タッチパネル操作時は画面をスワイプまたは矢印ボタンをタップします。

また、左右矢印の有無や大きさなど、他のUIコンポーネントにも影響があります。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916081336p:image

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

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

▲タブ切り替えを比較した表

 

7-6:ページ送り(ボタンでページ切り替え ⇔ スワイプ操作でページ切り替え)

「DQM3」ではページ送りをする際、キーボード操作時はQまたはEキー、コントローラー操作時はLまたはRボタン、タッチパネル操作時は画面をスワイプまたは矢印ボタンをタップします。基本的にはタブと同じ見た目と挙動です。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

f:id:appgameui:20240916181130p:image

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

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

▲ページ送りを比較した表。タブと同じ挙動。

 

7-7:モンスター切り替え(左右キーでキャラ切り替え ⇔ スワイプ操作でキャラ切り替え)

「DQM3」ではモンスターの切り替え操作を行う際、キーボード操作時は左右キー、コントローラー操作時は左右キー、タッチパネル操作時は画面をスワイプまたは矢印ボタンをタップします。

タッチパネルの場合、キーボード&マウス操作時、コントローラー操作時と比較して、矢印のアイコンが大きく表示され、タッチしやすい見せ方になっています。

キーボード&マウス コントローラー タッチパネル

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

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

▲←、→キーで切り替え

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲左右キーで切り替え

f:id:appgameui:20240916081418p:image

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲スワイプ操作で切り替え

▲モンスター切り替え時の見せ方を比較した表。矢印のアイコンの見た目にも違いがある

 

7-8:モンスター入れ替え(ボタン選択 ⇔ ドラッグ操作)

モンスター入れ替え時の操作方法にもデバイスならではの特徴がありました。

キーボード&マウス、コントローラー操作時は入れ替え元を選択し、入れ替え後を指定する方法が採用されています。タッチパネル操作時はドラッグ&ドロップで入れ替えられます。

バイスに合わせて直感的な操作方法を採用しようとする意志が感じられました。

キーボード&マウス コントローラー タッチパネル

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

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

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

▲タッチパネルはドラッグ&ドロップで入れ替えできる

 

7-9:キャラクター移動(キー入力 ⇔ バーチャルパッド操作)

キャラクターを移動させる場合、キーボードはWASDキー、コントローラーは方向キー、タッチパネルはバーチャルパッドを操作します。
タッチパネルのみ、バーチャルパッドを表示するデザインです。

バーチャルパッドを表示しなくても操作はできますが、バーチャルパッドを表示することでユーザーが操作する手掛かりや切っ掛けに繋がっていると考えます。いわゆるアフォーダンスとしての機能があるのかもしれません。

キーボード&マウス コントローラー タッチパネル
◆◆◆◆◆◆◆◆◆◆◆◆◆◆ ◆◆◆◆◆◆◆◆◆◆◆◆◆◆

f:id:appgameui:20240916081303p:image

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

▲タッチパネル操作時のみバーチャルパッドのUIが表示される

 

8:デバイスによって、選択肢を選ぶ際の見せ方を変える

8-1:はい/いいえ選択時

ドラゴンクエストでおなじみの「はい/いいえ」のUIもデバイスによって見せ方に違いがありました。

タッチパネル操作時は選択肢を左右に並べ、誤タップしにくい見せ方が採用され、キーボード&マウス、コントローラー操作時は選択肢を上下に並べるレガシーな見せ方が採用されています。

キーボード&マウス コントローラー タッチパネル

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲レガシーな見せ方

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

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

f:id:appgameui:20240916090007p:image

f:id:appgameui:20240916090010p:image

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲押しやすく左右に並べるデザイン

▲デバイスによる選択肢の見せ方を比較した表

 

9:デバイスによって、長押し時のゲージデザインを変える

9-1:長押し時のゲージデザインを変える

一部、長押し時に表示されるゲージデザインにも違いがありました。

イベントスキップなどのUIコンポーネントは、キーボード、コントローラー操作時はリングゲージ、タッチパネル操作時は横長のゲージが採用されています。この違いは指でゲージが隠れるかどうかだと考えます。

タッチパネル操作時にリングゲージを採用するとゲージが指で隠れます。横長のゲージを採用することでゲージが指で隠れなくなります。
反対にキーボード、コントローラー操作時はゲージが指で隠れる心配がないため、コンパクトなリングゲージが採用されているのだと推測します。

キーボード&マウス コントローラー タッチパネル

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

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲指で隠れないので、リングゲージが採用

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

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

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

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

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

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲指で隠れるので、横長のゲージが採用

▲デバイスによる長押し時のゲージデザインを比較した表

 

10:デバイスにあわせて、固有の状態を用意する

10-1:hover状態を用意する

バイスによって選択状態に違いがある場合があります。
「DQM3」の場合、キーボード&マウス、コントローラー操作時にはhover状態があり、タッチパネル操作時にはhover状態がありません。

キーボード&マウス コントローラー タッチパネル

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

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

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

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

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

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

f:id:appgameui:20241110222946p:image

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

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

▲hover状態の有無を比較した表

 

11:デバイスにあわせて、オプション項目を追加する

11-1:キーボード&マウス、コントローラーでは、キーコンフィグができる

「DQM3」では、キーボード&マウス、コントローラー操作時はキーコンフィグ機能が追加されていました。コントローラーよりもキーボードの方がボタンの数が多く、割り当て可能なコマンドも多いです。結果的に、キーボードのキーコンフィグの方が情報量が多い見た目になります。

以下の表の中にデバイスごとに設定できるキーを記載しました。灰色の文字はキーボードにしかないキーコンフィグです。

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

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

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

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

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

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

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

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

システム

  • 決定/しらべる/はなす
  • キャンセル/戻る
  • カーソル移動 上
  • カーソル移動 下
  • カーソル移動 左
  • カーソル移動 右

基本操作

  • 移動 前
  • 移動 後
  • 移動 左
  • 移動 右
  • ジャンプ
  • カメラ回転 上
  • カメラ回転 下
  • カメラ回転 左
  • カメラ回転 右
  • カメラリセット
  • キャラクター回転左
  • キャラクター回転右
  • 地図を開く
  • ルーラ画面を開く
  • メインメニューを開く
  • いれかえ画面を開く
  • 道具画面を開く
  • アクセサリー画面を開く
  • 作戦画面を開く
  • AI特技画面を開く
  • スキルわりふり画面を開く
  • ほぼまんたんを実行
  • 画面情報OFF

戦闘

  • おまかせ戦闘
  • 戦闘スピードアップ

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

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

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

基本操作

  • しらべる/はなす
  • ジャンプ
  • キャラクター回転 左
  • キャラクター回転 右
  • カメラリセット
  • 地図を開く
  • メインメニューを開く
  • 画面情報OFF

▲コンフィグ画面の項目を比較した表

 

 

以上です。
モバイルとPCのUIの違いについて知りたい方の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する画像の転載・配布は禁止いたします。
© ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX

 


権利者さまへ

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

ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅」のガイドラインを確認したところ、プレイ画像の投稿が可能な旨が書かれていました。

主な参照箇所を抜粋します。

  • 【利用範囲】
    • 本ゲームのプレイ動画(ゲーム内のBGMを含みます。以下同じ)を非商用使用の目的で、「YouTube」「ニコニコ動画」等の一般社団法人日本音楽著作権協会JASRAC)と音楽に関する利用許諾契約締結済の動画共有サイト(以下「許諾動画共有サイト」という)に配信すること。(この配信などにリンクすることを含みます)。
    • 本ゲームのプレイ画像 及び前記の配信動画のURLやサムネイルを非商用使用の目的で、個人(法人は含まれません)のブログやX(旧:ツイッター)などのミニブログで利用すること。
    【利用条件】
    • 画像・動画(以下「動画等」といいます)の掲載・配信に際して、以下の著作権表記をしてください。
      画像利用の場合:
      このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する画像の転載・配布は禁止いたします。
      © ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX

『ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅』動画・生配信・画像投稿に関するガイドライン | ドラクエ・パラダイス(ドラパラ)ドラゴンクエスト公式サイト | SQUARE ENIX

ドラゴンクエストモンスターズ3のコンテンツ利用ガイドラインです。2023年11月30日更新版です

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

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

 

お問い合わせ