kick the base

Houdiniと、CG技術と、日々のこと。

UI考察: スマッシュアンドマジック

今日も元気に、スマッシュスマッシュー!

スママジやってなかったらまったくわからない書き出しですみません。

スマッシュ&マジック(通称スママジ)とはgumiさんが配信しているモバイルのゲームで、いちユーザとしてぼくも楽しくプレイさせていただいています。

ゲームのウデマエとしてはランク40、ハードモードで全ワールド踏破くらいな感じです。ゲーム開始して数週間なので、そこそこプレイしている方じゃないのかなと思います。

一通り全画面構成を理解してきたので、本記事ではUIデザインの考察をしたいと思います。

本記事を書くにあたり、公式アカウントであるきの子@スマッシュ&マジック公式(@smashmagic_info)さんにご許可をいただきました。お礼申し上げます。

先に明記しておきますが、スママジのUIまわりは非常によくできていて、デザイナ陣はすごくいい仕事をしてるなぁと思っています。なので本記事ではこうしたらより良くなるんじゃないかなぁというお話になります。

またここで書くことは一人のユーザーとしての私見です。今後の展開を考えて現状のUIに落とし込んでいる可能性ももちろんあるので、あくまで現時点での考察となります。

ちなみに難易度調整としても秀逸で、きっちりチューニングされたバランスは非常に好感が持てます。とても面白いのでオススメです。マッチングで一緒にクエストしましょう。

UIデザインについての考察のため、代替案のグラフィックを本家に寄せるところには注力していません。また画面のスクリーンショットはすべて引用として使用させていただいております。

フォローリスト

本ゲームでは敵の属性に適したキャラで挑むのが重要な戦略であり、助っ人をうまく活用するのが攻略の近道です。よってフォローリストの管理は大きな意味を持ちます。

実際の画面はこちら。

f:id:kickbase:20171217185350j:plain

フォローするかどうかを考慮する時、フォローリストに残すべきかどうかを考える時、下記情報が重要になるかと思います。

  • ユーザーランク
  • キャラクターのレベル
  • キャラクターの英雄度
  • キャラクターのラック
  • 最終ログイン時間

これら複数の情報を一覧するためには、ソート機能が最もシンプルかと思います。

f:id:kickbase:20171217213932j:plain

上記とは別に現行のUIだとキャラクターのラック表示がないので、それは入れていただけると嬉しいなーと思います。

[追記]

ラックの表示はありましたね。訂正します。

実績関連

これはぼくが実績解除されていないからなのか未実装なのかわかりませんが、「実績ボタン」が無反応です。

f:id:kickbase:20171217185454j:plain

メニュー > 実績関連 > 実績(ここで行き止まり)

となっているので、実績解除されていないにしろ未実装にしろ、その手前の「実績関連」ボタンをアンクリッカブルなあしらいにすべきかと思います。

簡単にやるとこんな感じに。

f:id:kickbase:20171217185523j:plain

アイテム一覧

アイテムには所持数があるのでゲームを進めながらどんどん売り払っていくわけですが、頑張って入手したアイテムは間違って手放したくないので、スママジにも定番の売却不可フラグがあります。

ありますが…

分かりにくい。

f:id:kickbase:20171217185612j:plain

この錠前マークの色ですが、頻繁に入手する「◯◯の指輪」と同系色なので特に視認しにくいです。(最初スママジには売却不可フラグないのかと思ってました)

まあそれは一度場所を知ってしまえば解決する問題なので問題ないでしょう。このロックアイコンをタップすることでロック状態をトグルすることができます。

できますが。

小さすぎて押しにくい!

f:id:kickbase:20171217185640j:plain

情報設計としてロックアイコンが小さめ(優先順位が低め)になるのはしょうがないと思いますが、強力な武器・防具を収集することがゲームの大きな目標である本作では、ロック状態の変更は多用する機能のひとつといえます。よって画面のグラフィックを変えずともユーザビリティを高める施策として、仮想的なタップエリアを広めに取るのはいかがでしょうか。

f:id:kickbase:20171217185709j:plain

これならば現行のUIを変更することなくストレスを軽減できるかと思います。

成長ボード

成長ボードはキャラのパラメータを伸ばす機能なのですが、パーティ内で並行してキャラを育てている場合、「今回はどのキャラのどのパラメータを伸ばすかな」と悩むことも多いです。

f:id:kickbase:20171217185754j:plain

