［CEDEC 2022］「ヘブンバーンズレッド」の“最上の，切なさを。”を実現するUIデザイン。ビジュアルを作り，開発力を高め，認知度を向上させる

　「最上の，切なさを。」をタグライン（企業や製品，サービスがどんな価値を提供するかを表す言葉）とするスマートフォンRPG「ヘブンバーンズレッド」（iOS / Android / PC）。このタグラインは，もちろんUIにも多大な影響を及ぼしている。そんな同作のUI制作について，WFS Studio本部 Produce室 UIUXチームマネージャー/UIUXディレクターの長﨑二郎氏が，開発者向けカンファレンス「CEDEC2022」の最終日である2022年8月25日に，「ヘブンバーンズレッド『最上の，切なさを。』を実現する為のUIデザイン三言論」の講演を行った。

WFS Studio本部 Produce 室 UIUXチーム マネージャー/UIUXディレクターの長﨑二郎氏

UIデザイン三言論その1：制作編　スマートフォンの特性を踏まえ，認知負荷が少なく分かりやすいUIを作る

　ヘブンバーンズレッドはスマートフォン用のRPGだ。そのUIを作っていくためには，スマートフォンが持つ制約を意識する必要がある。スマートフォンは小さくて持ち歩くことができ，ゲームパッドなどの入力機器を必要としない。これは，入力時に画面で指が隠れ，タッチパネルなので物理的なレスポンスがなく，入力の成功を確認しにくく，筐体が小さいため視線は安定せず，小さな画面を見続けるため目の負担も大きいということでもある。
　こうした点を踏まえ，ヘブンバーンズレッドのUIは，指が届きやすい位置と大きさのボタンを配置し，可読性が高いフォントを用い，過度に画面を明滅させることがないものとされている。



　そして，ヘブンバーンズレッドはスマートフォンRPGの宿命として，非常に多くの情報を取り扱わなければならないが，プレイヤーの認知負荷を減らすため，明暗差や形状差を用いた視線誘導も使われている。明暗や彩度の違う場所があれば，自然と目が吸い寄せられるという性質が活用されているわけだ。
　同作を遊んでいるとき，「過去をたどる」「出撃」といったボタン，アリーナの「もう一度プレイする」ボタンで入力の制限時間を示すバーに自然と注目した人も多いと思う。これは視線誘導のおかげで，次に押すべきボタンが分かりやすくなっており，少ないストレスで遊べているということである。
　こうした環境を実現するため，長﨑氏は，スマートフォン実機による繰り返しの確認を推奨する。ゲーム開発においてはPCを用いるが，これは画面のサイズや，入力の際に指が隠れないといった点でスマートフォン実機とはかけ離れた環境になる。こうした確認を怠ると，思ったのとは違った画面になってしまいがちなのだそうだ。


　また，重要な機能に対しては，複数のアクセス方法を用意しているのもポイントになる。例えば，メニュー画面へ行くためのボタンは，ホーム画面，フィールド，ダンジョンの3か所に配置されているという徹底ぶりで，こうした配慮がプレイアビリティを高めているわけだ。


　UIを分かりやすくする上で，アニメーションさせることも有効だ。単に動かすだけだと冗長になってしまうため，意図の伴うアニメーションで動かし，そこに適切なサウンドを付けることが重要だという。そのためにチームでは「アニメーションコンセプト」「アニメーションレギュレーション」という文書を作り，安定したクオリティでUIを作っているそうだ。

　本作を起動させた際のタイトル画面も，意図の伴うアニメーションでクオリティを高めた一例だ。当初はキービジュアルの静止画が表示されていたが，ディレクターのアドバイスにより，カメラが動くものにしている。これにより，プレイヤーにはキービジュアルでフィーチャーされる主人公・茅森月歌の表情を見る期待が生じ，それまでは「通過するだけ」（長﨑氏）だったタイトル画面に楽しさが加えられたのだという。意図の伴うアニメーションがいかに効果的であるかが分かるだろう。


　そして，本作のUIで印象的なのが，要所要所に設けられた余白や間である。もちろんこれは意図的なものだ。情報過多になりやすいスマートフォンゲームではあるが，可能な限り装飾を削って余白もデザインとしている。そして，1日の始まりや終わり，時間が経過する画面では敢えてじっくり間を取ることにより，戦い続ける月歌たちが1日を生き抜いた安堵感や過ぎゆく時の儚さといった演出を行い，プレイヤーをダンジョン探索やバトルの緊張から解放している。これは，UIでありつつも本作の物語部分に踏み込んだ演出だ。
　個人的には，「最上の，切なさを。」というタグラインがUIチームにもしっかり浸透しており，ゲームコンセプトへの理解度が高いからこそできた取り組みであると感じられた。

UIデザイン三言論その2：進行編

