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

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

「三國志 覇道」画面右側に見出しがあるヘルプ画面。視線の流れだけではなく、指の動きを意識したデザイン!

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

 

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

 

今回は「三國志 覇道」のヘルプ画面のレイアウトについて紹介します!

 

該当の画面はこちらです!
画面右側に見出しがあるのが特徴のデザインになっています。

f:id:appgameui:20210823095131p:image

 


ここですね。
多くのアプリは視線の流れを考慮して画面左側に見出しがあります。
この「視線の流れ」とは文字を左から読むことが関係しています。
なので、日本語の場合は左から右に視線が流れることが自然です。

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

 

 

例えば「アークナイツ」のオプション画面の見出しは左側に配置されています。

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

 

 

「パニシング:グレイレイヴン」のお知らせ画面も画面左側に見出しがあります。

f:id:appgameui:20210503183415p:image

 

 

このようにデザインされているアプリが多い中、
三國志 覇道」のデザインは視線の流れよりも操作性を重視したデザインだと考えられます。

少し補足します。

 

基本的には「三國志 覇道」の画面レイアウトの思想は、画面の右側に押させたいボタンを配置させています。この設計思想自体は一般的な設計思想です。

f:id:appgameui:20210823095131p:image

 

 

ホーム画面とも言える内政画面でも、画面右側にメインのコマンド類を集中して配置しています。

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

 

 

 

こんな感じですね。

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

 

 

ヘルプ画面はこの内政画面にあるメニューボタンから遷移することができます。
アニメーションで見るとこんな感じで遷移します。

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

 

ここでもメニューからヘルプ画面に行くまで、画面右側にボタンが集中していることが分かります。
そういった文脈のデザインのため、視線の流れよりも指の運びを意識したデザインだと考えられます。

 

途中でヘルプの種類を選択するダイアログが表示されますが、これは開発後期に仕様追加があったのかもしれません…。

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

 

以上です。

三國志 覇道」のヘルプ画面を見ると、ボタンの配置を考える際に視線の流れだけではなく、指の位置を優先するケースもあるのだな、と感じました。

押しやすさも忘れないようにしたいところですね。

 

横画面の場合、両手で操作していることがほとんどかと思います。
画面単位でデザインをしているだけだと、全体を通した時の操作性に関しての意識が薄れることもあるかもしれません。

定期的に操作しながらデザインを進めるようにしたいなと思いました。

 

見出しの位置を検討する際の参考になれば幸いです。