よって各キャラの成長ボードを行き来できるとベターな気がします。現状は下記フローです。

  1. パーティ大カテゴリでキャラを選択
  2. 成長ボードボタンを押すと選択中のキャラの成長ボード画面へ
  3. 成長ボード画面から他のキャラの成長ボード画面に映るには一旦一つ上の階層に戻る
  4. パーティ大カテゴリに戻りキャラを選択し直す

この3項目目で直接他のキャラに行けると良いと思います。

f:id:kickbase:20171217185807j:plain

キャラ詳細エリアを左右スワイプなら他のUIとも親和性があるかと思います。

パーティ編成

もはや慣れてしまいましたが、最初触ったときに入れ替え方法がわかりにくかった印象がありました。

現行では操作方法は下記のとおりです。

  1. 下のパネル(パーティに編成されていないキャラクター一覧)から「パーティに入れたいキャラ」をタップ
  2. 真ん中の情報エリアに先ほどタップされたキャラクターの情報が表示される
  3. 上のパネル(パーティに編成されているキャラクター一覧)から「パーティから外したいキャラ」をタップ

上記方法とは逆に、先に現行のパーティから外したいキャラを指定する方法もあります。

  1. 上のパネル(パーティに編成されているキャラクター一覧)から「パーティから外したいキャラ」をタップ
  2. 真ん中の情報エリアに先ほどタップされたキャラクターの情報が表示される
  3. 下のパネル(パーティに編成されていないキャラクター一覧)から「パーティに入れたいキャラ」をタップ

ここで問題となるのがキャラクターをタップするという動作が「パーティに入れたいキャラを指定する行為」と「パーティから外したいキャラを指定する行為」を兼ねている点です。操作中に電話が来たり、何か他の作業をして画面に戻ってくると、どのフェーズにいるのか分かりにくいかなと思いました。(モバイルゲームはユーザーがゲーム以外の行動と並列して操作しがちです)

そこで、ドラッグ・アンド・ドロップ(以降ドラドロと略)でキャラクターの入れ替えができればフェーズを短縮することができるのではと思いました。タップすると情報が表示されるのはそのまま現状のUIを維持して、ドラドロだけ追加実装すれば、現行のUIに慣れてる方も良いのではと思います。

f:id:kickbase:20171217185900j:plain

もちろん、ひとつの目的に対し複数の手段を入れるのはユーザーの混乱を招くおそれがあるので、本提案はドラドロだったら分かりやすかったのでは程度のお話です。

ちなみにドラドロでキャラクターを交換するUIであれば、指の可動範囲を考えて下記のように上部に情報パネルがあるデザインが良いのかなと思います。

f:id:kickbase:20171217185915j:plain

クエストリザルト/装備売却

これは他の画面とも話がまたぐのですが、順に見ていきましょう。この画面はクエストをクリアした際、入手したアイテムが表示されるものです。ここでアイテムの売却を行うことができます。

f:id:kickbase:20171217212750j:plain

アイテムを売却する画面は、下記導線でも実行することができます。(こちらは対象としてすべてのアイテムを対象に一括売却できます)

パーティ > 道具屋 > 装備売却

f:id:kickbase:20171217212813j:plain

本ゲームで売却の指標になるのが追加アビリティです。装備品の基本性能はアイテムの種類によって固定されていますが、追加アビリティ(プラス補正)は個々のアイテムごとにランダムで付与されます。

たとえば下記のような感じです。

アイテム種別 基本性能 追加アビリティ(補正値)
グローリーソード 攻撃:115 防御:50 攻撃:+10 防御: +35
グローリーソード 攻撃:115 防御:50 攻撃:+15 防御: +50
グローリーソード 攻撃:115 防御:50 攻撃:+30 防御: +50
グローリーソード 攻撃:115 防御:50 攻撃:+10

手持ちのアイテムが上記のような場合、補正値の大きい「攻撃+30 防御+50」のグローリーソードをロックし、「攻撃力+10」のみしかついていないグローリーソードを売却することになるでしょう。

ここで問題となるのは、アイテム種別ごとに追加アビリティを一覧するページが現行のUIには存在しないということです。(アイテムを一つづつ選んでいって、追加アビリティを自分で覚えていなければならない)

属性や◯◯キラーなどの追加アビリティが重要となる本作品では

  • 天弓アルファスの中で何本か売りたい
  • スラッシャー・エクスのトップ3をロックしておきたい

などの要求に答えるUIがあると良いかと思います。つまり下記のようにアイテム種別で絞り込みをし、追加アビリティが一覧・比較できるようなUIです。

f:id:kickbase:20171217212841j:plain

