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

Transcript

1. ©MIXI
   モンスターストライク
   モンストの組織とUIデザイナー業務の紹介
   ©MIXI
   

   View Slide

2. ©MIXI
   モンストの紹介
   

   View Slide

3. みんなでワイワイ
   ひっぱり
   ハンティングRPG
   世界累計利⽤者数
   5,800万⼈
   『モンスト』って？
   2022年10月で
   9周年
   ※2022年8月時点
   ©MIXI
   

   View Slide

4. ©MIXI
   組織について
   

   View Slide

5. ©MIXI
   モンストの組織
   ゲーム運営部
   モンスト事業本部
   モンストの開発・運営 キャラクター/背景/サウンド/映像
   などの制作
   プロモーションやマーケティング
   各種イベントなど
   コンテンツクリエイション室
   マーケティング部 新規事業開発部
   モンストシリーズの新規開発
   

   View Slide

6. ©MIXI
   モンストの組織
   ゲーム運営部
   企画
   （4グループ）
   QA
   解析
   コラボ推進
   UI/UXデザイン
   UC
   クライアント
   （2グループ）
   サーバ
   （2グループ）
   ゲーム運営部は13グループの大きな組織
   ココ！
   

   View Slide

7. ©MIXI
   モンストの組織
   UI 第1/第2チーム
   グラフィックチーム
   VFXチーム
   UI/UXデザイングループ
   UIUXの設計/制作業務
   バナーやロゴなどグラフィック制作業務
   ゲームにおける演出制作業務
   

   View Slide

8. ©MIXI
   UIチーム
   

   View Slide

9. ©MIXI
   UIチーム
   ・各施策のUIUX設計と制作（遷移図やデザイン素材）
   　追加機能、コラボ施策、UI改善施策など
   主な業務内容
   

   View Slide

10. ©MIXI
    UIチーム
    UI担当箇所
    キックオフ
    企画方向性決め
    遷移図作成
    チーム・企画確認
    素材データ・レイアウト作成
    実装確認・調整
    QA・リリース
    Ver.開発スタート・案件へのアサイン
    キックオフ
    企画方向性決め
    遷移図/画面仕様の作成
    チーム・企画確認
    素材データ・レイアウト指示書作成
    実装確認・調整
    QA・リリース
    Ver.開発スタート・案件へのアサイン
    企画〜リリースまでの開発フロー
    大体1.5〜2ヶ月のサイクルの中で
    企画、エンジニアとやりとりをしながら開発をしています
    

    View Slide

11. ©MIXI
    UIチーム
    ストライカーカード
    施策
    

    View Slide

12. ©MIXI
    UIチーム
    ストライカーカードって？
    ありがとう！
    いつでもキャラ集め
    手伝うよ！
    ♪
    ♫ SNS等でシェア
    どんなカードに
    しようかな...
    離れていても
    コミュニケーションを活発に
    ストライカー名

    称号

    フレンドID

    実績

    キャラクター

    ゲーム内でフレンドになるときに必要なID 

    ユーザーが自由につけられる称号、 

    ミッション等をクリアすることによって選べる種類が増える 

    ユーザーのこれまでの実績の中から 

    ３つ選んで表示できる 

    ゲーム内で使用するユーザー名 
 フレンドキャラに設定しているキャラ
    を表示

    運極キャラ多くて
    すごい！いいなー
    

    View Slide

13. ©MIXI
    UIチーム
    自分だけのストライカーカードを作って、シェアする体験を作りたい！
    企画要件
    

    View Slide

14. ©MIXI
    UIチーム
    遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
    UI制作フローに入る...
    前に
    

    View Slide

15. ©MIXI
    UIチーム
    自分だけのストライカーカードを作って、シェアする体験を作りたい！
    企画要件
    なんでこの機能が必要なんだっけ...？
    モンストらしい
    カードデザインってなんだろう？
    カードデザインを見せながら
    操作領域を確保するには...？
    まず、要件を分解、整理して自分なりに落とし込む
    この機能で求められているものって...？ ・・・

    ・・・

    要件の前提から、デザインについての細かいあれこれなど自分の案件理解を深める為に大切な作業
    

    View Slide

16. ©MIXI
    UIチーム
    ・要件定義
    ・UI構成（細かいデザインは仮のもの）
    ・フローの条件分岐
    ・内部処理のタイミング
    整理した要件をもとに
    などをまとめます
    ストライカーカードの遷移図の一部
    遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
    

    View Slide

