#Illustrator30_30 #Ai30th 記念連載 | Vol.21 ゲームUIデザイナー 木嶋久善さん

連載

Illustrator 30_30

photo: Taio Konishi Photography

https://blog.adobe.com/media_8939577ac2e843450c22c3751d7ed5d484b67986.gif

「Illustratorと私」制作作品

Illustrator30周年（#Ai30th）を記念し、Illustratorをクリエイティブの味方として活用する若手クリエイター30人をご紹介する本企画。第21回にご登場いただくのは、大阪のゲーム開発スタジオ「プラチナゲームズ」のUIデザイナー、木嶋久善さん。『ベヨネッタ』、『NieR:Automata』など、数々の人気ゲームタイトルを手がけるプラチナゲームズでUIデザインを手がける木嶋さん。木嶋さんとIllustratorの関係とは？


https://blogs.adobe.com/creativestation/files/2017/07/th_170617_Kijima_Hisayoshi0108.jpg

大阪にあるプラチナゲームズにて

本物のロボットが作りたかった

https://www.youtube.com/embed/LLCrzJdF8Z4
『NieR:Automata』

——クリエイターになったきっかけは？

**Kijima：**昔からメカが好きで、物心ついた時からずっとロボットの絵を描いていました。でも進路では、絵じゃなくて本物のロボットが作りたいと思って、工学部に進学したんです。機械の仕組みのことが勉強できてすごく良かったんですが、結局、家でずっとロボットの絵を描いてPixivに投稿するようになって。それで「ロボットの絵を描いて仕事になるところ」ということで、ゲーム会社に就職したんです。

——デザイン経験なく入社されたんですね。

**Kijima：**デザインは大学時代に独学で学んでいました。それで、入社して配属されたのがUI（ユーザーインターフェイス）のセクションでした。 ゲーム制作は物量がとにかく多いので、効率化が本当に大事になります。しかしながら、UIはその中でも仕事の流れが洗練されておらず、僕が入社した当時は、UIアーティストがそれぞれバラバラのやり方で仕事をしていました。そこで、社内のUI制作の方針として仕事の統一化を推し進めることを提案し、僕が中心になってシステマティックな開発方法を構築していきました。


https://blogs.adobe.com/creativestation/files/2017/07/th_170617_Kijima_Hisayoshi0012.jpg

——具体的にどのように？

**Kijima：**まずは毎回同じようなことをやっている部分を企画化・マニュアル化することから始めました。クリエイティブな仕事に集中できるよう、単純作業での無駄な試行錯誤を少なくなるように、という考えですね。それと、社内のワークフローの整理も行いました。仕様書が出た画面から場当たり的に一つ一つデザインして実装していたのですが、初めにプランナーに全画面仕様をおおよそ出してもらい、画面デザインを一気に行ってから実装という流れに組み替えたんです。

——デザイナーにはどんなメリットがあるんですか？

**Kijima：**ゲーム全体を俯瞰できるようになるので、デザイン要素やデータの共通化が容易になりましたね。結果、世界観に合わせたデザインの統一化と、データ作成の効率化が非常にやりやすくなりました。『The Legend of Korra』（日本未リリース）でこのワークフローを作り、『TRANSFORMERS: Devastation』（日本未リリース）で実践し、今年リリースされた『NieR:Automata』でさらに昇華させて、組織として運用できるようにしました。

ゲーム開発は効率化


https://blogs.adobe.com/creativestation/files/2017/07/th_170617_Kijima_Hisayoshi0024.jpg

Illustratorでのデザイン

——それでは、ゲーム制作のフローを教えてください。
まずは仕様を把握するところからですね。プランナーが、「こういう画面が入ります」と仕様書を出してくるので、それに合わせてデザイナーが画面をデザインしていきます。その際の仕様の不備はデザイナーが考慮して、ユーザーが使いやすいように、美しく見えるようにという調整をします。デザインをもとに自社で開発したUIツールでレイアウトやアニメーションを組み込んだUIデータを作成し、プログラマーに渡してゲーム中に実装してもらいます。


https://blogs.adobe.com/creativestation/files/2017/08/170617_Kijima_Hisayoshi0058_re2.jpg

自社製の開発ツールでUIデータを作成していく

Illustrator in ゲームUI

——ゲーム制作の現場において、Illustratorをどう活用されているのでしょうか？

