こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ブレイクマイケース」（以下「ブレマイ」）からリザルト画面の特徴を紹介します。各パーツのアニメーションを利用して、視線の誘導をしつつ、何が起きているのか分かりやすく見せる工夫などがされていると感じました。
以下、目次です。
左上から右下に視線誘導するデザイン
「ブレマイ」のリザルト画面は、画面左上から右下に視線を誘導するデザインです。
情報を一度に表示せず「段階的開示」を利用することで、何を表示しているのか理解しやすいデザインだと感じました。
▲左上から順番に情報が表示される
ちなみに表示されている情報は以下の順番です。
興味深いのはランク表示のアニメーションの途中からスコア表示演出が始まる点です。
あらかじめランクのシルエットが薄っすらと見えているため、演出が終わりきる前に予測できるデザインになっています。
ゆえに、演出の終了を待たずに次の演出が始まってもユーザーは理解に困ることはなさそうです。
▲うっすらとシルエットが表示されている
文脈をもう少し補足します。
ランクはパズルプレイ中にも表示されているため、リザルト画面の時点で既にユーザーは現在のランクを把握できます。
つまりリザルト画面のランクは読ませる文字情報ではなく、見せる文字情報として扱っても差し支えないのかもしれません。
このような文脈から、ランク表示演出とスコア表示演出のタイミングが一部被っても、ユーザーが情報を読み取れないというような不利益は生じにくいと考えます。
▲パズルプレイ中にランクが表示されている
情報の優先度に沿った、文字の大きさと表示する順番
リザルト画面に表示されている文字情報に注目してみると、ランクのアルファベットが最も大きく、次にスコア表示が大きいデザインです。
文字の大きさの順番と視線の流れの順番が一致しているため、情報の優先度に沿った形でデザインされているのかな、と感じました。
▲文字の大きさと表示される順番が一致している
ゲームを進めるために必要なボタンは目立つ上に押しやすい配置
リザルト画面では、「次へ」のボタンが最も大きく、押しやすい位置にあるボタンです。表示位置も視線が誘導された先にあり、気づきやすさにも最大限の配慮をしています。
ユーザーもゲームを進めるために「次へ」を押す必要があるため、スムーズなゲーム進行を手助けしていると感じました。
▲目立つ上に押しやすいデザイン
以上です。
テンポの良いリザルト画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
当ページは株式会社coly「ブレイクマイケース」の画像を利用しております。該当画像の転載・配布等は禁止しております。
©coly
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ブレイクマイケース」のガイドラインを確認したところ、公式HPにて、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。
主な参照箇所を抜粋します。
1）画像について
すべてにおいて当社もしくはゲーム公式と詐称しての活動や投稿、作品やキャラクターのイメージを著しく損なう行為はご遠慮ください。 当ゲームを題材としてウェブサイトの公開をされる場合や公式の情報を出す際には必ず下記のようにコピーライトの明記をお願いいたします。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