クエストリザルトに話を戻すと、現在のUIでは手持ちのアイテムと比べて今回入手したアイテムが優れているかどうか(追加アビリティの補正が高いか低いか)が判断できないため売るべきかどうかを判断しにくいUIになっています。こちらも同様のUIで手持ちのアイテムと比較できれば便利なのではと思います。

ランダムマッチ

ランダムマッチのシステムはそもそも複数の要素が絡むため難しいものですが、現行のUIでは下記問題があるように思います。

f:id:kickbase:20171217212926j:plain

  • 自分がホストなのかゲストなのか一見して判断しにくい
  • パーティに自分のキャラが何人参加しているか分かりにくい
  • 自キャラの選択・優先順位がしにくい
  • ゲスト参加時、キャラを選んでいる段階でクエストが開始されてしまうことがある

上記を一つづつ見ていきます。

自分がホストなのかゲストなのか一見して判断しにくい

画面上に「ランダムマッチ解放中(ホスト)」と「ゲストで参加中」と明記してあるのですが、テキストベースでの情報なので「読む」必要があります。これは画面の背景色をホストは赤、ゲストは青などとし、面での情報にすることでスマートに解決できるのではないかと思います。(もちろんテキスト情報と合わせてでも良いでしょう)

パーティに自分のキャラが何人参加しているか分かりにくい

自キャラの投入数はランダムマッチ参加人数によって変化し、またホストからゲストかによっても異なるのでややこしいことになっています。以下に情報が複雑化する原因を見ていきましょう。

自分がホストのとき

ランダムマッチ参加人数 自キャラの投入数
2 2
3 2
4 1

自分がゲストのとき

ランダムマッチ参加人数 自キャラの投入数
2 2
3 1
4 1

リアルタイム要素

上記投入数はランダムマッチ参加人数によってリアルタイムに変化するので、自ユニットの投入数が1〜2でつど変更されていきます。これらの問題は部屋に来たタイミングで自動的にキャラがアサインされることによって引き起こされていると言えます。

自キャラの選択・優先順位がしにくい

自キャラをタップすることによって投入するキャラの選択投入キャラの優先順位付け(並び替え)を行うのですが、このふたつの動作をタップが兼務しているため操作性が損なわれている印象があります。

また下記に詳しく書きますがキャラの優先順位変更は急ぐ必要があるというのもストレスを感じる点といえると思います。

ゲスト参加時、キャラを選んでいる段階でクエストが開始されてしまうことがある

クエスト開始の決定権はホストにあるため、自キャラの選択中にクエストが開始されてしまうこともしばしばあります。こちらの問題も、自動キャラアサインが原因となっていると言えましょう。

代替案

f:id:kickbase:20171217213002j:plain

プロトタイプなのでグラフィックやバランスに関しては適当です。

部屋に入ったタイミングで自動的にキャラがアサインされるのが問題の根幹だと思われるので、入ったタイミングではアサインされず、下記段階で決定するようにすれば良いのではないかと考えました。

  1. 投入キャラクター決定エリア(画面では真ん中のふたつの枠)に自パーティエリアからドラッグ・アンド・ドロップ
  2. 投入キャラクター決定エリアにキャラが入った段階で上部のパーティ枠にアサインされる

この方式にする副次的なメリットとして、キャラクターがパーティ枠に入った段階でユーザーの能動的な行動を確認できるため、少なくとも自動でアサインされたキャラで出発されてしまうという事故が減るのではないかということです。

★4確定ガチャ

f:id:kickbase:20171217213027j:plain

ガチャ画面に入った段階で現在所持しているチケット枚数が把握できないためこんな悲しい現象が起きます。

f:id:kickbase:20171217213045j:plain

ガチャ画面の段階でチケットがゼロの場合は、ボタンがアンクリッカブルなあしらいにすべきかと思います。

f:id:kickbase:20171217213106j:plain

ホームの導線

ホームには現在開催中のイベントやスペシャルガチャなどのボタンがありますが、現行のUIではこれらは各お知らせのモーダルウィンドウを呼び出します。

f:id:kickbase:20171218181747j:plain

お知らせを頻繁に確認する人はいないと思うので、これらのボタンは直接該当ページに飛ぶエイリアスであるべきかと思います。

獄炎の竜王イベントを例として挙げます。

クエスト > イベント > 獄炎の竜王(ここに直接飛べると嬉しい)

まとめ

いちユーザがデザイン考察なんておせっかいだなとは思いますが、デザイナというのは元来おせっかいな人種ですのでご容赦いただけると幸いです。

これもひとえに好きなゲームだからこそ。本考察がベストではないと思いますし、現行のUIの方が良いという考え方もあると思います。

本記事が今後のアップデートにほんの少しでもお役に立てれば幸いです。