こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、フラット寄りのボタンデザインを紹介します！
シャドウを付けることで立体感を演出
こちらはパネルミッション画面です。
右側の枠はボタンです。
僅かにシャドウを付け、立体感を表現しています。
このわずかな手掛かりでボタンであることが直感的に理解できるデザインになっています。
左側の枠はボタンではありません。
シャドウが付いておらず、立体感が無いデザインです。
フラットなデザインでは基本的にはこのような僅かな手掛かりによってボタンかそうでないかが区別されます。
僅かなシャドウでも優先度を付けることは可能
ボタンの強弱の事例を紹介します。
こちらはオプションダイアログです。
ダイアログの中のボタンと閉じるボタンのデザインを比較すると、僅かにシャドウの濃さ、太さが異なっています。並べると分かる程度の僅かな差です。
僅かな差ですが、どのボタンを強調しているか表現できています。
三角マークを使うことでボタンと認識させる
ゲーム内にはシャドウが付けられないデザインを採用する場面も考えられます。
こちらはアイドルのユニットの情報を表示する画面です。
画面左側にユニットを選択するタブが表示されています。
タブの右側に白い三角のマークが表示されています。
この三角マークはwebでは昔から用いられてきた表現ではあるため、一定のユーザーにとっては遷移先があることが理解できると推測できます。
同じ画面のアイドルの名前の枠にも三角マークが使われています。
これによって三角マークがただの飾りではなく、ボタンであり、遷移先があることが分かるデザインになっています。近い場所に置くことで学習効果を高めているようにも感じます。
まとめ
フラットなデザインは情報量を最小限に抑えがちです。
「サイスタ」ではシャドウの有無によってボタンかそうでないかの区別を付けるデザインが採用されています。僅かにシャドウの濃さや太さを変化させ、ボタンに強弱を付けています。
また、シャドウが付けられないデザインや場面だった場合、三角マークを利用することでボタンだと伝えるデザインも採用されていました。
以上です。
シンプルなボタンをデザインする際の参考になれば幸いです
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。
ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。
当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。
ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
