こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からフィールドマップのアイコンのデザインを紹介します。
主な特徴は以下です！
- シンプルな見た目でも優先度付けをされたデザイン
- 「ホーム」ボタンの枠線は強調されているだけではなく、矢印が取り入れられている
- 見せ方が綺麗な「次の時間へ」アイコン
- ８等分にデフォルメされた時計アイコン
- アイコンのサイズは大きくても文字のサイズは同じ
こちらが「ヘブバン」のフィールド画面です。
画面下部の左右にメインコマンドのボタンが配置されています。
シンプルな見た目でも優先度付けをされたデザイン
主なボタン群は５つです。
画面左から順に以下のように並んでいます。
- メニュー
- ガチャ
- ミッション
- 次の時間へ
- ホーム
どのボタンのアイコンもゲームの世界観に寄せたデザインになっています。
基本的にはどれもシンプルな見た目をしていますが、そのシンプルな見た目の中でもしっかりと優先度付けを行っている点が興味深いと感じました。
例えば、画面右に配置されている「次の時間へ」「ホーム」など優先度が高いボタンは、ボタンの縁を若干太くし、装飾も加えるなどして見た目を強調しています。
▲優先度の高いボタンは押しやすい位置に配置される
「ホーム」ボタンの枠線は強調されているだけではなく、矢印が取り入れられている
また、「ホーム」のボタンの枠線はリサイクルマークのような矢印で囲まれている点にも注目しました。
ホーム画面では過去のシナリオをプレイしたり、過去にいる場合は未来に戻ることもあります。現実の世界と異なり、時間が一方向に流れていません。
そういった意味で、進むようにも見え、戻るようにも見える矢印のデザインが採用されているのかもしれません。
見せ方が綺麗な「次の時間へ」アイコン
「次の時間へ」のアイコンも好きです。
アイコンには時計のデザインが採用されています。
見た目で言えば、針が極端に強調されたデフォルメが特徴的です。
ぱっと見て、時計が描かれていることがハッキリと伝わります。
他にも、矢印が取り入れられている点が面白いデフォルメとして挙げられます。
アイコンの時計の針は９時を指しています。
９時にすると直線で構成されたデザインになり、安定した見た目になります。
単に時間を示すアイコンであればこれでも十分だったと思うのですが、今回は次の時間に進むコマンドであるため、時計の円周と矢印を重ね「次の時間に進む」という動きが取り入れられています。
情報量が増えているにも関わらず、シンプルな見た目を維持できている点が好きです。
やや余談ですが、通常矢印の先端には視線が集中しますが、矢印の先端を文字の近くに置き、矢印と文字とで視線が散らないように工夫されているようにも見えました。
８等分にデフォルメされた時計アイコン
僅かに見せている時計の目盛りにも注目です。
時計のアイコンをよく見ると、目盛りの数が間引かれ、通常の時計より少ない分割のデザインになっています。
▲8等分された時計
現実にはあまり見ないデザインですが、ゲームをプレイしている上では違和感に感じることは少ないのかなと思います。
アイコンをデザインする際、印象的な特徴を残して優先度の低い情報を間引くことがありますが、面白い省略の仕方だと感じました。
アイコンのサイズは大きくても文字のサイズは同じ
最後に、画面左のボタン群にも触れておきます。
左から順に「メニュー」「ガチャ」「ミッション」の順で並んでいます。
中でも頻繁に使う「メニュー」ボタンがやや大きくデザインされています。
恐らくこれは、メニューの中には、キャラクターのステータス確認、編成、育成など、ゲームを進行するにあたって重要な機能が多く含まれていることが関係していると考えます。
頻繁に使う機能であるため、画面左端に寄せ、大きく表示し、押しやすいデザインになっています。
また、ボタンのサイズは大きくなっていますが、文字の大きさは変えていません。
これは「メニューボタンをどの程度強調するか」という話かと思います。
文字サイズを変えることで、賑やかな見た目になったり、視線誘導が強化されることが考えられます。
「ヘブバン」では、そこまで強いメリハリは必要ないという判断だったのかもしれません。
以上です。
シンプルなボタンの情報の優劣、情報の取捨選択を考慮したデザインをする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。
個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿（ストリーミング配信を含むものとし、以下同様とします。）するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
