任天堂『スプラトゥーン』UIデザインの舞台裏｜娯楽のUI 公式レポート #2

「わかりやすさ」と「新鮮さ」の両立を目指して

※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。

「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。

そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。

スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。

いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新鮮さ」の両立を意識したという。

「UIは“わかりやすさ”が何よりも大事で、目立ってはいけないものだと思っていたのですが、アートディレクターからは“新鮮なUIデザインにしてほしい”と言われて。スプラトゥーンではUIとしてわかりやすく、アートとして新鮮にするというバランスを狙うことにしました」

UIとしてわかりやすく、アートとして新鮮にする——。

この目標に向けて、どうやってUIをデザインしていったのか。橘さんが語る、スプラトゥーンのUIデザインプロセスの舞台裏とは？

[プロフィール]　橘 磨理子 (TACHIBANA mariko) UI/UX デザイナー多摩美術大学でグラフィックデザインを学んだ後、2012年に任天堂入社。 UIデザイナーとして、『Splatoon 2（スプラトゥーン2）』『Splatoon（スプラトゥーン）』『ピクミン３』のUIデザインに関わる。 華やかなグラフィックと綿密に計算された機能の共存を得意とする。
《担当プロダクト》Splatoon 2（Nintendo Switch, 2017）／Splatoon（Wii U, 2015）／ピクミン３（Wii U, 2013）

「新鮮さ」の実現に向けて行なった、3つのこと

まず橘さんから語られたのは、「新鮮さ」のデザインについて。

スプラトゥーンのUIデザインを考えるにあたって、最初に意識した事はUIデザインの比較だったそうだ。

例えば、「スーパーマリオ」シリーズなど、自社の有名タイトルのUIデザインを並べながらアイディアを練り、スプラトゥーンらしさを見つけていった。

「完成されているUIデザインと比較することで、クオリティの指標を見つけられますし、新規性も見つけやすくなる。常に比較しながら作業することで、スプラトゥーンらしさが発見しやすかったと思います」

と、UIデザインの「らしさ」という観点では、順調に滑り出したかに思えたスプラトゥーン。しかし、思わぬ壁にぶつかった。

ゲーム内で使用するフォントの選定を行なっていたのだが、世界観にマッチするフォントがなかったという。そこで「フォントがなければ、つくってしまえ」とゼロからつくり始めた。

① ゲームの世界観に合うフォントを開発

そして橘さんが紹介してくれたのが、フォント考案で描いたという初期のスケッチだ。

「これは初期のスケッチです。最初の勢いやイメージを大事にし、なるべく早く書き出すことを意識しました。ぼんやりしたイメージでも方向性が合っているかどうかをアートディレクターや他のデザイナーと早めに共有できるかどうか。これは少ない時間、人数でゲームを開発する際に大事なことかなと思います」

ラフスケッチをもとに、フォントを微調整。文字の太さはスポーツブランドの力強さをイメージし、どっしりとした、骨太なフォントに。そこに液体のようなラインを追加し、フォントをデザインしていった。

「単純に新鮮さだけを意識しているわけではなく、最低限の可読性も意識しました。読みづらいと指摘があった文字は、文字幅やカーニングなど細かい部分も修正を重ねました」

こうして、スプラトゥーンで使用するフォントが完成。スーパーマリオで使われているフォントと並べてみると一目瞭然だが、フォントだけでスプラトゥーンらしさが伝わってくる。

② 言葉のイメージを形にする

次はボタンやパーツなど「形」のデザインについて解説された。

ゲーム内に出てくるエレメントだけで、スプラトゥーンらしさが感じられるようになっている。

考案のプロセスとしてはまず、「イカ」と「スポーツ」から連想されるイメージを言葉にすることから始めた。

そして、その言葉が持つイメージをパーツなどに反映。

その結果、色がなくてもスプラトゥーンらしさを感じられるくらい特徴的なデザインに仕上がった。

左はスーパマリオシリーズの典型的なUIデザインをイメージしたもの。右が スプラトゥーン の「らしさ」を、UIデザインとして反映させたサンプルイメージ

また、ボタンとカーソルのアニメーションに関しても、スプラトゥーンらしさを意識しているという。例えば、ボタンを押して決定するとアニメーションが発生、カーソルは常にイカが泳いでいる。アニメーションは、ただ動いているだけではなく、音の質感が感じられるレベルまで磨き込まれている。実際に見てみてほしい。音が聞こえてきそうだ。