**Kijima：**UIデザインの際にゲーム画面やメニュー画面のレイアウトに使っています。基本的にはIllustratorでおおよそのデザインを組んでから、グリッド表現や周辺減光などの絵作りをPhotoshopで行って、「今回のUIデザインはこれ」と一目でわかるコンセプトデザインを1枚はじめに作ります。それをベースにIllustratorでデザインを量産した後、各パーツをPhotoshopにベクトルスマートオブジェクトで持っていき、テクスチャとして加工してゲーム中に実装しています。

——どうしてレイアウトにIllustratorを使うのでしょうか？

**Kijima：**レイアウトに関しては、整列やスマートガイドが強力ですね。後はやっぱり、ベクターデータであること。ゲームの場合には仕様変更がとても多いんです。アイコンのサイズ変更が発生したり、４Kなどの高解像度対応をすることもあったりして、そういうときにオリジナルデータをベクターで作成しておくと、きれいに拡縮できるんです。『NieR:Automata』はフラットなデザインが基調ですので、特にIllustratorに適したデザインでした。


https://blogs.adobe.com/creativestation/files/2017/07/th_menu-art-board_02.jpg

Illustrator上のアートボード

——アートボートでの一元管理は、UIデザインで役に立ちそうです。

**Kijima：**Illustratorで便利なところはアートボードで一覧できるところ。UIデザインだと、メニュー画面のファイルを量産できるのがありがたいです。別のアートボート上でCtrl+Shift+Vを行うとコピー元と同じ配置でペーストできるので。メニュー画面の他には、HUD（画面上に重ねて表示される情報）のデザインもIllustratorで行っています。


https://blogs.adobe.com/creativestation/files/2017/07/th_HUD_01.jpg


https://blogs.adobe.com/creativestation/files/2017/07/th_hud_art-board.jpg

『NieR:Automata』HUDのUIデザイン

——HUDのデザインではデザインのポイントがまた違ってきそうですね。

**Kijima：**HUDのデザインは、プレイヤーや敵のHPゲージ、ロックオンカーソル、マップアイコンなどですね。『NieR:Automata』のアイコン類はシンボリックな感じを意識しました。シンプルな幾何学的な形を組み合わせて、なんとなく意味がわかるような。

——データの管理にも工夫を凝らしているとか？

**Kijima：**今回はデータ管理用にIllustratorのデザイン上にデータ番号を記載するようにしました。「このデータどこだっけ」と探す手間が省けるように。「HPゲージを修正したから何番のファイルを修正しよう」と、すぐにわかるんです。このプロジェクトで思いついて、今後はこれでやっていこうと思っています。


https://blogs.adobe.com/creativestation/files/2017/07/th_deta-kanri-tool.jpg

データ管理ツール

デジタルで世界観を表現する

——実際のデザイン面についてお伺いしたいのですが、『NieR:Automata』はすごく世界観を大事にしたUIになっていますよね。

**Kijima：**そうですね。今回大変だったのは、カラーを決めるところでした。ディレクターからの希望は「ベージュを基調にしてほしい」ということだったんですが、アンティーク調のベージュをSFのデジタルモニター表現としてのデザインに落とし込むのが当初はイメージできませんでした。そこで最初は黒と白のコントラストをベースに考えて、それをマイルドなカラーに寄せていくというアプローチをとりました。”柔らかい印象”をキーワードに丁寧に調整しています。背景の色と項目の色を組み合わせて、可読性が担保できるのかも考えて。また、スキル画面でもカラーに工夫しました。スキル画面は”プラグインチップ”といって、スキルのチップをひとつひとつスロットにはめていくんですが、チップの性能によって色を変えるので、その配色もディレクターと何度もやりとりして決めました。


https://blogs.adobe.com/creativestation/files/2017/08/th_170617_Kijima_Hisayoshi0039_re.jpg

​​スキル画面のプラグインチップのカラー

——フォントはどうやって選ぶのでしょうか？

**Kijima：**フォントも、最初のコンセプトデザインの時に決定するものです。今回はクリーンで清潔感がある感じというイメージなので、あまりクセのない書体を選びました。日本語版のほか、英語版でも基本的に同じ書体です。今回はフランス語、イタリア語、ドイツ語、スペイン語のほか、中国語の繁体字と韓国語のハングル版もあり、こちらについてはフォントを選び直しています。ローカライズ対応では文字数制限がちょっと大変ですね。例えば物理攻撃を”物攻”にしてキツキツのレイアウトに収めたい場合でも、他の言語だと応用できない。ローカライズしても対応できるように、全体を俯瞰しながらデザインすることが必要になります。

——他に工夫した点はありますか？

