こんにちは。

突然ですがみなさんは『学園アイドルマスター』してますか？

私はやってます。手毬ちゃんの歌唱力に耳を震わされ、清リーのカップルのような絡みに脳を焼かれる日々が続いております。

学マスの魅力としては何といっても個性的で魅力的なアイドルの数々、豪華作曲陣に支えられた多彩な楽曲、濃密なシナリオ。
どれを取っても令和のアイドルコンテンツにふさわしい高品質なゲームであり、Google Playベストゲームに選ばれたのも納得のゲームでしょう。

そんな学マスですが、本作品の評価を上げている要因の一つとして快適にプレイできるようなUI・UXの充実度といった側面もあると考えています。

みなさんもゲームをやっていて一度は「シナリオやキャラはいいのに操作性やUIがわかりにくいせいで進められなかった」という経験があるのではないでしょうか。
でも学マスは違います。最新のデザインシステムに則った効果的なUIデザインを実装することでユーザーへ快適さを提供しているという観点では非常に評価が高いものと思っています。

この記事ではなぜ学マスのUIが快適なユーザー体験をもたらしているかについて、Web業界でデザインや実装に関わった経験がある私なりの考えを述べていこうと思います。

※あくまでオタクの駄文であり、かつ勉強としてのアウトプットの意味も込めた記事であるため、一個人の意見として捉えていただけると幸いです。

①情報をアイコンで示しており、伝達のための情報量を削減している

学マスの画面UIの特徴として、多くの場面でアイコンを有効活用することでユーザーとのコミュニケーションに必要な情報量を削減していることが挙げられます。

比較のために一度人気ソーシャルゲームであるウマ娘のメイン画面を見てみましょう。

次に学マスのメイン画面を見てみます。

両者を見比べてみると学マスの画面の方がすっきり締まって見え、洗練されているように思います。おそらくそう感じる人が多いのではないでしょうか。

その理由としては遷移ボタンの構成要素の違いがあります。
ウマ娘は色付きのイラストで遷移ボタンを表現しているのに対して、学マスでは単色のアイコンで遷移ボタンを表現しています。

情報量は増えればいいものではなく過度な情報量はユーザビリティを阻害することにもなりかねません。
同じ目的(=意図した画面へユーザーを誘導する)を実現できるならなるべく情報量を少なくすることでユーザーへのコストの削減につながります。

そういった意味で学マスはアイコンによる情報伝達によりユーザーに快適なゲーム体験を提供しているといえるでしょう。

②画面の邪魔にならずにわかりやすくボタンを実装している

学マスの優れている点として、数多くのボタンが自然に画面に溶け込みつつ、ボタンの主張もできている点もあるでしょう。

この画面では約10個ほどのボタンが存在しているのですが、どれもユーザーは「タップできる部分である」ことを認識できると思います。

これは育成中の画面でも同様です。
みなさんは「SKIP」や「ログ」の部分がボタンであることは認識できると思いますし、同時にそれらが画面にうまく溶け込んでいることもわかると思います。

ではなぜボタンを自然に画面に落とし込みつつしっかり認識できるものにしているかというと、適度なシャドウによる立体感の表現と半透明な色をうまく生かしたボタン領域の表現にあると思っています。

改めて、ここまでで出てきた画面のボタン部分に注目してみましょう。

これらの3つの画面のボタンを並べてみるとある特徴が見えてきます。

それは、「白ベースの背景色に自然なシャドウをかけてボタンにしている」「背景色としてぼかしや半透明の色を使い、他の部分と調和させている」という点です。
これら2つの点をボタン領域のベースとすることで、画面の中にボタンを溶け込ませつつ多数のボタンを画面内に設置することに成功しているのです。

③大アイコン×色分けによって直感的に操作しやすいゲーム画面を実現している

次はプロデュース中の画面を見てみましょう。
プレイヤーにとっては馴染みのある画面だと思いますが、ここにも実は快適なプレイを実現させる工夫がなされています。

それは大きな単色アイコンとボタン領域の背景色の色分けによって、ユーザーが直感的かつ反射的に次の行動のボタンを押せるように設計されている点です。

おそらくみなさんは上図の画面のどこを押せば自分のやりたい選択肢を取れるかわかるはずですし、色が分かれていることで一瞬で選択肢のボタンを判別できるはずです。
そのためターンごとの行動を反射的に進めることができ、これが快適なゲーム体験につながっているでしょう。

上記で示した色とアイコンを効果的に使うことでユーザーの理解を助けている点はレッスン中の画面にもいえます。

例えば「PERFECTまでの残りポイント」については有色/無彩色のバーの色分けと時計回りに動くトランジションによって直感的に進捗がわかるようになっていますし、

レッスン中のカード使用画面も、大きいアイコンによってカードの種類を示しつつも背景色の差別化でレア度(=カードの重要度)を明示しているため、どのカードを使えばいいのかがかなりわかりやすく表示できている画面といえるでしょう。

このように学マスのプロデュース画面では大アイコン×背景色の組み合わせで直感的な動作を可能にしていることで、ストレスフリーなプレイ体験を可能にしているのです。

学マスのUIと近代デザインシステムの共通点

ここまでで学マスのUIデザインがいかにユーザーに対して負荷の少なく快適なゲーム体験を提供しているかを書いてきました。

実は当記事で示してきた学マスのデザインの長所は、そのまま現在のデザインシステムの考え方やUIコンポーネントと共通する部分が多数存在しているのです。

例えばここまでで述べたボタンの表現での考え方についてはGoogleの『Material Design』の考え方やUIコンポーネントが近いです。

GoogleのMaterial Designでは、原則の1つとして物理法則に則ったデザイン、つまり平面的な要素の中に影や奥行きをつけることで重なりを表現することが重要視されています。
これはここまでで説明した学マスのデザイン要素の実装方針と一致します。

また、UIにおけるアイコン活用の重要性についても多くの記事が出ており、アイコンはUIにおける立ち位置が高いものとして認識されています。

このように学マスで使われているUIデザインや考え方は、現在主流のデザインシステムだったりUI設計思想を反映したものとなっており、それゆえにユーザーに対して使いやすく洗練された印象を与えるものになっているといえるでしょう。

まとめ

ここまで読んでいただきありがとうございます！

学マスのUIデザインについては、

• ホーム画面を始め、アイコンを有効活用することで画面内の情報量を的確に削減している

• 自然な配置かつ押しやすいボタンの設計によって、画面の遷移をしやすくしている

• 大きめのアイコン×背景色のコンビネーションにより直感的にプロデュースを進められるように工夫している

• これらの工夫はいずれも現在主流のデザインシステムやデザイントレンドに基づいて設計されている

という点が評価を高めている要因になっていると感じています。

みなさんも学マスのデザイン部分について想いを馳せながらプロデュースしてみると別の楽しみ方が生まれるのではないかと思います！