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

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

「三国志名将伝」機能が多いならジャムの法則を用いて情報を整理してみると良さそう

こんにちは、ちょこです。

 

三国志名将伝」では戦力の数字を高めることが遊び方の一つ

これは主にキャラを強化して累積的に上がっていく

 

どうやったら効率的に戦力の数字を上げることができるのか、その方法だけではなく優先度が示されている

f:id:appgameui:20210119093802p:image

 

 

 

ちなみに、リストにある進捗ゲージは現在のパーティ編成を基準にした場合の偏差値のようなものです。
最高値を100%とした場合にどの程度育成されているかを示しています。

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


 

 

「現在のパーティ編成」を基準にしているため、パーティ編成を変更すると進捗ゲージも大きく変化します。

例えば未育成の武将をパーティに編成すると、武将レベルアップの進捗ゲージが下がります。

f:id:appgameui:20210119094042p:image

 

 

これが…

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

 

 

こうなります。大きく進捗ゲージの値が下がりました。

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

 

 

パーティを変更しても装備品の情報は引き継がれている為か、装備強化のゲージには変化ありません。

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

 

 

 

このリストがあることにより、ユーザーはやる事が示されていると感じたり、モチベーションの助けになっています。

 

 

 

ふと思ったのですが、もしかするとこの機能は「ジャムの法則」が利用されているのかもしれません。

ジャムの種類数がたくさんあると選択コストがかかってしまうため、
種類を少なく絞った方が売り上げが高くなった、的な話です。

 

【ジャムの法則と決定回避】なぜ品揃えが良すぎると売上が下がるのか? どさんこ北国の経済教室

 

 

三国志名将伝」は機能が多い方です。
そこで、ユーザーの行動を導くように、育成に関わる機能の導線を設置することでユーザーの意思決定のコストを下げようと考えているのかもしれません。

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

 

選択肢を絞って、意思決定のコストを下げ、ユーザーの行動を導こうとする考え方は「ジャムの法則」と似ているように感じました。 

 

 

もう一度画面をよく見てみます。

この画面には「強くなるためには?」という問題を解決するための導線が集められています。
導線も重要なのですが、もう一つ重要なのは進捗ゲージの存在です。

f:id:appgameui:20210119100258p:image

 

 

 

この進捗ゲージがあることにより、優先度を決める助けになっています。

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

 

仮に導線だけがあった場合、どの導線を選んだら効率的に強くなれるのかユーザーは判断できません。

 

こういった進捗ゲージがあると…

  • どこに伸びしろがあるのか
  • どこを強化すれば良いのか

という判断材料になります。

 

 

例えば私の場合だと「武将のレベルアップ」「装備強化」についてはほぼ上限まで強化していますが「装備精錬」は未着手であることが分かります。

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

 

ですので、今後は装備精錬についてリソースを割くことが成長できる重要な要素であることが分かります。

もちろん「装備強化」を100%まで上げて他の要素を着手しても良いかと思います。
判断はそれぞれですが、ここで重要なのは

 

このようにユーザーが優先度を決めて行動するための判断材料になる

 

ということです。
数字や文字だけではなく、ゲージを利用することにより直感的に比較、理解できるようにデザインが工夫されています。

 

 

以上です。

実装されている機能が多く、アクセスするための導線が埋もれてしまいがち、
というゲームがあれば、「三国志名将伝」のように

  • 目的に沿った導線を集める
  • 進捗ゲージなどのビジュアルで情報を整理する

などしてみると良いのかもしれません。

情報整理や機能の訴求のヒントになれば幸いです。

「三国志名将伝」クイズ機能はゲームに対する没入感に寄与しているかもしれない

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

 

三国志名将伝」のクイズ機能を紹介します!

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

f:id:appgameui:20210114095033p:image

 

クイズ機能。どういうわけだか中国のタイトルを中心に見かけることが増えてきました。

 

UI云々抜きにして、この機能のメリットとしては…

  • 三国志に関する知識が得られる
  • 回答すると報酬が得られる(正解するとより多くもらえる)

