こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「崩壊3rd」から、２列のリストの時の報酬受け取りボタンの配置をご紹介します。
１列のレイアウトは多く見かけるのですが、２列はあまり見ないかも。
該当の画面はこちらです。
リストの最上部、右側が受け取りボタンになっています。
それ以外のボタンはミッションを達成するための導線になっています。
この画面でのユーザーの行動の優先順位は、ミッションを達成するための遷移よりも、まずは報酬を受け取ることだと考えられます。
指の位置を考慮した、押しやすいボタン配置になっていると感じました。
アニメーションで見るとこんな感じです。
配置だけではなく、ボタンを光らせるアニメーションも付けて、視線も誘導しています。
アニメーションしている部分が分かりやすいように大きくしました。
「受領」のボタンが緩やかに明滅しています。
人間は止まっているものよりも動いているものに注目する習性があるため、このようにアニメーションを付けているのかなと考えます。
アニメーションを付与することは、ボタンのデザインはそのままにしつつ、情報の優先度を高めたいときの手法の選択肢のひとつかな、と思います。
以上です。
２列のリストをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「崩壊3rd」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。
ネットワークサービスにおける著作物の利用に関するガイドライン
主な参照箇所を抜粋します。
個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画（以下「本著作物」といいます。）を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿（実況を含む）し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。
以下は確認したガイドラインページのキャプチャです。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
