神奈川かながわ県けんのパシフィコ横浜ぱしふぃこよこはまで開催かいさいされたゲーム開発かいはつ者しゃ向むけカンファレンス，「CEDEC 2018」。その3日にちめとなる2018年ねん8月がつ24日にち，アニメRPGを謳うたって配信はいしん中ちゅうのスマートフォン向むけRPG「プリンセスコネクト！ Re:Dive」（以下いかプリコネR）のセッションが行おこなわれた。登壇とうだんしたのは，プリコネRのアニメーションデザインやUI/UXのディレクションを担当たんとうした佐々木ささき拓たく夢ゆめ氏しと，UIチームのリーダーとして開発かいはつフローの整備せいびやグラフィックを制作せいさくした齋藤さいとう友梨ゆり子こ氏しで，ゲームUIを高速こうそくかつ高こう品質ひんしつに作つくるためのワークフローが解説かいせつされた。

Cygamesデザイナー部ぶ UIデザイナーチームUIデザイナー 齋藤さいとう友梨ゆり子こ氏し

Cygamesデザイナー部ぶゲームアートディレクター 佐々木ささき拓たく夢ゆめ氏し

　まず斎藤さいとう氏しが，「プリコネR」の概要がいようとコンセプトである「アニメRPG」解説かいせつし，続つづいて佐々木ささき氏しが，アニメRPGとならではのキャラクターの魅力みりょくや世界せかい観かんを伝つたえるためのデザインやゲームに没入ぼつにゅうしてもらうUI設計せっけいのポイントを挙あげた。それは，以下いかのようなものだ。

1）ストレスのない画面がめん遷移せんい
2）迷まよわない設計せっけい
3）魅力みりょく的てきなグラフィックス

　というわけで，それぞれの詳細しょうさいを見みていこう。

ストレスのない画面がめん遷移せんいとは

　斎藤さいとう氏しは，「プリコネR」は，特定とくていのインタフェースを周回しゅうかいする形式けいしきのゲームであると前置まえおきしたうえで，UIデザインとして何なにができるかを考かんがえたという。周回しゅうかい式しきのゲームでは，同おなじ画面がめんを何なん度ども通過つうかするために反復はんぷく操作そうさが多おおく，さまざまな機能きのうに遷移せんいして遊あそぶことになる。快適かいてきに遊あそぶためには，ストレスなく画面がめんが遷移せんいする必要ひつようがあり，そのためにできることとしてロード時間じかんの高速こうそく化かを図はかったという。

サンプルとして紹介しょうかいされた，マイページとクエスト詳細しょうさいの画面がめん。ヘッダやフッダなどは同おなじデザインだが，背景はいけいが明あかるくても暗くらくても成立せいりつするものとし，さらにクエストの情報じょうほうやボタンなどが分わかりやすく見みえるように工夫くふうされている

　ロードの高速こうそく化かは基本きほん的てきにエンジニアの仕事しごとだが，UIデザイナーとしてどのように取とり組くんだかといえば，まずグラフィックス素材そざいの共通きょうつう化かが挙あげられる。キャラクターイラストやエフェクト，明あかるい背景はいけい，暗くらい背景はいけいなど，さまざまな画面がめんのすべてに対応たいおうできるデザインを作成さくせいし，これによってUI素材そざいの肥大ひだい化かを防ふせぎ，画面がめん遷移せんいで読よみ込こむデータの量りょうを減へらしたのだ。

　さらに，メニューの階層かいそうが深ふかくなるほど，UI素材そざいの共有きょうゆう比率ひりつを高たかくしていった。このようにすることで，使つかい回まわし感かんを減へらし，デザインとしても統一とういつが図はかれるようになった。

階層かいそうごとの専用せんよう素材そざい（赤あか）と共有きょうゆう素材そざいの割合わりあい（青あお）。第だい1階層かいそうはユーザーの目めに触ふれやすい部分ぶぶんなので専用せんよう素材そざいの比率ひりつを高たかくし，第だい2，第だい3と，階層かいそうが深ふかくなっていくにつれて共通きょうつう素材そざいの比率ひりつを増ふやしていった

迷まよわない設計せっけいとは

　ゲームに没入ぼつにゅうするために必要ひつような「迷まよわない設計せっけい」だが，これは，ユーザーが目標もくひょうを見失みうしなわず，何なにをすればいいのかがすぐに分わかり，かつ行いき止どまりがないように感かんじさせるという意味いみだ。

「プリコネR」におけるキャラクターの強化きょうかサイクル。ループ中ちゅうに繰くり返かえしの導線どうせんを加くわえることで，プレイヤーのやりたいことがストレスなくできるようにした

　そのためUIデザインチームはユーザーの想定そうてい経路けいろを検証けんしょうし，詰つまりそうな場所ばしょや次つぎに何なにをすればいいのか見失みうしないそうになる場所ばしょに導線どうせんを用意よういして，どのような状況じょうきょうでもゲームのサイクルが止とまらないような設計せっけいを心こころがけたという。ロード時間じかんの高速こうそく化かと合あわせて，ちょっとした隙間すきま時間じかんでも遊あそべるデザインを目指めざしたという。

