印象的なUIデザインを実現するための、血と汗と涙の結晶

 2017年8月30日~9月1日の3日間、パシフィコ横浜にて開催された、日本最大級のゲーム開発者向けカンファレンス“CEDEC 2017”。本記事では。最終日である9月1日に行われたセッション“『ゼルダの伝説 ブレス オブ ザ ワイルド』のUIが目指したこと~世界に溶け込み、かつ印象的なUI表現”の模様をリポートする。

 会期中、複数行われた『ゼルダの伝説 ブレス オブ ザ ワイルド』(以下、『ブレス オブ ザ ワイルド』)セッションだが、ラストはUIをテーマにしたセッション。登壇したのは、『ブレス オブ ザ ワイルド』のUIリードデザイナーを務めた長谷隆広氏と、UIプログラマーを担当した北山茂寿氏だ。前半は長谷氏がUIの目指した方向性について、後半からはその目指した方向性を、どのように北山氏が実現したのか? という解説がメインとなる。

『ゼルダの伝説 BotW』何気ないウィンドウやアイコンなどに隠された、プレイヤーを冒険の世界に没頭させる工夫と技術【CEDEC 2017】_01
『ゼルダの伝説 BotW』何気ないウィンドウやアイコンなどに隠された、プレイヤーを冒険の世界に没頭させる工夫と技術【CEDEC 2017】_02
『ゼルダの伝説 BotW』何気ないウィンドウやアイコンなどに隠された、プレイヤーを冒険の世界に没頭させる工夫と技術【CEDEC 2017】_03
▲連日行われた『ブレス オブ ザ ワイルド』のセッション。最終日のラストを飾るこのセッションはパシフィコ横浜のメインホールで行われ、会場がびっしりと埋まるほどの人気ぶりだった。

UIを撤廃していく案から生まれた、新たなUIのテーマ

 セッションは、長谷氏が手掛けたUIデザインについての解説から始まる。『ブレス オブ ザ ワイルド』といえば、広大なフィールドで自由な冒険をくり広げる、これまでのシリーズとは一線を画した作風で話題と人気を集めたタイトル。チーム全体が“『ゼルダ』の当たり前を見直す”という目標を掲げて開発に取り組んでおり、UIチームもまた、“UIの当たり前を見直す”方向性でアプローチしていくことになったという。

 シリーズ前作である『ゼルダの伝説 スカイウォードソード』のUIを例にあげると、体力を表すハートマークなどにも豪華な装飾が入れられ、輝くルピーの表示などを見ても、ファンタジー色に満ち溢れていた。しかし『ブレス オブ ザ ワイルド』は、ハートマークもシンプルかつ小さく、画面全体を見ても最低限のUIしか表示されておらず、すっきりとした印象となっている。このUIの表現は、当たり前を見直したということをパッと見て分かるようにしたことと、UIの原点に立ち返り、ゲームプレイを阻害しないことで冒険に没頭させるという、ふたつの狙いがあったと長谷氏は語る。

 この狙いを達成するべく最初期に考案したUIコンセプトは、“無ければ無いほうがいいUI”という、UIを使用せずにプレイヤーを快適に操作させるというもの。長谷氏は「これくらいやらなければ、良いものができないと思い、この案に乗り出しました」と、挑戦的な目標をあえて立てたことを語る。しかしUIの本質とは、プレイヤーへ情報を伝達すること。開発を進めていくうちに、長谷氏はプレイヤーへ情報を与えるためには、UIを一切なくすのはできないという壁にぶつかったという。

