［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート

　ゲーム開発者向けカンファレンス「CEDEC 2020」の2日目（2020年9月3日），ハル研究所は「カービィUIでおもてなし！『ゲームとプレイヤーを繋ぐUI』を目指して」と題したセッションを行った。
　このセッションでは，同社の人気シリーズ「星のカービィ」（以下，カービィ）において，どのようにユーザーインタフェース（UI）が作られているのかを，UIアーティストの伊藤晴香氏と，リードUIデザイナーの剣持 紫氏が紹介した。UIデザインが論理的かつ分かりやすく言語化されたセッションの内容をお伝えしていこう。



　本セッションの主題となるカービィのUIとは，どのようなものなのだろうか。UIチームは，迷わないUI，ストレスや不快感を与えないUI，印象に残る心が動くUIを目標に開発しているという。
　そして，それらの目標を実現するために大切にしていることが，「使いやすさを考える」「ゲーム全体の流れで考える」「遊び心を忘れない」という3つのポイントだ。

「当たり前」を意識して使いやすいUIに

　まずは「使いやすさを考える」について。そもそも使いやすいUIというのは，今自分がどういう状況なのかが分かり，次にすべきことに迷わず，何が起こるのかが想像できる……いわば，違和感やストレスのないUIのことだと言える。
　ゲームにおける立ち位置としては，プレイヤーとゲームをつなぐ役割であり，プレイヤーをスムーズにゲームの世界に誘導したり，プレイヤーの気分を盛り上げたりする。反対に言えば，使いにくいUIの場合，プレイヤーがゲームの世界に入る前に集中を途切れさせてしまうわけだ。


　使いやすいUIを実現するためには欲しい情報がすぐ目に入るなど，情報を分かりやすく伝えることが重要となる。言い換えれば，「情報をうまく扱っている」ということだ。つまり，UIデザインとは情報を扱い，整理する仕事なのである。この情報とは文字に限らず，色や形なども含まれる。
　ここではそうしたさまざまな情報をどのように整理すべきか。基礎的な方法が紹介された。


・優先順位をつける
　そのシーンにおいて，どの情報がどのぐらい重要か，優先順位を決めてデザインする方法だが，カービィのUIチームではデザイン前に優先度をプランナーと相談したり，デザイン段階でデザイナーから提案したりすることもあるという。
　画像では画面上に表示しないといけない情報が左に並んでおり，これを優先順位づけしたものが右にリスト化されている。


・カテゴリーを分ける
　優先順位をつけてリスト化したものをさらにカテゴリーごとに分けることで，デザインに起こす際の手がかりにできる。
　例えば先ほどのリストからだと，「どんな場所の情報」「スコアの情報」「ゲーム進行に関する情報」の3カテゴリーに分けられる。このうち，スコアの情報であれば，まとめて配置したほうが見やすくなるだろう。この中には優先度が中のものと低のものが含まれるので，それに準じた強調具合も自然と決まってくる。


　続いて紹介されたのは，デザイン・レイアウトの仕方で情報を整理する方法だ。

・近接
　カテゴリーが同じものや関連性の高いものを近くに配置する。画像では上部の横軸にワールドの情報が，右側の縦軸にステージの情報が並ぶ形になっている。各情報を参照する際，視線の動かし方も横と縦で変わるので，それぞれが別の情報群であることが分かりやすい。


・整列
　画面内の要素の位置を縦や横で揃える。文字情報が書かれている枠の大きさがバラバラでは見づらいし，枠の中にある文字の位置がそれぞれでズレていても視認性に問題が出てくる。これを揃えることで文字情報が多い画面でも見やすくなる。


・反復
　画面内のデザイン要素を統一して，それを繰り返して使う。それによってパターン化できれば，何の情報なのかをプレイヤーが理解するためのコストが下がる。
　例えば，「サウンドルーム」「イラストギャラリー」「シアタールーム」など，まったく違うメニューであっても，それぞれの名称が同じ形の枠で左上に表示されていれば，「今見ている画面が何なのかを表示する場所」だと自然に理解できる。


・コントラストをつける
　大きさや色で情報に強弱をつける方法だ。複数の情報が表示されたときに理解しやすくなる。


・視線誘導を考える
　視線の動きを考えて情報を配置すると，分かりやすさが増す。テレビなどの横長の画面は視線は左上から右下へ移動するため，重要な情報を左上に置くことで目に入りやすくなるという。UIチームではこうした目に入りやすい場所は「特等席」と呼んでいるそうだ。


　これらの情報整理の手法は，UIデザイナーなら当たり前にやっていることかもしれないが，UIチームはこの「当たり前」を常に意識しているという。そんなチームがUIに手を加えていくとどうなるのかを，初期デザインと製品版の実例で見比べてみよう。


