未経験者でもできる！UE4を活用した2Dカラーイラスト作成法【UE4 Manga Anime Illustration Dive Online】

未経験者でもできる！ UE４を活用した ２Ⅾカラーイラスト 作成法 あかざ (イラストレーター /キャラクターデザイナー )

自己紹介 あかざ イラストレーター キャラクターデザイナー https://twitter.com/akaza2sox ・イラストレーター /キャラクターデザイナー歴 20年 ・KADOKAWA「天華百剣」陸奥守吉行、岡田切吉房キャラクターデザイン ・Yostar「Revived Witch」EN版PVイラスト ・他、ラノベの挿絵や個人画集、グッズ、雑誌の表紙イラストなど多数 ・十数年、美少女ゲーム業界でキャラデザ・原画・ディレクションなどを行う ・現在、某一般ゲーム会社でキャライラスト監修などを行う ・行き詰っていた自身の表現の幅を広げるため、表現豊富なゲームエンジンを 活用することで活路を見出す

• https://twitter.com/akaza2sox

自己紹介 そもそもなぜUE4でイラストを作成しようと思ったのか ・背景が苦手 ・3Dを使用して背景を作成したい ・できれば3Dを補助としてではなく、多少加工しただけでそのまま イラストとして使用できるカラー背景を手に入れられないか？ ・3DCG作成ツールだけだと、リッチな表現へ辿り着くまで、覚えることが多い

自己紹介 要は楽がしたい ※ただし、楽をするための努力は惜しまないという思考のもとで、です

自己紹介 そこで出会ったのがUE4 ・ゲームエンジンで簡単にリッチな表現が手に入る ・無料 ・モデルを作れなくてもアセットがある

今回の講演の主な対象者 ・2Dカラーイラストを描く方 ・背景が苦手な方 ・UE4未経験の方 ・3DCG作成未経験の方 使用ソフト ・Unreal Engine 4 ・CLIP STUDIO(or Photoshop)

アジェンダ 下準備 ・おすすめテンプレート ・操作画面をイラストツールに置き換えて解説 ・簡易的なモデルを配置 3つの機能紹介 ・ディレクショナルライト ・ボリュメトリッククラウド ・指数関数的ハイトフォグ アセットについて ・商用利用可能！魅力的な公式無料アセット ・アセット導入方法 ・公式以外のお気に入りアセット紹介 実例 ・イラストコンセプト ・モデル作成 ・UE4でレイアウト ・レタッチ ・キャラ作画 ・仕上げ 総括 ・所感

下準備 おすすめテンプレート

下準備 おすすめテンプレート「サードパーソン」 「ゲーム」 を選択 ここはいったん デフォルトのままで OK 「サードパーソン」 を選択 編集画面が 開けました！

下準備 おすすめテンプレート「サードパーソン」 人や階段のモデルがデフォルトで入っているので それを大きさの基準に

下準備 操作画面をイラストツールに置き換えて解説

下準備 操作画面をイラストツールに置き換えて解説 ①アクタ ↓ ツール ②コンテンツブラウザ ↓ 素材の エクスプローラー ③アウトライナ ↓ レイヤー一覧 ④詳細パネル ↓ ツール プロパティ

下準備 Tips 画面左下「コンテンツブラウザ」 タブのオレンジ色のアイコンを 押す 素材のエクスプローラーが開く

下準備 レベル ↓ キャンバス 操作画面をイラストツールに置き換えて解説 上のツールバーに色々ありますが いったんこの 2つだけで事足ります 影を確定させる機能ですが 後で説明します

下準備 簡易的なモデルを配置

下準備 Tips 簡易的なモデルを配置 その前に… アウトライナ（レイヤー一覧）にある 今回使用しないものを削除します ・「DocumentationActor1」 ・「NetworkPlayerStart」 ・「SkySphereBlueprint」 ・「TextRenderActor」 以上をDeleteで削除 ※「SkySphereBlueprint」は綺麗な空なのであっても良 いのですが、あとで説明するライトの反映具合がわかり にくいので、今回はあえて削除しています。

