2022年8月23日～25日の3日間にわたり開催された、日本最大のコンピュータエンターテインメント開発者向けのカンファレンス、“CEDEC2022”。本稿では、会期3日目の8月25日に行われたセッション“ヘブンバーンズレッド「最上の、切なさを。」を実現する為のUIデザイン三言論”の内容をリポートする。
『消滅都市』や『アナザーエデン 時空を超える猫』などオリジナルIPゲームを作り続けてきたWright Flyer Studiosと、麻枝 准氏が原案・メインシナリオを担当するKeyとのタッグで生み出された集大成とも言える作品『ヘブンバーンズレッド』（以下、『ヘブバン』）。
オリジナルIPでありながら、リリース後セールスランキングで1位を獲得するほど高い人気と指示を得ている本作では、どのようなUIデザインを用いているのか。『ヘブバン』を代表するワードである「最上の、切なさを。」を実現したUIデザイン三言論がどのようなものなのか。制作、進行、意識の3点に焦点を当てたUIデザインについて、マネージャー／UIUXディレクターを務める長埼二郎氏（※）から詳しい内容が語られた。
※“埼”はたつさき。
人間の認知を把握したUIデザイン
ゲームおいて、優れたUIデザインとはどのようなものなのか。セッションの冒頭、前提として押さえておきたい点として長埼氏は、人間やデザインの特性を理解することが重要だと示した。
『ヘブバン』を含め、スマートフォンでゲームをプレイする場合、画面に直接触れる関係上指で画面が隠れてしまったり、プレイ時の姿勢もさまざまで視線を安定させることが難しいなど、必ず物理的な制約が生じてしまう。
その対処法として『ヘブバン』では、指が届きやすい位置とサイズでボタンを配置すること、視認性のいいフォントの選定、画面を発光させすぎない明度調整などの手法が紹介された。
また、わかりやすいデザインにするため、認知負荷を減らすことも意識しているという。階層や情報、要素からなる優先順位付けをして、優先順位の高いものから認知させる、視認性のいいデザインにすることも重要になるようだ。
UIでプレイヤーを誘導する際のポイントとして、人間の認知特性を理解することも必要な要素として挙げられた。具体的な内容としては、コントラストや緩急を用いた視線誘導を利用するようだ。明暗差、彩度差、形状差などによる視覚的緩急を用いて、視線を誘導しているという。
加えて、止まっているものではなく動いているものを視線で追う認知を利用したデザインの有用性も例として挙げられた。重要な要素のバナーでの誘導、状況の進捗を動くゲージなど動的要素を利用して強調したりと、視認性のよさに人間の特性を活用していることがうかがえる。
実際の制作環境はPCを利用することになるが、PCモニターでの視認性を過信せず、実機で確認することも意識しているという。
ボタンのサイズや文字の読みやすさはPCとスマホでは大きく異なるため、「PCモニターと実際にスマホで見るものでは大きな乖離がある」と長埼氏は語る。『ヘブバン』でも何度もスマホ上に静止画を表示させ、UIデザインの精度をチェックしていたそうだ。
アプリゲームには欠かせない機能として、ストレスフリーな自動機能・一括機能についても紹介があった。同じクエストなどを周回するゲームは、その操作自体が次第にストレスへと変わってしまうのは多くの人が身をもって体験している。
「そこで感じるストレスに対して、自動機能や一括機能という選択肢を提示する必要がある」と長埼氏。利便性を高めることで、じっくり遊びたいユーザー、短時間で遊びたいユーザーと、プレイスタイルに応じた遊びかたを選択できるようにしているという。
そのほか利便性を向上させるUIとして、重要な機能に対して複数の入口からアクセスできる機能も紹介があった。たとえば強化画面では、各種強化要素に簡単にアクセスできる作りになっている。頻繁に使用し、重要な導線に対して複数の入口を作ることで利便性を高めているそうだ。
一見すると細かな要素にも思えるが、頻繁に同じ操作が求められるスマホアプリにおいて、これらのUIがストレスを緩和してくれることは間違いない。
また、『ヘブバン』では多くのUIにアニメーションが導入されているのだが、こちらも視線誘導を意識したものであるという。動きやレスポンスに対して適切な効果音を導入することで、UIを操作する上での体感を高めるという手法が紹介された。
タイトル画面についても、主人公をさまざまな角度から出現させる動的な演出を加えることで、アニメーションによる楽しみや期待感を高めているそうだ。
画面をタップすることで何が起こったのか、ユーザーが状態変化を認知するための工夫も施されている。マイクロインタラクションにこだわることで、状態変化や操作の快適さを向上させる狙いがあるそうだ。アニメーション動作も多いUIには、視線誘導をはじめとする意図があり、それぞれが認知の手助けになるよう丁寧に制作されているという。
画面に余白を作ることも、『ヘブバン』のUIで意識したポイントだと語る長埼氏。あえて余白を作ることでプレイヤーが視認すべきポイントを絞り、認知負荷を減らし、空白すらも利用して視線誘導を実現している。また、ただ余白を作るだけでなく、余白自体にグラデーションやエフェクトを加えることで、表現としての価値や情緒を与える役割も果たしているそうだ。
UIデザインの制作進行においてもっとも重要にしている要素として長埼氏は、「情緒のある演出を、ゲームサイクルの要所に取り入れること」と挙げた。時間経過の演出やプライベートな一瞬を「間」として切り取り、戦いから生き残った安堵や、束の間の休息を表現している。
開発者やユーザーへの意識もUI制作には欠かせない要素
ゲームUIは制作物のクオリティを高めるだけでなく、プランナーやエンジニア、デザイナーなど多くのメンバーと連携することも求められる。そこで、先を見通すための進行管理が必要になるという。
制作において避けては通れないのが、デザインの工数見積もり。クオリティの追求だけでなく、デバッグやそれによる修正、見積もり計上までしないと品質向上にはつながらないそうだ。
制作中はタスク管理をすることになるが、さまざまな変数によってタスクの順序はどうしても変わる。そこで、優先度だけではなく、優先順位をつけて管理していたという。
『ヘブバン』では優先順位の並び替えミーティングを定期的に実施し、すり合わせをしながら進めていたそうだ。また、ミーティングは必ずしも参加できるわけではないため、つねに新しい進捗情報を共有するタスクリストを送信して、工程での制作ロスを防ぐという手順を取っていたことを明かした。
スマホアプリのUIは周回機能などをはじめ要素が多くなりすぎて、膨大な仕様から計上漏れがしやすいという問題を抱えている。プランナーひとりでは見落としてしまうこともあるが、『ヘブバン』では職域で役割を固定せず、チームで手薄となる部分を補う動きをしていたという。
また、複雑なUIを担当するプランナーの動きをデザイナーはただ待つだけでなく、普遍性が高い、たとえばプレゼントボックスなどの機能を先回りして仕様提案するなど、ムダのない動きも心がけていたそうだ。
ゲームUI開発で見落としがちな要素として、プレイ会でもさまざまな職掌・頻度で多角的にチェックをすることも意識しているという。各役職べつにプレイ会をすることで、仕様に見落としがないかをチェックするのが理想だと長埼氏は語る。
プレイ会を実施し、不具合を発見した場合はバグチケットを記入することになる。ここでもわかりやすい起票を作ることで、修正がスムーズになる環境を作り上げていたという。
また、UIデザインを作る際、レギュレーションを定めることも重要になるのだが、そこにはメリット・デメリットもあるそうだ。
メリットとしては、レギュレーションがあることで一貫性や、量産や引継ぎが簡単になるという点が挙げられた。デメリットとしては、修正のたびにドキュメントを最新状態に保つコストが発生するほか、レギュレーション順守が目的化して使い勝手に特化したデザインが生まれにくくなってしまうとのこと。
最後に、UI制作の進行におけるデザイナーの役割についてもまとめられた。制作はもちろん、管理も担当することで幅広い業務をカバーすることで、作業の一極集中を避けたり、多角的な視点を持つことにつながるそうだ。
3つ目の言論である意識については、UIデザイナーが持つべき意識や、世界観のブランディングの重要性が挙げられた。ゲーム開発時はさまざまな要素が組み合わさって制作することになるが、これらすべてをつなげてゲームとしての形を作ってみると、違和感が生じる場面があるという。
こういった問題が生じた際、改善提案をするにも全体を見通す必要があり、自分の分野だけを見るのではなく、他分野の開発についても理解を深める必要がある。また、他分野に修正を依頼するためにも、人間関係の構築も求められるという。
また、意識についての問題点として、せっかく制作したシステムを変えたくないという心理が品質向上を妨げる、心理的な要因についても紹介があった。
『ヘブバン』でもUIビジュアルの全改修や、社内外レビューを加味した改修など、何度もUI改善項目を検討しているという。社内外の意見に傾聴し、改善につなげることでブランドが作られると長埼氏は語る。
続いて、『ヘブバン』のブランド意識についても言及があり、ここではビジュアルアイデンティティの定義について語られることになった。キャッチコピーである“最上の、切なさを。”を表現できるものを探す際、UIデザイナーがビジュアルアイデンティティを言語化する試みをしたという。
男色の美しさ、情緒や儚さといった、『ヘブバン』を象徴するさまざまな要素。これらを言語化し、開発メンバーの共通認識とすることで一貫性が生まれた上、ユーザーに対してのブランディングとしても機能するようになった。
一貫性のあるブランド作りとして、ロゴやフォトンによる統一も意識しているそうだ。これらはゲーム内だけにとどまらず、広告やウェブサイトでも統一することで、世界観のイメージをブランドとして認知する狙いがあるという。
メインカラーであるピンクも統一して利用することで、一般認知を高めている。ちなみに、このメインカラーは、当時のキービジュアルのピンクや、主人公の瞳の色から着想したそうだ。
セッションの最後には、『ヘブバン』のUIをどのような意識を持って開発しているのか、長埼氏から解説があった。『ヘブバン』というブランドを、ユーザーの生活に浸透させたいという意識を持っており、キャラクターが身近に感じる仕掛けを取り入れているという。
就寝から起床する演出などがその一例となる。PC版のリリースなど、UIを最適化することで『ヘブバン』に触れる機会を増やし、より身近なものになるように取り組んでいきたいと長埼氏は目指している意識を示した。
