ゲームデザインの中でも、UI（ユーザーインターフェース）は普段は強く意識されることのない要素ですが、ゲームとプレイヤーを繋ぐためにとても重要な要素です。
UIには、「ゲームをもっと面白く、もっとよくしたい！」というデザイナーの「おもてなしの心」が込められているといいます。今回のCEDEC 2020では『星のカービィ』シリーズのデザイナーたちが、いかに最近のシリーズで「おもてなしの心」を実現しているために心がけていることについて、「カービィUIでおもてなし！「ゲームとプレイヤーを繋ぐUI」を目指して」というセッションにて語られました。
UIを作るときに心がけていることと、その実践
今回のセッションではハル研究所のUIアーティストである伊藤晴香氏と、リードUIデザイナーである剣持紫氏が登壇。実務経験を元にUIによるおもてなしについて語る模様です。
『星のカービィ』シリーズは、1992年に発売された第1作から28年も続く人気シリーズです。本シリーズのUIを作るときに心がけているのは「迷わないUI」、「ストレスや不快感を与えないUI」、そして「印象に残る、心が動くUI」だといいます。
それらの目標を達成するために、プレイヤーにとっての使いやすさを考えること、ゲーム全体の流れでデザインを考えること、それから遊びごころを忘れないことでUI制作に取り組んでいるそうです。
ではプレイヤーにとって使いやすいUIとは何でしょうか。簡単にまとめれば、プレイヤーがいまどういう状況かがわかり、次に何をしたらいいか迷わないこと。そしてボタンをおすと何が起こるか想像できることだと説明しました。
とりわけゲームUIは、プレイヤーとゲームを繋ぐ機能が強く求められており、ゲーム全体の中でもプレイヤーに近い存在です。そのためゲームプレイの印象を形作るために重要なのです。
さて使いやすいUIを作るために、具体的にはどうしているのでしょうか。まず使いやすいUIというものは、「情報の扱い方が上手」だと解説されます。
ゲーム中にはライフポイントであったり残機であったりスキル表示であったりの情報が溢れています。UIデザインとはそうした情報を扱い、整理する仕事なのです。
そうした多くのゲームプレイに関わる情報を整理するためには、まず「優先順位をつける」ことが重要だと指摘します。
たとえば1人プレイ時のハイスコア表示や、スタートボタン、ハイスコアの詳細情報、ページタイトルといった画面に表示する情報を洗い出し、重要さに応じて優先順位をつけていきます。
このように『星のカービィ」シリーズ制作チームは、UIデザインする前に必ず情報の優先順位をチェックするプロセスを入れることで、迷うことなくデザインに入れるそうです。
次にカテゴリーを分ける作業について説明。情報の優先順位を付けた後、つぎに情報がどのカテゴリーに属するものが仕分けていきます。
ページタイトルであれば「どんな場所かの情報」にあたり、ハイスコア表示やハイスコアの詳細情報であれば「スコアの情報」というカテゴリーとなり、情報をごとに仕分けることで次にどうするかが分かるのです。
情報が整理できたら、いよいよ本格的にUIデザインのレイアウトに入ります。そこで情報を見やすくするのに重要なのが、レイアウトの「近接」です。
これはカテゴリーが同じものを近くにまとめることで、プレイヤーが情報を分かりやすくする方法です。ここでは画面上部には各ワールドの情報を近接させ、画面の中央部にはステージの情報を近接させたメニュー画面の例を紹介。プレイヤーはどのワールドで、どのステージを選択することがやりやすいのがわかるでしょう。
続いてレイアウトの「整列」について説明。これは各情報のレイアウトを、縦や横の位置をあわせるなど、意図をもって配置する方法です。この配置がばらばらだと情報が見辛くなるため、整列によって見やすくする効果があります。
ここではコマンドによって可能なアクションそれぞれを、縦列にきっちりと配置することで、視覚的にも情報の受け取りやすさも向上させています。『星のカービィ スターアライズ』ではメニューなどに整列を使ったレイアウトを行っているそうです。
プレイヤーにUIデザインを印象付ける手法として「反復」を紹介。これは画面のデザイン要素を統一し、繰り返して使うことで、パターンにするものです。
『星のカービィ』シリーズの例では、画面左上に各メニューの内容を斜めに入れたデザインを繰り返して使用することで、プレイヤーに印象づけているそうです。ちなみに今回のセッションで使用されているスライド自体も反復を利用して見やすくしています。
そして「コントラストをつける」ことも、情報を伝えるのに重要だと解説します。テキストの大きさや色を変えたり、カーソルに選択されている対象の色を変えたりすることで、情報に強弱をつけて見やすくするのです。『星のカービィ スターアライズ』でもこの手法によって、さまざまな選択画面を見やすくしているとのことです。
最後に挙げられたのは「視線誘導」についてです。人間の視線の動きを考えたうえで、情報を配置することで分かりやすい画面にレイアウトできると説明。テレビなど横長の画面では、視線は左上から右下へと移動するため、その動きに合わせて情報を置いてゆくと見やすいレイアウトになるとのことでした。
以上、チームが心がけていることは、ビデオゲームに限らずデザインの整理の基本を踏まえたものです。『星のカービィ』シリーズのUIチームも、こうしたデザインの当たり前を踏まえて作っていることを語っていました。
実際に、ここまでの手法によって情報を整理した後のUIがどう変わるかについても解説。上のスライドでは左側が初期案、右側が整理を行った後の、製品版のデザインです。
一見すると初期デザインはキャライラストも押し出されており、すごく魅力的に見えるでしょう。ですが製品版では大きく変えられています。
というのも、この画面の目的は「プレイヤーがベストタイムを判断すること」なのです。チームは目的に沿うように情報を再整理します。キャライラストは削除し、タイムの情報を近接・整列。ベストタイムの結果がすぐに目に入るように大きく表示し、視覚誘導で最初に目を向ける画面左上に配置。こうした製品版のデザインを完成させました。
まとめとして、「使いやすいUIとは、情報を整理し、わかりやすくしたもの」と説明。基礎的なデザインを使い、わかりやすく使いやすいものを目指していくと語りました。
UIはゲーム全体から考えないとデザインは決まらない
ここまではメニュー画面など、ゲームプレイに出てくる一部分におけるレイアウトを説明していきました。
ですがゲームは一部分だけで構成されているわけではありません。ゲームプレイによってシーンが次々と変わってゆくため、UIは仕様を読み解き、ゲーム全体で考える必要があると語ります。
実際にゲーム全体からデザインしなかったことにより、大きなミスも起こるそうです。たとえばUIの情報の中でも優先順位の低いものだったので、小さいアイコンを作ったところ、実装してみたら周りの表示物が多くてよく見えなくなってしまったケースがあります。
こうした問題の原因は全体の流れが見えていないことだと指摘。UIデザインをするうえで大切なことは、仕様書を前にしたとき、チームで全体を考えていくことだと説明しました。
たとえばAボタンを押すと「はいる」というUIを作るとします。このUIを作るときに、画面の周りにどんな情報が配置されるかを考えるのが大切になっていきます。周りの状況を把握することで、ボタンの色を変えたりなど調整を行っていくそうです。
またシーン1回かぎりのものか、頻繁に使いまわすものかによってUIもデザインが変わり、調整も変わってくるそうです。あるミニゲームのスタート画面一回きりのものだったり、あるいは「はい・いいえ」といった選択肢のように何度も使いまわすものでは違ってくるのがわかるでしょう
さらに仕様書をもらったとき、UIの前後のシーンも考えることでもデザインは変わっていきます。たとえばUIが必要なシーンに入る前のシーンでは、手帳が表示されていました。なので手帳のムードを意識したUIを考えていくことにしたそうです。
このように、デザイナーはUIの外側にも目を向け、前後の繋がりやゲーム全体の流れにどう影響する考えてデザインしていくことが大切だとまとめました。
『星のカービィ』シリーズならではの魅力を引き出すUIとは「遊び心」
ここまではUIの使いやすさ・見やすさなどについて説明されましたが、ここに「遊び心」を加えることでわくわくするものになることが解説されます。
たしかに『星のカービィ』シリーズのUIを見ていると、どこか穏やかでユニークな印象を覚えます。ところが「UIの使いやすさと遊び心は対極にあり、相反する関係がある」と指摘。実はユニークな印象も困難な課題を乗り越えたもののようです。
なぜ対極にあるかというと、機能性を重視すると、情報のみをダイレクトに伝え、デザインの法則や過去の例に従ったものになりがちです。一方、遊び心のあるものは魅力的な画面を見せることを重視し、作品の世界観を生かす形になります。
セッションを聴く限りでは「遊び心」のデザインに魅力を感じますが、一番大切な情報を見辛くなってしまうリスクがあります。なので真に魅力あるUIデザインにするために、機能性とのバランスを取ることが重要だと解説されます。これは先述の「ベストタイム」のUIが初期案と製品版で大きく変わった例を振り返ってもよくわかる話でしょう。
実際にカービィシリーズの事例から「遊び心」のわかりやすいものとして、難易度変更のシーンを紹介。難易度といえばゲームプレイのつらさを調整するものです。つらさとは漢字で “辛さ”……つまり “からさ”を調整するものである。ということでカレーの辛さを変えるカービィの表情で難易度の変化を一目で分かるものにデザインしています。
音楽を楽しめるサウンドルームのモードでも、観ていて楽しくなる工夫をしています。カービィたちがバンドをやっていたり、ジュークボックスを使った演出で音楽を聴きながらも目で楽しめるデザインを作っています。
さらに本編やミニゲーム等のスタート画面に、独自のグラフィックフォントを使用することで各モードに特徴を作った例も紹介。こうしたフォントを使っていくことで、他のモードと本編がまったく別のモードだと伝える意図もあるといいます。
このように、UI操作によって画面のグラフィックを変化する楽しみを作れるのはゲームUIならでは。「見るだけでもワクワクする画面作りが大切」だとまとめました。
「かわいい」という印象だけじゃない。骨太なアクションも感じさせるデザインのために
こうして機能性と遊び心を両立させるだけでは、まだ『星のカービィ』シリーズのオリジナリティは出てきません。最後にシリーズのUIを作る挑戦と伝統が加味されて完成しているのです。
それは一体なんでしょうか？ 近年のシリーズのUIデザインと、目指していることを元に解説されます。
まずシリーズのUIで心がけているのは、実はかわいらしさよりも、あたたかさだそうです。カービィやワドルディといったキャラデザインもあって、かわいい印象を持たれがちなシリーズですが、中身は骨太なアクションゲームなのです。敵とやり合ったり、複雑なステージを乗り越えるゲームプレイがそこには含まれています。そのため、 “”あたたかさ”に落とし込んでいくそうです。
ではあたたかさとは、どのようにデザインするのでしょうか。まず注意しているのは「攻撃的な形状を避ける」ことでした。たとえば『星のカービィ』シリーズではスターがよく出てきますが、その形状をとがったものにせず、角を丸くすることを徹底しているそうです。その他にも、鋭利な角を避けて丸くしていることが説明されました。
続いて「目に痛いコントラストや色使いを多用するのは避ける」ことが挙げられました。真っ黒な色を置くとコントラストが強すぎ、きつい印象を与えてしまうため、少しだけグレーを入れることでマイルドな印象になります。タイトル文字もグレーの色見をいれていることで、柔らかな印象を作っているそうです、
また架空のゲーム画面を例に、黒を使いすぎることを避けることも説明。黒は非常に強い色のため、要所で使うことが説明されました。
そしてシリーズに通底させているのが「高機能と見やすさのバランス」です。たとえばプレイ人数やゲームモード、難易度の設定をひとつの画面にまとめず、ひとつの画面でひとつの要素を選んでいく形にしています。
こうしたデザインに通底してるのが、冒頭でも語られたような思いやりや気配りだと説明。それが『星のカービィ』らしさであり、伝統である “おもてなしの心”があるデザインだといいます。
伝統の “あたたかさ”を元にした、近年のシリーズの挑戦
近年のビデオゲームはグラフィックの向上もあり、あたたかなデザインを各作品のコンセプトに落としこんだものも出てきています。
『星のカービィ ロボボプラネット』では、ロボットのコクピットのメカニカルなデザインをシリーズならではのデザインに落とし込んでいます。初期デザインはメカニカルで重苦しいデザインでしたが、最終的にはさわやかなデザインに仕上げています。
『みんなで！カービィハンターズZ』ではファンタジーRPG風のテーマでデザイン。落ち着いた色あいの配合にしながら、RPG系ゆえに情報量も多くなるため、雰囲気と情報整理の兼ね合いに気を付けてデザインされています。
最新作となる『星のカービィ スターアライズ』では、ＨＤ機ならではのフラットデザインやアニメーションを採用し、斜めの線などを多用した、クールでカッコいい形状を採用しました。
このようにデザインの基礎要素と、伝統のあたたかさを根底に、タイトルごとに新しいビジュアルに挑戦しているのです。
さらに優れたUIを作っていくための環境
チームではより良いＵＩのために「開発便利ツール」をまとめており、開発環境を整えているお話も語られました。
そのひとつに素材票があります。これは作成したＵＩをWeb上で閲覧できるリストであり、ＵＩデータをを画像付きで一覧できるシステムです。
もうひとつが、先述したグラフィックフォントのリストです。文字を画像化して作成していくそうです。 ローカライズ用に各国のグラフィックフォントを作成することもあり、Photoshop内製のグループエクスポーターというのテクスチャースクリプトを利用し、レイヤーに格納された、大量のデータをワンクリックでまとめているそうです。
ローカライズに大きな効果のある機能として。テキストのX幅を自動で調整する機能も紹介。各国の言語にローカライズのするときに、文字を自動で調整してくれる機能です。今まではテキストの幅に会わなかった場合、翻訳元に再翻訳もお願いするような問題だったが、この機能によって解決したとのことです。
また、デザイナーがフォントのパラメータを調整できる機能も実装。日本語では漢字にルビを入れたり、デザイナーがサイズ変更などをできるなど、細やかな機能が入っています。
さらにデバッグ機能も洗練。ローカライズ向けに現在表示されているUIのデータを表示したり、テクスト表示領域の可視化機能などを実装してマックスの文字数を確認し、ローカライズの不具合を避ける機能が紹介されました。
このように開発環境の改善を行うことで、デザインについて試行錯誤する時間を増やしているそうです。
今回のセッションのまとめとして、「UIは細やかにかたられることはなかったが、このセッションによって重要さが広まることを望んでいます」と語られました。『星のカービィ』シリーズだけではなく、多くのゲームUIはどのようにデザインされているかが気になる内容となりました。
