こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、スクロールバーのアニメーションをご紹介します。
ちょっとしたアニメーションでマイクロインタラクションに該当すると思います。
このデザインにより、以下の特徴があるように感じました。
- 存在が認識しやすい（視認性の向上）
- 掴めていることが直感的に理解できる（認知コストが下がる）
該当の画面はこちらです。
利用規約画面を例にしていますが、紹介したいのはスクロールバーの挙動です。
アニメーションで見るとこんな感じです。
小さいですね！
分かりやすいように大きくしました。
スクロールバーの挙動に注目してください。
スクロールバーを掴んだ場合、スクロールバーが少し大きくなります。
もちろんスクロールバーを掴まないでスクロールすることもできます。
このような演出は最近では「マイクロインタラクション」と呼ばれることがあります。
トライムラボラトリー内の記事ではマイクロインタラクションについて以下のように説明されていました。
マイクロインタラクションが使用される目的は、ユーザーのアクションに対して、システム側のステータスの変化を伝える（フィードバックする）ことや、正しい操作を促して目的の箇所に誘導する、あるいは特徴的なアニメーションを使用することによるブランディング効果を狙うなど多岐に渡ります。
https://try-m.co.jp/labo/2020/01/31/micro-interaction/
個人的な実感としても概ね同意です。
ブランディング効果については、ゲームの場合は世界観の特徴付けという表現の方がより適切かも知れません。
画面内の情報量が多く、常に色々と動いているようなゲームの場合はマイクロインタラクションも効果的にはたらきにくいかもしれませんが「NieR Re[in]carnation / ニーア リィンカーネーション」のような静かなゲームの場合は画面にメリハリが生まれ、相性が良いように感じます。
1：存在が認識しやすい
掴んでいる時だけ大きくすることで、現在のスクロール位置が分かりやすくなるように感じました。
ゲームのスクロールバーは徐々に存在やサイズが小さくなってきています。
昔は掴める程度の大きさで、スクロールできることが分かるようなデザインが強調されていましたが、最近はユーザーが学習してきた影響もあるのか、バーが細くなったりコントラストが弱くなったデザインである傾向があります。ゲームによっては普段は表示せず、スクロールした時のみ表示するデザインが採用されることもあります。
流行のデザインを上手く取り入れつつ、分かりやすさも考慮しているように感じました。
2：掴めていることが直感的に理解できる
操作に対するリアクションがあることで状況が分かりやすくなっているように思いました。状況が分かりやすくなることでユーザーの安心にも繋がると考えています。
先ほど紹介したページの中でもマイクロインタラクションの目的に「システム側のステータス変化を伝える」ということが書かれています。
ちょっとしたことですが、この積み重ねでゲームが分かりやすく、楽しくなると思います。
まとめ
まとめると「NieR Re[in]carnation / ニーア リィンカーネーション」のスクロールバーのアニメーションについて感じたことは以下の２点です。
- 存在が認識しやすい（視認性の向上）
- 掴めていることが直感的に理解できる（認知コストが下がる）
他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。
以上です。
スクロールバーのデザイン、マイクロインタラクションの事例の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
© SQUARE ENIX CO., LTD. All Rights Reserved.
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「NieR Re[in]carnation / ニーア リィンカーネーション」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。
画像・動画・生放送配信ガイドライン | NieR Re[in]carnation | SQUARE ENIX
主な参照箇所を抜粋します。
【利用可能な範囲】
(1)本サービスのゲーム画像およびプレイ動画（生放送配信を含み，以下「プレイ動画等」といいます）を個人利用の目的で自身のブログやツイッターなどのミニブログなどで利用すること。(2)プレイ動画等を「ニコニコ動画」「Youtube」等の動画共有サイトに配信すること（この配信動画のURLやサムネイルを個人利用の目的で個人のブログやツイッターなどのミニブログなどにリンクすることを含みます）。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