　これは「星のカービィ スターアライズ」のベストタイムを確認できる画面で，左が初期デザイン，右が製品版デザインだ。この2つを比べたときの調整ポイントはいくつかある。
　まず製品版では，ベストタイムと各レベルのタイムを近接の手法で同じ場所にまとめている。さらに，整列の手法で縦軸に揃えることで視線を縦と横に動かす必要なく，タイム関連の情報を参照できるようになった。
　また，初期デザインでは特等席に「ベストタイム」の文言が書いてある。このシーンを気にする人は自分のベストタイムを早く見たいのだから，シーンのタイトルよりも数字のほうが優先度が高いとして，最初に視線が誘導される場所に数字を配置するように変更されている。
　そして，ここではキャラクターのイラストもなくしてしまっている。キャラクターがあると画面に親しみやすさが生まれるが，このシーンを気にする人はタイムを重要視するやりこみ欲求のある人であるため，必要情報以外を省いたというわけだ。

　以上のようにUIチームは基礎的な情報整理によって，使いやすいUIを構築しているとのことだ。

UIの外側に目を向けて流れで考える

　あまり重要でない情報を小さいアイコンで作成したが，組み込んでみたら周りの表示物に埋もれて見えない。仕様書に書いてある場面にぴったりのUIを作ったら，ほかのところで表示されて形が合わない。前後のシーンとも雰囲気が合っていない……。
　そんなUI制作あるあるに対して，「全体の流れが見えていないこと」が原因であるとUIチームは指摘する。UIデザインをするうえで大切なのは仕様を読み解くだけでなく，そのUIの前後のつながりやゲームでの立ち位置，つまりUIの外側を知り，ゲーム全体の流れで考えることだというのだ。

「Aはいる」というUIを作るとして，これ単体でデザインを考えてはいけない。どこに表示されるかによって色やサイズを変えるなどすれば，より分かりやすいUIになるからだ

そのUIが1回限りのものかを考えるのも重要だ。1回限りならそのシーンに特化したものを作れるし，そうでないなら汎用性のあるデザインにすればいい

UIの前後のシーンが分かっていれば，それに合わせられる。違和感がなくなるだけでなく，UIの遷移の仕方やアニメーションなども考えられるため，表現の幅も広がる。画像の「ゆうしゃミッション」のボタンであれば，手帳の形をしたUIから遷移してくるため，手帳の中に書いてあるというモチーフが使えるようになるといった具合だ

ゲームの楽しさを高めるのもゲームUIの役割

　これまでゲームプレイの機能や快適さに寄ったUIの使いやすさに言及してきたが，UIはただ使いやすいだけではいけない。「遊び」や「世界観に沿ったデザイン」を取り入れ，ゲームならではのワクワク感のある体験を盛り込む必要があるからだ。


　しかし，使いやすさと遊び心のあるデザインは対極の関係である。使いやすさを突き詰めていくと，機能性を重視することになるが，それはつまり「情報のみをダイレクトに伝える」ものであるため，シンプルで一定の法則に従ったデザインになってしまうのだ。UIチームはそこに遊びや世界観をどのように盛り込むかのバランスで悩むことになる。
　そうした中でUIチームはどのようなデザインをしてきたのだろうか。

「星のカービィ スターアライズ」でのデザイン事例。文字を読まなくても，絵だけで難度が分かる設計になっている。左は「甘口おさんぽ味」，右は「魂が飛び出る辛さ」だ。言っていることは分かるのだが，右のカービィの顔が面白すぎて話が頭に入ってこない

サウンドルームのような音楽を聴くための場所でも，視覚で楽しめる要素を盛り込む

先にも紹介された手帳型のボタンを押すと，手帳の中のボタンを操作する形になる画面遷移。世界観とUIを合わせることで，プレイヤーがより雰囲気を楽しめる

1本のゲームでたくさんのモードが遊べるシリーズなだけに，「グラフィックフォント（装飾された画像フォント）」が活用されている。モードごとでそれぞれのロゴを作ることで，本編とは異なる遊びだということがすぐに分かり，プレイヤーの気持ちも切り替わる。グラフィックフォントは手間がかかるが，画面を華やかにするのに有効だという

　UIの情報だけでなくグラフィカルに変化する楽しみを作れるのは，ゲームUIならではの強みだ。もちろん，情報を正確に伝えるというのはUIデザインの根底にあるものである。しかし，型にとらわれない発想で作られたグラフィカルなUIは，作品の魅力をダイレクトに伝えられる表現方法だという。ゲームの楽しさを高めるということもゲームUIの役割であり，そうしたUIを目指しているとUIチームは語った。

伝統と挑戦で作られるカービィUI

　カービィと言えば，その可愛らしさをイメージする人も多いと思うが，カービィUIは可愛らしさではなく，「あたたかさ」を心がけているという。カービィは確かに愛らしい見た目をしているが，ゲームジャンルとしては骨太なアクションゲームであり，ゲーム性と世界観が乖離しすぎないよう，シリーズ伝統的にあたたかさを意識してきたのだそうだ。
　そのために行ってきた取り組みが紹介された。

