個性的で魅力的なモンスターを量産するためのデザインの秘訣と開発手法紹介 ~プリンセスコネクト!Re:Diveにおけるモンスターデザイン制作事例~

510ec964f5d26c2724c883fd7b671e3d?s=47 Cygames
September 05, 2019

個性的で魅力的なモンスターを量産するためのデザインの秘訣と開発手法紹介 ~プリンセスコネクト!Re:Diveにおけるモンスターデザイン制作事例~

2019/09/05 CEDEC 2019

510ec964f5d26c2724c883fd7b671e3d?s=128

Cygames

September 05, 2019
Tweet

Transcript

  1. 1/136

  2. 自己紹介 イラストチーム 2015年に新卒として株式会社Cygamesに所属。 「プリンセスコネクト!」に配属。 現在は、「プリンセスコネクト!Re:Dive」にて モンスターチームのリーダーを担当。 野西 正武 2/136

  3. 自己紹介 アニメーションデザイナー 2014年Cygamesに合流。 現在は「プリンセスコネクト!Re:Dive」において、 絵コンテ、モーション監修、エフェクト制作等 を担当。 高 泰俊 3/136

  4. はじめに ▪プリンセスコネクトRe:Dive(以降、プリコネ)について 前作の『プリンセスコネクト』から大きく進化したアニメRPG 様々な要素が新たに追加 • 魅力的なキャラクター&モーション • ド派手なカットイン演出 • ストーリーアニメ

    等 4/136
  5. プリコネにおけるモンスターの役割 ▪バトルの特徴を作り出す要素 5/136

  6. プリコネにおけるモンスターの役割 ▪世界観を作り出す要素 6/136

  7. プリコネにおけるモンスターの役割 ▪ノーマルクエスト、クランバトル、ストーリーイベント、ルナの塔 etc. 7/136

  8. 合計 200体以上 リリースしていないものを含めるとそれ以上に… 8/136

  9. 課題 9/136

  10. クオリティと量産の両立 10/136

  11. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 11/136

  12. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 12/136

  13. プランナー イラスト プランナー アニメーション イラスト アニメーション アニメーション 発注書 デザイン 字コンテ

    モーション 切り分け/追加パーツ 絵コンテ エフェクト モンスターの基本制作フロー 13/136
  14. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】最後に 目次 14/136

  15. 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 15/136

  16. 16/136 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ

  17. 世界観 17/136

  18. ▪モンスターの知能レベル 低 高 世界観 18/136

  19. 世界観 夏イベントボス:テンタパス ▪モンスターの生態や背景を大事に 19/136

  20. 【発注内容】 世界観 ・海のイベントボスでイカ型 ・バカンスを邪魔してキャラを攫う ・既に海に登場するモンスターと差別化 ・モーションにバリエーションを出す 夏イベントボス:テンタパス ▪モンスターの生態や背景を大事に 20/136

  21. 全身傷だらけ 喧嘩に明け暮れている ウツボを 振り回す乱暴者 身についている 武器は歴戦の証 ピアスの様に拾ったものをつけている 世界観 ▪モンスターの生態や背景を大事に 21/136

  22. キャラクターを攫っていたり↑ モーションの バリエーション→ 世界観 ▪モンスターの生態や背景を大事に 22/136

  23. 世界観 ザコモンスター:エルダークラウド ボスモンスター:ライライ ▪モンスターの関係性を大事に 23/136

  24. ▪モンスターの知能レベル 知能レベルに合わせて身に着けている物のデザインを差別化する 【世界観】まとめ ▪モンスターの生態や背景を大事に デザインから生態や背景が伝わってくるようにする ▪モンスター同士の関係性を大事に 既に登場しているモンスターと関係性を組むと世界観に深みが出る 24/136

  25. 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 25/136

  26. わかりやすいデザイン ▪わかりやすいモチーフ ▪ぱっと見での役割の把握 モチーフ:岩 役割:防御タイプ モチーフ:魔術師 役割:魔法タイプ 26/136

  27. ▪攻撃部位の強調 ▪要素は二つに絞る! 恐竜 電気 深海魚 恐竜 電気 水 〇:シンプルに! ×:わかりにくい!

    わかりやすいデザイン 27/136
  28. 【わかりやすいデザイン】まとめ ▪わかりやすいデザインを わかりやすいモチーフ、パッと見で伝わるデザインを ▪特徴の強調、盛りすぎない 攻撃部位の強調、要素を二つに絞る 28/136

  29. 【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 29/136

  30. アイディアラフ ▪とにかく沢山のアイディアを出すこと。 ▪アイディアラフを整理したり、合わせたり。 30/136

  31. テーマ:森、カンテラ アイディアラフ 31/136

  32. アイディアラフ テーマ:森、カンテラ 32/136

  33. アイディアをブラッシュアップ アイディアラフ テーマ:森、カンテラ 33/136

  34. ①ラフ案だし ②方向性探り ③デザイン詰め ④清書/完成 ボスはさらに多い! アイディアラフ 34/136

  35. 動くことを前提にデザインしていく 35/136

  36. デザイン完成後も動きのチェック! 36/136

  37. 【アイディアラフ】まとめ ▪テーマに基づき沢山のアイディアを出す! どんな種族?どんな性格?どんな攻撃方法? 島クジラ ▪動くことを前提にデザインしていく 37/136

  38. 【1】世界観を大事に 【2】わかりやすさ 【3】アイディアラフ 【4】ユニークな要素 クオリティ面のノウハウ 38/136

  39. ユニークな要素 ▪モチーフの組み合わせ ▪変わった要素を取り入れる 分福茶釜+狸 蟹+鉄球 風船+鳥 39/136

  40. ▪ライデン 敗北時:メスが去ってしまう ▪アニメーションによるキャラ付け ユニークな要素 40/136

  41. ▪エレクトロギガス 敗北時:頭がアフロになってしまう ユニークな要素 ▪アニメーションによるキャラ付け 41/136

  42. 【クオリティ面のノウハウ】まとめ クオリティ 世界観 ・モンスターの知能レベル ・モンスターの生態や背景を大事に ・モンスター同士の関係性を大事に ・わかりやすいデザインを ・攻撃部位の強調、要素を二つに絞る アイディアラフ ・面白いデザインを出す為には

    まず沢山のアイディア ・動くことを前提にデザインしていく ユニークな要素 ・モチーフの組み合わせ ・変わった要素を取り入れる ・アニメーションによるキャラ付け 42/136 わかりやすいデザイン
  43. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ 【3】量産面のノウハウ 【4】アニメーション制作について 【5】まとめ 目次 43/136

  44. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 44/136

  45. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 45/136

  46. デザインルールの設定 役割 強さ 属性 デザインルール 46/136

  47. デザインルールの設定 役割 強さ 属性 デザインルール 迷わない 時間短縮に繋がる 47/136

  48. ▪モンスターの役割 前衛 中衛 後衛 デザインルールの設定 48/136

  49. 前衛:壁役、HP高めのモンスター ▪モンスターの役割 デザインルールの設定 49/136

  50. ▪モンスターの役割 後衛:最も長距離型の遠距離タイプ 一番後ろで特定の場所、キャラに攻撃を仕掛ける デザインルールの設定 50/136

  51. ▪雑魚モンスターの役割 中衛:前衛の後ろに隠れて行動をする厄介なモンスター 特殊な動きをする幅広いモンスターがいる デザインルールの設定 51/136

  52. ▪モンスターの役割 物理 魔法 デザインルールの設定 52/136

  53. ▪モンスターの役割 ザコ ボス デザインルールの設定 53/136

  54. ▪強さの基準 ザコ ベースカラー:3色 デザイン:シンプル ボス ベースカラー:5色 デザイン:複雑 デザインルールの設定 54/136

  55. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 55/136

  56. 側替え 側替え/色替え ▪側替え、色替えで時間短縮 ▪大切なのは差別化 色替え 側替え 56/136

  57. オーク ハイオーク オークリーダー オークチーフ 側替え手法① ▪変わっていく強さ 弱 強 57/136

  58. 弱 強 側替え手法② ▪変わっていく強さ 58/136 オーク ハイオーク オークリーダー オークチーフ

  59. 洞窟 岩地 火山 森林 側替え手法② ▪同じ強さ/地域違い 59/136

  60. 色替えについて ▪大きく色を変えること ▪強さのランクを考えながら色案を出す 元のデザイン 60/136

  61. 色替えについて ▪強さのランクを考えながら色案を出す 暗い色 金色 61/136

  62. 強 弱 色替えについて ▪強さのランクを考えながら色案を出す 元のデザイン 62/136

  63. 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 量産面のノウハウ 63/136

  64. ▪宗教的や文化的に不適切なもの 例:中国国内では出版物、ソフトウェアはドクロの表現は不適切となっている。 なので、中国版では骨類はデザイン修正を行っている。 不適切な表現の回避 64/136

  65. ▪宗教的や文化的に不適切なもの 例:CEROレーティングの対象となる暴力表現 ・出血描写 ・身体の分離/欠損描写 ・死体の描写etc. 人型のモンスターで 指の数が4本 5本に修正 不適切な表現の回避 65/136

  66. 【量産面のノウハウ】まとめ 量産 デザインルールの設定 ・ルールを決めて時間短縮を ・モンスターの役割の把握 側替え/色替え ・デザイン変更のみで時間短縮 ・側替えはデザインを変える ・色替えは色のみを変える 不適切な表現の回避

    ・不適切な表現は避ける ・海外で不適切な表現になってしまう ものも把握しておく 66/136
  67. デザインパートまとめ 67/136

  68. クオリティと量産の両立 プリコネのモンスターを作るうえでの課題 【デザインパート】まとめ 68/136

  69. 【デザインパート】まとめ クオリティ面のノウハウ 量産面のノウハウ 【1】デザインルールを定める 【2】側替えや色替えについて 【3】不適切な表現の回避 【1】世界観 【2】わかりやすさ 【3】アイディアラフを沢山出す 【4】ユニークな要素

    69/136
  70. 【1】モンスターの基本制作フロー 【2】クオリティ面のノウハウ紹介 【3】量産面のノウハウ紹介 【4】アニメーション制作について 【5】最後に 目次 70/136

  71. アニメーションパート 71/136

  72. 「絵コンテ」を軸に、 アニメーション制作について ご紹介します 72/136

  73. プランナー イラスト プランナー アニメーション イラスト アニメーション アニメーション 発注書 デザイン 字コンテ

    モーション 切り分け/追加パーツ 絵コンテ エフェクト 73/136 モンスターの基本制作フロー(再掲)
  74. モンスターの基本制作フロー(再掲) プランナー イラスト プランナー イラスト 発注書 デザイン 字コンテ モーション 切り分け/追加パーツ

    絵コンテ エフェクト アニメーション アニメーション アニメーション 74/136
  75. モーションパートを動画で紹介 75/136

  76. 絵コンテ ▪絵+指示文 ・尺 ・カメラ ・内容 ・追加パーツ (etc...) 76/136

  77. 使用ツール ▪モーション Spine (2Dアニメ制作ツール) ▪エフェクト UnityのParticle System 77/136

  78. 絵コンテ制作の流れ 78/136

  79. モーション発注ミーティング ▪「字コンテ」をもとに、プランナー、イラストレーター、アニメーション デザイナーの三者でミーティング 字コンテ 79/136

  80. ・新規性のあるデザインを目立たせたい! ・このモチーフをギミックに取り入れたい! ・対策必須な技の前に予兆を入れたい! ・高難度バトル専用の演出を入れたい! モーション発注ミーティング 仕様面 デザイン面 ▪「字コンテ」をもとに、プランナー、イラストレーター、アニメーション デザイナーの三者でミーティング 80/136

  81. 仕様への最適化 絵コンテ設計の軸 物量の最適化 ビジュアルの最適化 ・情報の整理 ・シルエット ・レイアウト ・絵のインパクトを保ったまま物量を抑える ・新しい「技」が再現可能か検討 ・欲しい機能、汎用性のある機能実装の提案

    81/136
  82. 仕様への最適化 絵コンテ設計の軸 物量の最適化 ビジュアルの最適化 ・情報の整理 ・シルエット ・レイアウト ・絵のインパクトを保ったまま物量を抑える ・新しい「技」が再現可能か検討 ・欲しい機能、汎用性のある機能実装の提案

    82/136
  83. 【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 83/136

  84. 情報の整理 -最初の作業- 84/136

  85. 「情報の整理」=「文字情報の変換」 字コンテの文字情報 絵コンテにしやすい文字情報 ・展開1(0.5秒) ・展開2(1秒) ・展開3(0.5秒) ・展開4(1秒) ・展開5(1秒) ---必殺技--- ▪「字コンテ」の文字情報を「絵コンテ」にしやすい文字情報に変換する

    85/136
  86. 「情報の整理」の目的 ・展開1(0.5秒) ・展開2(1秒) ・展開3(0.5秒) ・展開4(1秒) ・展開4(1秒) ---必殺技1--- 【1】動作工程のバランスを整え展開をわかりやすくすること 【2】動作の尺を適正な長さにすること 86/136

  87. 各動作を「タメ」「発動」「余韻」に分ける バランス、過不足を調整する 情報の整理①:文字情報の変換 ▪具体的な方法 【1】 【2】 「タメ=予備動作」 「発動」 「余韻」 87/136

  88. 「情報の整理」の目的 ・展開1(0.5秒) ・展開2(1秒) ・展開3(0.5秒) ・展開4(1秒) ・展開4(1秒) ---必殺技1--- 【1】動作工程のバランスを整え展開をわかりやすくすること 【2】動作の尺を適正な長さにすること 「テンタパス」

    88/136
  89. ▪暗転+ボスモンスター以外すべて動作が停止 必殺技:ユニオンバーストとは 89/136

  90. 1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】

    変換前 情報の整理①:文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 90/136
  91. 1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】

    変換前 情報の整理①:文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 91/136
  92. 1. 触手で往復ビンタ【発動】 2. 身体の槍を引き抜き、天高く投げる【タメ】 3. 落ちてきた槍が地面に刺さり爆発【発動】 4. 雄叫びをあげる【余韻】 5. 元の位置に戻る【余韻】

    1. 触手を振り上げる【タメ】 2. 往復ビンタ【発動】 3. 身体の槍を引き抜き構える【タメ】 4. 槍でとどめの一撃【発動】 5. 元の位置に戻る【余韻】 変換前 変換後 情報の整理①:文字情報の変換 【1】各動作を「タメ」「発動」「余韻」に分ける 【2】過不足を調整する 92/136
  93. 【1】整理した動作工程に「尺」を割り当てる 【2】「テンポ感」「迫力」チェック 情報の整理②:尺の割り当て 1.触手を振り上げる【タメ】 2.触手で往復ビンタ【発動】 3.身体の槍を引き抜く【タメ】 4.槍でとどめの一撃【発動】 5.元の位置に戻す【余韻】 変換後 ・・・・

    ・・・・ ・・・ ・・・・ ・・・・ 0.5秒 1.5秒 1秒 1秒 1秒 93/136
  94. 94/xx

  95. モチーフの持つ情報量の差に注意する ▪「尺」に大きく影響する 目からビーム ライオンのオーラ < 95/136

  96. 情報量の大小に注意! ▪「モチーフ」の持つ情報量の差を考慮する 96/136 目からビーム ライオンのオーラ <

  97. 情報の整理 まとめ ・各動作を「タメ」「発動」「余韻」分ける ・過不足を調整する ・整理した動作工程に尺を割り当てる ・「テンポ感」「迫力」チェック ※モチーフの持つ情報量の差に気をつける! 文字情報の変換 尺の割り当て 97/136

  98. 【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 98/136

  99. シルエット -瞬間の視認性を上げる- 99/136

  100. 初動のシルエットに差をつける Attack Skill2 Skill1 Damage 100/136

  101. 初動のシルエットに差をつける ▪特にダメージとの差を意識する Attack Skill2 Skill1 Damage 101/136

  102. Attack Skill2 Skill1 Damage ▪塗りつぶして確認する 初動のシルエットに差をつける 102/136

  103. 初動のシルエットが類似する場合の対処 Skill2 Damage ▪初動に後傾姿勢の「タメ」モーションが入るパターン 103/136

  104. 初動のシルエットが類似する場合の対処 Skill2 Damage 「尺」「テンポ」「エフェクト」 「全体の雰囲気」等 総合的に判断 104/136

  105. Skill2 Damage 初動のシルエットが類似する場合の対処 105/136

  106. 1撃目 2撃目 3撃目 攻撃部位を「誇張」する 106/136

  107. 攻撃部位を「誇張」する ▪黒く塗りつぶして確認する 107/136

  108. 攻撃部位を「誇張」する 108/136

  109. 109/xx

  110. 【1】情報の整理 【2】シルエット 【3】レイアウト ビジュアルの最適化 110/136

  111. レイアウト -画面に変化を加える絵作り- 111/136

  112. ユニオンバーストで使える3つの機能 112/136

  113. 絵コンテは「広がり」「奥行き」「方向」を意識 カメラワーク 場の変更 カットチェンジ ユニオンバーストで使える3つの機能 113/136

  114. 絵コンテ実例:「広がり」「奥行き」「方向」 114/136

  115. 115/xx

  116. 構造の複雑化に耐えうる絵コンテを目指す モーションデータ 完成形 116/136

  117. 完成形のイメージを明確に伝える 情報の整理 • 文字情報の変換 • 尺の割り当て シルエット • 初動に差をつける •

    攻撃部位の誇張 レイアウト • カメラワーク • 場の変更 • カットチェンジ ▪ビジュアルの最適化 117/136
  118. 実際の制作現場における 絵コンテの役割 118/136

  119. 実制作における絵コンテの役割 絶対に守らなければならない決まりごと 「質の高いコミュニケーション」の媒体 119/136

  120. 実制作における絵コンテの役割 担当者間のチームワークで プリコネのモンスター演出は成り立っています 120/136

  121. 最後に 121/136

  122. 振り返り 【アニメーション制作について】 【1】情報の整理 【2】シルエット 【3】レイアウト 【量産面のノウハウ】 【1】デザインルールの設定 【2】側替え/色替え 【3】不適切な表現の回避 【クオリティ面のノウハウ】

    【1】世界観 【2】わかりやすいデザイン 【3】アイディアラフ 【4】ユニークな要素 122/136
  123. 最後に モンスターチームは プリコネが大好きです! 123/136