「わかりやすさを優先させると、過度な装飾やアニメーションは敬遠されがちですが、これは可能な限り新鮮さを詰め込めたかな、と思います」

③ 色相がずれた色を使う

スプラトゥーンといえば、カラフルでポップな色使い。橘さん曰く、配色もスプラトゥーンらしさを意識したそうだ。

「スーパーマリオのアイコンは自然なライティングで撮影されているので、影の色には明度が暗くなった色が使われていると思います。ただ、スプラトゥーンはなるべく鮮やかな印象を残したかったので、影の色には明度が暗くなった色ではなく、色相がずれた色を使うようにしました。例えば、黄色の影色（カゲイロ）は、黄色が暗くなった色ではなくて、オレンジを使う。ピンクの場合は、紫を使うというように配色をしていました」

ここまで紹介してくれたのが「新鮮さ」の表現について。

では、両立を図ったという「わかりやすさ」は、どう実現していったのか。

「わかりやすさ」の実現に行った、2つのこと

①  明度と彩度の調整

次に橘さんから、わかりやすくするために行った、2つの工夫が語られた。まず１つめが、UIの明度と彩度の調整。

2つの画像を見比べてみよう。

「見やすいゲーム画面になっているかどうかは画面を白黒にすると確認できます」

「黒色は沈みやすく、白色は目立ちやすい。テキストやアイコンが一番白く目立ち、それ以外のウィンドウや背景がグレーのトーンに落ち着いていると、見やすい画面になっています」

つまりスプラトゥーンは目立たせたいアイコンの彩度を高くしており、それ以外のウィンドウなどの下地は彩度を低く設定。それにより、大事な情報だけを強調させているのだ。

② UIと3Dのバランス

「わかりやすさ」のために、2つめに行なった工夫が、UIと3Dのバランス。

スプラトゥーンはシーンによって、情報の優先度が変わってくる。そのため、3Dデザイナーとコミュニケーションを図りながら、わかりやすさを向上させていった。

「バトル画面ではキャラクターや背景が最優先に見える必要があります。スプラトゥーンは地面をインクで塗るゲーム。UIは画面をなるべく隠さないよう、ゲーム中では画面を上に配置し、2色のインクカラーが目立つように下地の色は黒色に統一しています」

「アイテム購入画面などのUIがメインとなる場面では、3Dデザイナーに壁のポスターをはがしてもらったり、画面内の情報量を調整しています」

ヴィジュアルとしての新鮮さ、UIとしてのわかりやすさ、この両立はスプラトゥーン大ヒットのファクターになったといってもいいだろう。

フォントは「イカフォント」として認知され、UIのアイコンが単体でグッズ販売されるなど副次的な効果も生まれた。これは、”UIデザイン” がスプラトゥーンの世界観確立に貢献したことの証ではないだろうか。

そして、橘さんからおまけトークとして、「スプラトゥーン2」の開発秘話が披露された。実はスプラトゥーン2でも、新たにフォントを開発している。

「スプラトゥーン2では文字情報が増えているので、前作のボールドのフォントでは表示しきれない、という問題がありました。また新しいキャラクターや新しいモードが、前作の可愛らしさに比べて、カッコいいイメージが強かったので、それに合わせてフォントも細身のあるデザインに変更しています。有機的なラインを大事にしていたものから、よりグラフィックデザイン的なラインを目指してつくりました」

最後に紹介したいのが、橘さんのUIに対する考え方。彼女の言葉で締めくくりたい。

「ユーザーにストレスを与えない“配慮”に徹し、UIは存在が薄くなりがちです。でも、工夫をすればUIデザインでユーザーを楽しませることができます」

>>>次回「Nintendo みまもり Switchは誰のもの」に続く
※全3回にわたって『娯楽のUI - by Nintendo -』公式レポートをお届けします。

第1回「任天堂が新人研修で伝えている、あそび心のデザイン｜娯楽のUI 公式レポート #1」もご覧ください！

文 ＝ 新國翔大
編集 ＝ CAREER HACK

UI/UX デザイナー UI Crunch 任天堂

0 0 894 88