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

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

「ドラゴンクエストウォーク」画面遷移だけでもユーザーの満足度につなげることが出来る話

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

 

ドラゴンクエストウォーク」の画面遷移が道路がモチーフにされているようなデザインで、タイトルらしさを表現されていると感じました!

f:id:appgameui:20200628141049p:plain

 

このように縦横に直線が走りその後拡大される、といった演出です。

f:id:appgameui:20200628141751g:plain

▲尺も短くテンポも良い

 

ここ数年、読み込みを感じさせないアプリも多くなってきており、暗転して画面遷移するような場面の頻度も少なくなってきました。画面を移動するたびに読み込みが入っていた時に、その都度ここまで凝った演出が表示されると疲れてしまいます。

 なので、多少凝った画面遷移演出もメリハリとして使えるようになってきたのかな、と感じます。

 

この演出を以前紹介した「UX原論」に出てきた評価軸に当てはめると「主観的利用時品質」の中の「楽しさ」「美しさ」に該当するのかな、と考えています。

画面演出ひとつでもユーザーの満足度に繋げることができるので、デザインする際は意識して考えたいな、と感じました。

 

UX原論 ユーザビリティからUXへ

新品価格
¥3,658から
(2020/6/28 14:50時点)

 

 

 

動画・生放送・画像投稿に関するガイドライン | SQUARE ENIX

このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する画像の転載・配布は禁止いたします。
© ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX All Rights Reserved.

 

新しいサービス、表現を検討したい方のヒントになるかも「UXデザインのための発想法」

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

「UXデザインのための発想法」読みました!感想書きます!

まず題名にある「UXとは何を指しているのか?」「それをデザインするとはどういったものか?」という疑問が浮かびました。

 

結論から言うと「UXデザインのため」という言葉が使われているものの、発想の方法に関してまとめた書籍だと思えば良さそうです。

詰まるところ、発想法は問題解決のためのアプローチのひとつであり、そこにUXデザイナーならではの発想法がある!ということはありません。

 

実際、UXデザインの部分をキャラクターデザインと置き換えても支障ありません。

「UXデザイン」と冠しているのは、おそらく「〇〇のための」と付けるとターゲットが明確になり内容を読者が想像しやすいようになるためだと考えられます。

心理学で例えるなら「恋愛のための心理学」「マーケティングのための心理学」とか見かけると思います。根っこの部分は同じですが「○○のための」と付けると、どう応用して良いのか分かりやすくなりますよね。

 

以上を踏まえた上で、どういった方にオススメするかですが…

以前紹介した「UX原論」では、UXを考えた際の評価軸は示されていましたが、発想法に関して代表的なものはペルソナ、ダブルダイヤモンドが載っていた程度です。

なので、そういった分析法、思考法をもう少し詳しく知りたい方にオススメします。

 

 

発想法を直接的に取り入れることは難しいかもしれません。問題定義が終わり、それに対する解決策を話し合う際の手掛かりとして扱えるかな、と思います。

 

発想法に関してはwebにも情報があるので、書籍を購入する前にネットを探してみると良いです!例えば以下のサイトには…

  • ブレインストーミング(ブレスト)
  • ブレインライティング
  • 希望点列挙法
  • 欠点列挙法
  • オズボーンのチェックリスト
  • 6つの帽子思考法

など、13個の発想法が紹介されています。

junzou-marketing.com

 

まずはこれをベースに各現場に落とし込んでみるとか。

ただ、ゲームUIの場合は、世界観を中心にユーザーレビューとメンタルモデルといった資料にして、合理的か効率的か、という理屈で構築していくことがほとんどだと思います。
(とはいえモンハンのように敢えて複雑で分かりにくいUIを採用するケースもありますが…)

ですので、発想力が求められるケースは少ないかも…。 

発想も重要ですが、UIデザイナーは発想を形にしたビジュアルが重要視されます。 

 

ソシャゲのゲームのUIデザイナーであれば、web広告やSNSに投稿する訴求画像に活かせるかも…?

もう少し広いレベルを求められる方だと、新しいサービスの構築やデザインの改修を請け負うデザイナーの方ならヒントになるかも。

あとはCMを企画する方にも参考になるかも。

 

いずれにしろ、このブログのメインターゲットではないですが。

 

他の書籍も以下にまとめています。

appgameui.hatenablog.com

 

「スタートリガー」告知UIの情報の優先度が高すぎるのでUX原論の評価にあてて考えてみた

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

 

「スタートリガー」で文字が被る部分が多く、没入感を阻害しているように感じてしまったので、感想を書いてみます。

f:id:appgameui:20200627163713p:image

 

ホーム画面の下部に表示されます。

f:id:appgameui:20200628152148p:plain

 

f:id:appgameui:20200628173219p:plain

画面右側の情報とか見えなくなります…。

 

f:id:appgameui:20200627163357p:image

ホーム画面以外だとフッター部分に被ります。 

f:id:appgameui:20200628152217p:plain

 

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

f:id:appgameui:20200628152715g:plain

 

インゲーム中でも表示はされます。

f:id:appgameui:20200628160308p:plain

 

f:id:appgameui:20200628160200g:plain

 テロップは常時表示されているわけではなく、数秒のインターバルが挟まれ表示されています。

 

