>   >  技術と仲間で乗り越える!「UI!UI!UI! ~トライ&エラーに負けない技術~」|CGWCCレポート(7)
技術と仲間で乗り越える!「UI!UI!UI! ~トライ&エラーに負けない技術~」|CGWCCレポート(7)

技術と仲間で乗り越える!「UI!UI!UI! ~トライ&エラーに負けない技術~」|CGWCCレポート(7)

「CGWORLD 2019 クリエイティブカンファレンス」で高い評価を得た「UI!UI!UI! ~トライ&エラーに負けない技術~」。ゲームのUI/UXデザインに関するワークフローが体系的にまとめられた、希有な内容だ。改めてセッション内容をふり返りながら、ポイントを紹介しよう。なお、セッションの全スライドは同社サイトにて公開されているので、あわせて参照して欲しい。

TEXT&PHOTO_小野憲史 / Kenji Ono
EDIT_小村仁美 / Hitomi Komura(CGWORLD)、山田桃子 / Momoko Yamada

■関連記事はこちら
●CGWORLD 2019 クリエイティブカンファレンス レポート
日本初のソーシャルVR『仮想世界ambr』はどのようにつくられたか
坂本隆輔(YAMATOWORKS)が指南! CGアニメーション基礎講座
NHK大河ドラマ『いだてん』で実践された、4K/HDRベースのVFXワーク
「ガールズ&パンツァー 最終章 第2話」安易にゲームエンジンを使うのは危険!
歴代ルパンへのリスペクトを込め、2Dから3Dへ『ルパン三世 THE FIRST』メイキング
劇場アニメ『HELLO WORLD』メイキング、アニメにおけるUnity&「Cinemachine」の効果的な使用法

●講演者インタビュー
「UI/UXは空気のような"恋人"」UI/UXデザイナーに求められる次世代のマインドセット

重要性を増すゲームUI/UXデザイン

今やゲーム開発で欠かせない存在となったUI/UXデザイン。特にモバイルゲームを筆頭に、F2P(基本プレイ無料のアイテム課金モデル)タイトルが急増してからは、UI/UXデザインの善し悪しが業績に直結するようになった。アイテム購入画面でユーザーが混乱したり、誤った操作を誘発させたりすると、売上に直結するからだ。

その一方でゲームのUI/UXデザインについて、これまで体系的にまとめられた書籍や資料は乏しかった。これには「インハウスの開発ツールが使われることが多く、ナレッジが共有しにくかった」、「UI/UXデザイナーの絶対数が少なく、ナレッジが属人的になりがちだった」など、様々な理由がある。

しかし、近年ではUnityUnreal Engine(UE)4などの商用ゲームエンジンが普及し、開発基盤の共有が進行。開発チームの大規模化・運用の長期化と共に、チーム内におけるUI/UXデザイナーの絶対数も増えるなど、状況が変化しつつある。ゲーム開発者向けのUI/UXデザイン勉強会も開かれており、人気を博している。

こうした中、CGWORLDクリエイティブカンファレンス2019で行われたセッション「UI!UI!UI! ~トライ&エラーに負けない技術~」は、UI/UXデザインのワークフローを体系的に整理したものとして、希有な存在となった。初心者からベテランまで、誰もが知りたかった内容が端的にまとめられていたからだ。

そこで今回、講師を務めたバンダイナムコオンラインの太田垣沙也子氏に協力いただき、講演資料を基に当日のセッション内容を紹介できることになった。これにあわせて太田垣氏のインタビューも別記事で掲載している。あわせて読むと、より内容が深く理解できるだろう。UI/UXデザインの底上げになれば幸いだ。

  • 太田垣 沙也子/Sayako Ootagaki
    株式会社バンダイナムコオンライン ビジュアルデザイナー
    www.bandainamco-ol.co.jp

ゲーム開発の全工程の中でも、特殊な位置づけにあるUI/UXデザイン。太田垣氏は「UI/UXデザインは開発中、ずっと気が抜けないポジション」と説明した。大前提としてゲーム開発自体がトライ&エラーの連続で進む。そのうえで、その影響を最初から最後まで受けるのがUI/UXデザインだからだ。