**Kijima：**システマティックで清潔なコンセプトのイメージから、楽譜をモチーフとしてデザインに取り入れています。また本の飾りを意識した要素や幾何学的なアイコンなど、ファンタジー感とデジタル感のバランスに細心の注意を払いながらデザインを組み立てていきました。

メカニックのデザイン


https://blogs.adobe.com/creativestation/files/2017/07/th_170617_Kijima_Hisayoshi0093.jpg

パーツまで作り込む 書籍『NieR:Automata World Guide ニーア オートマタ 美術記録集 ＜廃墟都市調査報告書＞』

——今作ではメカニックのデザインもされていますね。

**Kijima：**はい、プレイヤーが乗る飛行ユニットや敵の機械生命体などのデザインを担当しました。Illustratorを使ったのは飛行ユニットなどで使用しているマーキングですね。実際の戦闘機でも、整備員が指を挟まないようになどの注意書きが機体に書いてあるんです。また、メカだけでなくUIや背景でも使用していますが、ゲーム中に出てくる組織のロゴも作成しています。これはキャラクターデザイナーが服に入れていたエンブレムをIllustratorでフラットなロゴデザインとして起こしたものです。

——すごい作り込みですね。

**Kijima：**メカニックのデザインはPhotoshopで、モデリングはMayaで作成しました。最初は、スケッチブックにシャーペンとコピックで案を描いてアイデアを膨らませていきます。飛行ユニットに関しては構造が複雑で、変形の検証を二次元でやっているとわからなくなってきたので、構造検証としてブロックで作りました。それを元に3DCGでさらに詳細な変形検証用のラフモデルを作っています。


https://blogs.adobe.com/creativestation/files/2017/08/th_170617_Kijima_Hisayoshi0089_re.jpg

メカニックのデザイン


https://blogs.adobe.com/creativestation/files/2017/07/th_170617_Kijima_Hisayoshi0069.jpg

構造検証のためにブロックで制作した飛行ユニット

——デザインをされる上でも構造検証をするんですね。

**Kijima：**個人的なこだわりです。飛行ユニットは一番気合入ってますね。他のこだわりとしては、ボスは派手さみたいなのを意識してるんですけど、ザコは何度も戦うことを考慮して味わい深いデザインを目指しています。

——これからのクリエイターに必要なのはどのようなことだと思いますか？

**Kijima：**知識だと思います。デジタルの制作環境は、ツールを使いこなす知識や応用する知識がすごく大事になってくる。今までできなかった表現ができるようになることが、デジタルだとかなり顕著なんですよね。ゲーム業界では最近「テクニカルアーティスト」という、技術に特化したアーティストの存在が重要になってきています。特に3DCGにおいてはライティングであったり、マテリアルをシミュレートする部分で、現実の正確な計算の知識が表現に不可欠ですから。僕自身も、工学部の知識がゲームで役立ったり、デザインのアイデアを出す上でのソースになったり、意外なところを組み合わせると面白いデザインが生まれるという体験をしています。いまは情報がすごく多い時代なので、知識を持って、いかに面白い組み合わせをするかが求められてくると思うんです。

——最後に座右の銘を教えてください。

**Kijima：**神は細部に宿る。それを人生の目標にしています。


https://blogs.adobe.com/creativestation/files/2017/07/170617_Kijima_Hisayoshi0096.jpg

木嶋久善（きじまひさよし）
プラチナゲームズ

UIアーティスト。1989年生まれ。プラチナゲームズにて『ベヨネッタ2』『メタルギア ライジング リベンジェンス』『The Legend of Korra』（日本未リリース）『TRANSFORMERS: Devastation』（日本未リリース）のUIデザインを担当。最新作『NieR:Automata』ではUIデザインのほか、メカニカルデザインを手がける。

◾️この企画について
いまやデザインに欠かせないツールとなったAdobe Illustrator CC。1987年3月19日に初めてPostScript専用ベクターツール「Adobe Illustrator 1.0」がリリースされて30年。いまでは世界中で、毎月1億8000万点以上のグラフィックがIllustratorを使って作成されています。

本企画「Illustrator30_30（イラストレーター サーティー サーティー）」は、Illustrator30周年（#Ai30th）を記念して、さまざまなジャンルでIllustratorをクリエイティブの味方として活用する、30代までの若手クリエイター30人を連載でご紹介します。本企画では、クリエイターのみなさんのポートレートを撮影し、その上に自由にイメージを描いていただくビジュアル・コラボレーション「Illustratorと私」も毎回お届けします。インタビューと合わせてお楽しみください。