こんにちは！ちょこです！
このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。
今回は「白夜極光」から施設の解放に必要なアイテムが不足していることを、より強調して伝えるUIデザインを紹介いたします。
ソシャゲでは何かを強化したり、解放する際にアイテムを消費することは一般的です。汎用性の高いシーンかと思いますので参考になりやすいかな、と思います。
該当の画面はこちらです。施設を解放する際の確認ダイアログです。
不足しているとアイテムアイコンが震える！
アニメーションで見るとこんな感じです。
解放する施設を選択し、解放に必要なアイテムが表示されています。
アイテムが不足していると解放されません。
ここではアイテムアイコンのアニメーションに注目します。
このアニメーションを細かく見ていくと、以下の要素が含まれています。
- アイテム不足している場合は分子の色が赤くなる
- 不足しているアイテムアイコンが細かく震える
- 「材料不足です」というエラーメッセージが表示される
- 分子だけではなく、分母の色も赤く変化する
- エラーメッセージが消えても分子と分母の色が赤くなったままになる
です。
特に注目しないのは、アイテムアイコンが震えることによって、画面に貼り付いているものではなく触れることが分かる、というデザインになっています。
アイテムが不足している場合、どのように伝えるかも考える必要がある！
触れることが分かる、と書きましたが、実際にタップしてみます。
このように、不足しているアイテムが獲得できるクエストが案内されています。
分かりやすく大きくします。
入手方法
メインステージ3-7を初めてクリアした時に獲得できる
と書かれています。
アイテムが不足していることを伝えるデザインの参考になれば！
ソシャゲでは強化や機能解放するためにアイテム必要なことが多くあります。
それと同時にアイテムが不足している場合、どのように伝えるかも考える必要があります。
「白夜極光」の場合、数字で示すだけではなく、アニメーションをする点で工夫が見られました。
以上です。
アイテムが不足していることを伝えるデザインの参考になれば幸いです。
