パシフィコ横浜にて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
      テーマ
      美少女
      システム
      横向き
      • G123.JP特集ページ
      • セガゲームス特集ページ
      • セール情報
      • リディー&スールのアトリエ特設サイト

      REGULAR定期配信

      • 販売本数ランキング
      • 発売日カレンダー
      • 編集部通信
      12月6日(木)
      FOX -Flame Of Xenocide-
      Hollow
      Hyper Attraction Sky Games
      Kenshi
      LITTLE FRIENDS -DOGS&CATS-
      Skyforge
      Super Volley Blast
      The Bug Butcher
      ねころび
      アスディバインカムラ
      カプコン ベルトアクション コレクション
      ジャストコーズ4
      ジャストコーズ4 ゴールドエディション
      ジャストコーズ4 デジタルデラックスエディション
      スーパーガチャポンワールド SDガンダムX
      12月7日(金)
      PLAYERUNKNOWN’S BATTLEGROUNDS サバイバーズ・エディション
      PLAYERUNKNOWN’S BATTLEGROUNDS チャレンジャーズ・エディション
      PLAYERUNKNOWN’S BATTLEGROUNDS チャンピオンズ・エディション
      でんしゃとれまる ~れんけつでかいけつ!~
      グレントリア ~眠レル竜ト暁ノ戦士ノ物語~
      塊魂アンコール
      大乱闘スマッシュブラザーズ SPECIAL
      12月10日(月)
      真・三國無双7 with 猛将伝 DX
      12月11日(火)
      キングダムアライブ
      12月12日(水)
      でみめん
      12月13日(木)
      Blue Rider
      Fight of Gods
      JUDGE EYES:死神の遺言
      PEACH BALL 閃乱カグラ
      PEACH BALL 閃乱カグラ にゅうにゅうDLスペシャルパック
      Runbow
      Sine Mora EX
      ギア・クラブ アンリミテッド 2
      ゴッドイーター3
      ゴッドイーター3 初回限定生産版
      ダイダロス:ジ・アウェイクニング・オブ・ゴールデンジャズ
      ダイダロス:ジ・アウェイクニング・オブ・ゴールデンジャズ Limited Edition
      ニーズヘッグ2
      バイオハザード バリューパック
      バイオハザード7 レジデント イービル ゴールド エディション グロテスクVer. Best Price
      フォートナイト ディープフリーズバンドル
      遊んで囲碁が強くなる!銀星囲碁DX
      閃乱カグラ ピーチ&リフレ限定Wパック
      12月14日(金)
      ボーダーランズ2 VR
      12月17日(月)
      ニッポンマラソン
      12月18日(火)
      Bladed Fury
      囚われのパルマ Refrain
      12月20日(木)
      Fate/EXTELLA Best Collection
      Fit Boxing
      Nightshade/百花百狼
      Rainbow Skies
      Revertia
      THE なめこのパズル ~なめこ大繁殖~
      WARHAMMER 40,000:Inquisitor - Martyr
      WWA COLLECTION
      √Letter ルートレター Last Answer
      くにおくん ザ・ワールド クラシックスコレクション
      イースVIII -Lacrimosa of DANA- クリスマスGiftパッケージ
      デーモンクリスタル
      ドラゴンクエストビルダーズ2 破壊神シドーとからっぽの島
      ドラゴンクエストビルダーズ2 破壊神シドーとからっぽの島 追加DLC第1弾・第2弾付きパック
      バトルプリンセス マデリーン
      ブロブ カラフルなきぼう(de Blob)
      リプキス
      加藤一二三 九段監修 ひふみんの将棋道場
      勇者ネプテューヌ 世界よ宇宙よ刮目せよ!! アルティメットRPG宣言!!
      勇者ネプテューヌ 世界よ宇宙よ刮目せよ!! アルティメットRPG宣言!! ヒーローエディション
      吉原彼岸花 久遠の契り
      塊魂アンコール
      鬼武者
      鬼武者 幻魔封印箱