パシフィコ横浜にて8月22日~24日にわたって開催の「CEDEC 2018」。ここでは、8月24日に行われたセッション「プリンセスコネクト!Re:Dive 制作事例 ~UIを高速かつ高品質に作るためのプロトタイプ開発のススメ!~」の内容をお届けする。

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

(左から)齋藤友梨子氏、佐々木拓夢氏
「プリコネR」のコンセプトはアニメ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に移植する内製ツールを用いることで、プロトタイプからの再現についてもクリアすることができた。

さらなる高速化を目指し、UIアニメーションのプリセットも用意。

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

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

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

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

プリンセスコネクト!Re:Dive

Cygames

MobileアプリiOS

  • 配信日:2018年2月15日
  • 価格:基本無料

    プリンセスコネクト!Re:Dive

    Cygames

    MobileアプリAndroid

    • 配信日:2018年2月15日
    • 価格:基本無料

      (C) Cygames, Inc.

      ※画面は開発中のものです。

      この記事のゲーム情報

      機種
      PCMobile
      プラットフォーム
      アプリ
      OS
      iOSAndroid
      会社
      Cygames
      ジャンル
      RPG
      テーマ
      美少女
      システム
      横向き
      • セガゲームス特集ページ
      • Figgy
      • セール情報

      REGULAR定期配信

      • 販売本数ランキング
      • 発売日カレンダー
      • 編集部通信
      2月14日(木)
      47 HEROINES
      JUMP FORCE
      OlliOlli:Switch Stance
      THE ゴルフ
      Tokyo School Life
      アルケミックダンジョンズDX
      オメガラビリンスZ D3P THE BEST
      キャサリン・フルボディ
      キャサリン・フルボディ DL豪華版
      キャサリン・フルボディ ダイナマイト・フルボディBOX
      ドラゴンクエストライバルズ
      ネコぱら Vol.2 姉妹ネコのシュクレ
      ファイナルファンタジーIX
      ヴィクター・ヴラン オーバーキル エディション
      信長の野望・大志 with パワーアップキット
      信長の野望・大志 パワーアップキット
      机でピンポン
      東方スカイアリーナ・幻想郷空戦姫-MATSURI- CLIMAX
      2月15日(金)
      ファークライ ニュードーン
      フォトン・キューブ
      メトロ エクソダス
      メトロ エクソダス ゴールドエディション
      モダンコンバット Blackout
      2月18日(月)
      LINE ブラウンストーリーズ
      2月19日(火)
      還願 Devotion
      2月20日(水)
      干支かれ~十二支に猫が漏れた理由~
      2月21日(木)
      MASS FOR THE DEAD
      NG
      NieR:Automata Game of the YoRHa Edition
      SEGA AGES アレックスキッドのミラクルワールド
      YUMENIKKI -DREAM DIARY-
      かりぐらし恋愛
      かりぐらし恋愛 完全生産限定版
      イカロスM
      ガールズ&パンツァー ドリームタンクマッチDX
      ガールズ&パンツァー ドリームタンクマッチDX 初回限定生産版「乙女のたしなみBOX」
      デビルエンジン
      ブリキの騎士
      ブロブ カラフルなきぼう リターンズ(de Blob 2)
      大図書館の羊飼い -Library Party-
      大図書館の羊飼い -Library Party- 初回限定版
      教えて♡おねだり将棋
      添いカノ~ぎゅっと抱きしめて~
      添いカノ~ぎゅっと抱きしめて~ 完全生産限定版
      逆転裁判123 成歩堂セレクション
      逆転裁判123 成歩堂セレクション コレクターズ・パッケージ
      2月22日(金)
      Anthem
      Anthem Legion of Dawn Edition
      パイロットストーリー 787エアラインオペレーション
      2月26日(火)
      黒い砂漠 MOBILE
      2月28日(木)
      BATTLLOON - バトルーン
      JUDGEMENT 7 俺達の世界わ終っている。
      LEFT ALIVE
      RIDE3
      WORK×WORK
      ゆのはなSpRING! ~Mellow Times~ for Nintendo Switch
      ゆのはなSpRING! ~Mellow Times~ for Nintendo Switch 限定版
      ウィザーズ シンフォニー
      ゲーム ドラえもん のび太の月面探査記
      シンソウノイズ ~受信探偵の事件簿~
      ゾイドワイルド キングオブブラスト
      トライアルズ ライジング
      トライアルズ ライジング ゴールドエディション
      ノラと皇女と野良猫ハート2
      ノラと皇女と野良猫ハート2 B2タペストリー同梱版
      ノラと皇女と野良猫ハート2 抱き枕カバー同梱版
      パイロットスポーツ
      フォーゴットン・アン
      僕の彼女は人魚姫!?-My Girlfriend is a Mermaid!?-
      恋がさくころ桜どき
      3月1日(金)
      DEAD OR ALIVE 6
      DEAD OR ALIVE 6 コレクターズエディション
      DEAD OR ALIVE 6 デジタルデラックス エディション