ニュース
【CEDEC 2018】明快で軽快！ Nintendo SwitchのUIを触るだけで楽しい理由
“あたりまえのUI”を磨くとここまで心地良くなる！ 開発チームがスパッと解説
2018年8月23日 12:04
- 8月22日～24日 開催
- 場所：パシフィコ横浜
CEDEC 2018の初日となる8月22日に、Nintendo Switch本体機能のデザイン過程を紹介する「明快で軽快なUI Nintendo Switch 本体機能」という講演が実施された。登壇したのは、任天堂企画制作部より、プログラムディレクションの小野純和氏、デザインディレクションの瀧口貴悠氏、サウンドディレクションの大西壮登氏。
小野氏らが話したのは、Nintendo Switchの本体機能がどのような考えで作られていったのか。キーワードは講演タイトルにもなっている「明快」と「軽快」。ゲームハードには必ず搭載されている本体機能について、過去のハードとの比較も交えながら、その考え方と構築方法が解説されていった。
見た目も操作も圧倒にわかりやすく！ パッと見の“明快さ”を磨く
そもそもNintendo Switchには、「ゲームであそぶ」に特化するという明確なコンセプトがあった。小野氏らはそのコンセプトから発想して、本体機能も「ゲームであそぶ」に特化させようと考えた。
最近の任天堂ハード、つまりニンテンドー3DSやWii Uなどの本体機能では、ゲーム、サービス、システムが同じアイコンの大きさで表示されており、同列の扱いになっていた。ニュートラルな印象を与え、ゲームや各機能に接続するという役割は同じものの、Nintendo Switchの本体機能ではより「ゲームが主役」感を出そうと考えた。
そこで実施したのが、まずコンテンツをゲーム、サービス・システムとわけること。アイコンはゲームとその他で大きさをはっきりと変え、またデザインの密度もゲームは濃く、システム等は薄くした。画面に配置する際は、大事なものから順に上から下に並べている。
さらに多くのアイコンがあっても表示を少なく感じるように、各アイコンを場所や色で区別して、同種のアイコンは3つ程度に留めるようにした。ここで意識したのは「整頓とメリハリ」。「ゲームが主役」というコンセプトを念頭に、プレーヤーにまず見た目から「操作が簡単そうだな」と思ってもらうようにしたという。
またプレーヤーが操作するとき、どう動かすか迷わないようにするために、「カーソルのルール」と「効果音のルール」を考えたという。
「カーソルのルール」とは、アイコンの配置に対して、カーソルが動くルール作りをどう構築するかということ。カーソルを動かすアルゴリズムは様々なパターンが考えられるが、1つ壁となったのは、アイコン配置が煩雑だと「人によって自然と感じる動きが違ってくる」ということ。
たとえばプレーヤーが1段下のアイコン列に行きたいと思って下ボタンを押したとき、カーソルが真下に近いアイコンに飛ぶのか、1番左のアイコンに行くのか、開発者同士でも意見が分かれることがあったそうだ。そうなるとどのアルゴリズムを選んでもプレーヤーにとっては「不明瞭なUI」となってしまい、目指すべき「明快さ」とはかけ離れてしまう。
そこでNintendo Switchでは、「ボタン配置は1列に並べる」、「グリッドに並べる」、「種類を分ける」と、誰にとっても動きが予測できるボタン配置のルールを再度設定し、そこにカーソル動作のアルゴリズムを組み込むことで、動きのわかりづらさを解決している。
また「効果音のルール」では、「見た目と効果音」を揃えることを特に意識したという。たとえばメッセージ表示について、「案内」、「確認」、「注意」などと内容の意味ごとに効果音を作っていくと、「ソフトを終了します」という「案内」でも「注意」でもあるメッセージの時にどれを選択すべきか迷ってしまった。
そこで開発チームはメッセージを「正常」、「エラー」、「警告」などとより大きな枠組みで捉え直し、代わりに見た目をガラッと変えて、見た目に合う効果音を付けるようにしたという。そのため「案内」も「確認」も「注意」も、「正常」な操作の範囲内なので同じ効果音になったが、音で迷うようなことはなくなった。
このルールの効果は他にもあった。現場では、「ポイントを受け取りました」という正常の案内について「他よりもちょっと嬉しい気持ちにさせたい」と要望が出たそうだ。そこで小野氏らは、「見た目と効果音」のルールを当てはめて考えた。メッセージ上部にアイコンを表示させて特別感を出し、よりポジティブな効果音を付けることにしたのだ。見た目と効果音の両方に「嬉しい気持ち」を上乗せすることで、他のメッセージと区別することができた。
こうして、見た目でも効果音でもわかりやすく迷わないUIができあがった。ルール作りについては、セクションを越えてチーム全員で磨いていったそうだ。セクションごとのルール作りをしてしまいがちな中で、全員で1つのものに向かっていけたのは開発の上で大きな効果があったという。
圧倒的“軽快さ”の実現は、「教習所の解説図」がヒントに
それでは「軽快さ」はどのように作ったのだろうか。意識したのは、いつも本体機能で求められていた「ファミコンのようにならへんの？」という言葉。ファミコンは電源を入れたらすぐにゲームが始まるという、明快かつ軽快なハードである。だからこそ、技術的な違いはあれど目指すべきものとして良く言われていたそうだ。
Nintendo Switchではファミコンのはやさを目指すため、少しでもUIにかかる時間を削ることにした。ヒントにしたのは、教習所などで良く見かける「車が停止する距離」の解説図。図では、運転手が「危険を発見」してから「ブレーキを操作」するまでに空走距離があり、さらに「減速して停止」するまでの制動距離があって、やっと止まることが解説されている。
これをゲームのUIに置き換えると、「ユーザーの理解」があってから「ユーザーの操作」までに時間がかかり、さらに「システムの処理」の時間があって操作が完了する、という理解になる。この1つ1つに対して、時間を削れるだけ削ることにした。
まず取り掛かったのは「システムの処理」。つまりプログラム上での軽快さを求めた。注目したのは画面遷移などの「構築処理」の部分で、リソースの読み込みをはやくするために「リソースを圧縮してランタイムで解凍」、「ファイルを分割して遷移に必要なものだけダウンロード」という処理をかけた上で、リソースそのものを削るために、今まで採用していた角丸・シャドウ・質感用のテクスチャを思い切って全部カットしたという。
代わりに使ったのは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が完成。さらに操作の心地よさも作る！
以上の取り組みによってわかりにくさや遅さはできる限り取り除かれた。しかしここまでは「不快を減らす」話であり、Nintendo Switchの本体機能ではさらに「快を増やす」、つまり心地良くて楽しいUIも目指されている。
HOMEメニューにBGMがないNintendo Switchで行なわれたのは、操作音による心地良さの演出だ。ポイントとしたのは、「移動」、「決定」、「遷移」の3つ。「移動」は、カーソルを移動させたとき、どの種類のアイコンに移動したかで音の響きや音程を変えていること。HOMEメニューでカーソルを移動させると、その度に音が変わって、音に動きが出てくる。
また「決定」は、設定変更など連続で効果音が鳴るときの工夫のこと。たとえば決定、ON、OFF、戻るという操作の効果音は、それぞれの音のテンポを揃えている。こうすると決定操作にタン、タン、タン、タンとリズムが生まれて、決定操作そのものが心地良くなる。
3つ目の「遷移」は、たとえばマイページなどへの遷移の際に、遷移前の音と遷移後の音を対応させていること。アルバムなら遷移前に写真を思わせる効果音が鳴り、遷移後はパパパパパ……と写真を並べるような効果音が鳴り、「音のつながり」が演出されている。効果音がなくてもUIとしては問題ないが、効果音があった方が気の利いたサービスを受けたような気持ちになる。細かいところだが、確実に完成度が上がっていると思わせる試みだ。
ハードの本体機能はあるのが「あたりまえ」のコンテンツだが、その「あたりまえ」を改めて見つめ、徹底的に磨くことで特徴になると3名は語った。また工夫を考えながら、セクションを越えてチーム全員で開発に取り組めたことが、何より力になったとした。
それにしても、Nintendo Switchの本体機能UIが非常に考えられたものであることに驚かされた講演だった。実際の動きや音の情報は本記事ではお伝えしきれないが、この点はNintendo Switchに触れてみると1発で理解できると思う。Nintendo Switchをお持ちの方は、本講演の内容を踏まえた上で、改めてHOMEメニューを操作してみてはいかがだろうか。
