こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「勝利の女神：NIKKE」（以降、ニケ）から画面遷移演出(トランジション)の事例をご紹介します。
ニケでは画面遷移時のアニメーションのバリエーションが豊富に用意され、各画面のデザインに合わせて丁寧に作り込まれている印象を受けました。
以下、画面遷移演出についての所感です。
演出で世界観の没入感を高めている
画面デザインに合わせた遷移演出を用意することで、ニケの世界観への没入感を高めていると感じました。
少し補足します。
画面遷移演出を見ているといくつかのパターンがあることに気付きました。
ここでは大きく以下の３つに分けてみます。
- 情報を段階的に見せることで、ユーザーが場面を理解しやすくする演出
- 画面の世界観をビジュアル面で訴求する演出
- ゲーム内の主人公が見ている景色を再現する演出
1：情報を段階的に見せることで、ユーザーが場面を理解しやすくする演出
これについては「段階的開示」で説明できるので、ゲーム以外のサービスにもよく見られるかと思います。
いっぺんに情報を伝えるのではなく、徐々に情報を伝える手法です。
2：画面の世界観をビジュアル面で訴求する演出
これはゲームでよく見かける気がします。ゲームは映像表現なので、静止画だけではなく、映像で魅力を表現したくなる、というのが主な動機かと思います。
3：ゲーム内の主人公が見ている景色を再現する演出
2の発展形のように思えます。例えば以下のような演出です。
ゲーム内の主人公とゲームをプレイしているユーザーが同じ景色を見えているように感じさせ、ゲームへの没入感を高めていると感じました。
デザイン事例紹介11選
デザイン事例を紹介します。主に以下の場面で遷移演出があるように感じました。
- キャラの魅力を訴求したい時
- １日１回程度挑戦するバトル画面に遷移する時
１：キャラ詳細
こちらはキャラのリストからキャラごとの詳細画面に遷移する時の演出です。
見た限り、キャラごとに用意され衣装差分は考慮されていないようです。
映像的につながりがあるため、何が起きたのか理解しやすいと感じました。
個別に用意する手間はかかりますが、キャラの魅力を伝えるのに寄与していると感じました。
２：メッセンジャー
こちらは「blabla」というゲーム内でキャラクターたちとチャットが体験できるアプリの起動演出です。ゲームならではの楽しげな雰囲気を演出しているように感じました。
３：キャラ解放
こちらはキャラ解放画面です。特定の条件を達成するとキャラが獲得できます。
端末が軽快に動くアニメーションを用意することで、動かせるパーツであることも伝わります。
４：リサイクルルーム
こちらはリソースを消費してキャラの強化を行う機能です。
精密機械のようなUIパーツの台座からホログラムが表示され、中にはレベルや属性が表示されています。
５：タクティクアカデミー
こちらもリソースを消費してキャラクターを強化する画面です。
派手さは無いものの、文字や罫線が多くかなり丁寧な演出です。
６：アーク
様々なバトルを行う「アーク」という画面の遷移演出です。
まず背景を表示し世界観を伝えた後、タイミングをずらして各ボタンを表示しています。段階的開示と世界観の訴求の合わせ技のような演出です。
７：タワー
アークの中にある「タワー」というコンテンツの遷移演出とステージ選択演出です。
重たいUIパーツに合わせるかのように、重量が感じられる演出です。
８：迎撃戦
「アーク」の中にある「迎撃戦」の画面遷移演出です。
何かの進軍マップが３Dで表示され、そのマップ上にターゲットとなる敵がいるステージが表示される演出です。
９：アリーナ
「アーク」の中にある「アリーナ」の画面遷移演出です。
カメラ演出、暗い背景から一気にライトが光る演出、実況者のアナウンスボイスが流れるなど、物体を動かすアニメーションとは違うアプローチを積極的に取っているのが印象的だと感じました。
10：ソロレイド
ソロレイドの画面遷移演出です。
重厚感のあるシャッター、「戻る」や「ホーム」ボタンなどのUIパーツも揺らし重量感が表現されているように感じました。
11：DayByDay
こちらはDayByDayという所謂ミッション画面の遷移演出です。
こちらは画面のイメージに寄せているのか、霧が晴れるような柔らかな演出になっています。
メリハリがあるから演出が際立つ
全ての画面に対して画面遷移演出を用意しているわけではありません。
ショップやキャラ一覧など頻繁に遷移する画面に対しては遷移演出はなく、キビキビと遷移する挙動になっていました。
メリハリがあるからこそ、遷移演出が際立つように感じました。
作る側としてはたくさん見せたい気持ちも抱くかもしれませんが、使いどころを絞って特別感を演出するくらいの方が良いのかも。
画面遷移に力を入れたソシャゲと言えば「グラクロ」が真っ先に浮かんだのですが、あれも韓国の会社が開発したゲームでした。韓国では画面遷移演出が優先度高く求められるものなのかな…。
「グラクロ」も「ニケ」とは違った意味でロード演出に凝っていました。特にストーリー画面のロードは話の展開に合わせて画面を用意していました。あれをやり通せるのは大変な根性…。
以上です。
画面遷移演出の使いどころ、デザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「勝利の女神：NIKKE」のガイドラインを確認したところ、以下の記載がありました。
１．用語の定義
本ガイドラインにおいて、使用する用語の定義を以下に示します。
１）本件ゲームIP：本条２項に定める「当社オリジナルコンテンツ」に関してSHIFT UP CORP.が有する又は管理する一切の知的財産権を指します。
２）当社オリジナルコンテンツ：SHIFT UP CORP.が開発、制作、運営、配信等を行うゲームやその他創作物の世界観、ストーリー、キャラクター及びモンスターのイラスト、背景画像、バックグラウンド・ミュージック（BGM）、映像等を指します。
３）本件二次創作物：当社オリジナルコンテンツを元に、本件ゲームIPを利用し、又はクリエーターの創作要素を加えて表現及び制作した新しい制作物をいいます。例えば、イラストレーション、ゲーム関連グッズ、ビデオ、漫画、小説、ファンフィクション、ファンアート、コスプレ衣装、コスプレの写真及び動画などが含まれます。
４）本件二次創作活動：前項の本件二次創作物を製作、複製、公開、販売、頒布、配信する等の行為を指します。ただし、当社オリジナルコンテンツをそのまま再現、複製、コピー、トレースする行為、又はこれらと同様とみなされる行為は、二次創作活動と認められませんのでご注意願います。詳しくは、以下の例をご参照ください。
<二次創作活動と認められない行為の例>
スキャン等の方法で、SHIFT UP CORP.が独占的に著作権を有する公式イラストの画像データを取り込み、そのまま或いは加工したものを素材に転写し、アクリルスタンドやバッチ等のグッズを製作して販売及び公開する行為。２．本件二次創作活動の許諾範囲
１) 基本的には、本条に定める一部の例外を除き、非営利的活動のみ許諾します。
２）個人や法人格のない団体（サークル等）が、YouTubeやTwitchなどのコンテンツ共有プラットフォームに本件二次創作物を公開し、広告収益やその他収益を得ること。ただし、本ガイドラインに反する内容又は方法で公開した場合は、当社の判断にて当該公開に関連する収益化を中止するように要求する場合があります。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
