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

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

「この悪い子猫ちゃんめ!」キャラは2DなのにGoogle Mapみたいに360度見渡せるホーム画面!

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」における360度見渡せるホーム画面をご紹介します。

 

このデザインにより、以下の特徴があるように感じました。

  1. 周囲を360度見渡せる(没入感、臨場感がアップ)

 

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

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

©2021 xeen Inc.

 

左右はぐる~っと360度見渡せます。

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

©2021 xeen Inc.

 

更に上下にも動かせます。なぜここまで広い範囲で作ってるんだろう…

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

©2021 xeen Inc.

 

周囲を360度見渡せる

360度見渡せることで、その空間を把握し、その場に居る臨場感が増すと考えます。
静止画と比較して圧倒的な情報量の差があるため、その分没入感も高められます。

背景をキャラクターの画像を組み合わせて記号的に表現しているのではなく、その場所に存在しているような新たな表現を模索しているように感じました。

 

2Dのキャラクターを利用したデザインでこのような表現を採用しているソシャゲでは珍しいように感じます。

と言うのも、作り込む背景の範囲が広くなってしまう上に、カメラを360度回転させるのは本来この画面の目的ではありません。そのためメモリを割くことや工数をかけることは非合理的と感じる側面があります。

FPSなどの3Dゲームであれば、マップを流用できる上に、メモリの負荷もそこまで変わらないため工数も多くはかからないと思うのですが、2Dでこの表現を実現するためには苦労が多く…よほどやりたかったことなのかな、と感じます。

開発会社のXeen社がVRのサービスを開発してきた影響からなのか、意識している視点や技術的なノウハウが他のソシャゲと少し違う気がします。ゆえに新奇性を感じることがあります。

 

 

まとめ

短いですが、まとめると「この悪い子猫ちゃんめ!」の360度見渡せるホーム画面について感じたことは以下の1点です。

  1. 周囲を360度見渡せる(没入感、臨場感がアップ)

 

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

ホーム画面をデザインする際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

主な参照箇所を抜粋します。

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ

 

「この悪い子猫ちゃんめ!」キャラの存在感が!キャラを撫でる時、手のひらの形状が細かく変わるデザイン!

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」におけるキャラクターの存在感を増すような撫でる演出をご紹介します。

 

このデザインにより、以下の特徴があるように感じました。

  1. モデルの形状に合わせて手の形状が変化することでキャラクターの存在感が増す(没入感、主観的満足度アップ)

 

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

f:id:appgameui:20220616100751p:image

©2021 xeen Inc.

 

アニメーションで見るとこんな感じです。
なんとなくモデルの形状に合わせて手の形状を変化させているのが分かるでしょうか。

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

©2021 xeen Inc.

 

モデルの形状に合わせて手の形状が変化することでキャラクターの存在感が増す

ソシャゲにはキャラクターを撫でる機能がしばしば実装されています。
撫でると体力が回復したり、親愛度が高まるなどします。

その際、手のひらのカーソルの形状は変化せず、平面的に処理することがほとんどだと思います。
「わるこね」では手のひらカーソルをモデルの形状に合わせて変化させることで、キャラクターの立体感、実在感を増し、ゲームへの没入感を高めているように感じました。

 

ここに限らず「わるこね」はキャラクターとユーザーとの接点に対して強いこだわりを感じます。
実際、このキャラクターを撫でても親愛度が上がったり、報酬は獲得できません。ただ撫でてキャラクターの台詞が返される程度の機能であり、ゲームの攻略や進行には影響がありません。
強いてメリットを挙げるとするならば、特定のユーザーの主観的満足度が高まる可能性がある、くらいでしょうか。

それはそれであって良いとは思うのですが、それだけでは目的が曖昧であり、メインのメリットとしては弱い気がします。もう少し言うなれば、ここに時間とお金をかけただけの経済的な意義が説明しづらい印象があります。

ただ、恐らく何か私が見落としている要素があるため、そのような印象を受けているのだと推測します。
この点において補足できる方のコメントをお待ちしております。

 

また、こちらはUIの話ではないのですが、どのような処理をしているのかが気になりました。
キャラクターは平面に見えるのと、操作した感じキャラクターの形状に沿わせているのではなく、撫でを開始した位置とキャラクターのシルエットを相対的に見て判断している様な挙動なんですよね…。

なので、同じ位置を撫でても、撫で開始位置によっては手の形状が同じにならない、という挙動をしています。

こちらについても詳しい方がいたらコメントお待ちしております。

 

まとめ

短いですが、まとめると「この悪い子猫ちゃんめ!」のキャラクターの存在感を増すような撫でる演出について感じたことは以下の1点です。

  1. モデルの形状に合わせて手の形状が変化することでキャラクターの存在感が増す(没入感、主観的満足度アップ)

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

キャラクターを撫でる演出をデザインする際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

主な参照箇所を抜粋します。

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ

 

「この悪い子猫ちゃんめ!」これが演出の力!ガチャ演出のキャラクターが魅力的に映し出されていた

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」におけるキャラクターを魅力的に見せるガチャ演出の事例をご紹介します。

 