　余計よけいな画面がめん遷移せんいをさせないため，派生はせいする機能きのうをポップアップで表示ひょうじするデザインを採用さいようし，これによってユーザーが直前ちょくぜんの画面がめんを見失みうしなわすにすむようにもなった。さらに，導線どうせんとなるボタンの色いろを統一とういつしたり，赤あかいひし形がたのマークでユーザーがクリアしていないコンテンツを知しらせたりといった，さまざまな工夫くふうを加くわえている。

ベースとなるメニューに，必要ひつような機能きのうをポップアップで乗のせている。このやり方かたには，複数ふくすうの画面がめんで同おなじポップアップを使つかいまわせるというメリットもある

魅力みりょく的てきなグラフィックスとは

　「プリコネR」は，アニメパートとゲームパートによって構成こうせいされており，この2つを乖離かいりさせないためのUI設計せっけいやビジュアル調整ちょうせいが「魅力みりょく的てきなグラフィックス」だ。まず，見みただけで「プリコネR」と分わかるように，ゲームパートにもアニメーションを使つかって2つのパートの境界きょうかいを薄うすくした。
　続つづいて，ゲームパートでもキャラクターに触ふれられる機会きかいを増ふやし，機能きのう的てきであるだけでなく，キャラクターの魅力みりょくをユーザーに十分じゅうぶんに伝つたえられるように心こころがけた。UIデザインも，アニメパートの塗ぬりや線せん，色彩しきさいなどを参考さんこうに，ビジュアル面めんの統一とういつを図はかったという。

左ひだりは効率こうりつよくキャラクターの確認かくにんができるが，右みぎのほうが衣装いしょうや持もっている武器ぶきなど，キャラクターの魅力みりょくが伝つたわりやすい。このキャラクター一覧いちらん画面がめんを「ユーザーがヒロインと出会であう場所ばしょ」と考かんがえ，単純たんじゅんなデザインではなく，キャラクターの魅力みりょくをできる限かぎり引ひき出だせるUIとした

キャラクターの立たち絵えをアニメーションに変更へんこう。UIの下したにもアニメーションを入いれて，アニメパートとゲームパートとのイメージを接近せっきんさせている

アニメーションとの親和しんわ性せいを高たかめるために，UIでも金属きんぞくの質感しつかんや細こまかいディテールを避さけて，アニメーションの塗ぬりに近ちかいものにした。立体りったい感かんも光ひかりと影かげで作つくるのではなく，アニメーションのようなデザインにした

UIの色味いろみや加工かこうは，メインキャラクターの一人ひとりであるペコリーヌを参考さんこうにした。彼女かのじょに使つかわれた色いろを，彩いろどり度ど，明度めいどなど調整ちょうせいしてダイアログに用もちいたり，キャラクターに合あわせて色味いろみを加くわえたりしたという

手触てざわりを改善かいぜんするためのプロトタイピング

　「最近さいきん，ゲームに限かぎらず，さまざまな分野ぶんやのUI/UX開発かいはつでプロトタイピングが用もちいられるケースが増ふえていると感かんじます」と佐々木ささき氏しは述のべ，「プリコネR」でも導入どうにゅうされたプロトタイピングについて，制作せいさく事例じれいを交まじえての紹介しょうかいが行おこなわれた。
　佐々木ささき氏しはまず，プロトタイピングの目的もくてきを「早はやい段階だんかいで評価ひょうか，検証けんしょうすることで手て戻もどりを減へらし，さまざまな視点してんからの評価ひょうかでUIを高こう品質ひんしつ化かすること」と設定せっていし，そのうえで，高こう品質ひんしつなUIを短みじかい時間じかんで作つくることを目指めざしたという。

初はじめにプロトタイプを制作せいさくし，レビューを行おこなったのちに実装じっそうという流ながれだ

　プロトタイプを制作せいさくするにあたって決きめるべき事項じこうに，「忠実ちゅうじつ度ど」がある。簡単かんたんに言いうと，どれだけ製品せいひんに近ちかいプロトタイプを制作せいさくするかの度合どあいで，遷移せんいや操作そうさ，機能きのうを確認かくにんするための低てい忠実ちゅうじつ度どのものと，ゲームに近ちかい見みた目めでアニメーションや手触てざわり部分ぶぶんも確認かくにんできる高こう忠実ちゅうじつ度どのものとなる。
　低てい忠実ちゅうじつ度どのプロトタイプは，ゲーム全体ぜんたいの画面がめん設計せっけいにもかかわってくるので，開発かいはつ初期しょき〜中期ちゅうきで導入どうにゅうするのに適てきしており，高こう忠実ちゅうじつ度どのプロトタイプは，手触てざわりやアニメーションといった調整ちょうせいが必要ひつような開発かいはつ中期ちゅうきから後期こうきの導入どうにゅうに適てきしている。「プリコネR」では，ゲーム体験たいけんを改善かいぜんして高こう品質ひんしつなUIを作つくりたいという目的もくてきがあったため，当初とうしょから高こう忠実ちゅうじつ度どプロトタイプを採用さいようしたという。