「UI/UXデザインは、ユーザーが触らない限り完成しません。だからこそ、仕様の変更や外的要因に左右されやすいのです」。ちなみに、ここでいうユーザーには開発チームや社内の人間も含まれる。そのため他パートに比べて意見や修正要望が届きやすいのだという。それだけゲームの評価に直結しやすいパートだといえるだろう。

「もっとも、良い『ものづくり』を行うためには、意見や修正要望がたくさん届くことが重要です。そのためにはUI/UXデザインの正しい技術を習得することが大切です。これにより、UI/UXデザインにつきものの、絶え間ないトライ&エラーが楽しめるようになるのです」。以下、その概要について説明していこう。

1:コンセプト策定

 1-1:トンマナをつくる
 1-2:UIルールを決める

ゲーム開発の中盤から終盤にかけてチームにアサインされ、プランナーが作成した仕様書に基づいて必要なパーツをつくり、エンジニアに納品。動作チェックもそこそこに、また別のプロジェクトへ......。UI/UXデザイナーは、社内でこうしたワンポイントリリーフ的な扱いを受けることが、まだまだ少なくないのが実情だ。

しかし、これではクオリティの高いゲームをつくることは難しい。それどころか、ゲーム開発の絶え間ないトライ&エラーの波に巻き込まれて、UI/UXデザイナーの消耗に繋がりかねない。そこでトライ&エラーの波を主体的に乗りこなすためには、UI/UXデザイナーが開発の上流工程から参加することが不可欠だという。

それでは、一番初めに行うことは何か。それが当該タイトルにおけるUI/UXのトンマナを策定することと、UIルールを決めることだ。トンマナとは「トーン&マナー」の略で、ゲームのコンセプトやキーワード、色合い、モチーフなどが含まれる。これらをゲームのプロジェクトストーリーやペルソナを基に、プランナーやディレクターと話し合い、確認することが重要だ。

トンマナの策定では、ゲームのコンセプトとは別に、トンマナ自体のコンセプトも決めていこう。UI/UXデザインの方向性をキーワードで挙げていくことも重要だ。「熱血」、「上品」、「かわいらしい」、「きらびやか」、「ミニマル」などだ。これらをOK例、NG例にまとめて、リスト化していく。いずれもふわっとしがちなイメージを、言語化する作業に相当する。

カラーは各々のUIパーツをデザインする上で基本となる色のことだ。ベースになる色、フローを進行させるときの色、警告を発する色、課金要素が絡む色、ポジティブな色、ネガティブな色など、ゲームの進行に応じて使用する色を決めていく。「暖色系のボタンを押していくとゲームが進行していき、寒色系のボタンを押していくとゲームが元に戻っていく」といった具合だ。このように色だけでボタンの役割が区別できるようにすると、ユーザーにとってわかりやすいのは明らかだ。

モチーフは世界観を強調したいときに使用する。IPモノの場合は原作の世界観が相当し、少なくとも世界観を破壊しないようなデザインが求められる。

トンマナが決まるとUIルールの策定に移る。UIルールとはトンマナより具体的な「お約束」のことで、カラーコード、スタイル、シンボルなどが好例だ。太田垣氏は「Adobe系ソフトならCCライブラリでクラウド共有すると、異なるアプリケーション間で使い回せるのでお勧めです」とTipsを披露した。

あわせて使用するフォントやテキストルールもざっくりと決めておく。ポイントは可読性と世界観のバランスを重視することで、フォントの最小~最大サイズを決定するなどは一例。フォントの「ひらき」や「送り仮名」なども事前に決めておくと、後々のチェックが楽になる。フォントの管理や書体選びには、「NexusFont」などのフォントユーティリティソフトを使用すると、効率がアップするのでおすすめしたいという。

また、この段階で汎用パーツをデザインしておく。汎用パーツにはウィンドウ・ダイアログ・ボタン・タブ・スクロールバー・プルダウン・テキストボックス・グルーピング装飾などが含まれる。これらはプロトタイピング制作で活用されることになる。いずれも中盤以降で差し替わることを念頭に、速度感をもってデザインすることが重要だ。

