『呪術廻戦 ファントムパレード』ADV制作事例 ～会話シーンを「飽きさせない」画作り術～【CAGC2024】

アニメで大人気の『呪術廻戦』の世界をスマートフォンでもドラマチックに再現するための工夫に焦点を当てます。
再現度高く、面白さを担保するためにどのような仕組みを取り入れたのか。
制作フローと体制、実際のデータ例をもとにご紹介させていただきます。

https://cagc.cyberagent.co.jp/2024/session/index.html?id=Tg8aCGuF

©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD.
Copyright © CyberAgent, Inc.

Transcript

1. 『呪術廻戦 ファントムパレード』ADV制作事例 　～会話シーンを「飽きさせない」画作り術～ 1 呪術廻戦 ファントムパレード 中山 祐治 アートディレクター 安部 裕香 Live2Dアニメーター
2. 自己紹介 2
3. 自己紹介 3 ❖ 中山 祐治　Nakayama Yuji 株式会社サムザップ　アートディレクター 2020年サムザップ入社。 デザイナー、イラストレーターを経て アートディレクターを努めています。 『ロンドン迷宮譚』のリリースや 『呪術廻戦 ファントムパレード』 などに立ち上げから参画。 クリエイティブ全般の技術向上やディレクションを担当。
4. 自己紹介 4 ❖ 安部 裕香　Abe Yukari 株式会社サムザップ　Live2Dアニメーター 2012年サムザップ入社。 イラストレーター、アートディレクターを経て Live2Dアニメーターに転身。 『このすばらしき世界に祝福を！ ファンタスティックデイズ』 『呪術廻戦 ファントムパレード』などに立ち上げから参画。 Live2D制作とちびキャラアニメーションを担当。
5. 『呪術廻戦 ファントムパレード』について 5
6. 6 『呪術廻戦 ファントムパレードは、 2018年より「週刊少年ジャンプ」 （集英社）にて連載中の 芥見下々（あくたみげげ）氏による 人気漫画を原作としたTVアニメ 『呪術廻戦』を元にした、作品初の スマートフォンゲームです。 TVアニメ『呪術廻戦』の第1期の物語を 追体験できるだけでなく、福岡を舞台にした 『ファンパレ』オリジナルの ストーリーが楽しめる コマンドバトルRPGとなっています。
7. 『ファンパレ』開発指針 7
8. 1.スマホゲーム史上最高峰の2Dグラフィックで 　キャラクターの魅力を表現 2.奥深さを感じるゲームシステムを 　ストレス無く楽しめる手触りで提供 3.ゲームならではの要素で今までにない 　『呪術廻戦』を体験できる 8
9. 本日のアジェンダ 9
10. 本日のアジェンダ 10 1. 制作フローのご紹介 2. Live2Dキャラクターの魅力的な仕草の再現について 3. ノーマルマップとライティングについて 4. ADVでのアニメ再現の工夫と演出効果 5. まとめ
11. 🚩Attention 11 • 本スライドで使用している画像及び動画については 一部本セッション用に用意したものもありますので、 ゲーム本編で使用しているものとは異なる場合がございます。 • 開発中のものや意図しない状態のものが含まれているため、 本来のキャラクター設定や見た目と異なる部分があるかと思いますが、 ご了承ください。
12. 制作フローのご紹介 12
13. 13 ADVパート（ストーリーパート）の 制作フローは以下の通りです。 制作フローのご紹介 シナリオ制作 発注書作成 スクリプト組み込み 確認会 リソース制作
14. ADVパート（ストーリーパート）の 制作フローは以下の通りです。 まずはじめに、 シナリオ班が作成したストーリーから 必要なリソースを洗い出し、 Live2D、シネマティックシーン、背景、SE等の 様々な発注書を作成します。 14 制作フローのご紹介 シナリオ制作 発注書作成 スクリプト組み込み 確認会 リソース制作
15. 15 そして各セクションごとに 必要なリソースを期間内に作成し、 納品を行います。 制作フローのご紹介 シナリオ制作 発注書作成 スクリプト組み込み 確認会 リソース制作
16. 16 その後、納品された様々なリソースを使用して スクリプト班がUnityへ組み込みを行います。 サムザップではポスプロの設定や ライティングもスクリプト班が設定しています。 制作フローのご紹介 シナリオ制作 発注書作成 スクリプト組み込み 確認会 リソース制作
17. 17 確認会はADVチーム全体で行います。 ・読みやすさやテンポ、流れに違和感がないか ・表現としてもっと工夫できる箇所はないか ・画作りのクオリティチェック 細部までチェックした上で、必要に応じて さらなるブラッシュアップを徹底して行います。 制作フローのご紹介 シナリオ制作 発注書作成 スクリプト組み込み 確認会 リソース制作
18. Live2Dキャラクターの 魅力的な仕草の再現について 18
19. 19 今作のLive2Dでは用途を分けた 多種多様なモーションを作成し 様々な感情の表現を可能にしています。 モーションの組み合わせ 汎用 固有 表情 自動 （まばたき、呼吸） ベース 上書き 最終フレームを維持したまま
20. 20 今作のLive2Dでは用途を分けた 多種多様なモーションを作成し 様々な感情の表現を可能にしています。 また、一部のパーツの表示切替え等 細かな表現にも対応するため、 付け足し用のカスタムモーションも作成し スクリプト側でバリエーション豊かな設定ができ るような仕組みにしております。 モーションの組み合わせ ベース 上書き 付け足し 汎用 固有 表情 自動 （まばたき、呼吸） 最終フレームを維持したまま 必要に応じて カスタムの追加
21. 21 具体的な内容はこちらになります。 設定時に判別し易いよう、モーション名の頭に種類番号をつけています。 モーションの種類 モーションの種類 モーション名 内容 ベースモーション 00_〇〇 05_〇〇 目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション
22. 22 具体的な内容はこちらになります。 設定時に判別し易いよう、モーション名の頭に種類番号をつけています。 モーションの種類 モーションの種類 モーション名 内容 ベースモーション 00_〇〇 05_〇〇 目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション 自動 10〜15_Auto_〇〇 40～45_Auto_Mouse まばたき、呼吸等自動で繰り返し動くものや 音声に連動するリップシンクの設定 [10_Auto_Eye_◦◦] [15_Auto_Breath] [40_Auto_Mouse_◦◦]
23. 23 具体的な内容はこちらになります。 設定時に判別し易いよう、モーション名の頭に種類番号をつけています。 モーションの種類 モーションの種類 モーション名 内容 ベースモーション 00_〇〇 05_〇〇 目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション 自動 10〜15_Auto_〇〇 40～45_Auto_Mouse まばたき、呼吸等自動で繰り返し動くものや 音声に連動するリップシンクの設定 [10_Auto_Eye_◦◦] [15_Auto_Breath] [40_Auto_Mouse_◦◦] 表情 20_Ex_〇〇 25_Ex_〇〇 表情を1fのみ設定した物、上書きして使うもの 25はキャラ固有の表情
24. 24 具体的な内容はこちらになります。 設定時に判別し易いよう、モーション名の頭に種類番号をつけています。 モーションの種類 モーションの種類 モーション名 内容 ベースモーション 00_〇〇 05_〇〇 目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション 自動 10〜15_Auto_〇〇 40～45_Auto_Mouse まばたき、呼吸等自動で繰り返し動くものや 音声に連動するリップシンクの設定 [10_Auto_Eye_◦◦] [15_Auto_Breath] [40_Auto_Mouse_◦◦] 表情 20_Ex_〇〇 25_Ex_〇〇 表情を1fのみ設定した物、上書きして使うもの 25はキャラ固有の表情 カスタム 30_Cus_〇〇 ・顔影のオンオフ ・目を開ける閉じる ・汗、頬染 ・傷、負傷ON、OFF ・特定のパーツの ON、OFF
25. 25 汎用的な動きについてはタイプを分けて モーションを作成し、流用しています。 そこから更に微妙な性格の差を出すために キャラごとに動きの幅を調整します。 右図は一例となります。 キャラクターのベースタイプの振り分け pop wild cool 虎杖、パンダ 東堂、夜蛾 伏黒、七海 smart flesh 釘崎、西宮 真希、冥冥
26. 26 キャラクターのベースタイプの振り分け 「尋ねる」の動きを、タイプごとでこのように差別化しています。 Pop Cool Wild
27. 27 「否定する」「頷く」等を同タイプで流用できるよう汎用として作成しています。 （ポージングや細かなタイミングは、キャラの性格に合わせて調整しています） ベースモーション例 否定する 頷く
28. 28 「拳を合わせる」「頭をかく」等、印象的なキャラの動きを固有としています。 固有モーション例 拳を合わせる 頭をかく
29. ベースモーションに様々な表情を組み合わせることで、限りあるリソースから シリアスからギャグまで様々な感情を表現しています。 29 表情モーションの組み合わせ例
30. 30 ADVではよりリアルな会話を再現するため、 母音や音声波形に応じて口の形状も変化をする仕様になっております。 口の開閉について ※開発当時はLive2D Cubismに リップシンク機能がなかったため、 このような設定で 対応しております。 あ え い お う 閉じ （デフォルト）
31. 31 この開閉については、キャラごとに細かく口の形状を調整し、 こだわって作成しています。 口の開閉について 【あ】 縦にも横にも一番大きい口 【お】 「あ」よりも横に少し窄めた口 【え】 「あ」よりも縦に少し閉じた口 【う】 「お」よりもさらに窄めた口 【い】 歯を軽く閉じた口　　 【閉じ】 口と歯が閉じている状態
32. ノーマルマップとライティングについて 32
33. ノーマルマップを利用した画作り 33 ADVパートにおいて、従来のADV及び2D表現のクオリティーを 超えるような画作りができないかという課題がありました。 その中で、背景の環境の光などを２Dの素材に影響を受けさせ 疑似的にライティングを当てるような仕組みにできれば、 より２D特有の平面感をなくすことができるのではないかと考えました。 そこで今回採用したのが「ノーマルマップ」です。 「ノーマルマップ」とは法線マップとも言い、 法線のベクトル情報を使って３Dモデルの凸凹表現をするのに用いられています。 その仕組みを２Dに適応させ、疑似的に２D素材にも凹凸の情報を持たせることで ライティングの影響を受けさせることに成功しました。 このセクションではこの「ノーマルマップ」を採用するのに 工夫した点や新たに生まれた課題や効果を実例を元に説明させていただきます。
34. 34 ノーマルの制作手順は右図のようなフローで 制作しております。 Live2Dで生成したアトラステクスチャを 「lagher」というノーマルマップを 自動生成できるツールにて書き出し 今作で使用しているLive2Dの仕様に合わせて 余計な凹凸表現をなくすように 生成されたノーマルマップをレタッチ 最終的な見た目、ライトの当たり具合を確認し 最終調整を行い完成 ノーマルマップ制作方法 レタッチ 完成 Lagher Photoshop unityで見た目のチェック 自動生成 unity
35. ノーマルマップの効果 35 動画のように背景に合わせた光の影響がLive2Dのキャラに適応されている状態になり より背景と馴染み臨場感のある効果になりました。
36. 検証段階での課題 36 今作はLive2Dを先行して制作し、ブラッシュアップの段階で取り入れた手法のため 現在の仕様の中でのノーマルマップの仕様・ライトの設定が課題でした。 主な課題は２点 ・Live2Dの仕様に合わせたノーマルマップ制作 ・理想とするライティング表現にならない この課題の解決事例を紹介させていただきます。
37. 課題「Live2Dの仕様に合わせたノーマルマップ制作」 37 自動生成したノーマルマップだと、アトラステクスチャにあるパーツごとに 法線が描かれるため下図のような見え方になり余計な凹凸が多い画になってしまう
38. 課題「Live2Dの仕様に合わせたノーマルマップ制作」 38 課題解決として、Live2Dのパーツごとに反応させたいところだけ法線情報を残しつつ 基本的にシルエットの外側を主に反応させるように調整を行うことで 少し立体感を残しつつ理想に近い表現にすることができました
39. 課題「Live2Dの仕様に合わせたノーマルマップ制作」 39 調整前 調整後
40. 課題「理想とするライティング表現にならない」 40 まずこの課題の「理想」としては、左図のような背景に対してキャラの一部だけが反応し キャラの立ち位置に合わせて色味や光の当たり方も変わるというものでした。 右図は開発途中のもので、なかなか左図のような表現に近づけることが困難でした。
41. 課題「理想とするライティング表現にならない」 41 そこで発光(加算)の仕組みをエンジニアさんと細かく見直し、キャラへの反応を確認しながら 調整を行い、左図のようにライトを複数設置することで細かい色の変化と環境に適した色味の変化を 可能にすることができました。
42. ADVでのアニメ再現の工夫と演出効果 42
43. 43 従来のリソースが限られたシンプルなADVだと、 テキストの情報が多くなり、迫力のある原作漫画やアニメに比べ 紙芝居のような印象になりがちに… 開発初期の課題
44. 44 そこで、アニメ演出経験のあるシナリオライターを主軸に構成。 原作やアニメの迫力のあるシーンをADVでどのように表現するかを日々検討し シナリオ＆演出のクオリティアップに注力しました。 開発初期の課題
45. ADVチェック時はスクリプターの他、シナリオライター、アートディレクター、 アニメーターなど制作に関わるメンバーを集めて確認を行いました。 これによりより細やかなチェックと相談が可能となり、テンポを良くするための 台詞の追加・カットが即座に判断できるのは非常に効果的でした。 45 ADVのチェック体制について シナリオライター アートディレクター アニメーター 音の付け方、間の撮り方、カメラワーク等、 全体の演出をチェック。 場合によってはシナリオ調整も行う。 主に「画面全体のライティング」と 「シネマティックシーン」をチェック。 ポスプロ、エフェクトなどの調整を行う。 主に「Live2D表現」をチェック。 モーションや表情確認を行い、演出や立ち位置に 合わせて調整なども担当。 スクリプター ADV制作や演出レギュレーションの作成、演出要 望に対して技術的な面での提案、エンジニアとの 連携を行う。
46. 46 台詞のカットについては、気持ちの良いテンポ感を重視して判断をしていきました。 ADVの演出により省ける台詞やト書き部分も大幅にカットしています。 ADVのテンポ感について
47. 47 演出についてもアニメ演出をもとに研究を重ね、 エンジニアを交えてADVチーム一丸となり表現方法を工夫しました。 ここからは、アニメ演出をADVならではの手法で反映した例を 紹介させていただきます。 ADVならではの演出
48. Unityでポストエフェクトを導入することで、アニメの撮影処理に近づけました。 【1番目：プレーン】 Live2D、背景、エフェクトを それぞれ配置した状態です。 【2番目：ポストエフェクトON】 コントラストや彩度、リフトガンマゲインで 全体の色味をアニメに近づけています。 （特に呪術は色味が独特なのでかなり効果的） また、下が暗くなるようなスクリーンを 乗せることで顔周りに視線誘導しています。 【3番目：ライトON】 背景の環境光をLive2Dモデルに 反映するためのライトです。 ノーマルマップはこのライトで 反応しています。 48 具体的な演出例：撮影処理
49. Unityでポストエフェクトを導入することで、アニメの撮影処理に近づけました。 49 具体的な演出例：撮影処理 【1番目：プレーン】 Live2D、背景、エフェクトを それぞれ配置した状態です。 【2番目：ポストエフェクトON】 コントラストや彩度、リフトガンマゲインで 全体の色味をアニメに近づけています。 （特に呪術は色味が独特なのでかなり効果的） また、下が暗くなるようなスクリーンを 乗せることで顔周りに視線誘導しています。 【3番目：ライトON】 背景の環境光をLive2Dモデルに 反映するためのライトです。 ノーマルマップは このライトで反応しています。
50. ダイナミックなカメラの動きと被写界深度を工夫することで、 より迫力のあるADVを目指しました。 50 具体的な演出例：カメラの工夫 ここぞというシーンでは、通常時のアップより更 にLive2Dの顔周りにぐっとカメラを寄せ、被写界 深度で背景をぼかすことで没入感が出るよう工夫 しています。
51. ダイナミックなカメラの動きと被写界深度を工夫することで、 より迫力のあるADVを目指しました。 51 具体的な演出例：カメラの工夫 戦闘シーンではダイナミックかつ多めにカメラを 動かすことで、ADVだと表現しづらい臨場感、ス ピード感を出すように工夫しています。
52. 原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 52 具体的な演出例：あえて表情を見せない、感情を読ませない演出 アニメでは八十八橋での特級との戦いで傷つき血 を流し倒れ、ぼーっとしている伏黒が描写されて いました。 ADVでは伏黒が倒れる表現が難しく、そのまま棒 立ちでチープな演出になることを避けるため、 あえて口元のみ→空を表示させ、エモさを出すよ うにしました。
53. 原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 53 具体的な演出例：あえて表情を見せない、感情を読ませない演出 アニメでは悔しそうな口元を見せた後で座った状 態で顔ふせる演出がありますが、 ADVでは暗転させあえてまったく真依の顔を見せ ないことでエモさをだしています。
54. 原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 54 具体的な演出例：あえて表情を見せない、感情を読ませない演出 アニメでは虎杖の苦しそうな顔を見せていますが、 ADVでの表現が難しかったため 下手に表現するよりも一切顔を見せず、 虎杖の環境（相手の強攻撃エフェクトや回想シーン） を詳細に見せることで、 今の虎杖の心情を想像してもらうようにしています。
55. 原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 55 具体的な演出例：あえて表情を見せない、感情を読ませない演出 こちらはアニメに合わせた演出ですが、虎杖の台 詞途中でカメラを吉野順平に写しています。 虎杖よりも、「虎杖の意見を聞いて吉野の考えが 変わる」ことがポイントのシーンなので、 話者ではなくあえて順平の反応を見せています。 ここに限らず、ADVでは話者よりも「その発言で 表情を変える人」や「その発言で言及されている 人」にフォーカスを当てて、映像ならではの手法 で情報量に厚みが出るよう意識しています。
56. 「ストーリーの山場」、「キャラクターの見せ場」この２つが重なり、 かつ『スチルで表現するだけでは物足りないシーン』だった時に シネマティックシーンを使用しています。 　【例】キャラクターが初登場した時、戦闘中に技を使用する時、強大なボスが現れた時など 山場が連続するストーリーもありますが、その際は全体を通して 読者が飽きないタイミングを探り、シネマティックシーンの使用 箇所を制限することも多いです。 詳しくは別セッションの にてご紹介しておりますので、ご興味がある方は ぜひアーカイブをご覧いただけますと幸いです。 『呪術廻戦 ファントムパレード』ゲームライズしたADV表現 〜「シネマティックシーン」制作のこだわりと実現への道のり〜 56 具体的な演出例：シネマティックシーンを使う判断について
57. まとめ 57
58. • Live2Dキャラクターの魅力的な仕草の再現について ◦ 組み合わせし易いモーション構造で様々な感情の表現を可能に ◦ 母音や音声波形に応じた口形状の変化でリアルさを再現 • ノーマルマップとライティングについて ◦ 背景の環境光の影響を受けた臨場感のある表現が可能に ◦ ノーマルマップの適応でよりリッチ感のあるテイストを再現 • ADVでのアニメ再現の工夫と演出効果 ◦ シナリオは「気持ちの良いテンポ感」を重視 ◦ ポスプロを使った撮影処理でリッチな画作りを実現 ◦ ADVならではの手法で原作のエモーショナルな「余韻」を再現 まとめ 58
59. 59 ご清聴ありがとうございました ©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD.