ニュース

“可愛さ”よりも“あたたかさ”！「星のカービィ」のUIデザイナーがデザインするうえで意識していることとは？

吹越友一

2020年9月3日 19:39

【CEDEC 2020】
9月2日〜9月4日開催

　ゲームをプレイするうえで、なくてはならないのがUI（ユーザーインターフェース）だ。当たり前のようにそこにあるUIだが、ゲームとプレーヤーを繋ぐ欠かせない要素であることは間違いない。

　プレーヤー側が意識して見ることは少ないUIだが、そのUIには、「ゲームをもっと面白く、もっとよくしたい！」、「ユーザーさんに快適に使ってもらいたい！」というUIデザイナーの想いが込められている。しかし、そのためには何を考え、どのように作ればいいのだろう。

　CEDEC 2020では、ハル研究所開発本部第1開発部商品開発課スペシャリスト UIアーティストの伊藤晴香氏および、ハル研究所開発本部第2開発部リードUIデザイナーの剣持紫氏が、「星のカービィ」シリーズ（以下、カービィ）を事例に、「カービィ」チームのUIデザイナーが日々大切にしていることや、UIがどのように作られているのかを語った。

【講演者】

「カービィ」のUIが目指しているものは？「使いやすさ」・「全体の流れ」・「遊び心」が大切

　伊藤氏は、「カービィ」のUIとして目指しているものは、「迷わないUI」、「ストレスや不快感を与えないUI」、「印象・心に残るUI」の3点だという。それを達成するためには、実際の使いやすさを考えながら、UIをゲーム全体の流れで考える。そして、遊び心を忘れないということが大切で、これらを常に念頭に置きながらUIをデザインしているのだ。

　まず、“使いやすいUI”とはなんだろうか。それは、自分がどういう状況なのかがわかりやすかったり、次に何をすればいいのか迷わなかったり、はたまた、このボタンを押すと何が起きるのを想像できるUI。つまり、違和感やストレスがないUIこそが、良いUIになるのだそう。

　実際、ゲームをプレイしている際に、UIに違和感やストレスを感じるようなことがあれば、ゲーム世界への没入を妨げることになる。UIデザイナーにとって、それは最も避けなければいけない事態だろう。

　“使いやすいUI”を実現するためには、情報をうまく扱い整理することが必要になる。そのためにまずは、画面上に表示しないといけない情報に優先順位をつけていくのだという。そうすることで、伝えたい情報が過多になったとしても、あまり迷うことなくデザインできるようになる。なお、優先度は、そのシーンでどの要素がどのぐらい重要かで判断しているとのこと。

　こうして優先順位を決めたら、次は情報のカテゴリーを分けるのだそうだ。例えば、今の画面がどんな場所なのかという情報や、ステージのスコアを表示する情報、ゲーム進行に関する情報。これらを分けておくことで、カテゴリーが同じ情報を近くに配置すれば見やすくな、といった判断がしやすくなる。

　さらにここから、デザインやレイアウトの仕方で情報を整理していく。先程も述べたように、カテゴリーが同じ情報や関連が強い情報は、近くに配置したほうがいい。また、縦・横・中心ラインを合わせるなど、明確な意図を持って整列することで、文字情報が多くても見やすい画面を作れる。

　そのほか、画面内のデザイン要素を他の画面と統一して繰り返すことで、何の情報が表示されているのかをユーザー側が自然に理解できる「反復」や、大きさや色などでコントラストをつけることで、選択しているものとそうでないものを明確に可視化する方法、視線誘導を考えて情報を配置するテクニックも紹介された。

　次に伊藤氏は、デザインする上で大切なことは、「仕様を読み解き、ゲーム全体の流れで考える力」だと語った。例えば、「A はいる」というUIを作ろうとした際に、そのUI単体でデザインを考えてしまうと、それがハプニングの原因になるのだという。

　「A はいる」のUIのまわりにはどんなUIが表示されるか、このUIの前後のシーンはどんな見た目になっているのか。これらをしっかり理解しておくことで、「小さなアイコンを作成したが、組み込んだら周りの表示物が多くて視認できなくなった」といったハプニングや、「仕様書に書いてある場面に合った雰囲気のUIを作成したが、他のところでも表示されることがわかり、前後のシーンと雰囲気が全く合っていないUIになってしまった」といったハプニングを防げるようになる。

　また、作成するUIはこのシーン1回限りのものなのか、という情報も重要になる。頻繁に使用するUIであれば汎用的なデザインにし、1回限りなのであれば、その画面に特化したデザインにできるということがわかる。

　ここまでは、情報を伝えやすくするための機能性を重視したUIの作り方の説明であったが、UIデザインで忘れてはいけないのが「遊び心」なのだという。使いやすさはもちろんだが、遊び心のあるデザインが加われば、ゲームならではのワクワク感のある体験を提供できるのだ。しかし、機能性のあるシンプルなデザインと、魅せることを重視した遊び心のあるデザインは対極にあるもの。遊び心のあるデザインを重視しすぎ、ゲームプレイの妨げになってしまっては本末転倒だ。

　「カービィ」UIチームでは、どのように遊び心と世界観に合ったデザインを盛り込んでいるのか。以下が「カービィ」シリーズで使用したデザイン事例になる。UIによってグラフィカルに変化する楽しみを作れるのはゲームならでは。シンプルなデザインで機能性を求めるだけでなく、ひとめ見てプレーヤーがワクワクするようなデザインが大切なのだろう。

難易度選択画面。文字を読まなくとも、一見しただけで難易度の判断ができ、必要な情報を伝えつつ視覚的にもわかりやすいデザインになっている

サウンドルーム。音楽を聴くだけの画面だが、曲を流している間も楽しめるような画面になっている

世界観に合わせ、手帳型のプロフィール画面に。ボタンを押すと手帳が開き、その先の画面は手帳をイメージした画面になっている

モード選択画面。各モードの特徴付けのため、モードごとに専用のロゴが作られている

「カービィ」のUIで意識するのは“可愛らしさ”ではなく、“あたたかさ”！伝統と挑戦

　「星のカービィ」と聞いて最初にイメージするのは“可愛らしさ”だが、UIで心がけていることは“あたたかさ”なのだという。これは、「カービィ」のジャンルには骨太なアクションゲームが多いため、ゲーム性と世界観が乖離しすぎないように気をつけているからとのこと。

　実際に“あたたかさ”を感じるデザインを作る取り組みとして、攻撃的な形状は避けているのだそう。カービィが乗っているワープスターもそうだが、星型の先などの鋭利な角は、丸みを帯びるように削られている。

　また、目に痛いコントラストや色使いを多用するのは避けられている。極端だが、真っ白・真っ黒を多用したUIはコントラストが強くなり、目に痛いデザインになってしまう。目立たせたいところ以外はグレーにするなどの方法でコントラストを抑えている。こうすることで、“強い”印象はなくなり、目指している“あたたかさ”を感じられるUIへと変化するわけだ。

　1つ1つ、ユーザーへの思いやりと気配りを考えながら作成する必要があるUI。強く意識して見ることは少ないが、本セッションでは、そのUIこそがゲームの世界観を壊さず、引き立てる手助けをしていることがわかった。普段遊んでいるゲームでも、意識してUIをチェックしてみれば、また違った発見が見つかるのでないだろうか。

1画面で情報が多いと難しそうに見える。そのため、あえて情報を分散させるという方法もある

【作品別デザイン例】