なぜこういった実装になっているのか少し考えてみたのですが、開発者としてはMMORPGのメンタルモデルを適応されているのかな、と推測しました…。全体チャットなどで運営が告知するよくあるUIです。

PCだと、解像度が十分であったり、画面サイズが大きいので小さいポイントのフォントサイズでも視認性が担保出来たりします。

しかし、そのUIをそのままスマホに持ってきても上手く行きません。

 

いくつか参考になりそうな事例を集めてみます。

f:id:appgameui:20200628161827p:plain

▲「FORTNITE」ホーム画面中央下部に告知スペースが設けられています

 

f:id:appgameui:20200628163552p:plain
▲「LunaM」は左下に告知スペースが設けられています

 

f:id:appgameui:20200628170714p:plain

▲「レッドストーン」も左下に告知スペースが設けられています

 

f:id:appgameui:20200628164107p:plain

▲「キングスレイド」は右上に告知スペースが設けられています

 

以上です。

運営側が告知したい情報があるのは分かるのですが、画面単位で情報の優先度は変わります。それを無視して強引に当てはめてしまうと不都合な場面が生まれてしまうことがあります。

 

一般的なPCゲームのMMORPGの場合、イベント攻略やボス討伐には時間がかかります。ですので、ユーザーにとってその時間内にメンテナンスが行われるかどうかは重要な情報です。

「スタートリガー」の場合はそこまでクエストに時間が拘束されるものでもないように見えるので、常時告知するのではなくお知らせで事前に周知することで十分ユーザビリティは担保されていると考えます。
ちなみにこの時は数日先のメンテナンスの予告のアナウンスが流れていました。当日ならまだしも、数日先のメンテナンス情報であればここまで強く告知しなくてもいいのではなかろうか…

 

以下はほぼ自分用のメモになってしまうのですが、このUIを整理したいので「UX原論」の評価軸に当てはめて考えてみました。

この告知UIの優先度を最上位に据えたことにより「客観的設計品質」の中の「発見しやすさ」「エラー防止」の役割があまりにも強くなりました。
しかしその代わりに情報が被ってしまう場面では、背面にある情報の「認知しやすさ」「学習しやすさ」が下がり、ゲームをプレイしている際の「主観的利用品質」の「楽しさ」「美しさ」が犠牲になっているのかな、と感じました。

 

UX原論 ユーザビリティからUXへ

新品価格
¥3,658から
(2020/6/28 14:50時点)

 

「スタートリガー」ホーム画面の4つの特徴を紹介します

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

 

「スタートリガー」のホーム画面が割と特徴的なので、どういった特徴があるか紹介します!

f:id:appgameui:20200628203006p:plain

 

 

1:奥行きを利用している

f:id:appgameui:20200628203818p:plain

しばしば見かけるようになりましたが、UIに角度を付けているデザインが特徴的です。特に中国で開発された近未来系のSF系と相性が良いのか、単に向こうでSFが流行っているのか分からないですが、その組み合わせが多いように見えます。

デザインが流行っている背景には、XY座標だけだと情報が過密すぎて、Z軸を活かせないか、という経緯があるように感じます。

 

2:情報の追加がしづらい

これは稀に見かけるのですが、ボタンを配置するようなやり方ではなく、要素を絵画的に配置するような手法です。

ビジュアルでの美しさはあるのですが、保守、運用に関しては難易度が高く、リスクもあるデザインです。

f:id:appgameui:20200628203006p:plain

おそらくデザインと実装を一人でやれるか、担当者間での連携が取れるような体制とスキルが求められます。

実際「ボス戦」「時空の歪み」など追加機能のデザインは画面の空いているスペースにボタンを配置するしかなくなっています。

こうなるとビジュアルは良くても保守性が低くなってしまうので、結果的には完成度がチグハグになってしまいます。

このレベルのデザインが保守できるとクオリティが一段上がるので、見てみたい気はしますが、簡単ではないですね…。

 

3:ボタンが動く

ボタンが動く、というデザインは初めて見ました。

f:id:appgameui:20200628202850g:plain

キラキラとアニメーションしたり、ボタンの周囲に光彩がついたりする程度は見かけますが、アームの動きを取り入れるアニメーションは斬新さを感じました。チャレンジしてて面白いです。

操作してみての感想ですが、特に支障はありませんでした。
なのでちょっとした演出程度なら許容されるのかも…。

割とアクティブな画面になるので、うまく組み合わせると新希性が狙えるかもしれません。

 

企業案件だと難しいかもですが、運用しないインディーズ作品とかだとやりやすいかも。作家性も出そうですし。

 

4:色数が絞られている

ボタン数多いし一見して複雑な画面ですが、色数が絞られていることによりあまり乱雑さは感じられません。

f:id:appgameui:20200628203006p:plain

基本的には青~緑の間で統一されており、訴求したい部分を黄色にしています。
基礎的な部分ではありますが、パーツ単位で作っていくと全体で見たときに疎かになってしまうところなので、注意する必要があります。

 

 

以上、「スタートリガー」のホーム画面のデザインについて紹介してみました。

ボタンが動くデザインについては、まだ数は少ないかもですが、注意深く見ていきたいと思いました。画面をビジュアル面でデザインする際の参考になれば幸いです!

実際に触って気付くこともあると思うので、ゲームもぜひプレイしてみてくださいー