コンピュータエンターテインメント協会（CESA）は、9月2日～4日の期間、オンラインにて、国内最大のゲーム開発者向けカンファレンス「コンピュータ・エンターテインメント・デベロッパーズ・カンファレンス 2020」（CEDEC 2020）が行われた。
本稿では、9月3日にQualiArtsが実施したセッション「大規模モバイルゲーム開発を高速化するAdobe XD活用術 〜企画立案からUnityと連携した実装まで〜」の模様をお届けする。
本セッションでは、エンジニアの田村和範氏、クリエイティブディレクターの春山俊輔氏、ディレクターの鈴木雄一朗氏が登壇。企画を行うディレクター、UIデザインを行うクリエイター、実装を行うエンジニアそれぞれの視点から、XDをどのように活用して高速な開発を実現しているか、そのノウハウを解説した。
まず、XDによるフローの変化、効果的なプロトタイプ、なぜXDが良いのかについて、鈴木氏が企画セクションの視点で紹介した。
Adobe XDは、2017年のリリースされたばかりのデザイン及びプロトタイピングのツールで、主にWebサイトやモバイルアプリなどのデザインに利用されるものだが、同社ではゲーム開発にも有効であると感じ、導入。それにより開発変化が起こったという。
同社の開発は、企画、立案からゲームリリースまで約2年半かかることが多く、課題感として「初期に完成イメージが持てず、UI作成や実装段階になって問題が表面化し、企画段階まで戻ってしまう」という点を鈴木氏は挙げた。
そこで導入したのがXD。開発初期にXDを使い、動作可能なプロトタイプを作ることで、細かい仕様策定や、UIデザインに入る前に具体的なイメージを持つことが可能に。
これにより、早期で多くの問題点に気づくことができ、結果として開発期間1年でリリース、という事例も生まれたそうだ。
▲従来の開発からXD導入で、最初に認識の擦り合わせができ、他セクションの完了を待たず各々作業を進められ、大幅な短縮に繋がった。
では、実際どのようにXDを活用したか？
従来は仕様を固める前に簡単なフローチャートを作成していたが、企画の段階でゲームの全体像が把握できず、フローチャート自体の修正に時間がかかるため、試行錯誤の回数が減り結果精度が上がらない問題があった。
XDを使う事で、主要な画面の構成案をすべて作り、ボタン遷移まで可能なプロトタイプを作成するといったフローに変更したという。
▲右図がXDを使ったプロトタイプ。青い線が各画面を繋ぐ遷移導線で、各画面のボタンに導線を繋げることで実際のゲームのように遷移を確認可能。
鈴木氏は「ゲームはあらゆる機能が絡み合っているので、まず点ではなく、全体を俯瞰してゲームイメージを作成して明確化させることで、他メンバーと同じイメージを共有できる」とし、初期段階で可能な限りの画面をプロトタイプで作るように意識しているとした。
▲プロトタイプを作成することでプランナーはもちろん他職種ともゲームイメージを共有することができる。
プロトタイプを作成する分、企画段階の工数が膨れ上がらないかという懸念もあるが、その点については、「プロトタイプに使用するUIパーツを事前にルールを決め、用意する事で大幅に短縮することが可能」（鈴木）とした。
▲デザインキット。コンポーネントをデザイナーが用意することで、企画を基にそこからUIデザインを作成する際にもスムーズに進めることができる。
▲XDを使ったプロトタイプツールの機能を紹介するデモ。
また、XDは作成したファイルのクラウド保存と共同編集も可能。これによりプランナーが作成したファイルをデザイナーが編集し、エンジニアが確認するといった具合にXD上での進行、コミュニティも可能となる。
▲XD共同編集機能を使って3セクション同時に作業を進めたときの様子。
鈴木氏は、「プロトタイプを作り、企画段階でゲームのイメージをより具体的にすることで不要な工数の削減、品質の向上が期待できます。また、可能な限り想定している機能をプロトタイプで作成することも重要です」とコメントした。
■XDで行うUIデザインについて
続いて登壇した春山氏は、XDで行うUIデザインについて語った。
従来のフローは、仕様書を見ながらフォトショップで画面構成を作り、素材の作り込みはフォトショップとイラストレーター、バトル画面、ガチャ画面の演出はAfter Effectsで制作し、それらを手動でunityに反映させていた。
春山氏は「Unityでの作業は、デザインワークというよりトレースに近く、時間がもったいない」という感覚だったそうだが、XD導入で、基本的に全ての画面をXDで制作し、作り込んだ素材もXDにリンクさせることで時間に余裕が生まれたとした。
また、Unityへの自動配置が可能となりエンジニアとのコミュニケーションコストが減ったという。
さらにXDによる制作スピード上昇と自動配置ツールによって生まれた時間を利用し、ProtoPieを使って手触りにこだわることができているそうだ。ちなみに同ツールは、XDを読み込む自動配置がデフォルトで備わっている。
▲複数のプロジェクトで実施して感じたXDの使用感。
サンプルデータを用いて、XDの中身についても解説した。
まず、1つのXDファイルに300画面ほど作る。解像度はフルHDに設定し、カンバスを2分割してレイアウトするのがオススメだという。
▲並べ方は機能ごとにグループを意識し、一定のマージンで広めに配置する。右に行くにつれ階層を下げていくイメージ。アートボードの外側も大事なエリアで、参考資料やメモを気軽に残すことができる。
春山氏は「XDと向き合うと自然と考えながら作るような操作になるので、そういった点でもスピードアップが計れている」と述べた。
最終的にはこれらXDが作られ、アセットのリンク機能を使う事で基となるデータを修正すれば、リンク先のデータにもスピーディーに反映。
実装データのほか、イメージボードやタップ判定指定、解像度対応指定などの資料を、XDで制作しているそうだ。
次に春山氏から、チームでXDを使うようになってから生まれた開発工程が紹介された。
「私達のプロジェクトでは、大豆、豆腐、厚揚げというフェーズを定義し、開発を進めている」と春山氏。ちなみにこれらは実際に使われているネーミングとのこと。
▲殴り書きのような精度で、ひたすら画面に要素を洗い出すことが目的の大豆フェーズ。
▲本格的な実装に向けたアウトプットを意識する目的の豆腐フェーズ。
▲リリースクオリティを目指し、ブラッシュアップを繰り返すために作り込みに集中する厚揚げフェーズ。
これらの過程を経てプロダクトが完成する。春山氏曰く「各フェーズでの目的を達成することに意識をむければ、結果としてスムーズな開発が実現する」とのこと。
最後に春山氏は、「XDを活用しているが、大切なのはプロジェクトに最適なやりかたを見つけて実行すること。大豆、豆腐、厚揚げのような状態定義に関しても、スピーディーな開発を実現させる上でチームの認識を揃える為に生まれたソリューションです。大切なことは、ツールや手段の内容ではなく、目的を達成する事だと思っています」とコメントした。
■XDからunityへのインポート及び実装について
最後に登壇したのは、エンジニアの田村氏。エンジニア視点からも、XDは扱いやすいという。
エンジニアは、クリエイターの使うツールに慣れていないことが多く、実際フォトショップなど多彩な機能のあるツールの場合、ファイルを開いてもどのように中身を見たらよいかわからない、ということが起きるそうだ。
その点、「XDは操作が直感的で特別な知識がなくてもすぐに使える」と田村氏。また、アプリのデザインに特化しているため、良い意味で機能が限られており、何が起きているのかわかりやすい、という特徴があるとした。
そのおかげで、XDファイルを共有された際、エンジニアでも必要な情報を簡単に手に入れることができると感じるそうだ。
また、プラグインの可能性が無限大であることも特徴として挙げた。多くのAdobe製品で共通して言えるが、XDにもプラグイン機能があり、自由に独自のプラグインを開発できる。
「エンジニアとしては腕の見せ所で、開発を効率化するための様々なツールをプラグインの機能を使って作成できる可能性がある」と田村氏は述べた。
上記で紹介したXDプラグイン機能を活用し、同社はXDのデザインをUnityにインポートするツールを内製しているという。
▲弊社で現在開発中のゲームでは、ゲームエンジンとしてUnityを採用しているため、UIを組み立てるのはUnity上となっている。
ツールの開発言語としては、上図の①の機能の部分が、XDプラグインとなるためJavaスプリクトを利用。②の機能がUnity側の拡張機能のため、C#を利用しているとのこと。
続いて、このツールについて、実際のゲーム開発でどのように運用されているか紹介。まずツール制作の背景とツールの概要について。
プロジェクトでの典型的なUI実装フローの多くは、以下のスライドのように、デザイナーが画面を作成して見本となる画面の一枚画像と使用する素材も書き出す。見本となる画像には、テキストのフォントサイズの指定やUIの位置の指定など、付加的な情報を加えることもあるだろう。
この問題点は、手動でのUI再現が大変だということ。細かい部分に気を配りながら作業する必要があると同時に、単調な作業になりがちでモチベーションを保つのが難しい。
しかし、「よく考えると、デザイナーがデザインを作成した時点でそのような情報は、そのデザインのファイルに含まれていると言える」と田村氏。
「デザインツールとしてXDを使っているのなら、XDプラグインを利用する事によって、必要な情報をデザインファイルそのものから抜き出して、あとはUIを自動生成すればよいのではないか、と考えられる」とツール制作の背景を説明した。
ツールを利用したUIの実装フローでは、デザイナーが画面のデザインを作成したら、XDファイルをエンジニアに渡す。エンジニアはツールを実行するだけでデザインをそのままUnityに取り込むことができ、面倒で大変だったUIの再現作業が非常に手軽になるという。
もちろん実際のUI実装はそれだけで終わりではなく、その後色々な作業をする必要があるが、「初期のUI配置が自動化されるだけでもインパクトのある工数削減につながる」と田村氏は語った。
また田村氏は、ツールを使ったUI実装の利用イメージや自動配置についても紹介した。
これらを踏まえ、「実際、UIの実装の仕組みはプロジェクトによって多種多様なので、ツールを便利にするためのこのようか拡張は不可欠」と田村氏。また、このツールの特徴として、編集に関しては完全に自由という点を挙げた。
デザインに修正があった場合、新しいデザインとして改めてインポートを行い、手動で差分をマージするという。
これについて田村氏は「デザイン修正の自動反映を実現するようなツールにすることも可能だと思うが、そこにこだわると様々な制約が生まれてしまう。本当に使いやすいツールを作るためには、全てを自動化にしようと固執し過ぎないことが大事」とした。
次に画像が重複してしまう問題について。
これはツールの特性上、画面ごとにデザインをインポートするため、そこで利用される画像を何も考えず取り込んでいくと画像が重複し、プロジェクトに取り込まれてしまうという問題で、それぞれを別の素材としてプロジェクトに取り込んでしまうと、アプリサイズの肥大化、メモリの圧迫に繋がるという。
そこで、「重複画像の回避方法として、使われなかった事が分かるようにした」（田村）。
エンジニアはそれにより、Unused内の画像は削除してしまおうと判断でき、画像が同じかどうかの判定については、1ピクセルごとに画像の色が同じかで判定しているそうだ。
インポートに関する最後の話題は、複数の画面解像度への対応について。
XDにはレスポンシブサイズ変更という機能が備わっているが、これは親のレイヤーのサイズ変更に対して、どのように位置やサイズを調整するかを決めるもの。そのため、UIの階層構造に大きく依存する機能といえる。
UIの階層構造は、Unity側で自由に変えていいというルールのため、本ツールではこの情報は使わず、解像度に関してはエンジニアが手動で行うことをしているという。
▲このようなツールを作る際、エンジニアとして気を付けたポイント。
最後に田村氏は、「インポートツール導入により、効率化と高品質化を実現できました。効率化に関しては狙い通りで、神経を使うUI配置作業からエンジニアが解放された」とコメント。
また、高品質化も達成された大きな成果に挙げ、「ツールによって1ピクセルもたがわずにUI配置が行われるため、エンジニアが人の手でやっていたときよりも、UIの配置がデザイナーの意志通りになり高品質化したという。
「ツール開発に置いて、導入ハードルを下げることが大切」と田村氏。デザイナーやエンジニアに余計な負荷をかけないようにし、パフォーマンスや拡張性にも注意したそうだ。
実際、このツールを導入することにより、「デメリットはほとんどないようにできたのではないかと考えている」（田村）
ちなみに現在、同社では、複数のプロジェクトで同ツールが活用されており、サイバーエージェントグループ内の他の子会社でも導入が検討されているとのことだ。
