こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からトグルボタンのデザインをご紹介します。トグルボタンは多くのゲームに採用されることが多いUIコンポーネントのひとつです。汎用性の高いUIだと思うので、デザインする上で参考にしやすいかと考えます。
以下、目次です。
色と文字を使ってオンオフが分かりやすいデザイン
「ブルーロックPWC」のトグルボタンはこんな感じです。
オンだとオレンジになっていますね。
分かりやすいようにトリミングします。
「ブルーロックPWC」のトグルボタンの特徴には以下の要素が含まれ、分かりやすさに貢献していると考えます。
以下、要素と補足です。
- オンにすると色が明るい有彩色になり、オフにすると無彩色になる
実際のスイッチもアクティブになると明るくなるイメージがあり、メンタルモデルの視点でも自然なデザインです。また、背景が白いため、無彩色と比較すると有彩色の方が目立ち、視線を集めやすくなっています。 - スイッチの状態が文字で書かれている
スイッチの状態が書かれていることでより正確に状態を表していると考えます。
また、「ON / OFF」と表記をアルファベットにすることで、ローカライズする際の手間も省いています。 - オンオフの向きがiPhoneと同じで、メンタルモデルを利用している
代表的なUIと同じ設計思想のUIにすることで、ユーザーのメンタルモデルを利用しようとする意図が感じられます。メンタルモデルを利用することで学習コストや誤操作を抑えられます。
▲iPhoneのトグルボタン
以上です。
トグルボタンをデザインする際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ブルーロック Project: World Champion」のガイドラインを確認したところ、以下の記載がありました。
当社は、個人であるお客様が、プレイ動画等を利用した動画や静止画等を、適切な動画や静止画の共有サイトに投稿することおよび以下で指定するシステムにより収益化することに対して、著作権侵害を主張いたしません。
動画投稿ガイドライン | 「ブルーロック Project: World Champion」ゲーム公式サイト
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
