こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「咲うアルスノトリア」、（以下、アルスノ）から押せるボタンの色の一貫性について紹介します。
押せるボタンは基本的には緑色
©NITRO PLUS/GOOD SMILE COMPANY, Inc.
こちらは「アルスノ」のホーム画面です。中央にキャラクターが表示され、キャラクターを隠さないように、また押しやすさを考慮した上で、ボタン類は画面端に配置されています。
各ボタンをよく見ると緑色が多いことがわかるかと思います。画面の色数が抑えられ、淡い色調のキャラクターが画面に埋もれないように意識しているようにも見えます。
また、アイコンやボタンの色が緑で統一されているため、一目で押せるかどうかが分かる工夫がされています。
もちろん緑じゃないボタンもある
©NITRO PLUS/GOOD SMILE COMPANY, Inc.
「アルスノ」のすべてのボタンが緑で構成されているわけではありません。
例えば、ショップ画面からアイテム購入する時の確認ダイアログでは「OK」は黄色、「キャンセル」は赤色が採用されています。
見た限り「アルスノ」は押せるボタンは基本的には緑色で統一されています。
このダイアログのように、配置や質感などの情報を利用することで、緑色のボタンではなくても、押せるボタンだとユーザーに認識させることができます。
ボタンの色のバリエーションを増やし過ぎるとルールが複雑になりすぎ、認知コストが高まってしまう懸念もありますが、黄色と赤の2色のバリエーション程度であれば分かりにくさには繋がらないかと思います。
むしろ、あまりルールに縛られ過ぎて「ボタンは絶対に緑色なの！」としてしまうと、デザインの自由度が下がってしまい、ゲームの規模によってはデメリットになるのかもしれません。
場所によって緑色じゃなくなるボタン
©NITRO PLUS/GOOD SMILE COMPANY, Inc.
最後に、「押せるボタンは緑色」というルールを知った上で画面左上でのキャラクターが表示されている丸い枠に注目してみます。
この丸い枠はホーム画面では緑色でしたが、キャラ一覧画面ではベージュになっています。
緑からベージュに変わっていることで「この場面では押せないボタンです」という情報をユーザーに伝えています。
普通にゲームをプレイしている場合、いちいちボタンの色を見比べないので、初見は混乱しそうですが「ホーム画面以外では押せない」と学習することは比較的容易でした。
そのため、ボタンの色を確認してから判断する、というよりは、押せないことを確認するためにボタンの色を見る、という順序で情報を認識していました。
「押せるボタンは緑色」というルールをユーザーに学習させることによってとれる手段だと感じました。
押せないことを伝えるためにボタンを暗くしたり、鎖や錠前でロックが掛っていることを示すこともあり、ところによって使い分けができると思います。
どれが絶対的な正解と言うことはありませんが、色々な手法がある中のひとつとして覚えておくのも良さそうです。
余談ですが「押せた方が便利なのでは」と感じる人もいるかもしれません。
ただ、あらゆる機能がどこからでもアクセスできるようになると、ライトユーザーにとっては複雑なゲームに見えてしまう懸念があります。
優先度を定め、バランス良く機能を絞ることで、結果的には使いやすさ、ゲームの遊びやすさに繋がるという考え方もあるのかなと思っています。
以上です。
押せるボタン色のルールをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
----------------------------------------
ニトロプラスの許可の上でニトロプラスの著作物を引用しております。これらは他への転載を禁じます。
----------------------------------------
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「咲うアルスノトリア」のガイドラインを確認したところ、以下の記載がありました。
ニトロプラスでは、商業目的ではない個人のサイトに限り、テキスト・画像を転載することを認めております。
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