このデザインにより、以下の特徴があるように感じました。

  1. キャラクターの魅力を十分に伝えようとしている、とにかくエモい(主観的満足度狙い)
  2. 獲得した商品に対して十分なリターンを与えようとしている(返報性の原理?)

 

該当の画面はこちらです。
ガチャ演出のストーリーとしてはライブで着る衣装をゲットする、という流れのようです。まずはキャラクターとライブ会場が映し出され、ユーザーに対して状況説明がなされます。

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

©2021 xeen Inc.

 

続いて場面は所謂異空間に切り替わります。
ここは獲得したアイテムが最大で5つ表示されます。
5秒間の間に獲得したアイテムをタップすることで、キャラクターが衣装を身に着けます。

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

©2021 xeen Inc.

 

衣装を身に着ける時の演出はこんな感じです。
身に着けるパーツにカメラがフォーカスし、ポーズを決めます。

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

©2021 xeen Inc.

 

獲得したアイテムをすべて見せたらライブ会場に戻り、最後はポーズを決めます。

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

©2021 xeen Inc.

 

ライブは成功で終わり、キャラクターたちはお別れに手を振ってくれています。
また、獲得したアイテムがサムネイルで一覧表示されています。

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

©2021 xeen Inc.

 

流れで見るとこんな感じです。長いので前後編に分けます。
まずは前半です。ライブ開始演出から、アイテムを獲得演出、そして後半に行く前に小休止の演出が入ります。

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

©2021 xeen Inc.

 

続いて後半です。
引き続き獲得した衣装でコーデを整えていきます。
最後はライブ会場に戻り、キャラクターに見送られながら獲得したアイテムが確認できます。

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

©2021 xeen Inc.

 

キャラクターの魅力を十分に伝えようとしている、とにかくエモい

演出を見た限り、情報の優先度としては獲得したアイテムより、キャラクターのビジュアルを優先しているように見えます。

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

©2021 xeen Inc.

 

情報の優先度が高いと感じた理由は主に以下の3点です。

  • 表示面積がアイテムよりもキャラクターの方が大きい
  • 動きがあるため視線が誘導される
  • しばしば目が合うため、視線が誘導される

一応、アイテムの方が画面手前に表示されているため情報の優先度が高い、とも考えられますが、直感的にキャラクターに視線が誘導される方が強く、優先度もキャラクターの方が高いと感じました。

 

獲得したアイテムよりもキャラクターの演出を優先させることで、排出されたレアリティが低かったり、期待したものが手に入らなかったとしても、演出を見ることで楽しい気持ちになる、と言う心理がはたらくと感じました。

キャラクターの持つ魅力を利用した演出であり、ユーザーの主観的満足度に作用するように感じました。

 

キャラクターを利用した演出で特に注目したいのは以下の2点です。

  1. アイテムをユーザーの操作で着せ替え出来る点
  2. 排出が終わった後も演出が続く点

アイテムをユーザーの操作で着せ替え出来る点

獲得アイテムを見せる、という視点で考えればタップさせずに自動で着せ替えさせる方が手間が無く合理的ではあります。

しかし、タップさせることでただ眺める演出ではなく、ユーザーがキャラクターに関与する演出になっています。

単に操作可能ということではなく、キャラクターに対して関与することができることがある、というのが主観的満足度を高める要素に繋がっているのではないか、と感じました。

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

©2021 xeen Inc.

 

排出が終わった後も演出が続く点

もうひとつ注目したい点は排出が終わった後も演出が続く点です。
ガチャはアイテムを獲得するための機能、という思い込みを見事に覆されました。

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

©2021 xeen Inc.

 

ガチャ演出が凝っているソシャゲも多いため、ある意味では「ガチャ演出を楽しむ」という視点も考えられるのかもしれません。

 

特にキャラクターが手を振ってくれるガチャ結果画面は初めて見たかもしれません。
この画面は機能面だけで見ると獲得したアイテムを確認するための画面ですが、
キャラクターが手を振ってくれることで、キャラクターがライブ終わりに見送ってくれる、というストーリーが取り入れられています。

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

©2021 xeen Inc.

 

先ほどキャラクターに対して衣装を着せ替えたことは、プレイヤーからのコミュニケーションですが、手を振ってくれることはキャラクターからのコミュニケーションです。

双方からのコミュニケーションが成立することで、ユーザーの主観的満足度がより高められているように感じました。

 

 

獲得した商品に対して十分なリターンを与えようとしている

演出が60秒程度あり、見た感じスキップもできない(?)ため、テンポ感が悪いと考える人もいるかもしれません。実際、この演出の長さで何度も回すとテンポの悪さがストレスとして表れる懸念は考えられます。

ただ、「わるこね」の場合は獲得した商品よりも、演出を見せることを重視している気配を感じます。

したがって、商品を購入したユーザーに対して、演出をしっかりと見せることをリターンとしているのかもしれません。

 

