ころもちゃんなんか僕のゲームは「地味」に見えてしまうよ・・・。一体何がいけないんだろう？
本記事の内容
・ゲーム中に目立たせたいものを意識する
・目立たせたいものを目立たせるお手軽テクニック - 色のコントラスト
本記事は前回の記事の続きですが、前回の記事を読んでなくてもなんとなく分かります。
あなたのゲーム、一目で何やっているか分かりますか？
伝わらない情報に価値はない！
無数にゲームが溢れる中、SNSなどで自作ゲームの動画を流しても、思っていたような、いいねやリポストが付かずガッカリしたことがある経験のある人はきっと多いと思います。
もちろんバズる、バズらないの要因を一概に決めつけることは出来ませんし、私も作ったゲームがバズったことはありません。( ´·௰·`)
ただ、多くのゲーム制作者のツイートを見た上で思うこととしては、少なくとも以下の2つの要素が揃っているゲームが伸びるための最低条件であることだと思います。
①一目で何をするゲームなのかが伝わるゲーム画面
②ゲーム内容にインパクトがある
例えば、一番分かりやすいのは、このゲームですよね。
最近だとこんなゲームも、ぷちバズっていましたね。
これらのツイートは、まだリリース前の段階にも関わらず拡散されていました。つまり多くの人がプレイもしていないのに、「面白そう！」と思った訳です。
「面白そう」と多くの人が感じるゲームに共通しているのが、先程書いた「①わかりやすさ」と「②ゲーム内容のインパクト」だと私は思います。
この情報が氾濫する社会において、ちゃんと読まないと分からない、よく見ないと分からないもの、というのは大衆に相手にはあまり歓迎されません。
自作のゲーム画面をSNSで紹介するのなら、一目でこれがどんなゲームで、どこを見れば良いのか、を分かりやすく伝えられるゲーム画面でないと、スワイプされていってしまいます。
この記事では、よりわかりやすくゲーム制作者が意図している情報をユーザに伝えるためには、具体的に何をどうしたらよいのか、を解説していきます。
視線誘導の必要性
ユーザに何をするべきか、何が起きているかを伝えよう
まず、ゲームというのは、一画面に実に多くの情報が表示されています。
自キャラ、敵キャラ、ステージ情報などのUI、アイテム欄など・・・。
これらの情報を、プレイヤーが瞬時に見分けて最適な判断を要求するというのは、結構難しいことです。
私はテレビのスポーツ中継で、画面右上の視聴者コメントに集中していたら、実際のホームランを打つ瞬間をを見落としたみたいなことが何度もあります。
ただ漫然と情報を並列に並べるのではなく、ゲーム側から適切なタイミングで、適切な情報を目立たせてあげないと、プレイする人間はどこを見たらよいか分からなくなります。
もう少し具体例で見ていきます。以下の2つの画像を見比べてみてください。
違いとしては、右の写真には被写体以外にぼかしをかけました。これにより、画像を見た時に一瞬で被写体に視点が移ったのではないでしょうか？
また、右の写真の方が被写体が引き立っている印象を受けませんかか？
同じ画像でも、ちょっとした視線誘導の仕掛けを入れると、伝えたい内容や印象を変えることが出来ます。
ゲーム側からユーザーに見てほしい情報へ視線を誘導することで、プレイをする人・プレイを見ている人に、一目で何が起きているかが伝わるようになり、プレイヤーも操作に迷わなくて済むます。
さらに、情報のコントラストのある画の方が、一般的には「引き立つ」、「面白そう」、「読みやすい/分かりやすい」情報として認識されやすいです。人は何かを見る時に、無意識に情報の取捨選択をしているので、コントラストがあることで、認知が容易になり、気を引きやすいのです。
以下では、ゲームにおいては、具体的にどんなモノに対して視線誘導をさせるべきか、を解説していきます。
ゲームの中で視線誘導を行いたい対象
ゲーム画面内のプレイヤーキャラクター
当然と言えば当然ですが、ゲーム中のプレイヤーキャラクターは目立たせないといけません。
ですが、特に2Dゲームの場合、画面に占めるキャラクターのサイズが小さい関係で、キャラクターと背景の見分けが難しくなっているものがよく見られます。
誰がプレイヤーなのかを分かりやすくするために、一番手っ取り早い方法はキャラクターと背景に、色や明度に大きなコントラストを付けて目立たせることです。
既存のゲームで良いな、と思ったのは
メトロイドドレッドや、
任天堂 eShopから引用
https://store-jp.nintendo.com/list/software/70010000042923.html
Hollow Knight です。
任天堂 eShopから引用
https://store-jp.nintendo.com/list/software/70010000003209.html
これらのゲームに共通しているのは、どちらも背景が暗めなことです。
暗い背景に、暗い色のキャラクターを配置すると、どこに自キャラがいるかがわかりません。スマブラでゲームウォッチを使ったことがある人は分かると思います。
任天堂も意識してやっていると思うのですが、メトロイド ドレッドの場合、サムスが明るい目立つ配色をしています。そのため、遠くからでもサムスを視認出来るようになっていると思います。
任天堂 eShopから引用
https://www.nintendo.com/jp/switch/ayl8a/introduction/index.html
Hollow Knightの方も、背景が暗い一方、主人公のベースカラーは白ですよね。
背景とプレイヤーキャラクターの配色に大きなコントラストがあるおかげで、遠くから・小さい画面からでも、自キャラを認識することが出来ています。
とりあえず、自キャラは目立たせろ、ということです。
UI上の変化/アピールしたいもの
UIにおいても、視線誘導は非常に重要です。視線誘導という観点だとUIが一番頻度として高いかもしれません。
UIはゲーム中常に変化するものですが、特定のタイミングで特定のUIに注目してほしいタイミングがあります。
たとえば、必殺技ゲージが溜まったタイミングだったり、残り時間がわずかな時、HPが0に近づいている状態だったり。
視線誘導がなければ、操作している人間が、ゲージが溜まったことを見落としたり、体力が気づいたら無くなっていた...ということになりかねません。
ゲーム側から、ユーザに見てほしい情報をちゃんと見てほしい、ということを強調しないと見落とされてしまいます。
知らず知らずのうちにHPが無くなって、いつの間にか死んでしまうゲームより、
「死にそう死にそう...やばい!!」 ▶ 「あ～死んじゃった」、というゲームの方が、絶対面白くなりそうですよね。
適切なタイミングで適切な情報を与え、制作者側が意図している面白さを、ちゃんとプレイする人間に伝えられるように、見てほしい情報は目立たせる必要があるのです。
他にも、ガチャ結果画面でSRキャラだけ光っていたり、目立つ配色なのも、一種の視線誘導と言えます。
ゲームにおいてはあまり使えないRキャラよりも、SSRキャラを見てほしいですからね！
ファミ通Appから引用
https://app.famitsu.com/20220304_1921482/
プレイヤーにとって欲しい行動の誘導
さらに、ゲーム制作者側がプレイヤーに取ってもらいたい行動がある場合にも、視線誘導は必要です。
一番分かりやすい例が、チュートリアルです。チュートリアルでは、押してほしいボタンを、押してもらうよう誘導するために、押してほしいボタン以外を暗くするなどの仕掛けを入れます。
ゲームUIブログから引用
https://gameui.matme.info/blog/archives/77431
チュートリアル以外でも、ゲーム側からプレイヤーに行動を促したい、という場面は多々あります。
スーパーマリオを例に見てみましょう。
スーパーマリオでは、コインが常に回転するアニメーションをしています。
もし仮に、マリオを全く知らない人間がプレイすることを想像してみてください。
仮に、誰もルールを説明してくれなければ、コインというものは、触れてよいものかどうか一目では分かりません。
ですが、ゲーム制作者側としては、ユーザにコインを取ってほしい、ユーザにコインを取りたいと思わせたいのです。
そのためにどうしたらよいか？
その答えが、コインをアニメーションさせる、ということだと私は考えています。
次の章でも書いていますが、人間含め動物というのは動くものに目を向け、そこに向かいたくなる性質があります。ネコちゃんが猫じゃらしで遊ぶように。
人間に自然とコインというオブジェクトに向かわせる動機付けの一つが、アニメーションなのだと私は考えています。
マリオカートでも、コインやアイテムボックスをよく見ると、常にアニメーションしています。これらはプレイヤーに有利になるアイテムです。
一方、レース中にぶつかってはいけない、バナナや、ボム兵、地面に落ちている甲羅などは、基本的にほとんどアニメーションしていませんよね？
つまり、同じレース内に落ちているアイテムでも、アニメーションしているアイテムは、近づいて取得するべき有利なモノ、アニメーションしていないものは、近づいていはいけない不利なモノ、という視線誘導のルールを決めているのだと思います。推察ですが。
ゲーム制作者側からプレイするユーザに行動を促すための仕掛けも、1つの視線誘導テクニックと言えます。
こういったテクニックにより、我々は初めてプレイするゲームでも、一目で何をすべきで、どこに向かうべきか、といったことに迷わず、ゲームを楽しむことが出来ているのです。
以上、視線誘導の必要性と、どんな時に視線誘導が必要になるか、という話でした！
では、次に具体的にどんな実装をすれば、集めたいところに視線を集められるのか、その実装方法についてです。
視線誘導テクニック
ここからは、具体的にどういう実装をしたら、目立たせたいモノに注目を当てられるか、という内容についてです。
色のコントラスト
これも当たり前ではありますが、色が明るい方に視線は集まります。
コントラスト１：目立たせたいオブジェクトの周囲を明るくする
明度のコントラストを、ライティングを使って解決する手段です。画面全体が暗いとより効果的です。
ライトをキャラクターの子オブジェクトに置けば、キャラクターといっしょにライトも移動してくれます。
2Dライティングの実装方法については、前回の記事を見てね！
コントラスト２：持ち物などの一部を発光させる
ちょっとオシャレな解決方法ですが、シェーダーの知識が少しだけ必要になります。難易度はちょっと高め。
以下の関連記事で紹介したシェーダーだけでも、キャラクター全体を発光させることは可能です。（2Dベースでの紹介）
ですが、キャラクター全部を発光させるのではなく、持ち物だけを光らせる場合は、少しだけシェーダーをカスタムします。
たとえば、今回以下のキャラクターの胸にあるモニターっぽいところだけを発光させてみようと思います。
発光する原理などは、上記の関連記事で紹介しているので、ここでは素材の用意の仕方と、Shader Graphの組み方だけご紹介。
まず、Photoshopなどの画像編集ソフトで発光したい範囲を白、それ以外を真っ黒に塗りつぶした画像を用意します。
今回は以下のようなマスク用の画像を用意しました。モニターに該当する箇所だけを白くしています。
この画像を取り込んだ上で、以下のシェーダーを組み、マテリアルを作成してスプライトにアタッチします。
ColorにはHDRカラーを設定してください。
Shader Graphを使う詳しい手順は、「はじめてのShader Graph解説」シリーズで紹介しているので、分からない人はそちらを読んでください。
※色が白くなりすぎてしまう場合は、Addではなくmultiplyにしてもよいです。
左が元の画像、右が今回シェーダーを当てたキャラクターです。
明らかに元の画像に比べて、右の方がキャラクターの存在感が増していませんか？
さらに、「このキャラクターにとって、モニターがキーアイテムになるのかな？」、という想像の余白を与え、キャラクター性がより引き立つのではないでしょうか。
他にも、スカーフや、武器、もしくはキャラクターのアウトラインを発光させたりすることで、よりキャラクターに視線を集める、といったことも出来ます。
結構手間ですが、これもオブジェクトを強調して、視線を集める実装方法の1つです。
コントラスト３：コントラストの付く配色を想定して素材を作成する
これはUnityなどのゲームエンジン側ではなく、そもそも素材を作る際に、ちゃんとコントラストがつくように作っておこう、という話です。
配色の選び方については、それだけで記事に出来てしまうボリュームですし、私よりも詳しい人間・サイトがこの世に無限にあるので、詳しい話は割愛します。
ここでは配色を選ぶ時にオススメのツールだけ紹介しておきます。個人的オススメのツールはAdobe Colorです。
私がよく使う機能は、類似色と補色を取ってくるツールです。
類似色を使うと、ゲームのテーマカラーを決めて、それに合った色をまとめて取得することが出来ます。
これをUnityのカラーパレットに登録しておけば、一貫した配色を選択することができます。
また、補色を取る機能を使うと、画として引き立つ配色を考えることが出来ます。
たとえば、ベースとなる背景が、夜のステージで青いとします。
そうしたら、ステージ内のキーとなるオブジェクト（例えば次のステージに繋がる鍵などのオブジェクト）の配色は、青色の補色となる黄色い配色にしよう、みたいなことが出来たりします。
サイズのコントラスト
雑な例ですが、小学生の中に大谷翔平が混ざっていたら、絶対に大谷翔平を最初に見ますよね？
サイズに違いがある場合、大きいものには自然と視線が集まります。
これをゲームに置き換えると、より押してほしいボタン、もしくはプレイヤーにとって有利になるボタンは大きくする、という方法があります。
たとえば、ソシャゲなどのホーム画面で、①ゲームの進行に関わるボタンと、②キャラクターの編成を決めるボタンでは、①ゲームの進行に関わるボタン の方が情報としての優先度が高いですよね。
情報としての優先度と、ボタンのサイズを連動させることで、より押してほしいボタンというものに目を向けさせ、ユーザの行動を誘導することが出来ます。
さらに細かい話でいえば、95%や、100HITといった、数値と単位に分解できるテキスト情報がある時、数値の方が単位よりも重要な情報ですよね？
なので、数値を単位よりも大きく表示することで、より情報にコントラストを付ける、といった工夫が多くのゲームでされています。
情報の優先度を付けてUIを実装するだけでも、遊びやすさや、画としての見栄えが変わってくると思います。
アニメーション
前の章で書いたとおり、人間に限らず、ほとんどの動物は動くものに注目するように出来ています。
ゲームの中で目立たせいテキスト、押させたいボタン、見せたいオブジェクトなどに対しては、ぜひアニメーションを付けていきましょう。
多くのサイトで紹介されていると思いますが、アニメーションについては、DoTweenという無料アセットを使うのがオススメです。スクリプトを使って、簡単にオブジェクトをアニメーションさせることができます。
コメント