神奈川県のパシフィコ横浜で開催されたゲーム開発者向けカンファレンス，「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デザイナーの仕事だと感じました」と述べて，セッションは終了した。