こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「リバース：1999」からショップ画面の表示アニメーションの事例をご紹介します。
「リバース：1999」ではショップ画面で商品が表示される際、商品が左右あるいは上下にアニメーションして表示されていました。これにより、ユーザーは自然と商品をスクロールできる方向が理解できます。
以下、概要です。
スライドインさせて動かせる方向を仄めかす
「リバース：1999」ではショップ画面に遷移したときに、商品がスライドインするアニメーションが用意されています。
「受付マシン」では画面左から右に若干スライドインさせつつ、左から段階的にフェードインさせるアニメーションでした。
視線が左から右に流れ、商品のサムネイルが動かせそうな軽さに見えるなどが表現されていると感じました。
別のラインナップも見てみます。こちらは「ボイスショップ」です。
「ボイスショップ」は上下にスクロールできる画面です。
下から上にスライドインしつつ、上から順にフェードインするアニメーションです。
このアニメーションにより上下に視線が動き、自然とスクロール方向が上下であると推測できます。
見た限り「リバース：1999」のショップ画面ではスクロールできる方向が異なるため操作は統一されていませんが、アニメーションがあることでスクロールする方向は自然と理解できます。
アニメーションがあるとより分かりやすい
「アニメーションさせなくても、画面端でサムネイルを見切れさせれば続きがあるように見えるのでは？」と思うかもしれませんが、端末の比率によってはサムネイルが見切れずに綺麗に収まるケースもあります。
実際、縦にスクロールするリストの「ボイスショップ」ではサムネイルは見切れず綺麗に収まっています。
このように綺麗に収まっていると、操作しない限りはスクロールする方向が分かりません。
見切れるように配慮するだけではなく、アニメーションでもスクロール方向を示してあると、より分かりやすくなると感じました。
以上です。
リストを表示する際のアニメーションの参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「リバース：1999」のガイドラインを確認したところ、以下の記載がありました。
本ガイドラインを遵守していただければ、当社の許諾を得ていただく必要はございません。
第4条 許容される派生品創作活動の範囲
本ガイドラインに反しない範囲で、派生品創作活動を行ってください。
法人格のない個人または団体が行うことができる非営利目的による利用の例は、以下のとおりです。(1) イラスト、マンガ、ガレージキット、人形などの3D作品の制作、展示、配布
(2) 同人誌及び同人グッズ（電子版を含む）の制作、展示、頒布及び公開
(3) コスプレ衣装の制作、展示、販売
(4) コスプレ写真・映像のウェブ上での配信、展示、放映、発表
(5) ゲームのプレイ動画の投稿、配信（生放送を含む）、及びスクリーンショット等の画像の投稿
(6) 公式作品の画像を個人プロフィールページの背景やアイコンなどに使用すること
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
