アニメRPGを実現した「プリンセスコネクト！Re:Dive」のUIデザインとプロトタイピング【CEDEC 2018】 UIの観点から取り組んだ事例の数々を紹介

Cygames デザイナー部 ゲームアートディレクターの佐々木拓夢氏、デザイナー部 UIデザイナーの齋藤友梨子氏が登壇して行われた本セッションでは、「プリンセスコネクト！Re:Dive」(以下、プリコネR)の制作にあたって高品質なUI制作をいかに効率化したか、そしてコンセプトであるアニメRPGを実現するために、UIデザイナーとしてどのようにアプローチしたかについて、具体的な流れを交えて紹介していった。

まずはUIデザインについて、齋藤氏が取り組んだことが紹介される。アニメRPGというコンセプトに対して、UIが果たすべき役割として捉えたのは“ゲームパートでストレスを与えずにアニメに没入してもらうこと”。その達成にあたって、以下の3点にそれぞれアプローチしていったという。それぞれ順番に触れていこう。

1. ストレスのない画面遷移
2. 迷わない設計
3. 魅力的なグラフィック

プレイしている人にはご存知の通りだろうが、「プリコネR」は基本的に周回ゲームの構造となっており、同じ画面を何度も通過する、反復操作が多い、さまざまな機能に遷移して遊ぶといった特徴を持っている。そうした状況を踏まえつつ、画面遷移にあたって実際に取り組んだのが、ロード時間を高速化すること。デザイナーの観点からデザイン面を工夫することで、ストレスのない画面遷移を実現していった。

まず取り組んだのが、各画面で使い回せるデザインの徹底。もともと、「プリコネR」はアニメやイラストなど、背景に使われる素材が多種多様に用意されている。それぞれの背景に合わせてデザインを作成すると膨大な量になってしまうことから、多様な種類の背景でも成立するデザインを作成していった。

続いて取り組んだのが、階層によって共通素材の比率を変えるというもの。ここで言う階層とはプレイヤーが実際に画面遷移する流れを指しており、その階層がより深くなるにつれて共通素材率を高くしていったのだという。

ストーリー画面などプレイヤーがよく訪れる第一階層では、キャラクターイラストを用いたボタンやアニメーションなどの専用素材をふんだんに使っている。これが第二階層(ここでは探索画面)になると共通素材の割合を60％程度に引き上げ、さらにクエスト選択などの第三階層までいくと、専用素材は使わず、共通素材のみでの構成となっている。

このような工夫によって容量を減らしてロード時間の短縮を図りつつ、同時にデザインの使いまわし感を抑制。目的であるストレスのない画面遷移を、デザインの観点から実現していった。

続いての取り組みは迷わない設計にすること。齋藤氏はこれを“攻略情報がいらないこと”と定義し、そのために必要な要素として以下の3点を挙げた。

1. 行き止まりがないように感じる
2. 何をすれば良いかすぐにわかる
3. 目標を見失わずにプレイできる

これに先ほどのロード時間高速化から来る隙間時間の遊びやすさをより高めるため、どこから始めても何をすればよいのかすぐにわかる設計にすることに取り組んでいった。

まずはユーザーの想定経路を検証して作成。この中で詰まるポイントを調査し、その画面には必ず「強くなるため」の導線を作成。どのような状況でもメインサイクルが行き止まることのないような設計を目指した。

ここでは、キャラ強化のメインサイクルを通じて、より具体的な設計の流れを説明。ユーザーがよく行き来する場所である、クエスト画面(装備を集める)とキャラ強化画面(あつめた装備を使う)に周回できる導線を作成することで、迷わず、そして行き止まることがないようにしていった。

また、ゲームをプレイするとありがちな元の画面を見失わないようにする工夫として、ポップアップを利用している。機能に対するベース画面は1つにして、その派生機能をポップアップで重ねることで目的を達成するとともに、複数の画面で同じポップアップを使い回すことができるなどのメリットもある。

そして経路の途中には必ず解を用意することも意識。複数の方法を用いることで、次に何をすればよいのかがよりわかりやすくなるというわけだ。

そして最後に紹介されたのが、魅力的なグラフィックについて。ここで意識したのはアニメRPGだとわかるUI、つまりはUIを通じてキャラクターと世界観にふれる機会を作るとともに、UIそのものから「プリコネR」と認識できるようなものにすることだ。

そのため、キャラクターの躍動感や個性をできる限り大きく取り込んだUIにすることを意識。そのためのアプローチとして、例えばキャラクター一覧のページであっても、ただ単にアイコンで表示するのではなく、幅を使って大きく映し出すことでその魅力を引き出すなどの試みをしている。

また、UIを見ただけで分かるという観点においては、アニメーションをそのままUIに用いるというアイデアで表現。これが「プリコネR」らしさと思わせるだけの、インパクトのある演出だ。

加えて、世界観にあったデザインにすることもよりアニメRPGらしいUIを作るために取り組んだという。具体的には、UIをアニメの塗りと単一なキャラの主線に似合う加工にすることを意識。キャラクターの色味やゲーム内背景のゲーム内背景の影の入れ方などを参考に、UIの色味や加工を決めているのだとか。

これらの取り組みを経て、「プリコネR」のUIは作成されている。プレイしている人であればなるほどと思う点も多いのではないだろうか。

後半では、佐々木氏よりUIデザインにおけるプロトタイピング導入に対する知見が語られた。本作ではプロトタイピングを早い段階で試作を開発し、課題を検証する手法としており、UIデザインにおいては手戻りを減らすことと、多面的な評価によるUIの高品質化を目指して行われた。これらはつまり、高品質なUIを高速で作るということを指している。

本作におけるプロトタイピングでは、プロトタイプの制作から2種のレビューを経て実装していく。プロトタイプの制作は忠実度というかたちでその機能を分けており、初期段階では素早くデザインの確認ができる低忠実度、開発後期に差し掛かるとより細かな確認ができる分、高コストの高忠実度が制作される。そして今作ではゲーム体験を改善することで高品質なUIを制作するために、高忠実度のプロトタイプが採用されることになった。

ただし、先にも触れたとおり高忠実度のプロトタイプ制作にはアニメーションの作り込みやコーディングの必要性などの問題で時間がかかる。それらの解決手段として採用したのがAdobe Animate。アニメーションツールを用いることでこれらの課題を解決したほか、FlashデータをUnityに移植する内製ツールを用いることで、プロトタイプからの再現についてもクリアすることができた。

そうして制作されたプロトタイプは、複数の視点で高品質化するため、クロスレビューとA/Bテストの2種のレビューによって評価される。クロスレビューは職種を問わず触って評価・検証するもので、デザイナー、プランナー・エンジニア、社内スタッフという順番で行うことで、より広い範囲での評価へとつながっていく。

一方のA/Bテストは、クロスレビューを実施した上で、2つの案で悩んだ場合に社内の無作為のメンバーに対し、アンケート形式で実施するもの。こちらは軽微なデザインの差を判断する際に向いているという。

なお、プロトタイピングの導入に関しては、修正・試行錯誤の期間を決めることや、画面の制作におけるゴールを明確にすること、そしてプロトタイプも実機で確認することを考慮すべきだという。その上で、以下の内容でUIデザインにおけるプロトタイピングの有用性を提示した。

本作の開発においては、アニメRPGというコンセプトのもと、ユーザーが求めているものを実現するために、UIの観点でできることを模索しながら取り組んできたという。このように、ゲーム性、キャラクター、世界観などの魅力を最大限に引き上げるのがUIデザイナーの仕事だとし、セッションを締めくくった。