　ただ，高こう忠実ちゅうじつ度どプロトタイプには，アニメーションの作つくり込こみやコーディングなど，制作せいさくに時間じかんがかかるうえに，実装じっそうも大変たいへんになるという弱点じゃくてんがあった。
　これらを克服こくふくするために，Flashなどのアニメーション制作せいさくができる「Adobe Animate」を採用さいようし，さらに，作つくられたアニメーションを「Unity」で再生さいせいできるようにする独自どくじツール「FlashToUnity」を使つかって，制作せいさくの手間てまや再現さいげん性せいの問題もんだいを解消かいしょうした。Abobe Animateの採用さいようには，FlashファイルをiPhoneのネイティブアプリとしてビルドできたる機能きのうを持もっていたことや，開発かいはつ中ちゅうに使つかえるツールがこれしかなかった，ということも大おおきな理由りゆうだという。

低てい忠実ちゅうじつ度どのプロトタイプ。ボタンをタップしたら遷移せんいし，ゲームの流ながれなどが確認かくにんできる。見みた目めもラフでアニメーションは入はいっていないが，そのぶん手早てばやく作成さくせいできる

高こう忠実ちゅうじつ度どのプロトタイプは，使用しよう感かんが確認かくにんできるほど作つくりまれているが，プロトタイプの作成さくせいに高たかいコストが必要ひつようだ。アニメーションや遷移せんいなど，見みた目めはほとんどゲームと同おなじ

プロトタイプの制作せいさくをさらに高速こうそく化かするため，UIアニメーションプリセットを用意よういした。専用せんようのFlashキャンバスにあらかじめよく使つかうアニメーションを保存ほぞんし，それぞれのアニメーションを必要ひつように応おうじて対象たいしょう画面がめんに移植いしょくできる。これにより，効率こうりつ的てきかつ安定あんていしたクオリティのプロトタイプの制作せいさくが可能かのうになった

　プロトタイプを制作せいさくしたらクロスレビューを行おこない，高こう品質ひんしつ化かを目指めざす。「プリコネR」では，プロトタイピングのレビューとして，多おおくの人ひとが使用しよう感かんを評価ひょうか，検証けんしょうするクロスレビューと，クロスレビューの結果けっか出でてきた2つの案あんから1つを決定けっていするときのA/Bテストを実施じっしした。クロスレビューは実機じっきで確認かくにんできるため，精度せいどの高たかい評価ひょうかができたそうだ。
　佐々木ささき氏しはクロスレビューから，徹底てっていしてユーザー目線めせんに立たつことの重要じゅうよう性せいを感かんじたと述のべる。毎日まいにちUIに向むき合あっていると裏側うらがわの事情じじょうもよく分わかってしまい，初はつ見みの感覚かんかくを失うしなうからだ。開発かいはつ中ちゅうでも，さまざまな人ひとにプレイしてもらうのが大切たいせつだという。

クロスレビューは，初はじめにデザイナー，次つぎにプロジェクトのプランナーやエンジニア，最後さいごにプロジェクト内外ないがいのスタッフと，段階だんかい的てきにレビュアーの規模きぼを広ひろげて実施じっしした

ボタンの配置はいちが異ことなる2案あんでA/Bテストを実施じっしした例れい。クロスレビューでは意見いけんが割われたが，2つに絞しぼってA/Bテストを実施じっししたことで，B案あんが使つかいやすそうという意見いけんが多おお区くで多おおく出でた。A/Bテストは，こうした軽微けいびなデザインの違ちがいを判断はんだんするときに向むいている

クロスレビューで配慮はいりょしておきたいのが，修正しゅうせい，試行錯誤しこうさくごの期間きかんを決きめること。いつまでに終おわらせるのかを関係かんけい者しゃ全員ぜんいんで意識いしきするだけでなく，どのような要件ようけんを満みたしたらゴールなのかも明確めいかくにしなければならない。実機じっきでの確認かくにんも必須ひっすだ

　最後さいごに佐々木ささき氏しは，「本ほん作さくではアニメRPGというコンセプトのもと，全員ぜんいんがそのコンセプトに向むかって試行しこう錯誤さくごしました。ユーザーが求もとめるものを実現じつげんするためにも，UI視点してんでできることはなんなのかを常つねに考かんがえることが大切たいせつです。開発かいはつを通つうじてゲーム性せい，キャラクター，世界せかい観かんなどを最大限さいだいげんにひき出だすのがUIデザイナーの仕事しごとだと感かんじました」と述のべて，セッションは終了しゅうりょうした。