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

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

「404 GAME RE:SET-エラーゲームリセット-(エラゲ)」画面タイトルの文字列が1fpsごとに切り替わる演出

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

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

 

今回は「404 GAME RE:SET-エラーゲームリセット-」(以降、エラゲ)から文字アニメーションの事例をご紹介します。デジタルな世界観を表現した特徴的な演出です!

以下、主な特徴です!

 

画面名の見出しに使われている

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

 

画面遷移時、左上の見出しが独特なアニメーションをしていました。
画面名を表示する前に記号が羅列され、徐々にパラパラと置き換わる演出です。
開発者の一人であるヨコオタロウ氏の世界観を表現されているように感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

1fpsごとに文字が切り替わる

分かりやすいように該当箇所を拡大しました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

一瞬なのでちょっと分かりにくいでしょうか…。
コマ送りして繋ぎ合わせてみました。こんな感じで文字列が切り替わっていました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

見た感じ、1フレームごとに文字を切り替え、1~2フレームごとに1文字ずつ固定しています。最終的には10フレーム程度で文字の置き換えが完了しています。

 

演出中は文字の数が変わることもある

演出中は最終的に置き換わる文字列よりも一文字多く表示されていました。
文字が固定化されていくにつれて文字が減っていきます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

他の画面名の演出も見た限り、確実に1文字多いわけではないようですが、文字数が揃っていくことで情報が整理されていくように感じます
文字列を塊として見た時にシルエットが変化するのも特徴的だと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

馴染みのない文字、記号を利用

使用する文字も特徴的です。
例えば、以下のタイミングではいくつかの記号が使われていました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©SEGA

@⊆ΩクΡΟΦΓ

@:単価記号
⊆:数学(部分集合)
Ω:ギリシャ文字
Ρ:ギリシャ文字
Ο:ギリシャ文字
Φ:ギリシャ文字
Γ:ギリシャ文字

確認した限り数字は使われていません。
多くのユーザーにとって馴染みのない文字を使うことで、カタカナのように読める文字を際立たせる効果があると感じました。

読める文字と読めない文字を明確に分けることで、文字列が確定しかことが分かりやすくなる効果もあるのかもしれません。
置き換える文字列を選定する際の参考までに。

 

以上です。
文字列を切り替えるアニメーションをデザインする際の参考になれば幸いです。

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

 


権利者さまへ

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

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

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

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

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

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

 

お問い合わせ