下準備 簡易的なモデルを配置 こちらに注目！ ドラッ グ＆ ドロッ プ モデルを配置します。配置の仕方は簡単。モデルをドラッグ＆ドロップするだけです。 試しに「キューブ」を配置してみましょう。

下準備 モデルの移動 簡易的なモデルを配置 モデルの回転 モデルの拡縮

下準備 簡易的なモデルを配置 試しにビル群を作成してみましょう。キューブやシリンダーを縦に引き 伸ばし、ランダムに配置していきます。

下準備 簡易的なモデルを配置 マテリアル ↓ 光と質感が反映されるテクスチャ 次にマテリアルを設定していきます。 コンテンツブラウザの「StarterContent」→「Materials」に サンプルのマテリアルが入っています。

下準備 簡易的なモデルを配置 「M_Tech_Panel」というマテリアルを立方体にドラッグ＆ドロップすると… なんとSFっぽいビルになりました！

下準備 簡易的なモデルを配置 他のモデルにもマテリアルを反映させ、簡易的なビル群を作成します。 これで下準備完了です。

アジェンダ 下準備 ・おすすめテンプレート ・操作画面をイラストツールに置き換えて解説 ・簡易的なモデルを配置 3つの機能紹介 ・ディレクショナルライト ・ボリュメトリッククラウド ・指数関数的ハイトフォグ アセットについて ・商用利用可能！魅力的な公式無料アセット ・アセット導入方法 ・公式以外のお気に入りアセット紹介 実例 ・イラストコンセプト ・モデル作成 ・UE4でレイアウト ・レタッチ ・キャラ作画 ・仕上げ 総括 ・所感

3つの機能紹介 ディレクショナルライト

3つの機能紹介 ディレクショナルライト ディレクショナルライトは、いわば太陽の光です。太陽の角度や光の強さをここで調整できます。 テンプレートからプロジェクトを作成した場合「Light Source」という名前になっていますが ディレクショナルライトと同じ機能になります。

3つの機能紹介 ディレクショナルライト 「Light Source」 を選択 回転のYをいじると 縦に太陽が傾きます 機能はたくさんあるのですが、イラストで使えそうな機能のみをピックアップしてご紹介します。 まずは光源のいじり方です。

3つの機能紹介 ディレクショナルライト 回転のZをいじると 横に太陽が傾きます

3つの機能紹介 Tips ディレクショナルライト ディレクショナルライトに限らず どのパラメーターも共通で この矢印を押せば戻せます ちなみにパラメーターをいじった際、右に出る黄色い矢印を押すと デフォルト値に戻すことができますので、ご安心ください！ 色々いじったら元に戻せなくなるかも…という心配もいりません。 どんどん試して、画の変化を楽しみましょう！

3つの機能紹介 ディレクショナルライト ライトの「Intensity」で光の強さを調整することができます

3つの機能紹介 ディレクショナルライト さらにその下の「Light Color」で光の色を調整することができます

3つの機能紹介 ディレクショナルライト 詳細パネルの中央あたりにある ライトシャフトの「Light Shaft Occlusion」をオンにすると…

3つの機能紹介 ディレクショナルライト 光の筋を表現することができます！ かっこいい！

下準備 簡易的なモデルを配置 Tips ライトいじっていると影に「Preview」という文字が 出ます。 これはライトがモデルに対して確定されていない 仮の状態であることを示します。

下準備 簡易的なモデルを配置 Tips こちらの「ビルド」を押すと、影が綺麗に反映されます。 （モデルの数やマシンパワーによってビルドする時間が変わり ます） 配置した後の状態を確認するために、都度ビルドすること をおすすめします。

3つの機能紹介 ボリュメトリッククラウド

