ゲームを面白くするテクニック

ゲームを面白くする手法の紹介。備忘録。

UIのモチーフテクニック

UIモチーフの話

ロゴ/ボタン/ヘッダー/フッター/アニメーション/画面遷移/ダイアログ……などなどUIの仕事は多量にありますが、統一感(そのゲームにしかない特色)を出すにはどうすればいいでしょう?

それにはモチーフが必要不可欠です、というお話です。

 

モチーフの必要性

単純にデザインを合わせるだけなら「フラットデザイン」や「マテリアルデザイン」など名前のついた手法で作ればいいかもしれません。

しかし、ゲームの場合は

"ゲームイメージとUIをどこまでシンクロさせることができるか"

がとても重要になってくるため「モチーフ」という概念が必須になってきます。

パッケージ感、ユーザーの没入感に深く関わりを持つ重要な立ち位置です。

 

モチーフ実例

スプラトゥーン

下記の『スプラトゥーン』の記事はとても参考になります。

gamewalker.link

「イカ」「スポーツ」をキーワードに、連想する言葉からUIの形などを決めた、とありますね。

これがメインモチーフです。

個人的にはキーワードは最大2つが限度だと思っていて、3つあるとゴチャついてしまいがちです。

ここがブレなければ全体的に統一感のあるものに仕上がります。

 

アスファルト9:Legends

こちらは先日リリースされたばかりのスマートフォン、PC向けのレースゲームです。

www.youtube.com

動画を観ると思うとわかるのですが、恐らくは「レース」「車」などをキーワードに「速さ」「スピード感」を意識したUI制作を行ったのではないでしょうか。

 

多くのUIが左右から移動し、再び左右にはけるアニメーションが入っていたり、

UIの端のポジションから左右に開くようなアニメーションが組み込まれています。

同時に複数の四角が動く様はまさに「レース」のようです。

 

「速さ」をイメージしたUIの場合、体の傾きをイメージして通常長方形のボタンの形を平行四辺形にすることもあります。

『アルファルト9』では長方形のUIが多く見られますが、それはモチーフが「車」だからかもしれないですね。

 

このように、どういったモチーフでUIを作っているのか考えることは普通にゲームを遊ぶよりもより良い勉強になると思います。

 

実制作で発生する問題

実例も踏まえて、メインモチーフがどのようなものかわかってもらえたと思います。

しかし、実際のゲーム制作では壁にもぶつかります。

「表現方法が足りない」問題です。

メインモチーフにこだわりすぎるあまり、引き出し不足でほぼ全てのUIが同じようなもの、ワンパターンになってしまうという問題ですね。

そこで登場するのがサブモチーフです。

 

メインモチーフのルールに合わせることで統一感は失わないように、アクセントの役割を果たします。

ゲームはエンタメですので、UIにも「ユーザーを飽きさせない工夫」が必要です。

なおかつ、ゲームの雰囲気やイメージと強く紐づいたものである必要があります。

 

難しく感じるかもしれませんが、実はサブモチーフはメインモチーフの表現よりも簡単です。

サブモチーフには実体のあるものを選ぶからです。

メインモチーフはなんとなく概念的でしたが、実物になるとデザインもやりやすくなります。

 

具体例を紹介します。

 

サブモチーフ実例

スプラトゥーン2

『スプラトゥーン2』から実例を紹介します。

先述の記事では、このサブモチーフの話はありませんでした。

『スプラトゥーン2』のサブモチーフは「商品パッケージ」です。

 

f:id:XoMMD:20200531174119p:plain

▲『スプラトゥーン2』ロビー画面

赤枠で囲った部分がパックのようになっており、上部はお店にあるフックにかけられるような形をしています。 

 

f:id:XoMMD:20200531174504p:plain

▲『スプラトゥーン2』リザルト画面

「おカネ」「ランク」の上部がフックにかけれる形になっています。

また、ギアもそれぞれフックにかけれる形になっており、ギア自体は先ほども出てきたパックの形状をしていますね。

 

また、実際にゲームでみるとわかりますが、このフックにかける部分を中心に揺れるアニメーションが随所に入っています。

 

ニーアオートマタ

ニーアオートマタでは、UIの隠しモチーフとして「楽譜」が採用されています。

美しくも儚いニーアの世界観にアクセントとして一役買っています。

www.platinumgames.co.jp

 

ペルソナ5

UIの話になると必ずと言っていいほど名前が上がるペルソナシリーズ。

作中よく出てくる「スマホ」はもちろん、システマチックな部分(セーブデータ)ではスマホのローテク版とも言える「ノート(手帳)」チーフとして取り入れ、世界観を壊さない工夫をしています。

f:id:XoMMD:20180729200443p:plain

f:id:XoMMD:20180729200455p:plain

 

まとめ

以上、UIのモチーフテクニックでした。

参考になったでしょうか。

スマートフォンゲームではUIにこだわりのあるゲームというのは少ないです。

・優秀なUIデザイナーが業界全体で不足している
・UIにそこまでコストをかけられない
・責任者の理解がない

などが主な理由だと思います。

スマートフォンゲームでもUIに工夫を感じさせるゲームが増えるといいですね。

 

【2020年5月 追記】

2018年頃はそんな感じでしたが、2年経った現在ではスマートフォン向けゲーム1本あたりの予算も上がっています。

それに伴いUIにも力を入れているタイトルも増えてきました。
機会があれば今後ブログ内で紹介できればと思います、これからのUIの更なる地位向上にも期待です。