ニュース

【CEDEC 2018】明快で軽快! Nintendo SwitchのUIを触るだけで楽しい理由

“あたりまえのUI”を磨くとここまで心地良くなる! 開発チームがスパッと解説

8月22日~24日 開催

場所:パシフィコ横浜

 CEDEC 2018の初日となる8月22日に、Nintendo Switch本体機能のデザイン過程を紹介する「明快で軽快なUI Nintendo Switch 本体機能」という講演が実施された。登壇したのは、任天堂企画制作部より、プログラムディレクションの小野純和氏、デザインディレクションの瀧口貴悠氏、サウンドディレクションの大西壮登氏。

 小野氏らが話したのは、Nintendo Switchの本体機能がどのような考えで作られていったのか。キーワードは講演タイトルにもなっている「明快」と「軽快」。ゲームハードには必ず搭載されている本体機能について、過去のハードとの比較も交えながら、その考え方と構築方法が解説されていった。

左から、任天堂企画制作部プログラムディレクションの小野純和氏、デザインディレクションの瀧口貴悠氏、サウンドディレクションの大西壮登氏
Nintendo Switchの本体機能は、「明快」と「軽快」の2つのコンセプトで作られている

見た目も操作も圧倒にわかりやすく! パッと見の“明快さ”を磨く

 そもそもNintendo Switchには、「ゲームであそぶ」に特化するという明確なコンセプトがあった。小野氏らはそのコンセプトから発想して、本体機能も「ゲームであそぶ」に特化させようと考えた。

 最近の任天堂ハード、つまりニンテンドー3DSやWii Uなどの本体機能では、ゲーム、サービス、システムが同じアイコンの大きさで表示されており、同列の扱いになっていた。ニュートラルな印象を与え、ゲームや各機能に接続するという役割は同じものの、Nintendo Switchの本体機能ではより「ゲームが主役」感を出そうと考えた。

「ゲームが主役」であることを意識して、よりメリハリのある画面構成を目指した

 そこで実施したのが、まずコンテンツをゲーム、サービス・システムとわけること。アイコンはゲームとその他で大きさをはっきりと変え、またデザインの密度もゲームは濃く、システム等は薄くした。画面に配置する際は、大事なものから順に上から下に並べている。

 さらに多くのアイコンがあっても表示を少なく感じるように、各アイコンを場所や色で区別して、同種のアイコンは3つ程度に留めるようにした。ここで意識したのは「整頓とメリハリ」。「ゲームが主役」というコンセプトを念頭に、プレーヤーにまず見た目から「操作が簡単そうだな」と思ってもらうようにしたという。

ポイントは「整頓とメリハリ」。パッと見のわかりやすさを1番に優先している

 またプレーヤーが操作するとき、どう動かすか迷わないようにするために、「カーソルのルール」と「効果音のルール」を考えたという。

 「カーソルのルール」とは、アイコンの配置に対して、カーソルが動くルール作りをどう構築するかということ。カーソルを動かすアルゴリズムは様々なパターンが考えられるが、1つ壁となったのは、アイコン配置が煩雑だと「人によって自然と感じる動きが違ってくる」ということ。

 たとえばプレーヤーが1段下のアイコン列に行きたいと思って下ボタンを押したとき、カーソルが真下に近いアイコンに飛ぶのか、1番左のアイコンに行くのか、開発者同士でも意見が分かれることがあったそうだ。そうなるとどのアルゴリズムを選んでもプレーヤーにとっては「不明瞭なUI」となってしまい、目指すべき「明快さ」とはかけ離れてしまう。

 そこでNintendo Switchでは、「ボタン配置は1列に並べる」、「グリッドに並べる」、「種類を分ける」と、誰にとっても動きが予測できるボタン配置のルールを再度設定し、そこにカーソル動作のアルゴリズムを組み込むことで、動きのわかりづらさを解決している。

開発者自身もアルゴリズムに迷ってしまうような画面構成は避けた。分けたり整理することで、迷わないUIにしている

 また「効果音のルール」では、「見た目と効果音」を揃えることを特に意識したという。たとえばメッセージ表示について、「案内」、「確認」、「注意」などと内容の意味ごとに効果音を作っていくと、「ソフトを終了します」という「案内」でも「注意」でもあるメッセージの時にどれを選択すべきか迷ってしまった。

 そこで開発チームはメッセージを「正常」、「エラー」、「警告」などとより大きな枠組みで捉え直し、代わりに見た目をガラッと変えて、見た目に合う効果音を付けるようにしたという。そのため「案内」も「確認」も「注意」も、「正常」な操作の範囲内なので同じ効果音になったが、音で迷うようなことはなくなった。

 このルールの効果は他にもあった。現場では、「ポイントを受け取りました」という正常の案内について「他よりもちょっと嬉しい気持ちにさせたい」と要望が出たそうだ。そこで小野氏らは、「見た目と効果音」のルールを当てはめて考えた。メッセージ上部にアイコンを表示させて特別感を出し、よりポジティブな効果音を付けることにしたのだ。見た目と効果音の両方に「嬉しい気持ち」を上乗せすることで、他のメッセージと区別することができた。

 こうして、見た目でも効果音でもわかりやすく迷わないUIができあがった。ルール作りについては、セクションを越えてチーム全員で磨いていったそうだ。セクションごとのルール作りをしてしまいがちな中で、全員で1つのものに向かっていけたのは開発の上で大きな効果があったという。

メッセージの重要性を考え直し、見た目と効果音の両方で重要度を演出している
シンプルだが鋭いルール作りにより、UI制作は様々な広がりを生んだ

圧倒的“軽快さ”の実現は、「教習所の解説図」がヒントに

 それでは「軽快さ」はどのように作ったのだろうか。意識したのは、いつも本体機能で求められていた「ファミコンのようにならへんの?」という言葉。ファミコンは電源を入れたらすぐにゲームが始まるという、明快かつ軽快なハードである。だからこそ、技術的な違いはあれど目指すべきものとして良く言われていたそうだ。

 Nintendo Switchではファミコンのはやさを目指すため、少しでもUIにかかる時間を削ることにした。ヒントにしたのは、教習所などで良く見かける「車が停止する距離」の解説図。図では、運転手が「危険を発見」してから「ブレーキを操作」するまでに空走距離があり、さらに「減速して停止」するまでの制動距離があって、やっと止まることが解説されている。

 これをゲームのUIに置き換えると、「ユーザーの理解」があってから「ユーザーの操作」までに時間がかかり、さらに「システムの処理」の時間があって操作が完了する、という理解になる。この1つ1つに対して、時間を削れるだけ削ることにした。

左は小野氏が少年時代に作ったファミコンのカセット入れ。当時、このカセット入れからどのゲームを選ぶかワクワクしたそうだが、本体機能でゲームを選ぶ時も同じようなワクワク感があることに気付いたという。自分が本体機能を作る立場になり、「自分は昔から本体機能を作っていたんだ」と感慨深い気持ちになったそうだ
「車が停止する距離」の説明から、「UIが操作されるまでの時間」の構造に関するヒントを得たという

 まず取り掛かったのは「システムの処理」。つまりプログラム上での軽快さを求めた。注目したのは画面遷移などの「構築処理」の部分で、リソースの読み込みをはやくするために「リソースを圧縮してランタイムで解凍」、「ファイルを分割して遷移に必要なものだけダウンロード」という処理をかけた上で、リソースそのものを削るために、今まで採用していた角丸・シャドウ・質感用のテクスチャを思い切って全部カットしたという。

 代わりに使ったのは1ポリゴンのシェーダーによるアニメーション。この判断により、HOMEメニューのデザインリソースは200KB以下という「現代機としてはかなりの軽さ」を実現したという。

削れるものはとことんカットして、構築処理を軽くしている

 また通常は処理の前後にアニメーションを入れるが、まずチームではアニメをまったく入れない「遷移の極限のはやさ」をテストして共有したという。会場ではこのテスト時の動画も公開されたが、切り替わりが本当に一瞬のため、「はやすぎて何が起きたか逆にわかりづらい」という現象が起こっていた。

 そこでチームは最低限度の決定アニメ(0.2秒)、退場アニメ(0.05~0.1秒)、入場アニメ(0.05~0.1秒)をつくり、同時に処理できるところは同時に処理して、合計約0.2秒という画面遷移の圧倒的軽快さを実現している。

爆速画面遷移の処理モデル。アニメなしの究極の短時間版を見ておくことで、アニメを最小限にしようという共通認識がスムーズにできたという

 次に取り掛かったのは「ユーザーの操作」。一例として挙げられたのは、ソフト終了の操作。ゲームプレイ中、ホームボタンを押してXボタンを押すと、「プレイ中のソフトを終了します」という画面が出る。このときカーソルは「終了します」に位置している、というものだ。

 もしカーソルが「キャンセル」だったとき、終了するには右ボタンとAボタンの2手の操作が必要だが、製品版ではAボタン1手でソフトを終了できる。一見親切ではないような感じもする処理だが、ここで大事にしたのは「信頼と端的」だという。

 「あまりに親切すぎるUIは冗長になる」という考えのもと、プレーヤーを信頼して意図をはっきりさせたかったそうだ。特に意識したのは、「終了したい!」とプレーヤーが操作したときに「はい! 終了しますね!」とすぐに返事をする、会話のような操作感にすること。単なるメッセージでも「プレーヤーとのコミュニケーション」と考えることで、スパッと終わる操作を目指したそうだ。

