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

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

「ソード&ブレイド」ゲーム序盤の画面は多くのユーザーが観るため、凝っておくと目を引きやすく、実況や記事などで紹介される確率が高まるのではないだろうか

 

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

 

今回は「ソード&ブレイド」のキャラ選択の演出を紹介します。
画面をデザインする際の参考になれば幸いです。

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

f:id:appgameui:20210516231121p:image

 

キャラクターは全部で以下の属性に分類されます。

  1. 華山(かざん)
  2. 無相(むそう)
  3. 恒山(こうざん)
  4. 武当(ぶとう)
  5. 日月(じつげつ)
  6. 五仙(ごせん)

それぞれの選択演出は以下の様なものでした。

 

1:華山

ひょうたんを中心に画面を切り替える演出です。
両方の画面を跨ぐ共通のアイテムを使うことで、画面が繋がっている印象を与えています。

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

 

2:無相

こちらは比較的穏やかなキャラクターのようです。
静的な要素の中に動的な要素を入れ、見ている人の視線を引き付けているように感じました。

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

 

 

3:恒山

これは華山、無相とは異なり、共通のアイテムを使っていません。
片方はトンボ、片方は魚を使っています。

共通しているのは、ゲーム内のキャラがそれぞれのアイテムに視線を向けることで、ユーザーの視線を誘導している、といったことでしょうか。

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

 

 

4:武当

これもキャラクターの視線の先にカメラが進む演出です。

他のキャラクターと異なる点は距離が離れており、ダイナミックなカメラ演出がなされていることでしょうか。

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

 

 

5:日月

これはカメラ演出の往路と復路でちょっと趣を変えていますね。
往路だと、キャラクターの視線と鳥の動きでユーザーの目線をコントロールしています。
復路の方は目線のコントロールは最小限で、画面の暗転と雷を利用しています。なるほど…。

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

 

6:五仙

これは夢相や恒山と同様の演出ですね。
キャラクターの目線とアイテムを利用してユーザーの視線をコントロールしています。

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

 

比較して見ると、攻撃的でアクティブなキャラクターはカメラ演出も大きく、防御や回復など、大人しいキャラクターは演出も控えめであるように感じました。

 

 

同じような演出は「マギア カルマサーガ」でも見かけました。
遷移無しでキャラクター選択する演出は見栄えがしますね。

f:id:appgameui:20200320130236g:plain

「マギア カルマサーガ(Magia Charma Saga)」キャラ選択画面がかっこいい!用件だけ満たすならリストでも良いのに、楽しそうな画面になっている - ゲームアプリのUIデザイン

 

以上です。

ゲーム開始直後のキャラクター選択演出が凝っているゲームは稀にあります。
メリットとしては以下の要素が考えられます。

  • 初頭効果が期待できる。ゲーム開始直後の印象が良いとその後のゲーム中身の印象も良くなると考えられる。
  • 最初の方の画面なので、実況や記事などで紹介される頻度が高いと考えられる。
  • ゲーム本編を開始するとこういった演出を差し込むことは難しい。テンポが悪くなってしまう恐れがある。しかし、ゲーム開始前の画面であれば頻繁に表示されるものではないため、ビジュアル面で凝った演出を実装しやすい

 

キャラクター選択画面をデザインする際の参考になれば幸いです。