　続いて語られたのが，進行管理に関する部分だ。ゲームUIの制作では，ただ良いモノを作ればいいというわけではない，と長﨑氏は語る。プランナーやエンジニアなど，多くの部門と連携することが必要であり，方針も目まぐるしく変わるため，「柔軟性が高く，先を見通しやすい」進行管理が重要になってくるのだという。

　そのためにまず必要となるのが工数の見積もりだが，これは実制作と同じ位に重要なところだ。UIに関する課題は，ゲームに組み込んで初めて気づくことが多いため，デバッグや修正に要する期間を考えておき，関係者全員でのプレイ会を行うことで品質が高まるという。
　タスクの管理については，「優先度・高」「優先度・中」といった順位付けをやりがちだが，優先度では職種によって認識が変わるため，全体での優先順位で管理するのが有効だ。そのためにはUIに関わる職種のメンバーを集め，優先順位を決めるミーティングを週単位で行うのがオススメだという。
　そして，できあがったUIで，さまざまな職掌によるプレイ会を行うことで，多様な視点から課題を明らかにできる。UIデザイナーであれば毎日，これにエンジニアを加えて週に2〜3回，さらにプランナーも入れて週1回程度のペースで行い，できれば動画で記録しておくのが良いそうだ。

　ここでバグが見つかった場合，バグチケット（報告書のようなもの）を作るわけだが，再現条件や修正完了条件などをしっかり記入し，スクリーンショットの該当部分に印を付け，必要なら動画も添付することにより，その後の修正がスムーズに進む。もちろん，バグを見つけるのはQAチェッカーの仕事でもあるのだが，QAチェッカーにはより専門的なところに時間を使ってもらいたいということで，率先してバグチケットを作っているという。

UIデザイン三言論その3：意識編

　最後の意識編では，チームを盛りあげ，高いクオリティを保つための意識の持ち方がテーマとなった。多人数でゲームを作っていると，どうしても関心が自分の仕事のみに向きがちになる。問題点を見つけても，自分のパートでないとか，忙しいとか，相手から不興を買いたくないといった理由から，指摘を遠慮するようになってしまう。
　こうした状況にならないよう，皆が改善案を出せるような関係性を作り，信頼を得ることが理想であるという。ここになにか魔法や特効薬があるといいのだが，長﨑氏の答えは「自分がとにかく旗を振り続ける」ことだ。ミーティングや進捗確認会を行い，会話しやすい雰囲気を作り，誰よりも多くテストプレイするといった取り組みを進めていくことで，初めて信頼が得られるのだという。意見を募るべき相手は社内に留まらず，社外からの意見にも傾聴することが大事だ。細かな意見を改善することでブランドが「徐々にできあがっていく」。近道などはないということなのだろう。


　そうした姿勢の表れが，UIの改修だ。当初のUIはシンプルなものだったが，ティザーサイトやキャラクターのテイストに合わせた，現在の形に全面的な改修が行われている。ブランドカラーであるピンク色が，キービジュアルや月歌の瞳から決まったのもこの頃なのだそうだ。
　UIを作っていく上では，他社の製品をリスペクトし，今のプレイヤーが求めるUIや，自社の位置を確認することも重要だという。WFSでは，デザイナーたちが週に2本のモバイルゲームのUIをレビューする「UI Discussion」という取り組みが2015年から行われており，700本以上の他社ゲームが取り上げられている。他社製ゲームの優れたところと課題点を確認し，開発に活かせて初めてリスペクトである，と長﨑氏は考えているそうで，良い意味での意識の高さがうかがえる。



　そして，ヘブンバーンズレッドでは，ブランドとして確立するために，ビジュアルアイデンティティの言語化が行われており，オリジナルのフォントを作り，ブランドカラーのピンクを取り入れて認知度を高めている。本作のプレイヤーであれば，“ヘブバンと言えばあのフォントとピンク色”と認識されているようで，この取り組みは効果を上げていると言えるだろう。


　最後に長﨑氏は，「最上の，切なさを。」というタグラインに対して，UIデザイナーが何をすべきか解釈を語った。“最上”とは，プレイ環境の品質を上げ，チームの開発力を高め，認知度を上げるといった地道な取り組みによりブランドの信頼感を保証していくことであり，これを“切ない”感動体験につなげていく，という意識で日々開発を続けているのだそうだ。


　UI制作のみならず，組織論にまで踏み込んだ本講演。ヘブンバーンズレッドというゲームの事例のみならず，強い開発チームを作っていく上でも役に立つものだと感じられた。

「ヘブンバーンズレッド」公式サイト

「ヘブンバーンズレッド」ダウンロードページ

「ヘブンバーンズレッド」ダウンロードページ

「CEDEC 2022」公式サイト

4Gamer「CEDEC 2022」関連記事一覧