存在感を消すべく、攻めきったUIデザインに

 この“無ければ無いほうがいいUI”と、“UIを無くすことはできない”という、相反するテーマを基に、グラフィック、フォント、仕様設計、アニメーションの4つの切り口から、どのようにして『ブレス オブ ザ ワイルド』のUIが完成していったのかが明かされていく。

 まずUIグラフィックは、無くすことができないのであれば、プレイヤーの邪魔をせず、目立たないよう存在感を抑える方向になったという。開発初期では、常時表示されるUIが左上、左下、右下に表示され、アイコンもやや大きめで、情報のまとまりがない印象。そこから推敲を重ね、製品版ではUIは左上、右下のみに表示され、プレイヤーの邪魔にならないように配置を工夫したという。また、UIのサイズも小さくし、必要最低限のUIにすることで、UIの存在感を消すことに成功したそうだ。

 さらに、開発初期のマップアイコンなどには、すべて縁取りがされていたところを、単色でシルエットのみを映すデザインにすることで、できるだけクセをなくし、プレイヤーの目線をUIに向けないように贅肉をそぎ落としていったとのこと。アイテムを拾う際などに表示される、“A ひろう”といったアクションボタンも、線で縁取られたボタン表示から、単色のシルエットのみに変更するといったこだわりぶりだ。

 UIの構図にも工夫があり、アイテムを装備するメニュー画面では、画面の左に装備アイテムを一覧させ、画面の右にリンクのモデルを置くことで、1+1=2、というパッと見るだけで理解させる努力が隠れている。

 また、会話やログで表示される文字、タイトルロゴなどに使用されている白色は、じつは完全なる白色ではなく、やや黄色がかった白で統一されている。これは、自然界には本当の真っ白は存在しないということで、ゲーム全体の白色を統一し、よりハイラルの世界に没頭させる狙いがあったそうだ(ちなみに、チーム内での名称は“ゼルダホワイト”)。このアイディアは当初ゲーム内のUIだけのものだったが、その後、公式ホームページや、パッケージデザイン、ムービーシーンなどにもゼルダホワイトが使用されることとなり、長谷氏は「本作の象徴するカラーとなりました。UIを発端に、作品全体がトータルコーディネートされるのは珍しいことです」と、驚きつつも感無量の様子だった。

贅肉を極限までそぎ落とす、徹底したこだわり

 ダンジョンや村などの地名を表示する文字のフォントも、アイコンのように単色、縁なし、シルエットのみのデザインを徹底。また、フォントの選定も、装飾がなく極太の力強いフォントを2種類ミックスしたり、やや斜体がかった文字にするなど、細かく気配りしたとのこと。文字をデザインで目立たなくさせつつも、フォント単体だけで『ゼルダ』らしさや、どこか懐かしさを感じさせる狙いがあったそうだ。

 仕様と設計は、シンプルに“無くせるものは無くす”というコンセプトで開発が進行。例にあげると、前作『ゼルダの伝説 スカイウォードソード』では、ハート、盾の耐久値、ルピー、操作ガイドがふたつ、ボタンのショートカットが配置されている。当たり前を見直すため、『ブレス オブ ザ ワイルド』では、本当に常時必要な情報なのか検討を重ね、武器の耐久値や操作ガイド、ルピーなどは、必要なときのみに表示されるように定めたそうだ。

 こうした仕様の変更により、常時UIの画面の圧迫感をなくすことに成功したのだが、ゲームを進めていくとハートの数も非常に多くなり、常時表示されるキーアイテムなども出現せざるをえなくなり、ゲーム後半にはどうしても画面に圧迫感が出てしまう。こういったUIは欧米ではとくに嫌われる傾向にあるため、より常時UIの表示が減り、画面をすっきりさせられる“プロモード”をオプションで実装することに。長谷氏は遊びにくくならないか不安だったというが、実際に手にしてみると、常時UIが無くなったことで、よりゲームへの没入感が増し、欧米ユーザーからの評価も好評だったという。

 リンクの冒険を手助けしてくれるキーアイテム“シーカーストーン”については、ファンタジー感豊かなエフェクトや、シーカー族の古代文字などをふんだんに使用。UIをこれまでの方向性とは真逆にすることで、シーカー族との文化の違いなどを差別化し、より世界観への没入感を高めたそうだ。

 また、本作はゲームスタート時にチュートリアルが存在しない。その代わりに、武器を拾った瞬間に操作ガイドを表示したり、木に近づいた瞬間に登れることをヘルプとして出すなど、その動作が必要となる瞬間にのみ、ヘルプが表示される仕組みになっている。これは、プレイヤーが“やらされている感”を感じないよう、プレイヤーが能動的に目標へ向かったあとに情報UIを表示させるべく、プランナーと相談を重ねて実現したということが明かされた。

