ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「三國志 覇道」ミッション達成を通知するUIが、そのまま報酬受け取りに変化したり、ミッションに関係する画面に遷移するUIに変化してめちゃ便利

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

 

このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。

 

今回は「三國志 覇道」のミッションの報酬受け取りの方法のデザインと導線設計について紹介します。

 

該当の画面はこちらです!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



具体的には、画面右下にあるこちらのUIです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



このUIの特徴を整理して、以下の3点にまとめました。

  1. ミッションが達成されたことをしっかりと通知している
  2. 報酬を受け取れる導線を設置している
  3. ミッション達成に関係する画面に遷移する

です!ひとつずつ詳細を紹介します。

 

 

1:ミッションが達成されたことをしっかりと通知している

まず、ミッションが達成されたことをしっかりと通知しているデザインについて紹介します。

ミッションが達成されたら、画面右側にミッション達成演出が表示されます。
この演出は内政画面、マップ画面のいずれかで表示され、ユーザーの目に留まるようになっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

該当箇所を大きくしてみます。
明るい光の筋が画面を左右に横断するように光り、ユーザーの視線を誘導しています

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



その後は「達成!」の文字が常にループアニメーションをし、画面内で訴求しています。
大きくアニメーションしているためか、画面の中でもかなり目立っており、気になる存在になります。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

該当箇所を拡大するとこのようになっています。
ゲームをプレイする上では特に必要な情報ではないため、画面から排除しようと思い、つい触りたくなる仕組みが仕込まれているように感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆




押しやすい位置に配置されている点も良いデザインだと感じます。
このように、画面右下に配置されているため、親指の届きやすい位置にになっています。

ミッションの種類は豊富に用意されており、一日何度も押すことになるため、押しやすい位置に配置されていることは重要です。
ユーザーのストレスも抑えられると考えられます。



 

2:報酬を受け取れる導線が設置される

2つ目は、通知UIが報酬を受け取るための導線に変化している点が特徴的です。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



この通知UIをタップすると…

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

画面を遷移することなく、直接報酬が獲得できるデザインになっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



視線を誘導した後に報酬を受け取れる、という綺麗な流れが出来ていると感じました。

ミッション画面に遷移せずに報酬が受け取れるため、手数を抑えることにも繋がっているかと思います。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆


 

3:ミッション達成に関係する画面に遷移する

最後の特徴は、この通知UIは報酬を受け取れる導線だけではなく、ミッションを達成するための導線にも変化する点です。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

例えばこのように「商店で商品を1回購入」のミッションが表示されている場合…

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

UIをタップすると商店に遷移します。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆


そのまま商品を購入するとミッション達成となります。

 

このように、ミッションの開始から達成、報酬受け取りまで非常に自然な導線設計になっているように感じます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

ちなみに、ミッション達成報酬は個別に受け取るだけではなく一括で受け取れる機能もあります。
複数のミッションを達成し、報酬を一括で受け取りたい場合はミッション画面から「一括獲得」のボタンで受け取ることができます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

こちらのボタンですね。
他のゲームであるような基本的なミッション画面の機能は備えている上で、便利な導線が設置されているデザインになっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



 

 

以上です。

初めて見たデザインでしたが、学習コストが低くストレスなく習熟することができました。

デザインの意図が明確で柔軟な発想だと感じます。

 

よりストレスのない報酬の受け取り方を考える際の参考になれば幸いです。