などでしょうか。

 

武将名を四択の中から答える形式になっている特性上、知識と言っても少し偏った知識になりそうだけど…。

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


 

クイズ機能について考えてみました。

 

既存のIPの場合は、ファンがプレイしている割合が高いので、難易度が高くなる傾向が考えられます。

 

オリジナルIPの場合は、ゲームの世界観をより知ってもらうための役割が考えられます。あまり難しくせず、場合よってはゲームのルールなども出題可能です。

 

三国志の場合はIPなのかな…?

なんとなく史実ベースの舞台だけだとIPっぽくないけど、創作の要素が増してくるとIPっぽくなるのかな…

 

 

今回の場合、出題内容に創作要素は無いので、「三国志クイズ」として認知しても良い気がします。

f:id:appgameui:20210118095429p:image

 

 

さて、少しUIの話に戻ります。

ゲームをより楽しんでもらえる施策はいくつかありますが、クイズはユーザーが考える要素が強いため。ユーザーから積極的に世界観に没入できる施策だと思います。

 

ゲームUIにとって、没入感が得られることは非常に重要な評価軸です。

 

TIPSなどで知識が受動的に流れるより、クイズ形式にしたり報酬が得られるなどするとより集中できるのかもしれません。 

 

コンテンツを盛り上げようとする際の参考までに。

 

 

余談ですが、「三国志名将伝」のクイズの難易度は中級者以上だと思います…。
三国志の小説やドラマを何本か読んだり観たことがある人なら答えられるかも?という難易度。

 

以下に参考までに問題を添付してみたので、自信のある方は是非チャレンジしてみて欲しい! 

f:id:appgameui:20210118095411p:image

f:id:appgameui:20210118095416p:image

f:id:appgameui:20210118095423p:image

 

 

 

appgameui.hatenablog.com

「三国志名将伝」お知らせ画面のデザインが手数が少なくて済むデザインだった

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

 

三国志名将伝」のお知らせ画面が既存のメンタルモデルと異なっていたので紹介します。

 

 

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

f:id:appgameui:20210114080832p:image

 

 

 

動きで見るとこんな感じです。

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

 

 

上部のタブが大項目の切り替えになっています。

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

 

 

 

左側のタブが小項目の切り替えですね。

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

 

 

「プロジェクトセカイ」の場合はこんな感じです。

ああああああああ

 

 

三国志名将伝」と「プロジェクトセカイ」のデザインを比較すると、以下のメリットがあるように感じられました。

  • 本文がファーストビューにある
  • 複数の情報を閲覧する時間が短縮できる
  • 手数が省略できる

 

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

 

 

最近プレイした範囲ですが、
中国が開発した横画面のゲームのお知らせ画面は全部このデザインですね…。

 

最初は自分にメンタルモデルが構築できてなかったので戸惑ったのと、情報の取捨選択が洗練されておらず、使い勝手は良くないと感じたのですが、

徐々にこなれてきたのか「三国志名将伝」のデザインは結構いい感じ。

 

 

個人的に懸念しているのは、左側のタブのところにお知らせの見出しが入る点です。
ここに入る文字列を開発側がコントロールできるのであれば、使い勝手はいい感じです。

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

 

以下は過去紹介した他のゲームのお知らせ画面です。
同じようなメンタルモデルのデザインを中心に紹介します。
デザインを検討する際に参考になれば幸いです。

 

f:id:appgameui:20201126080855p:image

▲「食物語」

 

f:id:appgameui:20201114081640p:image

▲「ファイナルギア」

 

f:id:appgameui:20201107131645p:image

▲「三国-IKUSA-」

 

ああああああああ

▲「神無月」

「三国志名将伝」エンプティステートの実装事例紹介

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

 

三国志名将伝」のエンプティステートの実装事例を紹介します。

 

該当の画面はこちらです。メール画面ですね。
この画面の役割としてはプレゼントボックスのような役割です。

