こんにちは、ちょこきなこです。
「妖怪ウォッチメダルウォーズ 」の実装事例からタブデザインについて考えてみました。
情報の取り扱い方という視点から見た時に、タブは基本的には情報の優劣がなく並列な情報を扱うものです。
しかし、ゲームにおいては五十音のように確実に並列な情報を扱うことは少なく、グルーピング程度の括りで扱われ、大なり小なり優劣がつくものです。そういった時にどういった手法があるのか、という事例紹介になります。
どんなデザインになってるの？
まずは「妖怪ウォッチメダルウォーズ 」はどのようなデザインになっているのか確認します。
見てわかる通り、メダルタブだけ紫色になっています。このように色を分けることによって他と差異を設けています。
これによって、メダルタブは他と違う、という意図を伝えるデザインになっています。
なぜメダルだけ色を変えているの？
なぜメダルだけ色を変えているのかですが、それはこのゲームにおいてメダルが重要な要素になるからです。
なので、他と違う色のデザインを採用しているのだと考えます。
以下は「かばん」の画面です。いわゆるアイテム一覧のようなものだと思ってください。
その中で妖怪メダル、装備、アイテムと情報が分けられています。
一般的には並列な情報かと思われるかもしれませんが、ユーザーにとって最もアクセス頻度が高い情報はメダルです。
この画面においては、メダルが最も攻略にとって重要な要素であり、アイテムや装備はメダルのステータスをサポートする立ち位置にあります。
このようにメダルはアイテムや装備より一段上の優先度があり、それを強調したいため、色を分けたのだと推測します。
なぜ紫なの？
色分けされるのは分かったのですが、今度はなぜ紫色なのか考えてみます。
妖怪ウォッチの場合、ボタンの色は青、黄、赤、緑、紫で構成されています。
1：青
青は汎用的に使われます。
2：黄色
黄色は訴求したい場面で使われます。
3：赤
赤は注意やキャンセルなどの場面で使われます
4：緑
緑は主に報酬が受け取れる場面で使われます。
5：紫
紫は強化、特殊なな場面で使われます
あるいはこのようにポジティブな場面でも使われます。
なぜメダルタブを紫にしたの？
ボタンに関しては紫が最も使用頻度が低い色です。規則性が薄く特殊な扱いをしています。また、レアリティの高いアイテムの色や報酬獲得時など、ユーザーにとってポジティブな印象を受ける色設計になっています。
ですので、メダルタブに紫を使うことによって、普段と違う印象、特別な印象を与えようとしているデザインになっているように感じました。
(ぶっちゃけ単純に妖怪っぽいカラーという話もなくはないですが、概ねデザイナーの根拠は後付けということも珍しくもなく…)
まとめ
タブの中で優劣をつけたい場合の表現として、他と異なるデザインにする手段があります。今回の場合は色を変える手段が取られました。
他にもタブの大きさ、形状、質感、タブの上に乗る文字など差異を設けることができる部分はたくさんあります。
基本的には特定のタブを目立たせたりはしないのですが、それはUI側のルールであって、ユーザーにはあまり関係のないことだったりします。
なので、もし特定のタブを目立たせたいなどあれば、今回のような事例があることを覚えておくとアイデアの引き出しが増えたり、柔軟な発想ができるのかな、と思い紹介しました。
