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

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

プレイしたゲーム一覧

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

このブログはアプリのゲームUIを中心に記事を書いています。

ゲームUIに関して調べようと思った時にwebかDTPベースのUIしかなく、困った末にブログを作成しました。
UIデザイナーをはじめ、ゲーム開発者の参考になればと思います。

 

以下は紹介したタイトルを50音順に並べています。

 

現在142タイトル紹介済み (2020/12/12時点) 

  • あ行 (22タイトル)
  • か行 (23タイトル)
  • さ行 (23タイトル)
  • た行 (25タイトル)
  • な行 (4タイトル)
  • は行 (21タイトル)
  • ま行 (6タイトル)
  • や行 (5タイトル)
  • ら行 (11タイトル)
  • わ行 (2タイトル)

 

続きを読む

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」スワイプして選択肢を選ぶADVパートのUI

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

 

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のADVパートで選択肢を選ぶ場面があるのですが、左右にスワイプして選択肢を選ぶデザインになっていました。

ソシャゲではあまり見ないデザインだったので、事例として紹介します。

 

以下が該当の画面です。

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



 

挙動としてはこんな感じになります。

背景が部分的にトリミングされたり、キャラクターが選んだ選択肢の方を向くのが細かい作り込みだと感じました。

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



 

タップして選択肢を選ぶUIと比較すると

  • 手数が増えているため利便性としてはマイナスである
  • 選択肢に表示される文字数が短くなる
  • 三択以上には対応できない

など、制限もあります。

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」はストーリーを何度も周回して、色んな選択を楽しむゲームです。

 

同じようなシステムのゲームに「永遠の七日」があります。

 

「永遠の七日」の場合は選ばれた選択肢毎の割合が表示される実装になっていました。

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

 

 

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」の場合、

 

選択肢を選ぶ利便性よりも、選択することに重みを置いているような印象を受けます

 

 

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

 

関係する心理効果としては「単純接触効果」が近いのかもしれません。

通常よりも選択肢を選ぶ際に時間がかかるため、キャラクターと接する時間が増えます。選択肢について考える時間も比例して増えるので、タップで選択するUIと比較すると、キャラクターに対して好ましいと感じたり、コンテンツに対して愛着を持つことを意図したのかもしれません。

 

 

 

以上です。

恐らく感覚的なデザインで意思決定したのだとは思いますが、面白いデザインだと感じたので紹介させていただきました。

ADVパートの選択肢をデザインをする際の参考になれば幸いです。 

 

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」映像にマスクをかける演出が新しい!

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

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のストーリー画面の演出で斬新なものがあったので紹介します。

 

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

f:id:appgameui:20210124105608p:image

 

アニメーションさせるとこんな感じです。

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

 

キャラクターの中にアニメが流れているのが分かりますでしょうか?

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

 

この表現はソシャゲでは初めて見たかもしれません。

 

映像にリアルタイムにマスクをかけているのか、映像にマスクをかけた状態で出力したのか、ちょっと気になりますね。

 

UIの範疇というよりは、演出についてUIの評価軸を当ててみる、という考え方になるのかもしれませんが、新奇性や没入感という意味で良い演出なのかな、と思います。

 

それにしてもソシャゲではあまり見ない演出です。今の時点ではアイデアベースの実装だと思うので、例えば…

 

  • 映像が映っても不自然でない画面スクリーンなどのモチーフに使う
  • ライブ感のある賑やかな空間の演出に使う

 

などするとデザインの必然性や汎用性が高まるのかもしれません。

可能性が広がるので個人的には見てて楽しいです。

 

ただ、一見すると何か分からないものがアニメーションしているので、画面によってはうるさく感じる可能性が懸念されます(個人的にはこれでもうるさく感じると思います)。

 

このデザインを採用する場合は…

 

  • 見せたい情報の邪魔にならないように表示する
  • 面積や時間当たりの変化量に気をつける

 

などを意識すると良いのかな、と感じました。

 

以上です。

新奇性のあふデザインをする際の参考までに。

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」トグルボタンのオン状態は右か左か

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

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」にて、トグルボタンの挙動が気になりました。

 

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

f:id:appgameui:20210124135955p:image

 

 

トグルボタンはこの画面の下部にある「オート周回」のラベルのところに使われていました。

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

 

 

オン/オフの挙動はこんな感じです。

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

 

このデザインのどこが気になったのかと言うと、オン/オフが逆になっているところです。

 

例えばiPhoneのUIパーツはこちらです。

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

 

 

他にはchromeのパーツはこちらです。

 

どちらの状態がオン/オフであるかは特に厳密に決まってはいないと思います。

 

ただ、自分が見た限りでは代表的なプラットフォームは「右側にスイッチがある状態がオン状態」でした。

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」はそれらと逆の挙動になっています。

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

 

