こんにちは！ちょこです！
「デュエル・マスターズ プレイス」、通称「デュエプレ」のショップのデザインの工夫が興味深かったので紹介します。
どういう工夫かというと
サプライ購入とカード購入でレイアウトを変えている点です。
これだけだと分からないですよね。少し説明します。
まず、構造を説明すると、ショップは「サプライ購入」「カード購入」「ジェム購入」と分かれています。
ショップ
└サプライ購入
└カード購入
└ジェム購入
サプライ購入とカード購入の下位階層はそれぞれ…
サプライ購入
└カードアクセサリー購入
└キャラクターパーツ購入
カード購入
└カードパック購入
└構築済みデッキ購入
と分かれています。
整理すると以下のようになります。
ショップ
└サプライ購入
└カードアクセサリー購入
└キャラクターパーツ購入
└カード購入
└カードパック購入
└構築済みデッキ購入
└ジェム購入
この中で「サプライ購入」と「カード購入」の画面のレイアウトを分けている、という話です。
このように、サプライ購入は上下にボタンが配置され…
カード購入は左右にボタンが配置されています。
UIの原則に「統一性」という評価軸があるのですが、ここではレイアウトを統一していません。
こうすることによって「今いる画面はカード購入の画面だな」あるいはサプライ画面だな、と瞬間的に理解できます。
つまり認知コストの軽減を補助する役割を果たしているのかな、と考えられます。
以上です。
統一性はUIの中でも重要な原則なのですが、同じような画面ばかりだと自分がどこにいるのか見失うことがあります。世界観の逸脱はしていないので、統一性の幅や程度の解釈次第であるようにも感じました。
人間の脳は怠け者なので、文字を読んだりせずに雰囲気で認識することが多いです。
レイアウトに違いをもたせることにより直感的な理解を促しているように見えました。
同じような画面をたくさんデザインした結果、どこにいるか分からなくなるケースはあるかと思います。その際の参考になれば幸いです。
権利者さまへ
以下のガイドラインによりゲーム画面のスクリーンショットの公開については許可されている認識でおります。
ネットワークサービスにおける『DUEL MASTERS PLAY’S』の
投稿、生放送配信、及び画像投稿に関するガイドライン
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
