こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からメニューのデザインをご紹介します。
ビジュアルに特徴のあるメニューだったので、見せ方を模索したいときのアイディアの参考になれば幸いです。
以下、目次です。
放射状に配置したボタン
「レスレリ」のメニューの特徴として、各メニューアイコンが放射状に配置されている点があげられます。星座を模したようなきれいな見た目になっていると感じます。
▲「レスレリ」のメニュー画面
関連の強いアイコンは線で結ばれており、グルーピングもされています。
強調された調合ボタン
斬新な見た目に隠れがちですが、情報の優劣もしっかりと設けられています。
この画面で最も強調されている「調合」ボタンを例に挙げて記載します。
「調合」のボタンは以下の２つの要素を使って強調しています。
- 「レイアウト」による強調
- 「色相」による強調
▲メニュー画面
▲調合ボタン
少し補足します。
まずは「レイアウト」に注目して説明します。
「調合」の導線が目立つように以下のようなレイアウトの工夫がされていると感じました。
- 調合ボタンの周囲に余白を設けている
- 各ボタンを放射状に配置し、その中心点に調合ボタンが配置されている
- メニューを開閉する際に注視しがちな開閉ボタンの近くに調合ボタンを配置している
続いて「色相」に注目して説明します。
- ボタンの色は薄い黄色で統一されている中で、調合ボタンだけは青や紫の宝石が輝くような色が使われている
- 強調に使用している色は、ホーム画面でストーリーのボタンに使われている色と同じであり、一貫性が保たれている
▲ホーム画面にあるストーリーのボタン
このように「レスレリ」のメニュー画面を見ると、主にレイアウトや色相面で視線誘導や心理効果を利用し、情報の優劣がなされていると感じました。
フィッツの法則と視線誘導を考慮したレイアウト
「レスレリ」のメニューアイコンは一見すると独特な配置にも見えますが、マウス操作、タップ操作を考慮し、使い勝手にも意識している様子が伺えます。
具体的には以下の２点です。
- メニューの開閉ボタンの位置がマウスカーソルや指の位置を考慮されている
- ホームに戻るボタンの位置が右親指のホームポジションになっている
▲開閉アニメーション
これはいわゆる「フィッツの法則」にあたると考えます。
マウスカーソルの位置や指の位置が「閉じる」や「ホームに戻る」の距離が遠いと操作するまでの時間が短くなり、操作性が良いと感じます。
▲メニュー画面
また、画面端に配置することで「エッジ効果」も期待できます。
https://www.miyashita.com/researches/7uCmA7nGlJfg6bWgXz2O5T/assets/画面角と画面端のターゲット配置が操作時間に与える影響.pdf
によると、マウス操作時において、17インチのディスプレイに対して、0.94インチ以上なら画面端、以下なら画面の隅にあると、操作時間が短くなる旨が書かれています。
以上です。
メニュー画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見ていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」のガイドラインを確認したところ、以下の記載がありました。
株式会社コーエーテクモゲームス（以下「当社」といいます）の、配信対象ゲーム（以下「当社ゲーム」という）の動画・画像を、SNS等の動画配信サイト（以下「動画配信サイト」という）へ投稿すること（生配信を含みます。以下「投稿」という）について、個人のお客様に限り、以下に定めるガイドライン（以下「ガイドライン」という）に従うことを条件として、当社ゲームの動画・画像の投稿ができます。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
