こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「グランサガ」から、クエスト一覧画面をご紹介します。
結論から書くと「グランサガ」のクエスト一覧画面では以下の５点に注目しています。
ビジュアル面では以下の２点、
- 世界観に合わせたデザイン
- 画面内に多くの情報を配置
ユーザーの行動を誘導している面では以下の３点です。
- 「ディドロ効果」と「ツァイガルニク効果」
- 報酬を用意
- 視線誘導
では早速紹介しますね。該当の画面はこちらです。
1：世界観に合わせたデザイン
「グランサガ」のクエスト一覧画面は本棚に漫画を並べたようなデザインになっています。クエストを本に見立て背表紙を見せるデザインは初めて見ました。
中世ファンタジーのような本の装丁、ゲームキャラを活かした背表紙の採用などが世界観に合ったデザインだと感じました。
2：画面内の情報を多く配置
画面内に情報を整理して配置しているのも操作性の観点でメリットを感じました。
多くのソシャゲのクエスト一覧画面は、リスト上にクエストボタンが並んでいるか、マップ上にボタンを配置してクエストが発生している位置関係が分かりやすくなっているデザインが多いように感じています。
確かに横画面であれば、文字は縦書きにして、リストは横に並べる方が画面内に情報を多く表示することができます。
画面内に多くの情報を表示することで、ユーザーが任意のクエストを検索、選択する際に画面をスクロールする手間を少なくすることが可能になります。
デザイン上の注意点としては、アルファベットや数字など、一部文字列の利用について制限がかかることが考えられます。このような制限については事前に承知しておく必要かもしれません。
3：「ディドロ効果」と「ツァイガルニク効果」
クエストをクリアするにしたがってイラストが完成するという考え方は「ディドロ効果」と「ツァイガルニク効果」にも繋げられる考えです。
「イラストが完成していないと続きだと気になってしまう」「暗化部分をなくし全てカラーで揃えたくなる」という心理を利用して、クエストの続きをプレイするように、ユーザーの行動を誘導しているデザインだと感じました。
ディドロ効果とツァイガルニク効果の関連については以下のページで紹介されていました。気になったら詳細を検索してみると良いかもしれません。
ディドロ効果（Diderot Effect）とは、生活の中に今までとは違う「理想的な価値」がもたらされた場合、新しい理想的な価値に合わせて、所有物や環境などを統一させようとする心理作用のことです。
最近は、ゲームでもこの手法はよく使われています。
例えば、主人公のレベルによって使える必殺技があらかじめ表示（ロック）されていて、あとどれくらいレベルを上げればその技が使えるのか（アンロック）がわかるようになっています。
あらかじめ全部見えていることで、ゲームを最後までやり遂げたい気持ちを盛り上げてくれます。
全て揃えたいと思うディドロ効果と、未完成の状態が気になるツァイガルニク効果をうまく使った例だと言えます。
【ディドロ効果】揃えたくなる心理のマーケティングへの応用 - Web活用術。
4：報酬を用意
報酬を用意しているデザインも、ユーザーの行動を誘導するためには効果的だと考えます。
先ほど紹介したディドロ効果、ツァイガルニク効果については「気になる」「揃えたい」といったものはユーザーの満足度に繋がるもので、利益には繋がりません。
これに対して報酬を用意することは確実にユーザーの利益に繋げられます。
報酬を用意することでユーザーは開発の望んだ行動を取りやすくなると考えます。
5：視線誘導
視線誘導のデザインも見られました。
プレイして欲しいクエストを明るくし画面内で最も目立たせることで、ユーザーの視線を誘導しているデザインに見えます。
隣接する未クリアのクエストを暗くすることで、明るさを際立たせています。
視線誘導に対する細やかな配慮が伺えます。
クエスト一覧画面だけで様々なデザインの工夫が取り入れられているため、興味が尽きない画面だと感じました。
クエスト一覧画面のビジュアル面、ユーザーの行動を誘導するデザインに注目して紹介してみました。
以上です。
クエスト一覧画面をデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「グランサガ」のガイドラインを確認したところ、二次創作物の制作、や共有サイトの投稿に関しては許諾されている旨の記載がありました。
主な参照箇所を抜粋します。
第3条 許諾および遵守事項
以下は確認したガイドラインページのキャプチャです。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