「ソフトを終了する」はあえて最初から「終了する」にカーソルが合っている。ソフトを終了したいプレーヤーが、より素早くソフトを終了できるようなテンポの良さが重視されている

 最後の「ユーザーの理解」では、「発見のはやさ」を大切にした。工夫したのは不必要なアイコンを思い切って削ったこと。これまではアイコンを使ってわかりやすさを優先していたが、発見のはやさでは言葉だけの表示が有効なこともある。そのため設定画面などでは、アイコンをなくして言葉だけでUIを構築している。

 また「人はななめ読みする」という習慣を利用して、メッセージなどでは左上と決定ボタンに「消去」などメッセージの主題を示す言葉を意識して置くようにしている。Nintendo Switchの本体機能で「はい」、「いいえ」の表示が出ないのは、「全部を読まないとメッセージの意味がわからない」という事態を防ぐためだそうだ。

アイコン表示はわかりやすいこともある(左)が、逆にアイコンがあることで文字情報が頭に入ってきにくいUIになってしまうところだった
大事なことは最初に言う。ななめ読みでもすぐに内容がわかるよう、文章の最初と決定ボタンにキーワードを入れている
ロム、つまり実機ビルドを触ってみる日を「ロムフェス」と呼んで、楽しさと積極性を演出した。ただ触るだけでなく、自由にものを言い合える雰囲気作りも意識したという

明快で軽快なUIが完成。さらに操作の心地よさも作る!

 以上の取り組みによってわかりにくさや遅さはできる限り取り除かれた。しかしここまでは「不快を減らす」話であり、Nintendo Switchの本体機能ではさらに「快を増やす」、つまり心地良くて楽しいUIも目指されている。

不快さを取り除いた上で、心地良さを入れる。注目したのは音による演出だ

 HOMEメニューにBGMがないNintendo Switchで行なわれたのは、操作音による心地良さの演出だ。ポイントとしたのは、「移動」、「決定」、「遷移」の3つ。「移動」は、カーソルを移動させたとき、どの種類のアイコンに移動したかで音の響きや音程を変えていること。HOMEメニューでカーソルを移動させると、その度に音が変わって、音に動きが出てくる。

 また「決定」は、設定変更など連続で効果音が鳴るときの工夫のこと。たとえば決定、ON、OFF、戻るという操作の効果音は、それぞれの音のテンポを揃えている。こうすると決定操作にタン、タン、タン、タンとリズムが生まれて、決定操作そのものが心地良くなる。

 3つ目の「遷移」は、たとえばマイページなどへの遷移の際に、遷移前の音と遷移後の音を対応させていること。アルバムなら遷移前に写真を思わせる効果音が鳴り、遷移後はパパパパパ……と写真を並べるような効果音が鳴り、「音のつながり」が演出されている。効果音がなくてもUIとしては問題ないが、効果音があった方が気の利いたサービスを受けたような気持ちになる。細かいところだが、確実に完成度が上がっていると思わせる試みだ。

操作を連続させてみれば、リズミカルな効果音が楽しく響く。遷移の素早さも相まって、操作そのものが心地良いUIだ
何も知らずに触っていると気付きにくいが、遷移前と遷移後の音はつながっている。無音版と比べてみると、効果は歴然。この効果音だけで、気の利いたレストランで粋なサービスを受けたような気持ちが出てくるから不思議だ

 ハードの本体機能はあるのが「あたりまえ」のコンテンツだが、その「あたりまえ」を改めて見つめ、徹底的に磨くことで特徴になると3名は語った。また工夫を考えながら、セクションを越えてチーム全員で開発に取り組めたことが、何より力になったとした。

 それにしても、Nintendo Switchの本体機能UIが非常に考えられたものであることに驚かされた講演だった。実際の動きや音の情報は本記事ではお伝えしきれないが、この点はNintendo Switchに触れてみると1発で理解できると思う。Nintendo Switchをお持ちの方は、本講演の内容を踏まえた上で、改めてHOMEメニューを操作してみてはいかがだろうか。

開発チームとしてはこの「本体機能」は徹底的に磨いた自信作だったそうだが、最初の言語設定で「子供が誤ってロシア語にしてしまう」という事件もテストでは起きたそうだ。予想外過ぎて驚くと同時にがっかりした事件だったが、「だからこそ開発は面白い」と3名は語った