17. ©MIXI
    UIチーム
    ...などなど、この遷移図が開発中の共通認識を持って進めるための
    大事な資料になるため、様々な観点からFBをしてもらいます
    UIチーム内確認＆FB修正
    企画確認＆FB修正
    遷移図完成！
    案件担当者で集まって遷移図の読み合わせ
    UIチームでOKが出たら
    企画確認へ
    企画FBがあれば
    反映しUIチームで再検討！
    確認、修正、再検討を繰り返し...
    確認の流れ
    FB修正が完了したら...
    遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
    ・UIのガイドラインに沿ったものになっているか
    ・要件を満たしたUI、フローになっているか
    ・実装視点で現実的な案になっているか
    ・ユーザーがつまづきそうなところはないか
    ・ユーザーにサプライズを与えられるものになっているか
    ・今後の運用を見据えた機能の拡張性
    

    View Slide

18. ©MIXI
    UIチーム
    ・デザイン素材作成
    ・UIに使用している素材、レイアウト指示を記載
    レイアウトは遷移図の段階で完成に近いものを作成しますが、
    アイコン等は遷移完成後に制作することが多いです
    レイアウト指示書
    素材データ
    遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
    

    View Slide

19. ©MIXI
    UIチーム
    ・実機で想像通りの見え方になっているか
    ・実際に触ってみての改善点はないか
    ・考慮が漏れているフローやバグなどがないか
    案件の担当者全員でチェック・調整を重ねていきます
    [QAとは]
    ※リリース前に製品としてのクオリティになっているか？
    バグ等がないかをチェックして品質の担保をしてくれる部署の方々のこと
    ここからはQAさんも加わり、担当者みんなで実機チェック！
    バグ修正やUI調整があれば企画・UI・エンジニアが対応
    実装確認＆調整の流れ
    データ修正.. 素材修正＆UI再検討.. バグ修正＆UI調整
    などなど、リリースできる状態まで調整
    遷移図作成 チーム・企画確認 素材データ＆レイアウト指示書作成 実機確認＆調整
    

    View Slide

20. ©MIXI
    UIチーム
    リリース
    ユーザーの様々な反応がすぐに見れるのはたくさんの利用者がいるモンストならでは！
    カラーバリエーション
    実際の画面
    

    View Slide

21. ©MIXI
    グラフィックチーム
    

    View Slide

22. ©MIXI
    グラフィックチーム
    ・ガチャバナー制作
    ・クエストバナー制作
    ・公式サイトなどの告知画像やLINE画像
    ・コラボ施策バナー制作（コラボロゴ、KV、ガチャバナー、クエストバナー）
    ・Apple、googleなどのフィーチャー掲載用バナー
    ・そのほか周年ロゴなど
    主な業務内容
    

    View Slide

23. ©MIXI
    グラフィックチーム
    轟絶（高難易度）
    ・動くバナーなのでどう動くかも意識
    ・ぱっと見で強そう、異形の禍々しさ
    周年降臨
    ・記念のクエストなのでおめでたい、明るい、楽しい
    新コンテンツ（期間限定イベント）
    ・ロゴで世界観を表現
    

    View Slide

24. ©MIXI
    グラフィックチーム
    記念ガチャバナー
    キャンペーンなどで開催されるガチャの作成
    

    View Slide

25. ©MIXI
    グラフィックチーム
    キャラ絵の中でロゴに
    取り入れられそうな要素はあるか？
    →お札、炎、数珠など
    元にするフォントは
    このキャラには
    何が一番合うか？
    スマホから見た時に文字が読みにくくないか？
    作成後
    チームメンバーや企画に確認、
    修正を経て完成！
    難易度に合った強さが出せているか？
    

    View Slide

26. ©MIXI
    グラフィックチーム
    通常イベント（帯/降臨/★5限定）、超究極、超絶、爆絶、轟絶、守護獣、周年降臨、オラコインなどの種類があります
    そのほかコラボでは毎回7〜9枚を作成します
    

    View Slide

27. ©MIXI
    グラフィックチーム：制作物紹介
    TW用バナー
    JP用バナー
    作成中
    

    View Slide

28. ©MIXI
    さいごに
    みなさんに少しでもモンストの仕事や
    魅力が伝わっていると嬉しいです
    

    View Slide

29. ©MIXI
    ありがとうございました！
    

    View Slide