Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ミクシル
December 07, 2022

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

ミクシル

December 07, 2022
Tweet

More Decks by ミクシル

Other Decks in Design

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 

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

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

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

    3つ選んで表示できる 

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

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

    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