ゲームのUIで必要な素材、『ボタン』。
今回はそのボタンを制作する上で意識すべきことをまとめます。
ここを押さえているのとそうでないのでは、ユーザビリティや開発時の効率化で大きく差が出てしまいます。
こんな方にオススメの記事
- ゲームUIデザインの初心者の方
- ゲームUIデザインの経験はあるけど、おさらいしたい方
押せる感を表現する
ゲームUIはいくつかの素材を組み合わせて画面を構成します。
その際にユーザーが最も触れる頻度が高いのがボタンです。
ですのでしっかりと「押せる」と思わせる表現をしましょう。
ボタンに立体感をつけて押せる感を表現する
一つ目は立体感を表現する方法です。
例えばボタン自体にグラデーションをかけることで、ボタン自体に陰影をつけることができます。
それにより、立体的に見え、ボタンとして認識することができます。
ボタンに遠近感を表現する
例えばただの角が丸い四角にシャドウがついているとどうでしょうか。
それだけでも押せる感じがしませんか？
基本的にユーザーはUIのリテラシーも上がってきているので浮き出て見えるだけで押せるものと認識します。
画像容量を削減する
次に画像の容量を意識すること。
これもいくつかテクニックがあり、知らないと実装にかなりの負荷がかかります。
ボタン素材とテキストは分ける
まずボタンの画像素材と、ボタンの上に表記されるテキストは分けましょう。
これをしないと、各テキストごとにボタンを用意する必要が出てきます。
基本的にはUnityでもなんでも、指定のフォントを実装しボタンの上に表示することができます。
なのでボタンと一体の素材にしなくても良いでしょう。
9スライスが可能な素材にする
9スライスとは、４つの角を固定してその間を可変にする手法です。
ボタン素材のサイズが半分以下の大きさになったりもするのでしっかりおさえましょう。
ボタンをデザインする際に、可変する部分への装飾に注意が必要ですが、慣れれば楽に作れます。
開発環境で色を変えられるようにする
ゲームUIのボタンは複数のバリエーションを持たせることが多いです、というか必須ですね。
その際に、グレースケールで素材を書き出して、Unityのコンポーネントなどでカラーバリエーションを表現することができたりします。
ただし意図した色表現にならない場合もあるので強烈にこだわりがある場合は採用しなくても良いでしょう。
普通にそれぞれの素材を作って使用した方が見栄えはよくなります。
汎用的に使える素材にする
ゲームUIでボタンを使用する際には、いくつかサイズやカラーバリエーションを用意する必要があります。
例えば押させることを強調したい場合はアクセントカラーを使用し、
そうでない場合は少し押さえた色味にするなど。
サイズに関しても、限られたスペースに効率よくボタンを配置するためには不可欠です。
9スライスを利用し、サイズバリエーションを作る
容量削減にも繋がる9スライスですが、サイズバリエーションを作るのにも適しています。
１つの素材でいくつものサイズを表現できるのでオススメ。
ただし無作為に増やすと開発時に管理が難しくなり、見た目の統一感も損なわれます。
基本は３パターン（S,M,Lサイズ）くらいにおさめるのが無難です。
カラーバリエーションを意識
ボタンをデザインする際に、カラーバリエーションを作れるような表現を心がけましょう。
例えばボタンにフチをつけたとしましょう。
ボタンに使用する色が3,4と増えるとカラーバリエーションをつけるのが難しくなりますよね。
ベースとなる色＋どのカラーバリエーションでもバランスのとれる色をチョイスすると
比較的うまく作ることができます。
ボタンのアニメーションを想定してデザインしよう
ゲームUIのボタンは、ユーザーの挙動によってリアクションさせる必要があります。
インタラクションとも呼ばれる領域なのですが、ユーザーは行動を起こした際に反応がないと戸惑います。
きちんと押されていないのでは？今どういう状態？
そうなるとゲームのUIとしては不完全なので、しっかりアニメーションで対応しましょう。
押すと沈む、大きくなるなどの変化をつける
例えばよくあるパターンとして、ボタンを押した際にボタン自体が沈む表現。
また、ボタン自体が大きくなるパターンなど。
大事なのはボタンが反応することです。
一段階クオリティを意識するとすれば、そのボタンのデザインからユーザーがイメージできるアニメーションをきちんと表現すること。
ボタンを押した際に突然回転し出すとかだと流石にやりすぎです笑
押せない場合も考慮する
ゲームのUIでは、特定の条件をクリアしないとボタンが押せない状態になっていることも多いです。
例えば、アイテムを使用する画面で、使用する個数を指定してから実行する場合。
その場合はボタンをグレーアウトしたり、すでに凹ませた状態にしておくなどの表現が必要です。
一番効率が良いのは黒50％を上から被せる
ボタンの押せない表現を作る上で一番効率がいいのが、黒（#000000）の色をボタンの上に被せてしまうパターンです。
開発環境がUnityなどの場合、素材一つであとはコンポーネントから設定できたりもします。
これの何が効率が良いかというと、一つのボタンに対して複数の素材を用意する必要がないこと。
また、どのボタンにも均一に表現がかけられるのでそのゲームUIのルールとしてユーザーが認知することにもつながります。
まとめ：ゲームUIのボタン一つでもユーザビリティと開発のスムーズ化を意識しよう
どのUI素材にも言えることですが、ユーザビリティの向上は必要不可欠です。
また、開発をスムーズに行えるような意識も当然ながら必要になります。
ゲームUIのボタン一つ作る際にもしっかり意識して、安定した開発を進めていきましょう。
ちなみに、本記事のボタンのテイストはかなりシンプルに寄せていますので、
プロジェクトのデザインのテイストによって取捨選択して素材を制作しましょう。