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

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

「ブルーロック Project: World Champion」ホーム画面の背景の文字が動いてるのでレアリティが低く動かないイラストを設定しても画面には動きが生まれるのは上手いデザインだと思った

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

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


今回は「ブルーロック Project: World Champion」(以下「ブルーロックPWC」)から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。

以下、概要です。

 

動く背景に隠された工夫がいっぱい

「ブルーロックPWC」のホーム画面を見ると、背景の文字が画面右端から左端にゆっくりと流れています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲背景の文字が画面を横断するように右から左に動いている

 

このデザインの要素として以下の6点が考えられます。

  1. 太めのサンセリフ体で長体をかけ、力強さを表現
  2. 斜めに配置することで、アクティブさを表現
  3. 文字の傾きは45度にし、幾何学な要素を含め、監獄らしい無機質さを演出
  4. 高い場所から低い場所に動かし、自然な動きを演出
  5. 右から左に動かし、LTRで書かれた単語が読みやすいように考慮
  6. ゆっくりと動かし、ユーザーの注目を過度に集めない

他にもあるかもしれませんが、色々な要素が含まれていると感じました。

 

レアリティの低いキャラでも動きが出せる

今回のデザインで注目したいのはレアリティが低いキャラでも画面に動きが生まれる点です。

ソシャゲでは、一般的にレアリティの高いイラストに優先的に演出などの付加価値を付ける傾向があります。
「ブルーロックPWC」の場合、イラストのアニメーションが付加価値として使われています。逆に言えばレアリティの低いイラストにはアニメーションが付きません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲レアリティの高いイラストは背景を隠すほど大きくアニメーションしている

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲レアリティの低いイラストは動かない

 

「ブルーロックPWC」の場合、ホーム画面の背景を動かすことでレアリティの低いイラストを設定しても画面に動きが生まれます。
ゲーム開始直後はレアリティの低いイラストを表示する機会も多いため、画面に動きがあればプレイ開始直後の印象をよりポジティブなものに変えられる気もします。

 

動きのない推しをホーム画面に設定しても寂しくない

「ブルーロックPWC」の魅力のひとつに個性的なキャラたちが挙げられます。
もし推しがいる場合、ホーム画面に推しのイラストを設定したくなります。

しかし、設定したいイラストに動きがない場合、動きのあるイラストに表示を切り替えた際、映像が一時停止したように見え、ゲームに対する没入感が下がる懸念があります。

背景を動かすことで、手持ちの推しのイラストが動かなくてもホーム画面に動きが生まれ、没入感も阻害されにくくなるかもしれません。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲背景に動きがない場合の見え方のイメージ

 

以上です。
ホーム画面にイラストを設定する際のデザインの参考になれば幸いです。

 

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

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「ブルーロック Project: World Champion」のガイドラインを確認したところ、以下の記載がありました。

当社は、個人であるお客様が、プレイ動画等を利用した動画や静止画等を、適切な動画や静止画の共有サイトに投稿することおよび以下で指定するシステムにより収益化することに対して、著作権侵害を主張いたしません。

動画投稿ガイドライン | 「ブルーロック Project: World Champion」ゲーム公式サイト

 

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

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

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

 

お問い合わせ