パシフィコ横浜にて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
      テーマ
      美少女
      システム
      横向き
      TGS2018
      • トゥームレイダーシリーズ特集ページ
      • セガゲームス特集ページ
      • Figgy
      • 軌跡シリーズ特設サイト

      REGULAR定期配信

      • 販売本数ランキング
      • 発売日カレンダー
      • 編集部通信
      10月15日(月)
      あかねさす少女
      ハローキティワールド2
      プロジェクト・ハイライズ
      10月16日(火)
      NBA 2K プレイグラウンド2
      無双OROCHI3
      10月17日(水)
      キャンドルちゃん
      グリザイア ファントムトリガー Vol.4
      バクレツモンスター
      10月18日(木)
      BLACK BIRD
      CRYSTAR -クライスタ-
      CRYSTAR -クライスタ- デジタルデラックス版
      DARK SOULS REMASTERED
      DRONE STRIKER
      END OF ETERNITY 4K/HD EDITION
      Fast Striker
      キャプテン翼ZERO~決めろ!ミラクルシュート~
      クラッシュ・バンディクー ブッとび3段もり!ボーナスエディション
      ゲシュタルト・オーディン
      ソウルキャリバーVI
      ソウルキャリバーVI デジタルデラックス版
      ミストラリアの魔術師
      ヴェンデッタ
      放置RPG ドラゴン姫
      10月19日(金)
      Reigns:Game of Thrones
      ダンジョンラッシュ・Rebirth
      10月23日(火)
      るるたるイデア
      東京コンセプション
      10月24日(水)
      Gemini Seed
      10月25日(木)
      Cendrillon palikA
      Cendrillon palikA 限定版
      EVE burst error R
      Magic Scroll Tactics
      Shikhondo - 食魂徒
      さくらさくら
      さくらさくら 限定版
      ぷよぷよeスポーツ
      わいわい!ウォールチャレンジ
      ストリートファイター 30th アニバーサリーコレクション インターナショナル
      スネークパス
      セブン・ビリオン・ヒューマンズ
      ノラと皇女と野良猫ハート HD
      ノラと皇女と野良猫ハート HD TVアニメ同梱プレミアム版
      ノラと皇女と野良猫ハート HD TVアニメ同梱通常版
      プロジェクト・ハイライズ
      ベイブレードバースト バトルゼロ
      メモリーズオフ -Innocent Fille-
      ワールドネバーランド エルネア王国の日々
      夜廻と深夜廻 for Nintendo Switch
      死印
      遊んで将棋が強くなる!銀星将棋DX
      10月26日(金)
      PlayStation4 Pro レッド・デッド・リデンプション2 パック
      レッド・デッド・リデンプション2
      レッド・デッド・リデンプション2 アルティメット・エディション
      レッド・デッド・リデンプション2 スペシャル・エディション
      戦極姫-華- ~真録・天下を切り裂く光と影~[価格改定]
      戦極姫-華- ~真録・天下を切り裂く光と影~[価格改定] 豪華限定版
      10月28日(日)
      少女☆歌劇 レヴュースタァライト -Re LIVE-
      11月1日(木)
      THE QUIET MAN
      ネコ・トモ