CGWORLDクリエイティブカンファレンス2019で高い評価を得たバンダイナムコオンラインによるセッション「UI！UI！UI！ ～トライ＆エラーに負けない技術～」。ゲームのUI/UXデザインに関するワークフローが体系的にまとめられた、希有な内容だ。講演者の太田垣沙也子氏に、これまでのキャリアをふり返りながら、ベースとなった考え方について聞いた。
INTERVIEW＿小野憲史 / Kenji Ono
EDIT＿小村仁美 / Hitomi Komura（CGWORLD）、山田桃子 / Momoko Yamada
■関連記事はこちら
技術と仲間で乗り越える！「UI！UI！UI！ ～トライ＆エラーに負けない技術～」｜CGWCCレポート（7）
実はモデラー志望だった!? 意外な志望動機
CGWORLD（以下、CGW）：改めてご経歴から教えてください。
太田垣 沙也子氏（以下、太田垣）：日本工学院八王子専門学校を卒業後、2009年にゲーム制作会社に新卒で入社しました。まだPS2が生き残っている時代で......そこからコンシューマー、アーケード、モバイル、PCと、ひと通りやらせていただきまして。担当タイトルはIPものが中心で、『機動戦士ガンダム』、『THE IDOLM@STER』、『たまごっち』などなど......、その当時からバンダイナムコ系のタイトルが多かったです。その後、2015年にバンダイナムコオンラインに転職しました。今でもIPものが中心で、時々オリジナルタイトルを担当します。
CGW：バンダイナムコグループの数多くのIPに携わられてきたんですね。
太田垣：まだ担当させていただきたい作品がたくさんあります。
CGW：最初からゲーム業界志望だったんですか？
太田垣：いえ、そういうわけでもなくて。ゲーム以外にも、映像でもアニメでも良かったんです。そもそもUI/UXデザインではなく、3DCGに興味があったんですよ。専門学校でも3DCGを全般的に学びまして、特に興味をもったのがモデリングとVFXでした。卒業制作も実写合成系の映像作品でした。
CGW：そうなんですね。驚きました。
-
-
太田垣 沙也子／Sayako Ootagaki
株式会社バンダイナムコオンライン ビジュアルデザイナー
ゲームデベロッパーでの受託開発を経て、2015年にバンダイナムコオンラインへ入社。『機動戦士ガンダム』、『THE IDOLM@STER』などのIPタイトルを中心に、PS2時代からコンシューマー・アーケード・スマホ・PC向けゲームのUIデザイン、リードビジュアルを担当
www.bandainamco-ol.co.jp
太田垣：もっとも、ゲーム自体はすごく好きでした。初めて買った家庭用ゲームが『ポケットモンスター 赤』（1996）で、小学3年生の頃でした。当時ゲームボーイポケットで遊んでいて、電池が8時間くらいもつんですが、1日2回電池を換えるくらいのめりこみました。自分で好きなゲームの企画を考えて、自由帳に書いたりもしていましたね。
CGW：子どもの頃から漠然とゲーム開発者になりたいなみたいなイメージはありましたか？
太田垣：いえ、当時はまだつくるというより、楽しむ方に全力投球だったので。しかもけっこう現実的な子どもだったので、あまりクリエイターとかそういうのはイメージしてなかったですね。アナウンサーとかに憧れていました。
CGW：それが、どういった理由で3DCGに興味が沸いたんでしょうか？
太田垣：もともと絵を描くのが好きな子どもで、学生時代に描き溜めたスケッチブックも50冊以上ありました。ただ、当時から2Dイラストは狭き門だと言われていました。その一方で3DCGが中学から高校生にかけて、どんどん台頭してきました。そこで3DCGを仕事にすれば、食いっぱぐれることはないんじゃないかと母親からのアドバイスがありまして（笑）。両親がともに自営業で、女性でも手に職をつけた方が良いという方針だったんですね。3DCGは映画などでも良く使われてるからと、応援してもらって。じゃあ専門学校に行こうと。
CGW：慧眼ですね。ちなみにご両親の職業は？
太田垣：父親がミュージシャンで、母親が美容師でした。どちらもクリエイティブ系の仕事ですね。
CGW：学校ではどんなことを学びましたか？
太田垣：2年制コースで、MayaとPhotoshopとAfter Effectsを勉強するだけで精一杯みたいなところがありました。さっきも言ったように、モデラーかコンポジッターになりたかったですね。
CGW：デッサンの授業などはありましたか？
太田垣：ありました。実は専門学校に入って初めて本格的にデッサンをやりました。正直あまり得意ではありませんでしたが、先生から「3DCGをやる人間は、必ずしもデッサンが上手でなくてもいいが、対象を観察する力は必要だよ」と指導をしてもらって。見る力を養うことに注力しました。
余談ですがデッサンをするとき、対象物を観察するのにしっかり時間を使えというのは、本当にその通りだなと思います。アウトプットは対象物を見て、脳内で整理できたことを純粋に出力するという作業なので。あとは、もうどれだけの時間をそれに当てられるかどうかなと思いました。
CGW：ほかに面白かった授業はありましたか？
太田垣：After Effectsの授業が面白かったですね。2Dデザイナーはタイムラインの概念に触れないまま就職する方もいますが、そこが専門学校で勉強できたことが今、UI/UXデザイナーをやっていく上ですごく活きています。気持ちが良いアニメーションとは何かとか。
CGW：確かに、そこは美大でもやらないですしね。
太田垣：かなりピンポイントな専攻でないと、学ばないでしょうね。
入社してからはUI/UXデザイナー一筋
CGW：それが、どういった理由でUI/UXデザイナーになられたんでしょうか？
太田垣：私が就職したのは、母校とつながりが深い企業でした。実は就職活動の登竜門として、先生から勧められたんですね。ありがたいことに内定をいただくことができ、そこからはもうUI/UXデザイナー一直線です。
CGW：どういったところが評価されたんでしょうか？
太田垣：実は高校生の頃から独学でWebサイトの制作をやっていました。学生時代だけで、20本ぐらいのサイトをつくった経験があって。最初のうちはホームページビルダーを使っていましたが、次第にDreamweaverを使うようになり、そのうちHTMLをコードエディタでいじるようにもなりました。それを履歴書に書いていたら、興味をもってもらえたんですね。ちょうど会社自体が、ゲームの受注開発をしながら新規事業としてWebにも注力していた時期でした。そこでゲーム開発と並行して、Web制作もやるというかたちで入社させていただきました。
CGW：Web案件ではどういったものにかかわりましたか？
太田垣：B2B向け企業のWebサイトの起ち上げや、自社サービスのプロモーションサイトなど、いろいろ手がけました。
CGW：その一方でゲームのUI/UXデザインも担当されたんですね。どういった案件でしたか？
太田垣：最初に手がけた案件がマルチプラットフォームタイトルで、Wii、PS3、Xbox360、DS、PS2の5大マルチ案件でした。そこでUIのローカライズをやらせてもらいました。会社的にいえば、「Web制作の経験があるなら、UI/UXデザインもできるでしょ」くらいの感じだったと思います。
CGW：2009年だと、そういった幅の広いマルチ案件がありましたよね。ただ、いきなりUI/UXデザインといわれても、困りますよね。
太田垣：そうですね。ただ、取っかかりとしては良かったです。先輩方のデザインしたUIをローカライズするのが仕事でしたから。その時は7ヵ国語向けにしましたね。
CGW：とはいえ、ドイツ語とか、むちゃくちゃ長いじゃないですか。当時ならではの苦労などもありましたか？
太田垣：そのとおりです。英語だと3文字で済むものが、ドイツ語だと10文字近くなったり。あとはPS3用につくられたUIを、PS2などに移植したこともありました。一度きれいにデザインされたものをリダクションする必要があって。デザイナーとしてはプライドとの戦いでした。きれいに減色できるように工夫したり......。今はもうそんな悩みは少なくなりましたが。
CGW：当時はどういった開発環境でしたか？ プランナーが画面上の座標を指定し、それを基にUIデザイナーがパーツをつくって、プログラマーが実装するといったワークフローが主流だったように記憶しています。
太田垣：まさにそんな感じでした。まだゲームエンジンのような統合開発環境が存在しなかったので、各社ともにハウスツールを使ったり、エクセルを使ったりしながら、手作業で進めていましたね。今でこそUIデザイナーがテクスチャをつくって、アニメーションをつけて、ある程度でき上がった段階で組み込めるようになっていますが、昔はちがいました。バラバラにデザインされたものを、座標やアニメーションのフレームなどをプランナーとすり合わせつつ指定して、エンジニアに実装してもらっていました。そのため、でき上がったものがイメージとちがうことも多かったです。
CGW：そういえば、いわゆる和製英語を使ってしまって、修正する必要があったりといったことも、ありましたね。そんなときでも、自作のフォントを使っていた場合は、いちいち打ち直すしかなくて。ときにはUIで使われているフォントに、全て長体をかけたりしたことも。
太田垣：自分の場合はJIS第二水準のフォントを全て、漢字まで含めて、1文字ずつ潰れないように修正したことがありました。あのときは本当につらかったですね。今はもう、当時を覚えている方もだいぶ少なくなりましたが（笑）。
CGW：当時のUIデザイナーは労多くして功少なしというか、あまり報われないイメージがありましたが、当時の仕事の面白さはなんでしたか？
太田垣：当時は受託開発だったので、クライアントの理想のゲームをつくるというスタンスでした。とはいえ、UIデザイナーとして全て言いなりになってしまうと、必ずしも万人受けするUIになるとは限らないので、こちらから提案していって、より優れたコンテンツに磨き上げていくところが面白かったです。
実際、UI/UXデザイナーは開発の後半にアサインされて、ゲームの根幹ができ上がっていて、味付けだけしてほしい的な要求をされることもありました。でも、やっぱりそれだけだと問題が発生することもあって。そもそも面白いの？ 使いやすいの？ みたいなところで、壁に突き当たることが多かったんです。そのため受託という立場であっても、企画的な側面に踏み込んでいきました。その方が最終的にゲームが面白くなるし、自衛にもつながるという。
CGW：自衛にもつながるんですよね（笑）。
太田垣：そうですね。そこに面白さとやりがいを見出していました。
機能と世界観を共存させるために必要なこと
CGW：例えばRPGのように、アイテム管理の概念が入ってくると、使いやすいUIが重要になってきますよね。一方でアーケードの格闘ゲームやシューティングゲームのように、まずボタンを押させることが重要なゲームでは、UI/UXデザインの重みが全然ちがってくるじゃないですか。好きなゲームジャンルというか、UI/UXデザイナーとして腕がふるえるジャンルなどはありますか？
太田垣：弊社では便宜上、ゲームのモードでインゲームとアウトゲームという呼び方をしています。アウトゲームではUIが主役になるケースも多いので、腕のふるいがいがあります。これに対してインゲームでは、ほとんどのタイトルで3DCGが主役になるので、UIはそこを邪魔しないように最大限気を遣います。主役を活かすように、そっと寄り添うような立ち位置を心がけていますね。
CGW：2009年ごろだと、UI/UXデザインには使いやすいだけじゃなくて、世界観の一部を表現する役割があるという概念が、もう出ていたと思います。両者は矛盾するところがありますが、両立させる上で工夫されていたことはありますか？
太田垣：本当にそうですね。けっこうこれ、重要な命題だと思うんですよね。主張しすぎることでUIの描画領域が増えると、逆にどんどんプレイのための領域が減ってしまいますし。
CGW：そもそも論として、プランナーやエンジニアが考えるUIと、UI/UXデザイナーが考えるUIでは、似て非なる部分があるのではないでしょうか？
太田垣：そこのすり合わせでいうと、開発の序盤でUI/UXのトーン＆マナーをプランナーやエンジニアとしっかり確認するようになりました。そのうえで、汎用的なUIパーツをある程度想定して準備しておくことも重要ですね。講演でお話しした内容と重なりますが......。
CGW：ああ、なるほど。
太田垣：昔の開発スタイルでは、プランナーから仕様が上がってくると、画面ごとに必要になるパーツを、その時々でつくっていました。そのため最後に統一感を出すのに、けっこう苦心していました。今は上流工程からトーン＆マナーの資料をちゃんと定義して、プランナーやエンジニアと共通意識をもつことで、後半になって全体がばら付いたり、思っていたのとちがうという認識のずれを、かなり抑えることができるようになりました。
CGW：いつ頃からそういう風に変わっていきましたか？ 昔のRPGなどでは、モードごとにUI/UXの方向性がちがうことがありました。それこそファミコン、スーパーファミコンの時代だと、モードごとに決定ボタンとキャンセルボタンがちがうなども、珍しくありませんでした。PS3あたりから、ゲーム全体を通して統一感を出そうみたいなながれになってきたように思います。
太田垣：やっぱりそのぐらいからだったと思いますね。自分の例で言えば、ゲームでIPを扱わせていただく以上、元となる世界観を絶対崩してはいけない。その上で使いやすいデザインにしたい、という思いがありました。クライアントとも、そこを熱く語ることが多かったんです。当時は若い世代が多い会社だったこともあり、3年目でアートディレクターをやらせていただきました。そのときにトーン＆マナーの統一感を強く意識するようになったんです。
CGW：まさにPS3世代ですね。
太田垣：そうですね。他にゲームのモードによってまったくちがうアイコンや表示物が出るとしても、ゲームの中で進行色と警告色を一貫させるように心がける、なども意識するようになりました。とりあえず意味はわからなくても、この色のボタンを押していけばゲームが進んでいくとか。逆にこの色のボタンは押すのに注意してくださいとか。こういったところを統一しておかなければ、お客様が迷ってしまいますよね。
実際、アウトゲームでは、あるボタンを押すことで、プレイアブルのキャラクターが永久に消えてしまうことがあります。インゲームでも、今この判断を誤るとゲームの勝敗に直結する、などといった危険性があります。こういった注意喚起を世界観に即したかたちで行いたいという思いが、UI/UXデザインにはありますね。
UIに使用するカラー設計の資料。開発が進むにつれ色数を増やしたくなるケースがあるため、序盤ではある程度絞っておくことがポイントだという
CGW：それに加えて2012年あたりになると、モバイルゲームがどんどん盛り上がってきますよね。『パズル＆ドラゴンズ』が筆頭で、ゲームに課金要素が加わるようにになりました。そのためアウトゲームの重要性がすごく増えていき、そのながれでUI/UXデザイナーの仕事が増えたイメージがあります。
太田垣：実際、かなり増えました。特に当時のモバイルは3Dの描画がかなり弱かったので、2D頼りでした。その結果、カードゲームなどの魅力的な2Dビジュアルを推していくタイトルが爆発的に増えました。あそこでUI/UXデザイナーの線引きが行われた部分があったのではないでしょうか？ 当時はもともとUI/UXデザイナーに興味があって仕事をしていた人と、ドッターやグラフィッカーの延長線上で、結果的にUI/UXデザインをやらされていた人が混在していました。その結果、UIがメインになるようなモバイル系のタイトルが普及してきたことで、UI/UXデザイナーの生き残りが、多少あったのではないかと思います。
CGW：ちなみにガラケーのソーシャルゲーム制作に関わられたことはありますか？
太田垣：あります。HTMLとFlashを組み合わせたタイトルが多かったですね。
CGW：あれこそ画面は小さいし、表示するものがいっぱいあるし、通信量との戦いもあるし、おまけにバナー広告が至るところにありましたよね。いったい、どこを押せばいいんだと、イライラしながら遊んでいました（笑）。
太田垣：よくわかります。ガラケーのソーシャルゲームでは、単なるデザインだけではなく、内部的なデータ構造を意識する必要がありました。データをいかに軽くするかについても、デザイナーが気を遣わなければいけなかったんです。リッチな演出とリダクションの技術が同時に求められました。ネイティブアプリだけではなく、Webアプリも多かったので、デザイナーがHTMLを触る必要がありました。ここで学生時代の経験が活きたんです。まさか、ゲーム制作でWebのスタイルシートを触ることになるとは、夢にも思いませんでした。
CGW：当時はWeb屋さんからガラケーのソーシャルゲームをつくるところも多かったですよね。
太田垣：多かったですね。Web業界で働いていた人を、UI/UXデザイナーとして採用することもけっこうありましたし。一方で当時のソーシャルゲームは開発規模が非常に小さかったので、UI/UXデザイン以外も担当していました。ゲーム内でキービジュアルの作画をしたりもしましたね。もともと絵を描くことが好きだったこともあり、そこで夢が叶いました。
CGW：ファミコンの時代によくあった、パレット表現みたいなテクニックは、まだありましたか？
太田垣：モバイルではGIFがまだ主流だったので、ありました。PS2もパレットの意識があったので、フルカラーの素材を専用ツールで16色に減色したりしていました。
