mazcomemo

i can't help it.

UI Crunch#13 娯楽のUI by任天堂 に行ってきた_SplatoonUIで狙ったグラフィックなデザインについて


みんな大好きSplatoonの時間だぞ!
前回の正木さんに続いて、Splatoon1,2のUIデザインを担当した橘磨理子さんの発表、「SplatoonUIの狙い」。
私自身もめっちゃやっていて大好きすぎるゲームなのでちょっと冷静に聞くように頑張った。多分なんか気持ちが溢れちゃってると思うけど。

SplatoonUIデザインの狙い

主に前作Splatoon1のUIを作った話を中心に話してくれた。まずゲームタイトルは今までの任天堂既存のタイトルの続編ではなく、新規のタイトルであったこと。新規タイトルで重要なことはやはり新鮮なことだったという。そのなかでもUIはゲームの世界観を邪魔せずにプレイヤー情報を見せるための影の立役者にならないといけないかったと思う。そこでたどり着いた結論が「グラフィックとして新鮮なデザインにするか」だったそう。

これは私の思い出なんだけど、イカが発売される前のことをよく覚えている、Twitterで回ってきたイカボーイのコーディネート紹介(ストリートスナップ風のあれ)のツイート見たとき、ビジュアルとグラフィックで完成されていてうわーなにこれー超気になる。って調べたのが出会いだった。のちに任天堂タイトルだと知ってもっとびっくりしたんだった。任天堂がこんな尖ったビジュアルつくるとは思っていなかったから(ジェットセットラジオっぽいのでSEGAかと思っていた)

新鮮さを作る

前回の発表でもあったトレードオフがここでも発生する、「新鮮さ」と「わかりやすさ」のバランス。新鮮は一歩間違えると分かりづらく独りよがりになってしまいプレイヤーに対して大変なことになってしまう、わかりやすすぎると単調で、今まで通りではあるが先ほどの新鮮はなくなってしまう。そこで、UIとしてわかりやすく、アートとして新鮮にすることを心がけたという。

まず、新鮮さを作るためには、自社の既存タイトルUIと比べながら違いを作っていったという。常にマリオUIと並べることで、隣に置いても別のものに見えるよう、比較して作っていったそうだ。

イカフォント

そのひとつでもやっぱり特徴的なのはイカフォントだと思う。当初は既存のフォントを使用するつもりだったがゲームの世界観に合わなかったそうだ。無ければ作る、ということでイカフォントをオリジナルで制作したそう。(「無いなら作る」誰しもが思いつくけど、なかなか作るぞってなれないのをやっていてめっちゃすごいと思う…)フォントを考える際にラフで作ったものをすばやく反映させて方向性などを探っていったという、早く出すことで軌道修正やブラッシュアップまでのスピード感を上げるためである。スポーツ感のあるボールドに、イカっぽさである液体や有機物のラインを表現したのが、イカフォント。

このフォントも当初からかわいくて「これどこのフォントだ」って書体ヲタがベースの書体探し回っていたよね…(漢字以外はオリジナルだってことぐらいしかわからなかった)

文字はUIでは大切な要素なので、これがあるとないとではかなり違う。既存のマリオフォントと置いても違いが見えてくる。

カタチのデザイン

文字が出来たなら次はそれを囲っていくカタチについてのデザイン。先ほどのフォントでも出たように「イカ」「スポーツ」という言葉からイメージをさらに連想して、そこからさらにカタチを作っていく。シンプルだった造形にイメージで連想した要素を足していき、色がなくてもイメージの伝わるカタチにしていったとのことだった。

さらに、新鮮さを求めてアニメーションをつくっていく、カーソルのにょきにょきするイカや、決定したら垂れるインクのような飛沫。音が連想できるくらいまで作り込めたらよいですよね、と会場でも話されていた。もちろんただ個性を追い求めただけでなく、これらのアニメーションはわかりやすさのために物理的に自然になっているのだと思う。