3つの機能紹介 ボリュメトリッククラウド ボリュメトリッククラウドは雲を配置することができるアクタです。 こちらもイラストで使えそうな機能をピックアップしてご紹介します。 「ビジュアルエフェクト」→「ボリュメトリッククラウド」をドラッグ＆ドロップします

3つの機能紹介 ボリュメトリッククラウド 「VolumetricCloud」 を選択 アウトライナの「VolumetricCloud」を選択し 詳細パネル「レイヤー」の「Layer Bottom Altitude」で雲の高さを調整することができます 上の画像では、一番高く雲を設定しています

3つの機能紹介 ボリュメトリッククラウド レイヤーの「Layer Height」で雲の量を設定できます この画像では先ほどの画像より量を少なくしています

3つの機能紹介 ボリュメトリッククラウド 薄い 濃い 雲トレーシングの「Shadow Tracing Distance」で雲の影の濃さを調整できます

3つの機能紹介 指数関数的ハイトフォグ

3つの機能紹介 指数関数的ハイトフォグ 画面に霧が かかりました 「指数関数的ハイトフォグ」はフォグ（＝霧）を発生させられるアクタのひとつです。 こちらもイラストで使えそうな機能をピックアップしてご紹介します。 「ビジュアルエフェクト」→「指数関数的ハイトフォグ」をドラッグ＆ドロップします

3つの機能紹介 指数関数的ハイトフォグ 霧がかかって、これだけでも良い雰囲気なのですが ここからさらに色々設定をすることで、良い感じに空気遠近を行うことができます！

3つの機能紹介 指数関数的ハイトフォグ アウトライナの「Exponential Height Fog」を選択 「指数関数的ハイトフォグコンポーネント」内の 「フォグ密度」をいじると、フォグの濃さを調整できます

3つの機能紹介 指数関数的ハイトフォグ その下の「フォグ高さフォールオフ」は 数値が低いと上の方へフォグがかかり 数値が高いと下の方へフォグがかかります

3つの機能紹介 指数関数的ハイトフォグ 「Fog Inscattering Color」でハイトフォグの色を 変えることができます

3つの機能紹介 指数関数的ハイトフォグ アクタ自体を上下させると、フォグがかかる高さを変えることができます。 直観的に動かせるので調整はしやすいです。 ご自分で理想的な位置を探ってみてください！

3つの機能紹介 指数関数的ハイトフォグ カメラから 近い カメラから 遠い 「Start Distance」でカメラから見てフォグが かかり始める距離を設定できます。

3つの機能紹介 指数関数的ハイトフォグ 手前の階段のモデルから奥へフォグを かけたい、というとき「Start Distance」が 効力を発揮します。 このモデルから奥へ フォグをかけたい… が可能に！ イラストではよく、本来こんな近い距離で 空気遠近はかからないというところから わざとかけたりするので、この機能は かなり重宝するかと思います。

アジェンダ 下準備 ・おすすめテンプレート ・操作画面をイラストツールに置き換えて解説 ・簡易的なモデルを配置 3つの機能紹介 ・ディレクショナルライト ・ボリュメトリッククラウド ・指数関数的ハイトフォグ アセットについて ・商用利用可能！魅力的な公式無料アセット ・アセット導入方法 ・公式以外のお気に入りアセット紹介 実例 ・イラストコンセプト ・モデル作成 ・UE4でレイアウト ・レタッチ ・キャラ作画 ・仕上げ 総括 ・所感

アセットについて 商用利用可能！魅力的な公式無料アセット

アセットについて 商用利用可能！魅力的な公式無料アセット ランチャーを起動すると「マーケットプレイス」というタブがあります。こちらに有料・無料含めたアセットが相当数 取り扱われています。

アセットについて 商用利用可能！魅力的な公式無料アセット EpicGamesさん謹製のハイクォリティなアセットはもちろんのこと、Megascansの1万点を超える大量のアセットも UEであれば無料で使用することができます！

