こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ブレイクマイケース」（以下「ブレマイ」）からメインコマンドにアクセスしやすいメニューのデザインをご紹介します。メインコマンドに対するアクセシビリティが高いデザインだと感じました。
以下、目次です。
メインコマンドにアクセスしやすいメニュー
「ブレマイ」のメニュー画面は下図のようなデザインです。
右下に表示されている「PUZZLE」がメインコマンドです。
▲右下の「PUZZLE」がメインコマンド
ホーム画面からのメニューを開くアニメーションを見るとこんな感じです。
▲メニューの開閉アニメーション
このように、メニューを開いてもホーム画面で表示されているフッターや「PUZZLE」などのメインコマンドの導線が表示されたデザインです。
メニューを開いた状態でも、メインコマンドである「PUZZLE」にアクセスしやすいため、スタミナの消費をはじめ、主なコマンドを行う際の手数が抑えられていると感じました。
レイアウトが同じだから分かりやすい
ただメインコマンドの導線を配置すれば良いわけではなさそうです。
「ブレマイ」のメニューを見ると、メインコマンドの位置はホーム画面と同じ位置に配置されています。
同じ位置に配置されているため、学習コストがなく、操作性のしやすさも変わりません。
▲メニューの開閉前後でメインコマンドの位置は変わらない
ボタンの色や形状で情報の優劣をつける
ここからは基本的なUIデザインの話になります。
改めて「ブレマイ」のメニューを見ると、ボタンの色や形状で情報の優劣を付けていることが分かります。
ざっくり以下の４点が主な特徴だと感じました。
- 左上の「ショップ」だけがオレンジ色で、目を引く配色になっている
- 「アカウント管理」「ヘルプ」など下段のボタンは背景になじむ色で目立ちにくい配色になっている
- 右上の「CLOSE」「HOME」はアイコンのみの表示になっているだけではなく、英語のラベルが採用されている。目が留まらないように工夫している（読めると視線が誘導されてしまう）
- 「PUZZLE」が最も面積が広く、押しやすい位置にあるため、優先度の高い情報だと推測できる
▲情報の優劣をつけたメニュー
やや余談ですが、メニューを開いている間は「PUZZLE」のアニメーションを止めています。アニメーションしたままだと必要以上に視線を集中させてしまうのかもしれません。
▲メニューを開いている間は「PUZZLE」のアニメーションは止まっている
右端に寄せているから片手で操作しやすい
「ブレマイ」のメニューは画面右端に寄せて表示されているため、右手で操作しやすいデザインです。真ん中に表示させると両手で操作する必要があるため、片手で操作しやすいデザインを意識するのは重要だと考えます。
常に両手で操作するようなゲームは別ですが、端末の大型化に伴い画面端に寄せるメニューが増えてきた印象です。
▲右端に寄せて片手でも操作しやすいメニュー
背景をぼかしてメニューが際立っている
メニューを目立たせるために背景をぼかし、彩度や明度を下げている点にも注目です。
ここで目立たせるべきはメニューなので、メニュー以外の情報に視線が向かないように工夫しているのだと感じました。
▲背景の情報量を落としてメニューに視線が行きやすくなっている
以上です。
メインコマンドにアクセスしやすく、シンプルなメニューをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
当ページは株式会社coly「ブレイクマイケース」の画像を利用しております。該当画像の転載・配布等は禁止しております。
©coly
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ブレイクマイケース」のガイドラインを確認したところ、公式HPにて、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。
主な参照箇所を抜粋します。
1）画像について
すべてにおいて当社もしくはゲーム公式と詐称しての活動や投稿、作品やキャラクターのイメージを著しく損なう行為はご遠慮ください。 当ゲームを題材としてウェブサイトの公開をされる場合や公式の情報を出す際には必ず下記のようにコピーライトの明記をお願いいたします。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