f:id:appgameui:20210114080819p:image

 

 

 

使用されているキャラクターが気になったので調べてみましたが小喬のようです。

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

 

なぜ小喬なのかは不明ですが、中国のソシャゲを見ていると、あまりそこに必然性は求めていないように思えます。

人気のあるキャラとかなのかな…?

 

よく見るとメールの送り主は「小喬」からになっていますね。細かい。

f:id:appgameui:20210118093615p:image

 

個人的には、ナビキャラなどプレイヤーと対話する機会が多いキャラを使用すると、ユーザーの感情を代弁してくれているように感じられるのではないか、と考えます。

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

 

 

どのキャラクターを使用するか以外にも検討できるデザインの要素があります。

 

それはキャラクターのポーズです。

 

七つの大罪 光と闇の交戦 : グラクロ」のように、文脈に沿ったデザインをするとより良いのかなと思います。

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

 

 

こんな感じで「文字を読まなくても、メールが届いてないことが伝わるデザイン」のほうが認知コストが下がったり、理解の手助けになるかな、と思います。

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

 

 

 

以下は余談です。
エンプティステートの話です。

-------------------------------------------------------

 

エンプティステートの役割

エンプティステートの役割は基本的には以下です。

  • 情報が空であることを示す

 

エンプティステートを使うメリット

ゲーム中にエンプティステートに画像を使うことのメリットとしては…

  • ユーザーのストレス緩和
  • 文字だけの表示よりユーザーフレンドリーさが増す
  • 画像があるとゲームの世界観を伝えることができる
  • 画面が賑やかになり、ゲームプレイ中の没入感が削がれない
  • キャラクターの表情を利用して、キャラクターとユーザーの感情を一致させることにより、ユーザーの気持ちに寄り添うことが出来る

 

などが考えられます。

f:id:appgameui:20190609164920p:plain

 

 

 

エンプティステートが使われる場面

過去のタイトルの事例を参考にすると、エンプティステートは以下の場面で使われていました。

  • メールがない時
  • フレンドがいない時
  • 受け取れるプレゼントが無い時

f:id:appgameui:20190417231409p:plain

この辺が上位ですね。採用頻度が高い画面です。

 

 

以下はタイトルによって文脈は異なりますが、アイテムがない時にも使われます。

  • 表示するアイテムがない時
  • ショップの商品が売り切れている時

f:id:appgameui:20200518083646p:image

 

 

どういった時にデザインを採用すれば良いか?

では、どういった時にエンプティステートに画像を用いれば良いのか、についてですが

  • 他タイトルで使われている場面
  • ユーザーがストレスを感じる場面(ストレスを感じる程度が大きいほど優先度は高い)

などが無難です。
ストレスに感じる場面については、ユーザーの主観、表示頻度、エラーの重要度にもよるので一律には決めづらいところです。

ですので、開発側の匙加減で良いかなと思います。

ゲームであれば「ここにあったら面白いかな」とかでも良いかもしれません。

 

 

エンプティステートをデザインする際に注意したいこと

エンプティステートをデザインする際に注意したいこととしては

  • 問題を解決するための導線を配置すること
  • キャラクターにしゃべらせる場合はキャラクターの人格を意識すること

 

などでしょうか。

 

エンプティステートが表示されるのはユーザーの期待結果ではありません。

なので期待結果が表示されるように、問題解決のための導線を配置すると利便性は高まります。

f:id:appgameui:20201108180052p:image

 

 

「キャラクターの人格を意識」とは、ユーザーが「このキャラクターはこのセリフを言わない」と思われないようにするための配慮です。

 

IPであれば原作中のセリフを使うのが無難ですが、必ずしもそうはいきません。
ゲーム独自でメッセージを用意する場合は、使用するキャラクターの人格にも配慮する必要があります。

f:id:appgameui:20190415225745p:plain

 

 

 

 

 

以下は過去のデザイン事例です。興味がありましたらご参照ください。

 

 

 

 

appgameui.hatenablog.com