また、色についてもここで話されていた。全体的にポップで明るい色使いだと思っていたけど、それは影の色に黒を使わないということだった。彩度を落とさず色相をずらした色選びをしているそう。これすっっっごい勉強になった、メインカラーの影色を決めるとき、メインの1〜2段階彩度を下げた暗い色を選びがちなんだけど、そうすると単純に画面がその分だけ暗く沈みがちになるので、色数を増やすことで鮮やかな画面作りをしているのだと思った。これ関係あるかわからんけどグラフィティ(壁のスプレーの落書き)の時、缶スプレーって何本も持ってないから下地の色を生かしつつ影の色重ねていくんだけどそういうストリートっぽい文脈なのかと思った。

ギアパワーのアイコンの話もされていた。これもフォントと同じくラフでまずすばやく作って反映させて世界観に合わせてブラッシュアップしたそう。言葉で説明すると長くなるものをアイコンに込めているそう。ゲーム内で使われている背景パターンについても紹介されてた。三角はイカで、丸いものはタコとイメージをここでも作って背景の模様に落とし込む。この配色も先ほどの色相をずらした配色ルールでつくっている。ここでもデザインの作り込みについてを話していて、作っている途中でも見せる。まずはカタチにしてブラッシュアップしていく、という作り方を紹介していた。



わかりやすくする

フォント、カタチと新鮮さを求めグラフィック・アートとして世界観を作り上げたが、その個性の強さを生かしつつUIとしてどうまとめていくかを話していた。
ここまで個性的で尖ったグラフィックを多用したら肝心のゲーム画面に置いたときにゴチャゴチャするのではないかと心配になったそう。
そのために行った調整は、明度と彩度だった。情報量の多いショップ画面を例に解説される。画面を白黒にして色ではなく黒いか白いか(暗いか明るいか)でバランスを見ていく。また薄目で見て大まかにわかりやすさを測っていく。先ほどの配色ルールとは逆である。目立たせたいものの彩度はそのままに、その下になる背景的なオブジェクト(ウィンドウ)の彩度は下げる。黒を入れることで彩度の高いものが浮き上がってくる。



UIと3Dのバランス

こうして調整されたUIはゲーム中の様々なところで使用される。今まではあまり動きの無いカスタマイズや全体の世界観の画面で見ていたが、もちろんゲームではバトルの最中でもUIが登場する。肝心のインクや敵の位置などが見えなくなってはならないので、他の開発メンバーと相談しつつ大事な要素を隠さないように連携したそうだ。インクなどの色が重要なので、先ほどの彩度の強いアイコン類などが埋もれないよう、黒のオブジェクトの上に乗せていったそう。

その結果

当初の目標であった新規タイトルとしての一定の認知に貢献したという、確かにこのグラフィックがなければこんなに盛り上がらなかっただろうし、実際にTシャツがそのままのデザインでグッズ化されたりもなかったと思う。UIの要素がそのままバッチになったりとかしている、キャラではなく、UIだけでもSplatoonのものだとわかるくらい世界観をちゃんとユーザーに共感してもらえたのだと思う。

1と2での違いを少し

ここまで1を中心に話していたけど、現行の2についても少し話していた。
まず、あの特徴的なイカフォントに関して、前回に増して画面の情報量が増えたためボールドのあるフォントでは限界がある、2ではさらに細く角ばったオリジナルイカフォントを作ったそうだ。

また、全体的に幾何科学的な要素を増やしてかっこよくなるようにしたそうだ。出てくるアイドルも、シオカラーズからテンタクルズになってイメージが変わったのでそれらにも合わせるようになっているそうだった。ポップなアイドルからクールなユニットになったと思う。キャラデザの話もききて〜よ〜聞かせてくれ〜

大好きなゲームだし、他に比べてやはりグラフィックな要素が多くて大変勉強になった。UIももちろんだけど、このゲームは全部が新しい挑戦をしていると思うので、そういった総合力もあって新規タイトルとして成功したし、次世代のロンチタイトルになりうるくらいのクオリティになったのだなと納得してしまった。「無ければ作る」本当に当たり前で、新しいものを作るのであればそれぐらいの気概と勢いが必要なのだと思った発表でした。他の方の発表はまた次に書きます。

前回はこちら
mazco.hatenablog.jp