モンストの組織とUIデザイナー業務の紹介

Transcript

1. ©MIXI モンスターストライク モンストの組織とUIデザイナー業務の紹介 ©MIXI
2. ©MIXI モンストの紹介
3. みんなでワイワイ ひっぱり ハンティングRPG 世界累計利⽤者数 5,800万⼈ 『モンスト』って？ 2022年10月で 9周年 ※2022年8月時点 ©MIXI
4. ©MIXI 組織について
5. ©MIXI モンストの組織 ゲーム運営部 モンスト事業本部 モンストの開発・運営 キャラクター/背景/サウンド/映像 などの制作 プロモーションやマーケティング 各種イベントなど コンテンツクリエイション室 マーケティング部 新規事業開発部 モンストシリーズの新規開発
6. ©MIXI モンストの組織 ゲーム運営部 企画 （4グループ） QA 解析 コラボ推進 UI/UXデザイン UC クライアント （2グループ） サーバ （2グループ） ゲーム運営部は13グループの大きな組織 ココ！
7. ©MIXI モンストの組織 UI 第1/第2チーム グラフィックチーム VFXチーム UI/UXデザイングループ UIUXの設計/制作業務 バナーやロゴなどグラフィック制作業務 ゲームにおける演出制作業務
8. ©MIXI UIチーム
9. ©MIXI UIチーム ・各施策のUIUX設計と制作（遷移図やデザイン素材） 　追加機能、コラボ施策、UI改善施策など 主な業務内容
10. ©MIXI UIチーム UI担当箇所 キックオフ 企画方向性決め 遷移図作成 チーム・企画確認 素材データ・レイアウト作成 実装確認・調整 QA・リリース Ver.開発スタート・案件へのアサイン キックオフ 企画方向性決め 遷移図/画面仕様の作成 チーム・企画確認 素材データ・レイアウト指示書作成 実装確認・調整 QA・リリース Ver.開発スタート・案件へのアサイン 企画〜リリースまでの開発フロー 大体1.5〜2ヶ月のサイクルの中で 企画、エンジニアとやりとりをしながら開発をしています
11. ©MIXI UIチーム ストライカーカード 施策
12. ©MIXI UIチーム ストライカーカードって？ ありがとう！ いつでもキャラ集め 手伝うよ！ ♪ ♫ SNS等でシェア どんなカードに しようかな... 離れていても コミュニケーションを活発に ストライカー名
 称号
 フレンドID
 実績
 キャラクター
 ゲーム内でフレンドになるときに必要なID 
 ユーザーが自由につけられる称号、 
 ミッション等をクリアすることによって選べる種類が増える 
 ユーザーのこれまでの実績の中から 
 ３つ選んで表示できる 
 ゲーム内で使用するユーザー名 
 フレンドキャラに設定しているキャラ を表示
 運極キャラ多くて すごい！いいなー
13. ©MIXI UIチーム 自分だけのストライカーカードを作って、シェアする体験を作りたい！ 企画要件
14. ©MIXI UIチーム 遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整 UI制作フローに入る... 前に
15. ©MIXI UIチーム 自分だけのストライカーカードを作って、シェアする体験を作りたい！ 企画要件 なんでこの機能が必要なんだっけ...？ モンストらしい カードデザインってなんだろう？ カードデザインを見せながら 操作領域を確保するには...？ まず、要件を分解、整理して自分なりに落とし込む この機能で求められているものって...？ ・・・
 ・・・
 要件の前提から、デザインについての細かいあれこれなど自分の案件理解を深める為に大切な作業
16. ©MIXI UIチーム ・要件定義 ・UI構成（細かいデザインは仮のもの） ・フローの条件分岐 ・内部処理のタイミング 整理した要件をもとに などをまとめます ストライカーカードの遷移図の一部 遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
17. ©MIXI UIチーム ...などなど、この遷移図が開発中の共通認識を持って進めるための 大事な資料になるため、様々な観点からFBをしてもらいます UIチーム内確認＆FB修正 企画確認＆FB修正 遷移図完成！ 案件担当者で集まって遷移図の読み合わせ UIチームでOKが出たら 企画確認へ 企画FBがあれば 反映しUIチームで再検討！ 確認、修正、再検討を繰り返し... 確認の流れ FB修正が完了したら... 遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整 ・UIのガイドラインに沿ったものになっているか ・要件を満たしたUI、フローになっているか ・実装視点で現実的な案になっているか ・ユーザーがつまづきそうなところはないか ・ユーザーにサプライズを与えられるものになっているか ・今後の運用を見据えた機能の拡張性
18. ©MIXI UIチーム ・デザイン素材作成 ・UIに使用している素材、レイアウト指示を記載 レイアウトは遷移図の段階で完成に近いものを作成しますが、 アイコン等は遷移完成後に制作することが多いです レイアウト指示書 素材データ 遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
19. ©MIXI UIチーム ・実機で想像通りの見え方になっているか ・実際に触ってみての改善点はないか ・考慮が漏れているフローやバグなどがないか 案件の担当者全員でチェック・調整を重ねていきます [QAとは] ※リリース前に製品としてのクオリティになっているか？ バグ等がないかをチェックして品質の担保をしてくれる部署の方々のこと ここからはQAさんも加わり、担当者みんなで実機チェック！ バグ修正やUI調整があれば企画・UI・エンジニアが対応 実装確認＆調整の流れ データ修正.. 素材修正＆UI再検討.. バグ修正＆UI調整 などなど、リリースできる状態まで調整 遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
20. ©MIXI UIチーム リリース ユーザーの様々な反応がすぐに見れるのはたくさんの利用者がいるモンストならでは！ カラーバリエーション 実際の画面
21. ©MIXI グラフィックチーム
22. ©MIXI グラフィックチーム ・ガチャバナー制作 ・クエストバナー制作 ・公式サイトなどの告知画像やLINE画像 ・コラボ施策バナー制作（コラボロゴ、KV、ガチャバナー、クエストバナー） ・Apple、googleなどのフィーチャー掲載用バナー ・そのほか周年ロゴなど 主な業務内容
23. ©MIXI グラフィックチーム 轟絶（高難易度） ・動くバナーなのでどう動くかも意識 ・ぱっと見で強そう、異形の禍々しさ 周年降臨 ・記念のクエストなのでおめでたい、明るい、楽しい 新コンテンツ（期間限定イベント） ・ロゴで世界観を表現
24. ©MIXI グラフィックチーム 記念ガチャバナー キャンペーンなどで開催されるガチャの作成
25. ©MIXI グラフィックチーム キャラ絵の中でロゴに 取り入れられそうな要素はあるか？ →お札、炎、数珠など 元にするフォントは このキャラには 何が一番合うか？ スマホから見た時に文字が読みにくくないか？ 作成後 チームメンバーや企画に確認、 修正を経て完成！ 難易度に合った強さが出せているか？
26. ©MIXI グラフィックチーム 通常イベント（帯/降臨/★5限定）、超究極、超絶、爆絶、轟絶、守護獣、周年降臨、オラコインなどの種類があります そのほかコラボでは毎回7〜9枚を作成します
27. ©MIXI グラフィックチーム：制作物紹介 TW用バナー JP用バナー 作成中
28. ©MIXI さいごに みなさんに少しでもモンストの仕事や 魅力が伝わっていると嬉しいです
29. ©MIXI ありがとうございました！