鋭利な形状は攻撃的に見えてしまうので，全体的に丸みのあるデザインが採用されている。丸みのある星はシリーズでも強く印象に残るイメージだろう

目に痛いコントラストや色使いは多用を避けている。とくに真っ黒や真っ白はコントラストが強い。強調したい部分にだけ使い，ほかには少しだけグレーを入れるなどの工夫をしているそうだ

1つの画面にたくさんの情報を入れるのは避けている。これは悪いことではないが，広いターゲット層を持つカービィシリーズでは，難しく感じないようあえて情報を分散させている

　ユーザーを思いやり，気を配り，安心感のある画面作りを行うおもてなしの心こそが，カービィUI伝統のあたたかさなのだという。さらに，あたたかさだけでなく各作品のコンセプトも加わって，より魅力的なUIに仕上がっていく。

SFの世界観が加わったUI。初期デザインは重厚感のある暗めのUIだったが，シリーズの安心感を残せるよう爽やかな質感となった

ファンタジーRPG風の世界観が加わったUI。カラフルに描かれることが多い普段のカービィの世界と違って，アンティーク的な落ち着いた色合いで，たくさんの装飾が加えられているのが分かる。RPGらしくUIで表示する情報量も多くなるため，機能性にも気を付けたという

「スーパーカービィハンターズ」ではハードが変わって表現の幅も広がり，紙のザラザラ感などがアップ

粘土の世界観が加わったカービィ。UIからも粘土の質感が感じられる

デデデ大王が主人公なので布や木目を生かし，可愛らしくなりすぎないよう注意したUIに

　また，カービィシリーズのUIは伝統だけでなく，時代の流行を取り入れて挑戦的なデザインも行われているという。

ニンテンドー3DSの頃は世の中にタッチするデバイスが増え，ボタンの分かりやすさや押したときの気持ち良さが求められた。それらを追求して，スキュアモーフィックデザイン（物質的に見せかけた，ボタンが一目で分かるデザイン）を採用

HD機ならではのアニメーションを取り入れつつ，可愛くなりすぎないよう，斜めでクールなUIに仕上がっている。ロードがたびたび入るが常にいろいろなところが動くUIやメリハリのある画面遷移のアニメで，あまりロードが感じられない工夫も導入された

　まとめると，基礎要素とUIデザイナーが伝統的に行ってきた安心感のあるデザイン＝あたたかさが根底にある。そこをベースにタイトルごとの世界観や発売ハード，時代の流行を考慮して新しいビジュアルに挑戦し続けるのがカービィのUIチームだ。
　UIというものはユーザーはもちろん，同じ開発者からもその細やかな気配りや仕事が意識されることは少ないものだという。しかし，今回のセッションを通じてUIへの注目を高め，面白さや奥深さ，重要性を知ってもらい，関係者間の情報交換の活性化やUIの発展に貢献したいと述べ，講演を締めくくった。

視聴している開発者たちがコメント欄で大興奮だった，UIチームが使っている開発便利ツールの紹介コーナーもお届けしていこう。こちらはUIデータをWeb上で閲覧できる素材表。リストは自動生成され，どのUIがどこで使われているのか，どんな見た目なのかなどを簡単に調べられる

グラフィックフォントをWeb上で閲覧できるツール。グラフィックフォントは文字を画像化して作ったデータで，既存フォントより豊かな表現ができるが，ローカライズ時に自動で翻訳が切り替わるわけではないので各国のものが必要となる。その管理を簡単にするためのものがこちらのツールだ

UIのデータ作成で必要な大量のテクスチャを一括出力できる内製のPhotoshop用スクリプト。ルールに乗っ取ってデータを作成すると，スクリプトの実行ボタンをクリックするだけで一括で出力してくれる

テキストのX幅を自動で調整してくれる機能。ローカライズ時に長い翻訳がテキストの表示領域に納まりきらないケースにも自動で対処できるようになる

デザイナーがパラメータを調整できる機能。日本語の場合，ルビを入れるための広めの行間が設定されているが，このまま海外版にすると広すぎる。そこでこのツールを使うことで言語ごとの調整，クオリティ管理ができる

現在選択している言語が表示できる機能。地味に見えてこれがあるとデバッグの際，バグのスクリーンショットを見て「これは何語版だっけ？」となるのを防げるため，とても便利だという

UIデータの名前をマウスオーバーで表示する機能。UIがROM上に表示されているはずなのに見えないとき，データ自体が存在していないのか，実装はされているがデータの問題で見えていないのかが判断できる

最後にテキスト表示領域を可視化する機能。最大でどこまで文字が入るかがパっと分かる。UI作成時，ローカライズに耐えられるよう余裕を持っておくのに役立つ。こうしたツールで開発環境を改善し，デザインに関して試行錯誤する時間を増やすことで，カービィUIは作られているのだ

「CEDEC 2020」記事一覧