appgameui https://blog.hatena.ne.jp/appgameui/ ゲームアプリのUIデザイン https://appgameui.hatenablog.com/ 010_タイトル一覧 010_タイトル一覧-聖闘士星矢 ライジングコスモ 020_アンチパターン 020_アンチパターン-アフォーダンスの欠如 こんにちは！ちょこです！ 今回は「聖闘士星矢 ライジングコスモ」の商店画面のアニメーションが気になったので、なぜ気になったのか書いてみます。 UIのアニメーションを付ける機会がある方、あるいは考える方の参考になれば幸いです。 さて、紹介する商店画面は以下のようなデザインです。 登場アニメーションはこんな感じです。 画面右端からスライドインしてきます。 横スクロールだと思うやん…？ でも実際は縦スクロールする挙動です。 なんで！？ これはちょっと誤解を招きやすいデザインになっていると感じます。 スクロールさせることを暗に仄めかす手法としてアニメーションを用いることはあります。その際はスクロールす… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fappgameui.hatenablog.com%2Fentry%2F2020%2F09%2F27%2F230000" title="「聖闘士星矢 ライジングコスモ」スクロールすることを仄めかすなら、スクロールする向きに合わせたアニメーションをすると良い話 - ゲームアプリのUIデザイン" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/appgameui/20200926/20200926223856.png Hatena Blog https://hatena.blog 2020-09-27 23:00:00 rich https://appgameui.hatenablog.com/entry/2020/09/27/230000 1.0 100%