見出し画像

ケーススタディ:「スプラトゥーン2」にデザインを学ぶ

こんにちは。グラフィックデザイナーの安村シンです。

今回は、NintendoSwichの大人気ゲーム「スプラトゥーン2」からデザインを学んで行きます。

「スプラトゥーンのUIデザイン」については、すでに本家・任天堂でUIデザインをご担当された、橘磨理子さんによる解説記事がありますので(なんと贅沢!)、そちらを参照して頂くとして・・・

スプラ初心者である私は、このゲームを初めて触って衝撃を受けました。

UX(ユーザー・エクスペリエンス)体験と言うものでしょうか、前作を触ったことのない初心者なのに、続編から始めてもすんなりと世界に入っていける。

これは本当にすごいことです。

一呼吸おいて、なぜなのか考えてみたところ、どうやらゲーム全体の世界観がとてもよくデザインされていることや、それに加えてゲームへの導入、おもてなしの導線が整っていることに理由があるのではと感じました。

人気もさることながら、学ぶことも多いゲームです。
デザイン視点で、スプラトゥーン2を見て行きたいと思います。


1.「キャラ立ち」のデザイン

スプラトゥーン2を始めると、何よりまず最初に「ハイカラニュース」という番組が映し出されます。

これはゲーム内で起きているイベントを知らせてくれるのですが、この番組をみて驚いたのが、キャラクターの置き方です。とても絶妙だと感じました。
登場人物の役割分担が一瞬で分かるようになっていたからです。

詳しく解説していきます。

画像2

まず、キャスターの一人である左のキャラクター「ヒメ」。
彼女は、眉毛も上がり気味で目もギラッとしています。パッと見てツンツンしてる印象です。
名前の「ヒメ」というイメージが重なって「気まぐれでワガママ、自由で活発」というイメージが伝わってくるデザインになっています。

一方で右の「イイダ」は相方的な存在。こまったような眉毛をしていながら、目や口元は笑顔のように見えます。「ヒメにふりまわされながらも、なんだかんだ楽しんでいそう」な印象です。

このように、パーツだけを見ても二人の役割が明確になっています。

スクリーンショット 2020-05-03 15.36.33

モチーフを見ても、ヒメは「白いイカ」でイイダは「黒いタコ」と。完全に対の存在として描かれています。

対照的な二人だけど、仲良くやってるんだろう、ということが言わずとも伝わってきます。


2.「ニュース番組」のデザイン

「ハイカラニュース」の対照的なキャラクター配置には、どのような効果があるのかを追求してみます。

まず、もしこれがTVなどの普通のニュース番組であれば第一の目的が「情報を正しく伝えること」となるため、キャスターには無難で丸い感じ、好印象なキャラクターを配置するのが効果的になりそうです。

スクリーンショット 2020-05-03 15.40.58

(↑無難です)

ですが、これはゲーム内のニュース。
ゲームプレイヤーがワクワクする情報を届ける装置のはずです。

そのためには刺激が必要となります。そこではすこし波乱を感じさせる、トゲのあるキャラクターのほうがキャスターに向いているはずです。

スクリーンショット 2020-05-03 15.41.50

(↑キャスター、とんがってます)

しかしとんがったキャスター1人だと暴走しがちです。

視聴者は「なんてムチャクチャなことをやっているんだ」とツッコミを入れたい気持ちになるでしょう。その気持ちを代弁してくれる、受け止めてくれるキャラクターがもう一人いれば、このバランスを取ることができます。

スクリーンショット 2020-05-03 15.42.32

この「トゲと丸みのコンビ」というキャラクター配置こそ、「ハイカラニュース」の非常に優れたデザイン構造ではないかと感じました。

ゲーム冒頭に始まる「ハイカラニュース」だけでも、いきなり世界観に惹き込まれる理由。

その秘密は、ひょっとしたらこのキャラクター配置の妙、設計のデザインのおかげなのかもしれません。

画像3

(↑突然の無茶振りが始まった)


3.異文化の演出

画像1

スプラトゥーンの世界では、読めそうで読めない文字が集まっています。

この感覚はまるで、一切言語の通じない海外に放り込まれたようです。
ヨーロッパや英語圏ではなく、アルファベットの雰囲気から意味を推測することもできない文化圏です。

文字自体はなんとなくアルファベットを基にしているようですが、見れば見るほどちょっと違います。

イカたちの世界なのに、日本語や英語が書いてあったら、たしかにヘンですよね。

しかし文字が読めなかったら迷子になるのでは・・・と心配になるところですが、

画像7

地形がシンプルなので迷いづらいように感じます。各お店には、ネオンサインやレンガ壁、でかいモニターなど象徴的でアイコニックなものが配置されていることもまた、地図や言語の変わりをしているようです。

異文化を演出しながら、迷子にさせない新設な設計。

これもまた、初心者が世界にすんなり入っていける、置いてきぼりにされない秘密なのかもしれません。


4.イカという選択

スプラトゥーンは主人公たちが「イカ」なのですが、そもそもなぜイカなのか。そこにもデザイン的なロジックが隠れているのでは、と感じました。

そのロジックを、順を追って解明して行きます。

まずはじめに、完全に頭をリセットして、何も知らない状態で
ここに「陣地取りを、色付きの水鉄砲のようなものでやるゲーム」があるとします。

そこから、どんなキャラクターが主人公にふさわしいかを想像していきます。


■ 人間が主人公だったら
もし主人公が人間だった場合、どうなるでしょう。