アセットについて アセット導入方法

アセットについて アセット導入方法 マーケットプレイスで購入・入手したアセットは ランチャーの「ライブラリ」に格納されています。 購入・入手 プロジェクトに追 加する 使用したいアセットの「プロジェクトに追加する」 を押し、追加したいプロジェクトを選ぶと使用する ことができます。 追加先を 選択

アセットについて アセット導入方法 コンテンツブラウザ内に アセットが追加されました。 ドラッグ＆ドロップで 使用しましょう！

アセットについて アセット導入方法 公式（EpicGames製とMegascans）アセットの使用範囲について ・画像の出力はEpicGames製のエンジン（UE4、UE5、Twinmotion）であれば 「無料」で商用利用OK！（※Twinmotionでの出力はライセンス契約が必要です） ・出力後の画像加工も問題なし

アセットについて アセット導入方法 公式以外のアセットについて ・こちらも出力後の画像加工及び商用利用OK ・ただし、サードパーティ製のコードが含まれているアセットは注意が必要です。 イラストの場合、ゲームと違ってクレジット表記は難しいので、サードパーティ製の コードを使用しているものは問い合わせるか、避けた方が無難でしょう サードパーティ製のコードを使用しているものは、アセットの説明欄に ↓このような感じで必ず宣言されているそう なので、念のため「third」で検索をかけるなど、サードパーティ製ソフトウェアや権利周りのことが書かれていないか ご確認ください。

アセットについて 公式以外のお気に入りアセット紹介

アセットについて 公式以外のお気に入りのアセット紹介① 「Chameleon Post Process」 画面全体に色々なエフェクトをかけることができるアセットです

アセットについて 公式以外のお気に入りのアセット紹介① 画面全体に影響するものや、モデル自体に影響するものなど様々です。

アセットについて 魚眼OFF 公式以外のお気に入りのアセット紹介① 魚眼ON 特にこの魚眼レンズが凄い！チェックボックスにチェックを入れるだけなので、お手軽です。 このアセット内に色々エフェクトはあるものの、正直この魚眼が目的で購入しました。

アセットについて 公式以外のお気に入りのアセット紹介② 「Smart Spline Generator」 色々なところにツタを生やせるアセットです

アセットについて 公式以外のお気に入りのアセット紹介② 適当に配置するだけでポストアポカリプスっぽくなります

アジェンダ 下準備 ・おすすめテンプレート ・操作画面をイラストツールに置き換えて解説 ・簡易的なモデルを配置 3つの機能紹介 ・ディレクショナルライト ・ボリュメトリッククラウド ・指数関数的ハイトフォグ アセットについて ・商用利用可能！魅力的な公式無料アセット ・アセット導入方法 ・公式以外のお気に入りアセット紹介 実例 ・イラストコンセプト ・モデル作成 ・UE4でレイアウト ・レタッチ ・キャラ作画 ・仕上げ 総括 ・所感

実例 こちらのイラストを作成していきます。

実例 イラストコンセプト

実例 イラストコンセプト ・巨大な図書館 ・本棚に座っている女の子 ・アオリ構図 このテーマを選んだ理由 私自身が3D初心者なので、 3Dモデル制作の 練習も兼ねて簡単な「本」と「本棚」という 立方体のみで構成できる背景だからです。

実例 モデル作成

実例 モデル作成 blenderでモデルを作成しました。 今回の講演はモデル作成が主目的ではないので、作成過程は省略します。 （自作しなくても、本や本棚はマーケットプレイスで販売されています）

実例 UE4でレイアウト

実例 UE4でレイアウト モデルを配置していきます。このイラストの最終的なアウトプットは アオリ構図なので、接地面に矛盾があったり見えない場所はスカスカでも OKです。