そのようなデザインを選択することは自由ですが、なぜそのようなデザインにしたのか説明できる必要はあると思います。

何か解決したい問題か、強いモチベーションが必要だと思うのですが、利便性の観点からはユーザーのメンタルモデルを無視するほどの意味は特に見当たらないように感じました。

 

例えるなら、エスカレーターに乗る際に右側を空けるか左側を空けるかは自由だけど、なんとなく周囲に合わせた方が無難、という感覚です!

 

 

話を戻します。

トグルボタンをデザインする際は 

  • ユーザーが見慣れているプラットフォームのデザインに合わせる
  • 現実世界でのスイッチのデザインと合わせる

 などを心掛けるのが良いのかなと思います。

 

また、ソシャゲのゲームUIはweb由来のUIパーツを利用することが多いです。

ですので、web由来のUIパーツの利用についてもある程度把握しておいた方が、ユーザーの学習コストや認知コストを抑えたUIが作れる確率は増します。

そういった意味で、webUIのパーツについて学ぶのは良いのかなと思いました。

 

ただ、webUIのデザインの思想をゲームUIにどの程度参考にするのが良いのかは難しいところがあります。それは個々が判断する必要があります。

 

最低限の参考に留めるのであれば

  • UIパーツ単位の挙動のルール
  • 利用する際のルール
  • どういった使い方が良くないのか(何がアンチパターンになるのか)
  • どういった時に利用するのが良いのか

などは参考にしても差し支えないと思います

 

以上です。

トグルボタンをはじめ、webUIのパーツを利用する際の参考になれば幸いです。 

 goworkship.com

 

「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」ADVパートでキャラの頭上にテキストが表示されるデザインが気になる

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

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のADVパートの吹き出しの位置が気になりました。

 

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

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



 

挙動としてはこんな感じですね。

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

 

 

個人的にはちょっと見づらいデザインだと感じました。

理由としては以下かな…

  • キャラクター⇒吹き出しの順番で情報が表示されるので視線が画面中央⇒画面上部となり、情報を閲覧する上では不自然な流れになってしまっている

  • 多くのゲームUIではメッセージは画面下部に配置されることが多いため、メンタルモデルと異なるデザインになってしまっている

 

ざっくり言うと、レイアウトが視線の流れに対して不自然でメンタルモデルにも倣っていない、という感じですかね。

参考までに、自分がプレイした範囲ですが、縦画面のADVパートの画面を集めてみました。

結論から先に述べると、100%の確率でキャラクター画像の下にテキストが表示されているデザインでした。

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

▲「KING OF PRISM プリズムラッシュ!LIVE」 

 

 

 

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

▲「Q&Qアンサーズ」

 

 

 

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

▲「ヴァンガード ZERO」

 

 

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

▲「ガンダムブレイカーモバイル」

 

 

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

▲「メギド72」

 

 

 

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

▲「ドラゴンクエストタクト」

 

 

 

 

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

▲「プロ野球PRIDE」

 

 

 

色々ありますが、どのゲームもキャラクターのグラフィックよりもテキストが下になっています。

 

これを見ると「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のAVD画面は何かしら強いこだわりかモチベーションが感じられます。

 

例えば…

  • 指でテキストが隠れるのが嫌だった

とかなのかもしれません。

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

 

 

以下は情報の認知に関する仮説です。

 

一般的に、ADVパートであれば文字よりもキャラグラフィックの方に視線が行きます。

これはキャラクターが魅力的かどうかは別です。
ざっくりした情報の認識過程ですが

  1. 「システム1」によってキャラクターが認識される
  2. そのキャラクターが人間であった場合に、人間であると認識
  3. 人間でなかった場合、関心を引くキャラクターかどうか判断
  4. 「システム2」によってどういった文字が書かれているか認識
  5. 重要な単語を認識
  6. 文章の内容を理解する

恐らくこういった文脈でADVの画面の情報が認識、処理されているかと思います。

 

「キャラグラフィック」⇒「文字」という認識の順番についてですが、

例えば同じADVパートのボタンでも「グラフィック」⇒「文字」という優先度でボタンがデザインされています。

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

 

 

他の画面のボタンデザインも同じ文脈のデザインです。

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

 

 

そういったわけで「Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」のADVパートは、ビジュアル面での情報の優先度が「キャラクター」⇒「文字」となっています。
視線を誘導も下から上に流れているデザインになるのですが、これが不自然だと感じました。

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

 

Re:ゼロから始める異世界生活 Lost in Memories(リゼロス)」がこのデザインを採用した理由は分からないのですが、明確な理由や事情が無ければ、まずは

  • 情報の優先度
  • 視線の誘導
  • メンタルモデルの利用

などを意識してデザインするのが良いのかなと思いました。

 

 

以上です。

縦画面でADVの画面をデザインする際の、デザインの設計、ビジュアル面の参考になれば幸いです。