ガチャは確率で排出され、期待通りのものが確実に手に入るわけではありません。

しかし、演出は確実に与えられるリターンであるため、少しでもユーザーを楽しい気持ちにさせるために、このような長い凝った演出を採用したのかもしれません。

 

ユーザーも期待以上の演出が見られると、コンテンツに対して返報性の原理のようなものがはたらき、例え期待したアイテムが手に入らなかったとしてもストレスが軽減される、あるいはゲームに対して好印象を持つのかもしれません。

 

動画はTwitterに投稿しました。
BGMを聴きながらだと更に印象が変わるかと思います。良かったら確認してみてください。

 

 

まとめ

短いですが、まとめると「この悪い子猫ちゃんめ!」のキャラクターを魅力的に見せるガチャ演出の事例について感じたことは以下の2点です。

  1. キャラクターの魅力を十分に伝えようとしている、とにかくエモい(主観的満足度狙い)
  2. 獲得した商品に対して十分なリターンを与えようとしている(返報性の原理?)

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

ガチャ演出をデザインする際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

主な参照箇所を抜粋します。

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ

「この悪い子猫ちゃんめ!」まるでVRのように没入感の高い会話シーン

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

 

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

 

今回は「この悪い子猫ちゃんめ!」、通称「わるこね」における会話シーンのカメラ演出の事例をご紹介します。

 

このデザインにより、以下の特徴があるように感じました。

  1. 一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている(新奇性)

 

該当の画面はこちらです。
最初はよくある会話シーンだと思っていました。

画面中央にキャラクターが表示されて、演技する系の画面デザインですね。

この悪い子猫ちゃんめ!通称わるこねの会話シーンです。画面中央にキャラクターが表示されています

©2021 xeen Inc.

 

会話を続けていくとキャラクターがプレイヤーに近づきます。
これにより見ている画面はプレイヤー自身の視点であることが強く意識されます。

この悪い子猫ちゃんめ!通称わるこねの会話シーンです。キャラクターが近づき、画面内に大きく表示されています

©2021 xeen Inc.

 

更にキャラクターに手を引かれてカメラが動きます。
右手の方に身体を向き直し、画面の奥に進んで行きます。

この悪い子猫ちゃんめ!通称わるこねの会話シーンです。プレイヤーの手を引いて街を歩きます

©2021 xeen Inc.

 

アニメーションで見るとこんな感じです。
急に固定カメラから移動カメラに切り替わっているのが驚きです。

この悪い子猫ちゃんめ!通称わるこねの会話シーンの一連の流れです

©2021 xeen Inc.

 

一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている

やっていることは既存の技術の組み合わせで高度なことはしていないのですが、ソシャゲの会話シーンには珍しい斬新な手法になっています。

通常、会話シーンの実装する場合、スクリプトで制御できるように作ろうと考えると思うのですが、「わるこね」の会話シーンは汎用性は重視していない作り方になっている気がします。

故にこういった表現にチャレンジできたのかな…?
どういう実装になってるんだろう…これ。

 

さて、このカメラの演出ですが、UIとしては没入感、新奇性などが評価軸のように思えます。もう少し具体的に言語化すると以下のような表現に注目しました。

  • キャラクターに手を引かれることで没入感が高まる
  • 不意に遠近感が強調され、視聴者に驚きを与えている

 

主観ですが、平面だと思っていたものが立体になって動くと、一種のだまし絵のような錯覚を起こし、面白いと感じることがあるので、その感覚に近いのかもしれません。

finders.me

 

 

開発会社の開発実績を見たところ、最近はVR系のサービスを開発していたようです。
もしかするとそういった実績から、VRのような没入感の高い斬新な表現をするに至ったのかもしれません。

www.xeen.co.jp

 

動画はTwitterに投稿してあります。
音声アリだとまた一層の没入感があります。良かったら確認してみてください。

 

 

まとめ

短いですが、まとめると「この悪い子猫ちゃんめ!」の会話シーンのカメラ演出の事例について感じたことは以下の1点です。

  1. 一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている(没入感・新奇性)

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

 

以上です。

会話シーンのデザインを検討する際の参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「この悪い子猫ちゃんめ!」のガイドラインを確認したところ、権利者の株式会社ジーンの公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。

 

コンテンツ利用ガイドライン | この悪い子猫ちゃんめ!(わるこね)

 

主な参照箇所を抜粋します。

素材の使用について
< 画像について >

本サービス内で使用されている画像(スクリーンショットを含む)については、WebサイトやSNSへ投稿いただいても構いません。 また、非営利目的の場合に限り、本サービスを題材としたWebサイトをご制作いただいても構いません。画像のリサイズや編集、加工も認めます。ただし、本サービス内で使用されている画像を利用される場合は、各々の画面の一部、もしくは下部に、必ず以下のコピーライトを明記してください。

©2021 xeen Inc.

この悪い子猫ちゃんめ!のコンテンツ利用ガイドラインです。2022年4月19日施行版です

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

 

お問い合わせ