パシフィコ横浜にて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定期配信

      • ゲーム発売日・配信日カレンダー
      • Gamer編集部通信
      4月16日(火)
      PETITO ~ビスクドール物語~
      SCRAP RUSH!!
      World of Warships: Legends
      きみのまち ポルティア
      4月17日(水)
      LINE:ディズニー トイカンパニー
      あいりすミスティリア!
      4月18日(木)
      CARAVAN STORIES
      CIRCLET PRINCESS
      Cuphead
      Katana ZERO
      アーケードクラシックス アニバーサリーコレクション
      イモータル・レガシー 不滅の禍
      オーバーライド 巨大メカ大乱闘 スーパーチャージエディション
      スクエアピクト Block-a-Pix DELUXE
      ダートラリー2.0
      ラストイデア
      ラッドロジャース:ラディカルエディション
      ラングリッサーI&II
      ラングリッサーI&II 限定版
      大正×対称アリス all in one
      大盛グルメ食堂
      進撃の巨人TACTICS
      4月19日(金)
      白衣性恋愛症候群Re:therapy
      銀星囲碁19
      4月20日(土)
      けだまのゴンじろー フィットエンドラン
      4月23日(火)
      禍つヴァールハイト
      4月25日(木)
      Cytus α
      Darksiders Warmastered Edition
      Death Coming
      EVE rebirth terror
      EVE rebirth terror 初回限定版
      Figment
      SEGA AGES バーチャレーシング
      SlabWell
      World of Warships: Legends
      ザ・ウェイ~トワの誓い~
      スターリンク バトル・フォー・アトラス スタンダードエディション
      スターリンク バトル・フォー・アトラス スターターパック
      スターリンク バトル・フォー・アトラス デラックスエディション
      ソードアート・オンライン -ホロウ・リアリゼーション- DELUXE EDITION
      トリカゴ スクラップマーチ
      ドラゴンズドグマ:ダークアリズン
      ニンジン:クラッシュ・オブ・キャロット
      ピクセル パズルパック 3-in-1
      ファイナルファンタジーXII ザ ゾディアック エイジ
      プロジェクト・ハイライズ アーキテクトエディション
      レンドフルール for Nintendo Switch
      レンドフルール for Nintendo Switch 限定版
      殺人探偵ジャック・ザ・リッパー
      海腹川背 Fresh!
      遊☆戯☆王 デュエルモンスターズ レガシー・オブ・ザ・デュエリスト:リンク・エボリューション
      4月26日(金)
      Days Gone
      Days Gone デジタルデラックスエディション
      ウロボロスの呪い ~Broken Sword~
      ガーディアン・プロジェクト
      クダンノフォークロア
      クダンノフォークロア 限定版
      ハコボーイ!&ハコガール!
      4月27日(土)
      グリザイア:ファントムトリガー Vol.6&5.5
      グリザイア:ファントムトリガー Vol.6&5.5 特装版
      4月30日(火)
      Tales of the Neon Sea