以下の内容はhttps://appgameui.hatenablog.com/entry/2020/11/02/235000より取得しました。


「プロジェクトセカイ カラフルステージ! feat.初音ミク」アニメーションを利用することにより、段階的開示を取り入れている

こんにちは!ちょこです!

 

  「プロジェクトセカイ カラフルステージ! feat.初音ミク」のUIアニメーションで上手く視線誘導している箇所がありました!

情報量の多い画面のデザインをする際の参考になれば幸いです。

 

 

該当画面はこちらのホーム画面の初心者ミッションの通知バーです。

ああああああああ

 

左上にあるこちらの情報です。

ああああああああ

こちらの通知バーです。
アニメーションによって時間差で画面に表示されています。

 

アニメーションはこちらです!

ああああああああ

 

 

一連のアニメーションを細かく分けると以下のようになっています。

  1. カメラがキャラクターに寄る
  2. カメラが静止
  3. ミッションの通知バーが画面外からスライドイン
  4. キャラクターのセリフ(吹き出し)が表示される

という流れです。

 

アニメーションするタイミングをそれぞれズラして、ユーザーの視線を誘導しています。

上手く視線を誘導することにより効果的に「段階的開示」を行っています。
これにより、ユーザーの認知コストを下げる工夫がなされています。

 

参考:段階的開示 | UX TIMES

 

 「プロジェクトセカイ カラフルステージ! feat.初音ミク」ホーム画面は情報量が多く、背景の通行人も動いているデザインです。

 

そこで、アニメーションを用いてユーザーの認知コストを下げようとするデザインはとても興味深いアプローチだと感じました。

ああああああああ

▲ホーム画面はどうしても情報量が多くなりがち

 

XYZの座標軸だけでデザインを考えるのではなく、時間軸を利用したデザインを検討することにより、新しい発想が浮かぶかもしれません。

 

情報量の多い画面のデザインをする際の参考になれば幸いです。

 

 

 

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。

「プロジェクトセカイ カラフルステージ! feat.初音ミク」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

NEWS | プロジェクトセカイ カラフルステージ! feat.初音ミク

 

SNS動画共有サイトでの動画投稿または配信でのコンテンツ利用に関して

・本プロジェクトを取り扱った内容の静止画または動画について
本プロジェクトを取り扱った内容の静止画または動画をSNS、動画共有サービスへ投稿することについては、以下の禁止事項に抵触しない限りは問題ございません。

ストーリーの投稿または配信に関する禁止事項

開催中のイベントストーリー1話分や、サイドストーリーの内容がまるまるわかるような投稿は、未だストーリーを読んでいない方々に対して予告なく内容を伝えてしまうネタバレ行為に該当してしまい、楽しむ機会が損なわれてしまうため禁止しております。
以下に投稿または配信に関する基準を記載いたします。

■投稿または配信OK
チュートリアル
・メインストーリー(オープニングを含む)
・開催終了したイベントストーリー

■投稿または配信NG
・開催中のイベントストーリー
・サイドストーリー(前編、後編)
・その他のストーリー
※感想、及び感想に動画やスクリーンショットを添付しての投稿(目安として、動画であれば4〜5タップ程度、スクリーンショットであれば1ツイートに4枚程度)であれば問題ございません)
また、分割して大量の動画やスクリーンショットを投稿するなど、ゲームをプレイしなくても結果的に投稿または配信NGの内容がわかるようなものは問題が生じますので、ご注意ください。

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ




以上の内容はhttps://appgameui.hatenablog.com/entry/2020/11/02/235000より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14