実例 UE4でレイアウト Tips まとまり ました まとめたい アクタを 複数選択 モデルを配置していくと、データがごちゃごちゃしてくるのでフォルダにまとめます。 まとめ方は、まとめたいアクタを複数選択し、右上のフォルダに+がついているアイコンを クリックします

実例 UE4でレイアウト（アクタをマージ） Tips 本と本棚のモデルを大量に配置したので、動作がかなり重くなりました。 そういう場合は配置されているアクタ（モデル）をマージ（統合）することで 軽くなります。イラストツールの「レイヤー統合」のようなものです。

実例 Tips UE4でレイアウト（アクタをマージ） 統合したいアクタを 複数選択 ↓ 右クリック アクタをマージ を選択 統合したいモデルを複数選択し、右クリックで「アクタをマージ」を選択

実例 UE4でレイアウト（アクタをマージ） Tips 任意の名前を 付ける 私は「MyAsset」というフォ ルダを新規作成して入れて います 全体画面では ここに格納 されています ポップアップが出るので、マージ（統合）した モデルを任意の場所に名前を付けて保存します。

実例 UE4でレイアウト（アクタをマージ） Tips モデルが明るいですが 配置後にビルドをすると 他のモデルと馴染んだ 色になります。 マージされたモデルがこちら。とても軽いです。

実例 UE4でレイアウト（ライト追加） 光源が太陽の光のみで暗かったため、電球のように放射状に発光するポイントライトを いくつか追加しました。一番下のライトは怪しげな雰囲気を出すためにピンク色にして います。

実例 UE4でレイアウト（仮でキャラを配置して全体を見る ） イメージを膨らませるため仮でキャラのラフをUE4に配置してみます。 まず、配置するイラストの透過pngを用意します。 （画像はクリスタの画面です）

実例 UE4でレイアウト（仮でキャラを配置して全体を見る ） ドラッグ＆ドロップ UE4のコンテンツブラウザ内にpngを直接ドラッグ＆ドロップすると テクスチャデータとして取り込まれます。

実例 UE4でレイアウト（仮でキャラを配置して全体を見る ） ②マテリアルを 作成を選択 ①右クリック 登録されたテクスチャを右クリックして「マテリアルを作成」を選択すると マテリアルが作成されます。 ③マテリアルを ダブルクリック

実例 UE4でレイアウト（仮でキャラを配置して全体を見る ） ③保存します ②Aをオパシティにつなげます デフォルトだとマテリアルの Blend ModeがOpaque（不透明） になっています ①Opaque（不透明）を Translucent（半透明） に変更します

実例 UE4でレイアウト（仮でキャラを配置して全体を見る ） 平面のアクタをドラッグ＆ドロップし 縦に回転させて必要に応じて拡大します。 平面のアクタに今作成したマテリアルを ドラッグ＆ドロップすると イラストをUE4上に配置することができました！

実例 UE4でレイアウト（仮でキャラを配置して全体を見る ） いざキャラを配置して全体を見てみると、本棚が整然としすぎており あまり面白みのない絵になっていることに気付きます。

実例 UE4でレイアウト（調整） 棚を浮かせて階段状に。 シルエットを三角形にして 画に変化を付ける そこで棚を浮かせて、魔法の力が及んでいるような不思議な図書館に変更。 色々モデルの配置を変えてみて、自分が想像していなかった答えにたどり着ける のも、3Dの面白いところです。

実例 UE4でレイアウト（調整） 天井の情報量が足りないので、アーチのモデルを作成しUE4に配置します。 縦に長いフレームはキューブのアクタを引き延ばして使用しています。 そしてLightSourceで光の角度をいじって逆光にしました。逆光いいですよね！ 逆光は影の情報量が増えるので、リッチに見せることができます。 （ボリュメトリッククラウドが全く見えなくなりましたが…気にしない気にしない）

