こんにちは。モンスト事業本部のUI・UXデザイングループです。
モンスターストライク（以下、モンスト）は、世界累計利用者数5,500万を超えた、多くのユーザーに長く遊ばれているスマホゲームです。2021年10月には8周年を迎えます。
UI・UXデザイングループは、UI、VFX、グラフィックの3つの機能別チームがあり、それぞれモンスト内のUIの情報設計やデザイン制作、ストライクショット（必殺技）などの演出制作、ゲーム内外のバナーなどのグラフィック制作を行っています。
今回は、モンストUIチームでのUI改修事例について紹介していきます。制作フローを紹介している当社オウンドメディアの記事もあわせてご覧ください。
モンスト改修のセオリーとルール
開発について
モンストの開発は、約1ヵ月ごとにバージョンアップがあり、UIチームが対応する案件の数は数十にのぼります。
改修の種類は大きく分けてふたつあります。分析結果をもとにした課題解決やストレス緩和のための改修と、他社IPとのコラボ施策や新コンテンツなどに対応するための改修のふたつです。
初めて遊ぶユーザーに直感的なUIを提供するのはもちろん、長く遊んでいるユーザーや久しぶりにモンストに戻ってきたユーザーにも違和感を抱かさせないようなデザイン、学習コストをかけずに新しいコンテンツを楽しんでもらうデザインになるよう、日々施策と向き合っています。
制作にあたっては、直感的なデザインの良し悪しのみで判断せず、操作性、可読性、視認性、理解コストなどを補えているのか。また過去のレギュレーションに沿っているか、ほかの画面で悪影響を与えないか、今後のさらなるコンテンツや仕様の追加にも対応できる設計であるか、などをふまえ、チーム内でレビューを繰り返し仕上げていきます。
では、ここからは具体的な事例をみていきましょう。
事例1.クエストタイプ選択画面の改修の歴史
まずお伝えするのは、クエストタイプ選択画面の改修という、規模が大きな事例です。
クエストタイプ選択画面は、ホーム画面の次にユーザーが触れる頻度が高く、モンストの導線で重要な画面です。リリース当初はクエストタイプが「イベント」と「ノーマル」の２種類しかありませんでしたが、長期運営にともない新しいクエストコンテンツが追加され、画面の情報量が増えるたびに何度も画面の改修が行われてきました。
大きな改修を3つのフェーズに分類して紹介します。
第1フェーズ
表示するクエストの種類が増えたので、すべてのクエストをファーストビューに収められるような改修を行いました。
リストで表現されていたクエストをアイコン化し、ファーストビューに収まるよう配置。世界観に合わせ、グラフィカルな表示にしました。
第2フェーズ
クエストが増加したため、平面的な配置ではなく奥行きをつけてファーストビューに収まるように対応。またホーム画面ではデッキのキャラクター3体を回転することができます。その仕様にあわせ、各クエストを回転させて選択できるようにしました。ホーム画面と同じ挙動にすることで、ユーザーに違和感なく操作してもらう設計になっています。
第3フェーズ
さらにクエストの種類が増え、画面内の情報量が多くなったため、以下の要件を満たす仕様を検討し、実装コストを考えながらさまざまなパターンを作成しました。
- クエストの種類がカテゴライズされ、どのクエストがどこにあるか迷わずに選択できる
- 素早く選択できる（遷移階層は深くしない）
- 今後、コンテンツが増加した場合にも対応できる
最終的に、クエストを「ノーマル・育成」「イベント」「チャレンジ」の3つのカテゴリに分け、各カテゴリを選択することで、対応したクエストが表示されるよう改修を行いました。また、操作に慣れた既存ユーザーに配慮するために、改修前の操作性を踏襲しました。
リリース初期のようなリストにした案も作成しましたが、画面に圧迫感があり、ワクワク感が損なわれたためボツに。またカテゴリ選択方法のUIも、スライド式やタブにした案など、比較するための案を複数作成しています。
カテゴリを設けクエストを分類することにより、初心者に各クエストの目的を認知させることはできましたが、上級者や一部クエストのみをプレイする人にとっては、タップ数が増えてしまいました。
そこで新設したのが、「履歴」カテゴリ。過去にプレイしたクエストは、カテゴリをまたいで表示される仕様も追加しました。
クエストタイプ選択画面では主観的な設計にならないよう、さまざまな視点やプレイスタイルを考慮し、要件に沿う最適なデザインを心がけました。
事例2.新コンテンツ「守護獣」の追加 既存ユーザーが戸惑わない設計に
続いて、新コンテンツ「守護獣」を追加した際の事例です。守護獣とは、専用クエストで「守護獣」と呼ばれるモンスターを仲間にし、デッキに編成してクエストに挑むとクエスト中に１回だけプレイヤーを助けてくれる「守護スキル」が使えるというものです。
通常の4体のキャラで編成している機能や構成はそのままに守護獣の表示を追加することになり、インゲーム部分やデッキ関連の画面など、細かい画面も含めると20近い既存画面の改修や追加画面が必要になりました。
普段の画面に慣れているユーザーが戸惑わないよう、各画面、何パターンもレイアウト案を作成し、守護獣が違和感なく配置されているかを検証しました。
また、守護獣専用の新規画面を作成する際も、既存のUI機能を組み合わせた理解しやすいUI設計を優先しました。
