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

Slide 1

Slide 1 text

1/136

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

課題 9/136

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

プランナーイラストプランナーアニメーションイラストアニメーションアニメーション発注書デザイン字コンテモーション切り分け/追加パーツ絵コンテエフェクトモンスターの基本制作フロー 13/136

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

世界観 17/136

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

■攻撃部位の強調 ■要素は二つに絞る！恐竜電気深海魚恐竜電気水〇：シンプルに！ ×：わかりにくい！わかりやすいデザイン 27/136

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

【クオリティ面のノウハウ】まとめクオリティ世界観・モンスターの知能レベル・モンスターの生態や背景を大事に・モンスター同士の関係性を大事に・わかりやすいデザインを・攻撃部位の強調、要素を二つに絞るアイディアラフ・面白いデザインを出す為にはまず沢山のアイディア・動くことを前提にデザインしていくユニークな要素・モチーフの組み合わせ・変わった要素を取り入れる・アニメーションによるキャラ付け 42/136 わかりやすいデザイン

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

デザインパートまとめ 67/136

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

モーションパートを動画で紹介 75/136

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

「情報の整理」＝「文字情報の変換」字コンテの文字情報絵コンテにしやすい文字情報・展開１（0.5秒）・展開２（1秒）・展開３（0.5秒）・展開４（1秒）・展開５（1秒） ---必殺技--- ■「字コンテ」の文字情報を「絵コンテ」にしやすい文字情報に変換する 85/136

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

■暗転＋ボスモンスター以外すべて動作が停止必殺技：ユニオンバーストとは 89/136

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

94/xx

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

１撃目２撃目３撃目攻撃部位を「誇張」する 106/136

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

109/xx

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

115/xx

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

完成形のイメージを明確に伝える情報の整理 • 文字情報の変換 • 尺の割り当てシルエット • 初動に差をつける • 攻撃部位の誇張レイアウト • カメラワーク • 場の変更 • カットチェンジ ■ビジュアルの最適化 117/136

Slide 118

Slide 118 text

実際の制作現場における絵コンテの役割 118/136

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

最後に 121/136

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

最後にモンスターチームはプリコネが大好きです！ 123/136