実例 UE4でレイアウト（調整） 手前の本棚の後ろから フォグがかかるように調整 ハイトフォグを濃くし、さらに青みを強くしてイラストっぽく見せています。 ちょうどキャラが座る、手前の本棚の後ろあたりからフォグがかかるように 距離を調整しています。

実例 UE4でレイアウト（調整） さらに情報量を増やすためツタや草、外にビルを追加します。 ツタは先ほどご紹介したアセットを使用、ビルは下準備の 要領で作成したモデルを使用しています。

実例 UE4でレイアウト 背景完成！

実例 3D背景最大のメリット Tips 一度作った背景は色々な角度で 再利用できます！ 同じロケーションで連作も描き放題！

実例 高解像度スクリーンショット このプルダウン アイコンをクリック ゲームビューに チェック UIが表示 されている このシーンをイラストの背景に使うためスクリーンショットを撮ります。 このまま撮ると表示されているUIまで入ってしまうので、ゲームビューにチェックを入れます。 そうするとUIが消えます。 UIが消えました

実例 高解像度スクリーンショット 4.0ぐらい （お好みで） ここを押すと SSが撮れます 画面右下に ポップアップ 高解像度スクリーンショットを選択、そのままだと解像度が低いので×4.0ぐらいにして出力。 右下にスクリーンショットが格納されているリンクが出ますので、それをクリックするとウィンドウが 開きます。 一定時間が経つとこのポップアップが消えてしまうので、その場合は以下のディレクトリに入っています。 C:\Users\（ユーザー名） \Documents\Unreal Projects\（プロジェクト名） \Saved\Screenshots\Windows

実例 レタッチ

実例 レタッチ フィルター→効果→イラスト調 を選択 私はこのような 設定にしていますが お好みでOKです 背景がこのままだとキャラと馴染まないので クリスタで加工します

実例 加工前 レタッチ 加工後 ほどよく細部がつぶれて、イラストっぽくなりました。 Photoshopでも「フィルター」→「フィルターギャラリー」→「アーティスティック」→ →「ドライブラシ」で同様のことができます。

実例 レタッチ（グラデーションマップ） ふんわり雰囲気グラデーション （ID：1765102）を使用 レイヤー→新規色調補正レイヤー→グ ラデーションマップを選択 さらにグラデーションマップを使用し、よりイラストっぽく加工していきます。 Photoshopでも同様のことができますが、クリスタはグラデーションマップのアセットが たくさん公開されています。

実例 キャラ作画

実例 キャラ作画 図書館かつ魔力を帯びているイメージに変更したので、紙を翼にして天使のように。 この時点で「図書館の天使」というタイトルが思い浮かんだので、その方向で完成を 目指します。

実例 キャラ作画 線画の清書と色塗りです。私はグリザイユ画法で塗っています。 背景のライティングを意識して影を決めていきます。

実例 キャラ作画 背景の色味を意識しつつ色を乗せます。 遠近感を出すため、手前側の紙はぼかしを入れています。

実例 仕上げ

実例 仕上げ 全体的に明るすぎたので トーンカーブで明るさ調整 天使感が弱かったので 天使の輪をさらに追加 画面全体に パーリンノイズを入れる 手前の草や棚にハイライトを加え よりイラスト的な立体感を出す キャラを目立たせるため キャラの周りに明るい色を入れる あとはひたすら調整していきます

実例 仕上げ 完成！

総括

総括 UE4をイラスト作成に活用した所感 ・表現の幅が劇的に増える ・正確なパースが取れる ・思っていたより操作がシンプル ・ハイクォリティなアセットが使える ・アセットを配置しているだけでも楽しい ・ハイトフォグが神 ・アセットなどで背景の情報量が多くなるが、キャラを馴染ませるためには慣れが必要 ・多少なりとも、絵の知識は必要 とはいえ… 利用するメリットは多すぎる！ 皆さんも是非利用されてみてはいかがでしょうか。

ご清聴いただきありがとうございました よろしければ、Twitterのフォローをお願いいたします！