こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ヘブンバーンズレッド」、（以下、ヘブバン）からADVパートの選択肢のレイアウトを紹介します。
主な特徴は以下です！
何をしている画面か一目瞭然
今回紹介する「ヘブバン」のADV中の選択肢を選ばせる画面の凄いところは、何をしている画面か一見して分かるところだと思います。
主に以下の３点によって直感的な理解に繋がっていると感じます。
- キャラクターが考えていることが一目で伝わるグラフィック
- 誰の思考かわかるグラフィック
- 心の中で考えていること、と分かるような選択肢の枠デザイン
選択肢を表示するだけのゲームも多いですが、より分かりやすい表現を模索しているようにも感じました。
丸いパーツで心情描写を表現
選択肢の枠をよく見ると、白い丸でキャラクターと選択肢の間が関連付けられていることが分かります。
漫画ではキャラクターの心情を表現する際に、吹き出しとキャラクターを丸で繋ぐことがあります。そういった表現を見慣れているユーザーにとっては、この吹き出しがキャラクターの心情であることが、より直感的に理解しやすいデザインになっているようにも感じました。
選択肢は右手で押しやすい位置に配置し、操作する指を自然に誘導
選択肢のレイアウトにも注目したいと思います。
「ヘブバン」では以下の点において、選択肢を右手で押させようと自然に誘導していように感じました。
- ボタンが画面右に寄っており、右手の指から近い
- 左手で押そうとするとキャラの表情や文字が指で隠れてしまうため、直感的に不便と感じる
横画面の場合、左右の指のどちらでも選択肢が選びやすいようにデザインされがちですが、全くの五分ではありません。ゲーム全体を俯瞰してみた場合、どちらかというと右手での操作を多数派と想定してデザインすることが一般的です。
「ヘブバン」でも、ゲーム全体を俯瞰して見た場合、どちらかと言えば右手操作を優先してデザインしているように見えます。
そのため、選択肢を選ぶ画面でも操作する指を誘導することで、一瞬でもユーザーを迷わせないように工夫しているように感じました。
コンシューマだとこのようなレイアウトにはなりません。プラットフォームに合わせて最適化を図ったレイアウトです。
選択肢の文字は画面中央に表示し、目に留まりやすい
選択肢の文字の表示位置にも注目してみたいと思います。
選択肢の枠は画面右に寄っていますが、表示されている文字自体はほぼ画面中央に表示されています。
ADVプレイ中のユーザーの視線は、キャラクターが表示される画面中央か、テキストが表示される下部に集中すると推測します。
仮に選択肢の枠と同様に文字も画面右側に寄せてしまうと、会話中にやや視線が散らかる画面になることが懸念されます。
そのため、文字の読みやすさ、視線の動きを意識したデザインだと感じました。
以上です。
ADVパートの選択肢を選ぶ画面の見た目をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
©WFS Developed by WRIGHT FLYER STUDIOS ©VISUAL ARTS/Key
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ヘブンバーンズレッド」のガイドラインを確認したところ、以下の記載がありました。
個人または法人格のない団体は、「YouTube」「ニコニコ動画」等の動画投稿サイトや「Twitter」「Instagram」「Facebook」等のSNSに投稿（ストリーミング配信を含むものとし、以下同様とします。）するにあたり以下の事項をすべてご確認いただき、ご同意いただいた場合に限り投稿および収益化プログラムシステムによる収益化が可能です。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
