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

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

「リバース:1999」映画のチャプターを選ぶようなストーリー画面

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

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


今回は「リバース:1999」からストーリー画面のデザインをご紹介します。
「リバース:1999」のストーリー画面は映画のチャプターを選ぶようなデザインだと感じました。


以下、概要です。

 

駒を配置しジオラマのようにシーンを表現

f:id:appgameui:20231117101144p:image

「リバース:1999」のストーリー画面はジオラマのように建物や人物を組み合わせて状況を再現するようなデザインでした。

 

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

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

 

全体的に暗い画面なのでちょっと見づらいですかね…。
分かりやすいように一部をトリミングしてみます。

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

中央にある駒のようなものが主人公たちです。
周囲の状況を含めると、枯れた木々が立ち並ぶ不気味な夜の森の中、暗闇に光る鋭い眼は主人公たちを囲むように覆っている、といった状況でしょうか。

かなりデフォルメされているため、主人公たちの表情や仕草までは分からず、ユーザーの想像力で補うような独特なデザインになっていると感じました。

 

ストーリーが進むほど右方向に進む

「リバース:1999」では、文章やレイアウトなども左から右に進むようにデザインされているため、視線も自然と左から右に流れます。

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

ジオラマの場面も左から右に流すことで直感的に物語が進んでいるように感じられます。

ただし、物語の構成に過度な支障や制限を及ぼしてもいけないので、あくまで「基本的には」という匙加減が落としどころになりそうです。

 

見やすい配色のボタン

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

バトルを開始するため「行動開始」のボタンが目立ちやすい配色だと感じました。

 

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

念のため色弱対応も確認しましたが、ややオレンジに寄せているため黒背景でも分かりやすい配色になっています。

 

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

また、押しやすい場所に配置されているため、ボタンの意味がよく分からなくても、とりあえず押してみることに抵抗感は少ないと考えます。

 

詩的な表現でストーリーの輪郭を表現

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

任意のストーリーを選択すると、画面右からあらすじなどの情報が表示されます。
あらすじの文章は独特な詩的な言い回しをされ、世界観を表現されています。

例えばこのストーリーでは以下のような文章が書かれていました。

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

彼女はハチミツよりも甘く、羽毛より
も軽い。彼女の赤い薔薇は、あなたの
魂の胸に飾るのにちょうど良い。

通常はこういった場所に書かれるのは、これまでの物語の流れや選択中のクエストの内容に触れるものが多いのかなと思います。
しかし、この文章を見た限り物語の流れや選択中のクエストの内容などを説明する文ではなさそうです。

詩的で抽象的な文章で読み手の想像力に委ねる内容で、読み手の感情面に訴えかける文章だと感じました。グラフィックだけではなく、文章でも世界観を強く表現されていると感じました。

 

余談です。
UIとはちょっと離れる上、ここに限らないのですが、こういった文章は翻訳が難しそうなのに当たり前のように自然な翻訳になってて凄いな、って思いました。

翻訳された文章がネイティブのユーザーにとって違和感を覚える文章になっていた場合、どうしても没入感が削がれてしまうため、翻訳文の自然さもすごく重要なんですよね。

 

リストから詳細に切り替える時の操作が軽い

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

かなり主観的ですが、画面の操作感がすごく軽く感じました。
以下、理由を考えてみました。

  • 下に敷いている板がグラデーションになっており、且つうっすら透けているため、軽い質感に感じた
  • 表示されるときはゆっくりで、消える時は瞬時に消えているため、軽い質感だと感じた
  • 画面の一部しか切り替わっておらず、何が書かれているか理解しやすく認識負荷が軽く感じた
  • 切り替わっているのが画面端なので、プレイ中のユーザーの視界を遮らない

このように様々なアプローチによって、質感と認識負荷を軽く感じ、結果的に操作感も軽く感じられたのかもしれません。

 

一覧性は低いが大きなストレスは無い

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

端末の比率にもよると思いますが、ストーリーの一覧性は低めであるものの、あまりストレスには感じませんでした。

この端末の場合、一度に4クエスト程度が表示されています。ストーリー名がしっかり読め、タップできるのは2つまでといったところです。
言葉だけだと不便に感じるかもしれませんが、実際にプレイしてみるとこの画面で何度もクエストを選択せず、他の画面から遷移する機会が多かったため、あまりストレスには感じませんでした。

ここで言うところの「他の画面から遷移…」というのは具体的にはアイテム詳細画面からの遷移を指します。
例えば、キャラを強化中にアイテムが不足した際、そこからアイテムが獲得できるクエストに遷移する場合です。
f:id:appgameui:20231130095637p:image

故に、ストーリー画面ではビジュアルを見せることを優先され、ストーリーの一覧性を担保する優先度はそこまで高くなかったのかな、推測しました。

 

以上です。
独創的なクエスト画面をデザインしたい時の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「リバース:1999」のガイドラインを確認したところ、以下の記載がありました。

ガイドラインを遵守していただければ、当社の許諾を得ていただく必要はございません。

第4条 許容される派生品創作活動の範囲

ガイドラインに反しない範囲で、派生品創作活動を行ってください。
法人格のない個人または団体が行うことができる非営利目的による利用の例は、以下のとおりです。

(1) イラスト、マンガ、ガレージキット、人形などの3D作品の制作、展示、配布
(2) 同人誌及び同人グッズ(電子版を含む)の制作、展示、頒布及び公開
(3) コスプレ衣装の制作、展示、販売
(4) コスプレ写真・映像のウェブ上での配信、展示、放映、発表
(5) ゲームのプレイ動画の投稿、配信(生放送を含む)、及びスクリーンショット等の画像の投稿
(6) 公式作品の画像を個人プロフィールページの背景やアイコンなどに使用すること

リバース:1999 公式サイト

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

リバース1999のコンテンツ利用ガイドラインです。2023年10月25日更新版です

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