お互いの想定を超えた、新しいアニメーション表現

 続いては、UIのアニメーションについて。UIアニメーションとは、ダメージを食らった際に画面上のハートが光ったり、アイテムを拾った際にアイテムアイコンが画面端にスライドして表示されるといった、UIが動く表現のこと。本作では、シンプルですっきりとしたUIデザインにしたことで気づきにくくなったところを、気づいてほしい情報だけ強調するために、情報を伝える手段としてアニメーションを使用しているそうだ。たとえばダメージを食らった際などにハートが光って減ることで、その瞬間のみハートに目がいったり、どれくらいのダメージを受けたのかを感覚で判断できるようになっている。

 また、シンプルですっきりしたデザインは、得てして安っぽいクオリティに見えてしまうという弊害もある。そこに加えるアニメーションも、従来通りのものではクオリティが持たないと長谷氏は判断し、新しいアニメーション表現を模索することに。

 しかし、どうにも新しいアニメーション表現が思い付かなかったという、長谷氏。それを北山氏に相談したところ、北山氏が「描画をリアルタイムでキャプチャーし、ゲーム中にテクスチャとして反映できる機能を作りました!」と、新たな表現手段を作成。そのとき長谷氏は、この機能の何がスゴいのか正直理解できなかったと語る。だが作業を進めていくうちに、この機能の使い勝手が非常に良く、重要なアイテムを取得した際にウィンドウが光る表現や、ボスの名前が禍々しい文字として表示される演出なども、この機能によって実現したとのこと。ここぞというときの強調表現、頻繁に見るUIのアニメーションなどは、ほとんどこの機能で賄われているそうだ。
 北山氏は単なるアプローチのひとつとして提案した機能だったが、ここまで使い勝手が良いとは想像していなかったそうで、長谷氏は「お互いの想定を超えたクオリティが実現できました」と、北山氏に感謝の気持ちを述べる。北山氏は最後に、「どれも目立った表現はしていないものの、細かい気配りと積み重ねによって、ゼルダの世界観に没頭できるものが完成できたと、個人的に思っています」と、UIデザインの解説を締めくくった。

UIコンセプトを実現する、エンジニアの努力

 『ブレス オブ ザ ワイルド』のUIデザインチームは、UI全体を見るスタッフは長谷氏&もうひとりのスタッフのみで、アイコンなどの専門スタッフがひとりいたものの、UIデザイン自体に関わるスタッフは実質ふたり(長谷氏によると、ゲームの規模の比べるとかなり小規模のチームだそうだ)。そんな少人数で、ここまでのプランをどう実現したのか? というところで、ここからのセッションは北山氏にバトンタッチ。

 北山氏はこの少人数チームでゲーム全体のUIを作りきるには、製作環境の効率化を図ることがまず大事だと判断したという。例えば“体力ゲージを右上に表示してみたい”というアイディアがあった場合、通常の制作フローの場合は、UIデザイナーがプログラマーに指示し、ゲーム内に反映してもらい、開発機を通したゲーム上でプレイして試し見る……という工程が必要だったという。しかし北山氏は、PC上でゲーム画面の上にUIをプレビューできるように、製作ツールを改良。余計なフローを通さず、UIデザイナーのみで試行錯誤できるようになったことで、よりこだわり抜いたUI配置が迅速に行えるよう、作業の効率化を図ったのだ。

 それでも膨大なUIデータをすべて作りきるのはとてもじゃないが時間が足りないということで、データを自動生成する機能も、北山氏は盛り込んだ。たとえばアイテムアイコンは、イラストにしているのではなく、アイテムの3Dモデルを撮影し、イラストアイコンのように自動で生成しているそうだ。

 また、本作の象徴的である等高線の描かれたフィールドマップは全部で120区間ほどあり、マップのズームはすべて最適な解像度で4段階用意されている。また、プレイヤーがどの方向からマップの視界を広げたかによって、マップの切れ目も変わっていくため、フィールドマップの画像を用意するだけでも2344枚ものデータが必要になる。この膨大な作業量も、自動生成で簡略化。3Dのフィールドマップから地形を自動でデータを読み取り、水場、樹木、建物、街道などを16種の要素と、高さ情報を合成するマップ自動生成ツールを作成することで、作業の効率化を実現した。

 ほかにも効率化は図られ、前述のキャプチャーを使ったUIエフェクトについては、UIが出るたびに処理していると、負荷が重くなってしまう。そこで、1度かけたエフェクトをほかの箇所でも使いまわせる機能も搭載。これにより作業自体が簡略化されるだけでなく、ゲーム自体にも負担のかからないものにできたそうだ。この機能を駆使した表現は、アイテムを表示するウィンドウや、インベントリ画面のアイテム選択画面、画面に表示される一言メッセージなど、約200ヵ所に使用されているとのことで、これによって実現できた表現も多かったのだとか。

すべては、ハイラルへ没頭してもらうために

 UIの存在感を消しつつ、必要な情報を伝えるというコンセプトを満たしながらも、膨大な作業を効率化と工夫によって実現した本作の新しいUI表現。最後におふたりは「これらの表現が、みなさんがハイラル世界に没頭することに一役買っていることを感じていただければ幸いです」と締めくくり、大きな拍手に包まれて本セッションは終了となった。目立たないことをテーマに作られた『ブレス オブ ザ ワイルド』のUIに、この機会にあえて目を向けてみてはいかがだろうか?