こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ヘブンバーンズレッド」、（以下、ヘブバン）から部隊画面のデザインを紹介します。
主な特徴は以下です！
キャラクターの名前がサムネイルの中央に表示されている
「ヘブバン」の部隊編成画面は、短冊型のキャラクターのサムネイルが横に６つ並んでいます。
短冊の上半分にキャラの顔が映り、下半分にボタンやステータスの情報が表示されています。
この部分だけ見ると、構成としてはよくある型ではあると思うのですが、キャラクターの名前がサムネイルの中央に配置されているのが面白いと感じました。
基本的なデザインの考え方に「近接」というものがあります。
これは「同じグループに属するものは近くに置くと関連性が増す」といった意味が含まれます。
キャラクターの名前を中央に表示することで、キャラのグラフィックとステータスの情報の両方に関係性を持たせるデザインになっていると感じました。
「ヘブバン」は基本的には引き算のデザインで構成されているため、キャラクターの名前が非常に重要な要素であると印象付けているようにも感じました。
レベルアップボタンがサムネの上に表示されている
キャラクターのレベルアップのボタンがサムネの上に乗っているのも特徴的なデザインのひとつかなと思います。
レベルアップのボタンは、ついキャラクターのサムネイルの外に置きたいと思いがちですが、サムネイルの中に置くことで画面全体がすっきりして見えることを知りました。
遷移せずにサブコマンドが表示されている、ドロワーのような挙動になっています。
ボタンの形状や挙動が独自のルールになっていますが、触っている感じ、使いづらいということはありません。
また、運用するにつれ複雑になりがちなキャラクターの強化コマンドに対して、拡張性を担保しているようにも感じました。
この時に気を付けたいのは、ただレベルアップボタンをサムネイルの中に配置すれば良い、ということではありません。
レベルとボタンを線で繋ぐことで、関連性を増していることも重要な工夫のひとつです。このような小さな工夫が無いと、ただ配置しただけになり、必然性が弱まってしまうため注意したいところです。
画面の端のサムネイルのメニューは画面外に飛び出さないように位置調整されている
下位階層の各種コマンドはサムネイルの右側に展開されるため、画面右端のキャラの場合、サムネイルとサブコマンドが大きく被ります。
そのため、サムネイルの位置によってサブコマンドの位置を個別に調整しています。こちらはサムネイルとサブコマンドの位置関係を分かりやすく示したgifです。
一見して見栄えが心配になるかもしれませんが、この操作をしている時はキャラのグラフィックよりも、どのコマンドを選択するか、という方に意識が向いているため、個人的にはあまり気になりません。
位置の不統一についても、操作性や認知の低下になるような配置にはなっていないように思えます。ゲームUIの場合、時にはこのような柔軟なデザインを選択することもできるのだな、と勉強になりました。
以上です。
パーティ編成画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。
個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿（ストリーミング配信を含むものとし、以下同様とします。）するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