おそらく、普通のサバイバルゲームのイメージがついてくるため、なんだか現実的で地味なイメージがついてきます。

そこに現実ではありえない身体能力、たとえば高いジャンプ力などを持たせればゲーム性がアップして行きそうですが、説得力のあるキャラクターをゼロから組み立てていくのは大変な道のりになりそうでうす。


■ 動物が主人公だったら
次に、主人公を動物にしてみたらどうでしょう。

まず、動物が歩き回ってる時点で、そこは非現実的な世界であることが伝わるため、人間以上の身体能力を持っていても違和感はないでしょう。

ここでためしに「ライオン」を主人公に設定して見ると・・・

スクリーンショット 2020-05-03 13.39.18

なぜでしょう。ややバイオレンスなイメージが湧いてきます。
陣地を取り合うよりも「倒して、そのまま食べそう」と思ってしまいます。

ライオンにはどうしても「肉食動物」のイメージがついてくるため、「なぜ捕食せずに陣地取りをしている」のか?など余分な説明が必要になって行きそうです。


■ 草食動物(ウサギ)だったら
草食動物ではどうでしょう。たとえばウサギの場合・・・

スクリーンショット 2020-05-03 13.59.35

(↑やっつけてしまいました。ゴメン)

彼らは泳げない生き物であり、水が苦手なイメージがあるためか、液体がついたらダメージを受けそうです。

戦えば戦うほど、なぜか悲惨な世界になっていく・・・そんな予感がします。

どうやら、陸上の生き物では説明が複雑になり、どうにもスッキリしない感じがします・・・。


■ 水中の生き物が主人公だったら
そこで登場するのが、液体に強い生き物。水中に暮らす生物たちです。

スクリーンショット 2020-05-03 14.10.37

彼らなら、この中の誰が主役になっても、水を浴びても元気にしてそうなことが容易に想像できます。

まるで夏場に子供たちが水鉄砲をかけあってるみたいな、楽しげな光景すら浮かんできます。

さらに言えば、この中でもイカやタコはスミを吐く生き物です。

スクリーンショット 2020-05-03 14.15.35

このイメージは、液体での陣地取りのテーマとも合致度が高く、見る人の納得感も強くなることが予想されます。

さて、この二択のなかから、どちらを選べばよいのでしょう。
究極の二択です。
ここもひとつ、論理的に考えたいものです。

なぜ、イカになったのか・・・・

それは、

もう、

「そっちのほうがイカすから」の一言・・・・

ではなくて・・・・・


ズバリ、イカのほうが素早いからではないでしょうか。

スクリーンショット 2020-05-03 14.20.36

(↑予想です)

仮にタコvsイカを想像すると、イカはすばやく移動しながらスミを吐くのではないかと思われます。

タコには、吸盤が吸い付く、からみつくイメージのほうが強いです。
もしも彼が素早く動いてきたら、それはもうまさに悪魔(Devil fish)です。

一方で、イカならスピード感のあるスポーツのような陣地取りができそうです。

このように論理的に考えていっても、「イカのキャラクターが色付きの液体で陣地取りをする」のは納得感の強いデザインだと感じます。

イカひとつを取っても、論理的な裏付けが隠れている(と思われる)スプラトゥーン。これが大人気ゲームの世界観を支えているのです。

画像14

(おそらく。)


5.デザインは「オヤジギャグ」!?

余談ですが、デザインにおいて「オヤジギャグ」はとても有効な場面が多々あります。

イカが主人公のスプラトゥーン2には、要所要所で「イカ」をネタにしたギャグが現れます。

画像15

(↑イカしたやつら🦑が集まる大通り)

スプラトゥーンは「音楽もアートもイケてる」かっこいいゲームなのですが
これらは全て、「イカしてる」という言葉に完全に合致します。

これがもし、居酒屋などで、イカ料理をつまみながら「この味はイカしてるねぇ〜」なんて言っていたら、それはもう「全くつながりがうすい」ので、完全にサムいギャグとして流されるでしょう。


しかし、これほど完全に組み立てられた論理の城において「イカしたヤツら」と言われてみると、なんだか上手いことを言われた気持ちになります。

おそらく、コンセプトに近い部分にイカがあって、そこから派生したものだからでしょう。

スクリーンショット 2020-05-03 14.50.28

イカスミのイメージから、UIデザインにもインクのようなあしらいが現れていることが自然です。
色使いも洒落ていて、対照的な緑とピンクが印象的です。

画像17

(↑髪型もイカしてる)

デザインも、世界観も、音楽も。すべてに「イカ」の要素が入っているかのようにすら感じます。

関連するキーワードを、別の言葉とつなげたり、別の要素に掛け合わせてみたり。

まるでオヤジギャグのような技術が、デザインにおいては効果的になることもあるのです。


おわりに

イカがでしたか?

私のようなスプラトゥーンシリーズの初心者でも、あっという間に世界観に引き込まれる、魅力的なデザイン。さすが大人気ゲームだと感動しました。

その裏に隠されたロジックは、まだまだたくさんありそうです。奥が深い!

なお、この「スプラトゥーン2」は、2020年5月6日まで体験版が無料ダウンロードできるようになっていますので、Nintendo Swichをお持ちの方はぜひ遊んでみてくださいね。

(最後までお読みいただき、ありがとうございました!)

この記事が参加している募集

サポート頂いた分は、ビール代として、ひとり打ち上げに有効活用させて頂きます。 がんばれます。ありがとうございます!