2:プロトタイピング

UI/UXデザインの全工程の中でも、もっとも重要なフェーズがプロトタイピングだ。太田垣氏も「ぶっちゃけ、プロトで8割が決まります!」と強調したほど。プロトタイピングを制作することで、実際のゲームフローを早い段階で確認できたり、チーム内のイメージの統一化が計れる。これらは、デザイン段階での手戻りを最小限するうえで有効だ。そのためにはプランナーとタッグを組んで作業を進めることが重要になる。

 2-1:ツールを決める
 2-2:企画要件を把握する(重要)
 2-3:フローを繋ぐ
 2-4:レイアウトを考える
 2-5:ベストなUI表現を考える(重要)
 2-6:要素を並べてみる(重要)
 2-7:演出をイメージしておく

他のビジュアルアセット同様、UI/UXデザインにも専用ツールがある。実制作ではPhotoshopIllustratorが大活躍するが、太田垣氏は「プロトタイピング制作にはAdobe XDがオススメです」と説明した。UI/UXデザインを行う上で必須となる「設計」を行うためのツールだからだ。「軽い」、「ノンデザイナーでも習得しやすい」、「複数スタッフで同時編集ができる」など、他に様々な長所があるという。

企画要件の把握では、プランナーと一緒になって作業を進めることが重要だ。ここで「お客様に提供したいモノは何か」、「どんな機能があるか」、「表示したい要素は何か」について、共通理解を深めておく。ゲームプレイの機能や快適性、感情のゆさぶりなどは、全てUI/UXデザインに必須の要素になるからだ。

また画面上に表示したい要素について、表示数・最大文字数・情報の優先度を摺り合わせておく。これが曖昧だと、画面がゴチャゴチャと見にくくなってしまう。アイコンだらけの画面などは、好例だ。特に今後、画面解像度が拡大していくことで、情報の優先度づけが今まで以上に求められていくという。

ゲームの全体像を早めに「見える化」しておくことも重要だ。そのために有効なのがフローを繋ぐことで、まずはゲームに求められる画面数と遷移を把握する。このとき、メインのゲームサイクルをコアメンバー全員で指さし確認すると良い。細かいダイアログなどは後回しで、フローの出入り口に違和感がないかチェックしよう。

続いてレイアウトをふまえつつ、ベストなUI表現を考えていく。レイアウトでは前後のフローを意識しつつ、画面ごとに必要な要素のレイアウトを考えていく。細かいデザインは後回しで、求められる機能を基に、画面上に矩形をどんどん置いていくのが重要だ。ゼロから考えるのではなく、既存タイトルを参考にするのも良いという。

ここで重要なのが「プランナーの提案を丸呑みしない」こと。プランナーはUI/UXデザインの専門家とは限らない。「テキストではなく、アイコンの方が伝わりやすくないか」、「タブ切り替えではなく、2画面に分けた方が良くないか」、「ラジオボタンではなく、プルダウンの方がスッキリしないか」など、UI/UXデザインの専門家だからこそ提言できることは、たくさんある。

その後、ここまでの内容を基に、画面上に必要な要素を並べて、レイアウトを固めていく。ここで役に立つのがコンセプト策定で作成した汎用パーツだ。UI/UXデザインに必要な素材を、テキストで用意するのか、2D素材か、3DCGモデルかといったことも、ここで検討しておく。スピード感を重視して、納得がいくまで精査を繰り返す。これがいい加減だと、トラブルの火種を抱えたまま開発が進むことになる。

また、このときにUI/UXの演出もイメージしていくと良いという。「画面のイン・アウト表現」、「ボタンやカーソルの挙動まわり」、「UIアニメーション」、「SE・BGM」、「3D演出など、他セクションとの協力パート」などだ。いずれもプランナーまかせにするのではなく、UI/UXデザインの専門家として、プロジェクトをリードしていく姿勢が重要。太田垣氏は「プロとして自信をもって提言してほしい」と述べた。

次ページ:
3:デザイン

特集