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

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

「404 GAME RE:SET-エラーゲームリセット-(エラゲ)」キャラストーリーごとにADVのUIを変えてるのすごい

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

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

 

今回は「404 GAME RE:SET-エラーゲームリセット-」(以降、エラゲ)からキャラごとにADVパートのUIデザインを変えていたのでご紹介します。やってみたいなと思うことはあるけど、やったことはないんですよね…。実際にやっているゲーム初めて見たかも。

以下、主な特徴です!

 

キャラごとにUIやフォントを変えている

f:id:appgameui:20230728001253p:image

©SEGA

「エラゲ」のキャラクターシナリオのADVパートでは、キャラクターに合わせてUIが変わっていました。特にフォントも変わっているのは驚きました。

クレジットを見た時に、妙に使っているフォントが多かったので気になっていたのですが、まさかこんな使い方をしているとは…!
これ、キャラを追加するたびにUIのスキンを追加するかどうかも検討が必要なので、やりっぱなしというわけにもいかないのが大変そう。

 

演出も独特な動き方をしています。アニメーションで見るとこんな感じです。

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

©SEGA

メッセージウィンドウが縮小しながら画面端に移動したり、複数の画像やキャラが表示し、それぞれがアニメーションしています。意欲的で非常に力が入ったデザインに感じました。

 

いくつか事例紹介

全部ではありませんが、いくつかデザインの事例を紹介します。
クオリティラインと量産する際のデザインバリエーションの参考程度に。

ファンシー

手書き風のフォント、色数の多い背景です。
背景の紙類がナナメに配置されていること、重なり合って奥行きが表現されているため、視覚的な情報量が多く賑やかさもあるデザインです。
全体的に暖色が多く、温かみがある印象を受けました。

f:id:appgameui:20230728001240p:image

©SEGA

 

ゴシック

文字も太く、全体的に暗くて重めの雰囲気のデザインです。
背景のレースが細かく描かれているため、引き締まった印象を受けます。

f:id:appgameui:20230728001305p:image

©SEGA

 

ナチュラ

ディグダグは木目調の板と古地図のデザインでした。
ブロックノイズが乗っており、デジタル要素もあるのが面白いところです。

f:id:appgameui:20230823101541p:image

©SEGA ©Bandai Namco Entertainment Inc.

 

終末感

上のディグダグの色変えでバリエーションが作られていました。

使っているフォントも同じですが、背景の色を変えているためかフォントの色は変えているようです。

f:id:appgameui:20230728001310p:image

©SEGA

 

サイバー

緑のスクリーンにドット調のフォントが採用されています。
全体的に直線的の要素が多く、デジタルな印象のデザインです。

f:id:appgameui:20230728001234p:image

©SEGA

 

和風

背景には、屏風や襖絵のような華やかな花柄のデザインが採用されています。メッセージウィンドウは古紙、巻物のイメージです。フォントは筆を意識してか、明朝体が採用されています。

「エラゲ」は女性キャラが多いため、花のようなデザインは相性が良いと感じました。

f:id:appgameui:20230728001228p:image

©SEGA ©TAITO CORPORATION ALL RIGHTS RESERVED.

 

研究所

薄暗くて怪しい雰囲気の背景です。フラスコや薬品瓶などが見えるため、何かの研究所、実験室などを思い浮かべます。
メッセージウィンドウは方眼紙ですが、薄汚れた感じが更に怪しい雰囲気を際立たせています。

f:id:appgameui:20230728001259p:image

©SEGA

 

背景は車の助手席から外を見た様子です。ドットパターンとモノトーンのフィルターがかけられているため、物質観などの情報量は抑えられています。
情報量が抑えられているためか、そこまで圧迫感は感じられなくなっています。

メッセージウィンドウは直線的で、ややデジタルな印象です。

助手席からみた背景ではシーンが限定されるため、汎用性は低いように見えます。

f:id:appgameui:20230728001247p:image

©SEGA

 

 

以上です。
独特なADVパートをデザインする際の参考になれば幸いです。

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

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「404 GAME RE:SET-エラーゲームリセット-」のガイドラインを確認したところ、以下の記載がありました。

本ゲームの著作物は、個人用かつ非営利目的のホームページ(Webサイト、ブログ、SNS、画像・動画投稿サイト、掲示板などのサービスを対象とします)において、以下の範囲、条件のもと公開することを許可いたします

二次創作ガイドライン | エラーゲームリセット (エラゲ)

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

404 GAME RE:SET-エラーゲームリセット-のコンテンツ利用ガイドラインです。2023年8月20日確認

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

 

お問い合わせ