![へたれちゃん](https://fps.ww3.jp/wp-content/uploads/2020/09/hetare_icon.png)
Vtuberのモデルにはこだわりたいよね
![ラビ](https://fps.ww3.jp/wp-content/uploads/2020/09/usa_icon.png)
自作絵が自分の表情に応じて動くのは感動モノだよね
新しくFacerigモデルを作るぞ
さて、筆者は10年ほど前からピンクツインテール+和服というキャラ「ている」ちゃんでアバターを共通化していた。
個人的にこれが股間にビビビッとは来るのだが、昨今の国際化社会において日本の民族衣装である着物はどうもウケが悪く再生数を稼ぎにくいのが実情だ。
以前、プリキュアを模したキャラクターで短い期間vtuber配信をしていたことがあったのだが、その際は結構外国からのアクセスも多くコメントも多かった。その頃と比べると違いはなんだろうなぁと考えたところ、やはりモデルが万人受けするかどうか、というところなのかなと思った。
なので今回、プリキュアを模したキャラクターで「ている」ちゃんを描き直した。
これを元に、Facerigモデルを作り上げていこう。
開発環境
今回筆者がFacerigのモデルを作るのに使う機材・ソフトを紹介するぞ。
機材
・ipad Air(第4世代)
言わずとしれたAppleの傑作ipad air。通常のipadと比べて表面のガラス厚が薄いのでペン先と絵との間が少なくなり違和感なく描けるのがいい。薄く軽いので持ち運びもProより楽だしね。
もちろん本格的に絵を描きたいならばIpad proの方がよいケースも多いだろう。アップルペンシルも第二世代のものが使えるので利便性は高いし。懐の事情と相談して最適なものを選ぼう。
・Apple Pencil
IpadとApple Pencilを組み合わせることで最強の液晶タブレットが爆誕する。いつでもどこでも高クオリティの絵を描けるのは極めて大きいメリットだっ!
お使いのipadにあったApplepencilを購入しよう。自分の所有しているipad airでは第2世代のアップルペンシルが使えない。第二世代はpro専用のようだ。ここを間違えると泣くぞ。
ソフト
・Procreate
![](https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/66/8a/f3/668af3c6-e8b2-08fb-c913-4c6b9d75054f/AppIcon-0-0-1x_U007emarketing-0-4-0-85-220.png/1200x630wa.png)
お絵かきソフトは数あれど私はProcerateを使ってる。有料ソフトだけど非常に使い勝手が良いドローソフトだ。まぁ筆者は他にソフトを使ってないので、良し悪しはわからん。まぁプチフリしたりタッチパネルが応答しなくなったりとクソな部分はあるが、概ね満足してる。
・sai
パソコンではsaiを使用している。細かい調整に使ったり。まぁいらないかな?Procreateで作成したPSDファイルがLIVE2Dで読み込めなかったりする不具合があったので、一度saiを介している。他に方法あれば教えて。
・Live2D
![](https://fps.ww3.jp/wp-content/uploads/2021/09/image-1-179.jpg)
お得なクーポン付きで販売中【Live2D】
Facerig用のモデルを作成するのに使う。無料試用期間が30日あるので、これで大体のモデルは完成してしまうだろう。使い慣れるまでにかなりの時間を要するのだが、基本を抑えてしまえば難しい部分は覚える必要もない。
下絵を描こう
なにはともあれ「作りたいモデル」を考えなければ始まらない。
下絵に関しては落書きでもいいけど、ある程度下絵も書き込んでおくと後で楽。イメージもつかみやすいしね。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-38.png)
筆者の場合はProcreateで下書きを描きながら、色々と考察してキャラクターを作り上げていく感じ。イメージがつかめたらペイントで大雑把に色を塗ってキャラクターのイメージを掴む。
キャラの考察についてはオリキャラがあればそれを使えばいいけど、今回の自分のように過去に好きなキャラがいたらその好きな部分を組み合わせていけばそれっぽいのができるのでおすすめ。
FPSゲーマーなのであとは武器にAK47かグロック26あたりを持たせればいいかな?って感じ。まぁそれは本描きのときに考えるか。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-39-1024x540.png)
これはただの一枚絵でしかない。ここから、目なら眼球・白目・上まつげ・下まつげといった風に、パーツごとにかき分けていく必要があるぞ。
Procreateで下絵を描く
新規キャンバスの作成
Procreateでの下絵の描き方についてかんたんに解説していきます。下絵は所詮下書きでしかないので、キャンバスサイズはなんでもいい。とりあえずここでは2048*2048の白紙キャンバスを作ってみよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-50.png)
Procreateを起動し、右上の「+」ボタンをタップ。すると新規キャンバスメニューが出るので、お好みのキャンバスサイズを選択してタップだ。ここでは2048*2048のスクエアを作成する。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-51.png)
すると白色のキャンバスが2048*2048のサイズで作成され、作成したキャンバスが自動的に開く。あとは適当にお絵かきをして自分のキャラクターを描いていけばいい。
筆者オススメの構成は、赤色の「筆」アイコンをクリックして「インキング」を選び「製図ペン」を使う方法だ。基本的に製図ペンが使えれば漫画チックなキャラクターの線は引ける。
・黄緑色:上下させることによって筆のサイズを変更
・水色バー:色の濃度を変更
・水色(右上):筆の色の種類を変更
といった具合だ。
下絵を描く
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-52.png)
下絵に関してはあまりアドバイスできることはないけれど、本能と性欲に基づいて赴くままに自分の描きたい絵を描きたまへ。描く時に線画と色のレイヤーは最低限使用したほうがいい。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-53.png)
レイヤーを作成するには、Procreate右上の「❐」アイコンをタップする。するとレイヤーメニューが開くから、「+」ボタンを押すとレイヤーが作成できるぞ。
レイヤーの仕様として上に行けば行くほど表示描写優先順位が高いので、線画は上の方、色は下の方といった風にかき分けることになる。
レイヤー画面の右側にある「☑」ボタンがレイヤーの表示・非表示を切り替えるチェックになっているので、キャラクターの色塗りレイヤーを複数枚作成して見比べる時などに使うといいぞ。
下絵の書き出し
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-45.png)
下絵がかけたら、「ツールアイコン」ー「共有」でイメージを共有で「jpeg」や「PNG」を押す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-46.png)
すると画像の書き出し処理が行われる。「名称未設定のアートワーク」というメニューがでたら、「画像を保存」を押そう。こうすることでipadのローカルに画像が保存される。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-48.png)
正常に保存されているか確認しよう。ipadのホームボタンを押し「写真」アイコンをタップする。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-49.png)
すると、写真アプリの中に先程Procreateで出力したキャラクターの下絵が保存されているのがわかる。これで下絵の書き出しは準備完了である。
Procreateでのパーツかき分け
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-40-1024x863.png)
さて、下絵がかけたら今度はFacerig用にパーツの描き分けをしていく必要がある。
Facerigでは目や首・手といった各パーツがWebCameraによるモーションキャプチャーに連動して動作するため、それぞれのパーツが分離されていなければならない。
上は旧モデル?(この記事を書いている段階では現行モデルだが)のているちゃんのレイヤー構成を示す。Procreateのレイヤー分けで注意しなければならないのは、レイヤー名を「ローマ字」で記載する点だ。日本語でも読み込めるのだが一部文字化けが発生するので、なんとなく気持ち悪いからローマ字で統一しよう。
facerig用モデルのアートワークを作ろう
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-41-1024x361.png)
まずはfacerig用モデルのアートワークを作ろう。Procreateの右上にある「+」ボタンをタップする。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-42.png)
すると新規キャンバスメニューが出る。モデルの形状によるが、私はスクエア「2048×2048」で作成しているぞ。もっと大きいキャンバスで作成したほうが良いケースもあるのだが、Procreateのクソッタレな仕様によってキャンバスサイズを大きくしすぎると、レイヤー数の制限を如実に受けてしまうので、このくらいがバランスがいい。
キャンバス情報でレイヤー数を確認しよう
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-43.png)
作成すると作成した白いキャンバス画面が開く。この状態で、右上のツールアイコンをタップし、「キャンバスの情報」をタップして見よう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-44.png)
「キャンバスの情報」が開いたら「レイヤー」をタップする。すると「最大のレイヤー数」という項目が見れる。2048×2048のキャンバスで作成すると、最大レイヤー数は60だ。これは結構少なくて、色々とパーツを追加していくと完成直前にレイヤー数が足りなくて泣くというケースもちらほら。
下絵を追加しよう
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-54.png)
さて、描いておいた下絵を新規キャンバスへと追加しよう。
右上の「ツールアイコン」ー「追加」ー「写真を挿入」で、下絵を新規レイヤーとしてキャンバス上に追加できるぞ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-55.png)
押すとアルバムが開くので、追加したい写真をタップしよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-56.png)
これで新規キャンバスにあんたの描いた下絵が追加されたぞ。この下絵をなぞるようにして、各パーツの掻き分けを行っていくのだ。
上の「↑」ボタンは選択されたレイヤーの変形や上限反転などを行うボタンだ。頻繁に使うメニューなので、かんたんに解説しておこう。
・回転バー(水色枠):緑色の点をタップして動かすことで選択範囲を回転できる。
・変形ポイント:青色の点を動かすことで拡大縮小ができる。比率を一定に変形したい場合は、赤色枠内にある「均一」という項目が青色になっている必要がある。比率固定を解除したいときはここを解除すればいい。
キャンバスの調整
さて、下絵が挿入できたらキャンバスサイズを下絵に合わせて調整しよう。2048*2048のままでも問題はないのだが、キャンバスサイズをある程度小さくすることでレイヤー数を増やすことができる。デフォルトの60枚だと後半厳しくなるので、もしも厳しくなったらこの操作を行ってキャンバス調整をしてみてほしい。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-60.png)
まずは、先程説明した「↑」メニューにて下書きレイヤーの位置とサイズを枠に目一杯合わせよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-61.png)
その後、「ツールアイコン」ー「キャンバス」ー「クロップしてサイズ変更」を順にタップしていく。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-62.png)
「クロップしてサイズ変更」画面が開くので、赤色の端っこをドラッグしてキャラクターのサイズに合わせてキャンバスサイズを調整しよう。
大体調整が終わったら、右上の「完了」を押して完了だ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-63.png)
操作後、キャンバスがキャラクターのサイズ枠ギリギリに調整された。これで使用できるレイヤー数がかなり増えることになるぞ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-64.png)
「ツールアイコン」ー「キャンバス」ー「キャンバスの情報」でレイヤー数を確認しよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-65.png)
「キャンバス情報」で「レイヤー」をタップすると、最大のレイヤー数が確認できる。
キャンバスサイズ調整を実施する前は60枚が限度であったが、キャンバスサイズをキャラクターぎりぎりに調整したことにより最大83枚まで増えた。23枚ものレイヤー数が増えるのは大きいぞ。
下書きレイヤーの濃度変更
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-57.png)
このままでは下書きの色が明細すぎて下書きとしては使いづらいので濃度変更をして薄くしよう。
右上の「❐」アイコンをクリックすると、さきほど追加した下書きレイヤーが表示されているのがわかる。そのレイヤー項目に[N」というローマ字が書いてあるのでタップしよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-58.png)
[N」をタップすると不透明度というバーが現れた。このバーを左右に動かすことで、レイヤーの透明度が調整できるようになるぞ。下絵の濃さによるが、だいたい40%前後にすれば下絵として適正な薄さになると思うので、試してみてほしい。
各パーツの掻き分け
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-59.png)
下絵の濃度を変更したら、いよいよ各パーツの掻き分け段階にはいるぞ。右上の「❐」アイコンをタップして、「+」を押してレイヤーを追加していこう。
レイヤーの複製機能
まずは顔の輪郭から描いていきます。今回は正面絵ですが、実際のところ正面絵というのは非常に描くのが難しいです。というのも左右対称の線を引くのが難しいためですね。なので今回は、複写と左右反転機能を使用して左右対称の顔を描きます。
体全体に応用が効くので必ずマスターしましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-66.png)
まずは画像のように顔の片側のみ描きます。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-67.png)
その後、「顔」のレイヤーメニューをapple Pencilで左側にスライドすると画像のようなメニューがでます。ロック・複製・削除メニューが出るんですね。ここで「複製」を押します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-68.png)
すると「顔」レイヤーが複製されて2枚になりました。
左右反転機能
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-69.png)
この状態で画面上の「↑」マークをクリックします。すると選択メニューになりますので、左下の「左右反転」を押します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-70.png)
すると、複写した顔パーツが左右に反転されました。あとはこれをうまくドラッグすれば・・・。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-71.png)
このように左右対称の顔が描ける、という寸法です。すごい歪んでいましたね。自分で描いているときはパット見この歪みを認識できないので、絵って怖いですよね。
この要領で、目や眉など左右対称のパーツを複製していきましょう。
手書き線の自動修正機能
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-72.png)
新しくレイヤーを追加して、今度は頭頂部を描いていきます。っと、なんだか線がガタガタにナッちゃいましたね・・・やりなおし?いやいやこれでいいんです。
Procreateの便利な機能として、適当に描いた線を自動的に曲線や四角・多角形に修正してくれる機能があります。使い方は極めてかんたんです。
・線を引き始める
・線の引き終わりでApple pencilの動きを止める。
・自動的にAIが引いた線を認識して曲線や多角形に修正してくれる。
・AI修正が気に食わなかったら、左下の戻るボタンを一度押せば手書きで描いた線に戻る。
という感じですね。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-73.png)
こんな感じできれいな曲線に修正してくれました。賢い!
レイヤー統合
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-75.png)
さて、頭頂部も同様に左右複写して、顔の輪郭がかけましたね。でもこのままだとレイヤー数が4枚にもなってしまってとっても無駄。なので、この4枚は統合してしまいましょう。
レイヤーの左側の図の部分をタップし、出てきたメニューの下の方にある「下へ結合」をタップ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-76.png)
すると、2枚あった「レイヤー4」が一つに統合されました。これを繰り返すことで、顔の輪郭を統合してしまいましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-78.png)
4枚あったレイヤーが1枚に統合されましたね。
消しゴム機能
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-79.png)
各レイヤーのつなぎ目が重なっていて修正が必要になるので、メニューの「消しゴム」アイコンをクリックして重なっている部分を消しましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-80.png)
つなぎ目を修正すれば、顔の輪郭ができました。めでたしめでたし!
バケツ塗り
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-81.png)
さて、輪郭はできましたので今度は輪郭内を肌色に塗っていきましょう。右上のカラーパネルをタップすると、カラー画面が開きます。そこで自分の好きな色を選び右上の○カラーパネルから色をドラッグし、塗りたい場所で離します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-82.png)
すると、離した場所が肌色に塗られました。のっぺらぼう怖いっ!
名前の変更
さて、目などの細かいパーツを描いていくと、レイヤー数がどんどん増えていく。最終的に全身キャラ絵を完成させる頃にはレイヤー数は50枚を超えていることになるだろう。
こうなると各レイヤーの管理も大変。なのでレイヤーにはちゃんと名前をつけていこう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-83.png)
レイヤーの名称をアップルペンシルで一度タップするとメニューがでる。その一番上に「名前を変更」という項目があるのでクリック
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-84.png)
すると名前の変更が可能な状態になるので、ソフトウェアキーボードで名前をつけよう。ここで注意することは、極力半角ローマ字にて名前をつけること。Live2dに取り込む際に日本語だと文字化けしてしまう恐れが高いからだ。
レイヤーのグループ化
さて、目を描きわけていくが目は眼球・上まぶた・下まぶた・上まつげ・下まつげ・白目という複数のレイヤーに分けて描くことになる。上の方で繰り返し「初期レイヤー数では足りないよ、キャンパスサイズを調整してレイヤー数を増やしてね」と書いたのは、目や服・装飾品などのパーツがどんどん増えていくためなのだ。
単純に考えて目だけで左右合わせて10ほどのパーツを使用する。パーツも複数に増えてくると管理が大変なのでグループ化してしまおう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-85.png)
グループ化したい項目を、別の項目へとドラッグアンドドロップする
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-86.png)
すると、新規グループが自動的に作成された。このグループは「migime(右目)」とでも名前をつけておけば、目の管理が後々やりやすくなるぞ。
同じ要領で、他の目のパーツもこのグループに追加していこう。グループ内に更にグループを作ることも可能だ。このドラッグ・アンド・ドロップは少しコツがいるので、リトライしながら色々と試してみよう。
範囲選択
レイヤー数の関係上、Procreateでは線画と色塗りのレイヤーをそれぞれ持つことが難しい。パーツ単位での保存となるが、こうなると色を塗りたい部分と線画がかぶってしまうという問題が生じる。
眼球で言えば枠はそのままに、枠内の色を塗りたいというケースだ。こういうときに範囲選択機能が役立つ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-87.png)
範囲選択の使い方はメニュー上の「s」マークをクリック後、「自動」が選択されている状態で、範囲を選択したい箇所をアップルペンシルでタップし続ける。
タップした状態で、矢印のように左右に動かすと、選択したい部分が色の閾値に応じて変動できる。左側にアップルペンシルをスライドさせれば色の閾値は低くなり、右側にスライドすればするほど閾値は高くなる。よい頃合いになったらアップルペンシルを画面から離せば、選択終了だ。
スプレー塗り
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-89.png)
眼球内をスプレー塗りしてみよう。「s」により範囲選択した状態で、筆アイコンより「エアーブラシ」を選択。左上のカラーパレットよりお好みの色を選択して、ペイントだ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-90.png)
このように、範囲で選択した部分だけが塗装できた。この状態で、目の中のハイライトなども描いてしまおう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-91.png)
なんとなく、それっぽくなったのではないだろうか。
グループ複製&反転
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-92.png)
さて、目は基本的に左右対称。なので先程作ったmigimeグループを複製し、左右反転してしまおう。「migime」グループをアップルペンシルで右にスライドする。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-93.png)
複製をクリック。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-94.png)
migimeグループ全体が複製された。名前を「hidarime」に変更し、「hidarime」グループが選択された状態で上の「↑」ボタンをタップ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-95.png)
そして「左右反転」をタップすると、グループ全体が反転された。この状態で位置を調整すると。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-96.png)
このように両目ができた!かわいい!かわいい!かわいい!
なお、ハイライトの位置が逆になってしまうので、眼球のみ左右反転した方がよいかと。
レイヤー構成
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-99.png)
紆余曲折をへながらLive2dの基礎となるモデルが完成した。作画日数約1日。ピンクドレスを考えていたが、結局初期案の赤ドレスに落ち着いてしまった。創作活動ではあるある、だ。
作業時間にして8時間くらいかな?えっちな感じに仕上がって、なかなか満足ですワイ
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-100-1024x482.png)
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-101.png)
レイヤー構成はこのようになっている。枚数にして46枚。リボンや小物などの装飾品を個別にレイヤー分けすると2048x2048の初期レイヤー数の60を超えてしまう恐れがあるのがわかるだろう。本来なら服は上・下分けたり、個別にリボンを追加したりとやりたいのだがレイヤー数制限があるのでとりあえず一体にした。
今後、様々な差分な小物・パートナーの小動物等を追加していくことを考えると、やはり残りレイヤー数にはある程度余裕があった方がいい。
モデル完成後の処理
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-97.png)
Live2Dはフォトショップファイル(.PSD)を読み込むことができるので、ProcreateからPSDファイルを書き出す。
左上のツールアイコンをタップし、「共有」ー「イメージを共有(PSD)」とタップしよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-98.png)
すると「名称未設定のアートワーク」というタブが開くので「画像を保存」を押す。
その後、WindowsパソコンとipadをUSBで接続し、ipad内のフォルダーをWindowsのエクスプローラーからみてみよう。
SAIのダウンロード
SAIをダウンロードします。当ソフトは環境によっては不要かもしれません。私の環境の場合は一度SAIでPSDファイルを開かないとLIVE2Dに正常に読み込まれないので、一度SAIで開いた後に上書き保存しています。なんでうまくいかないんでしょうね?
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-121.png)
PaintToolSAIをダウンロード後、ダウンロードしたファイルを実行してインストールしましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-122.png)
インストールし終わったらデスクトップに「ペイントツールSAI」のショートカットができていますので起動します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-123.png)
初回起動時はローカルをスキャンするので結構時間かかります。気長に待ちましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-124-1024x375.png)
起動後、PSDファイルをドラッグ&ドロップで開きましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-125.png)
その後、「ファイル」ー「キャンバスを別名で保存」で適当な場所に保存します。これでlive2dで読み込む準備ができました。
LIVE2D
LIVE2Dのダウンロード
さて、Facerigモデル用の画像データPSDが出力できたら、次はFacerig用モデルを作成する「Live2D」をインストールしよう。
![](https://www.live2d.com/wp-content/themes/cubism_new/assets/img/ogp_banner.png)
上記の公式サイトへアクセスし、トライアル版をダウンロードしてインストールする。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-102-1024x386.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-103-1024x521.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-105-1024x308.png)
LIVE2Dのインストール
LIVE2Dのダウンロードが終わったら、ダウンロードしたexeファイルをダブルクリックして起動しよう。インストール自体はメッセージに従い、「次へ」を連打していけば終わる。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-106.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-108.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-109.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-110.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-111.png)
↓
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-112.png)
LIVE2D Cubism Editor の起動
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-113.png)
インストール後、デスクトップに「Live2D Cubism Editor」のショートカットが作成されていると思うのでダブルクリックで起動しよう。
起動後、「まずはここから!動画チュートリアル」の画面が出るかもしれませんが閉じましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-114.png)
今回は、「PRO版の無料トライアルを開始」します。もちろんFREE版として起動してもよいです。しばらく使用してみてお金を払うかどうか決めればいいと思います。
LIVE2D Cubism Editor へのPSDファイル読み込み
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-126-1024x351.png)
起動後、このような画面になっていると思います。ipadで作成しPCへどダウンロード後、SAIで別名保存したPSDファイルをドラッグ&ドロップで上の領域に送り込みましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-118-1024x322.png)
「確認」メニューが出てくる場合があります。モデル用画像の解像度をどれにしするかという選択項目が出ます。私は高画質なモデルを作成したいので、「原寸」を選びます。ただファイルサイズがかなり大きくなり、実際FACERIGで動作させたときにパソコンへかかる負担がかなりのものになりますので、簡易なモデルなら「推奨」の1/2で良いと思います。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-119-1024x455.png)
このようにモデルが読み込まれました。左側のメニューを見てもらえばわかると思うのですが、フレイヤー名が文字化けしています。主にレイヤー名称を日本語にすると発生する現象ですが、ローマ字にしていてもたまに文字化けします。「名前」の部分をちまちまと編集しましょう・・・面倒だ。
新規テクスチャアトラス設定
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-127-1024x458.png)
新規テクスチャアトラスを設定します。よくわからないと思いますので、とりあえず画面上部の人間アイコンをクリックし、「新規テクスチャアトラス設定」メニューで「ok]を押しましょう。
ここの幅・高さの領域を広く持つことにより、高画質なモデルとして読み込まれます。もしも描いた絵よりも画質がかなり劣化しているなぁと感じたら、このテクスチャアトラスの幅・高さを大きめにしてください。
PSDファイルで非表示で作成したファイル(吹き出し等)がある場合は、初期配置を「すべてのモデル用画像」にしておきましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-129-1024x624.png)
テクスチャアトラスが正常に読み込まれると、上記のような状態になります。ただ、左上の部分は不要な背景が入ってしまっているので、これを消しておきます。画像のように背景部分をクリックしてdelキーをおして消してしまいましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-130-1024x621.png)
消えましたね。再度レイアウトを配置しますので、右上の「自動レイアウト」ボタンを押しましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-131-1024x621.png)
キレイに再配置されましたね。これでよいので「OK」を押しましょう。
テンプレートを適用
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-132-1024x461.png)
テクスチャが正常に配置されましたので、次にテンプレートを適用します。テンプレート適用というのは、メーカーが用意してくれたモデルと、自身が作成したモデルとを紐つける作業です。
「ファイル」ー「テンプレートを適用」をクリックします。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-133.png)
今回私が作成したモデルは真正面からの女性の全身モデルです。メーカーさんが用意してくださっているテンプレート素材集の中でこれに該当するのが「Epsilon(基本)」ですので、これを選択します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-134-1024x639.png)
テンプレート画面が出ます。テンプレート素材の女の子が点滅する状態になっていると思いますので、テンプレ女の子のサイズと、自分が作成したモデルとが完全に重なるように大きさを調整して重ねてください。
また目の大きさや顔の大きさなどは左側の「値リスト」のスライドを細かく動かすことで調整できるので、微調整を行ってください。
大体の微調整が終わったら、「テンプレートを適用プレビュー」ボタンを押して下さい。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-135-1024x640.png)
すると、テンプレート女の子と自作女の子とが連動して動作するテンプレと適用プレビュー画面になります。あなたの作成したモデルが、初めて動作した瞬間です。感動しますよね。
けれども大抵の場合、瞬きや微笑みなどの顔の動作を行った際に、まぶたが裏返ったり口が破綻したり、とまともには動きません。
その場合は左上の「レイアウトパラーメーター調整」画面へ戻り、各種パラメーターを調整後に再度テンプレート適用プレビューを行う・・・という作業を延々と繰り返してください。
基本的に「瞬き」と「口の開閉」が満足にできていれば、それでOKです。髪の毛の状態や体の状態は大抵の場合後で修正が楽にできます。が、目や口の状態は後での修正がかなり面倒なので、「目」と「口」の状態がほぼ満足にできるまで、何度も調整を繰り返してください。ここがキモとなります。
納得がいく状態になったら、下の「OK」を押してください。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-136-1024x462.png)
元の画面に戻ってきました。これで大雑把な部分の調整は終わりです。あとは細かい部分を一つ一つ調整していく必要があります。
赤枠の「パラメーター」という項目で、赤色のツマミを左右に動かすと、右側に表示されているキャラクターが動作する状態になっていると思います。
このツマミを動作させ、動きに破綻がないように調整していく・・・という作業が大変です。頑張ってください(投げっぱなし)
細部調整
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-138-1024x507.png)
よくある不具合として、まぶたの描写順が正常に働いておらず、「眼 開閉」のバーを左側にして眼を閉じさせても眼球が表示されたままになってしまうという状態になります。
眼球の描写順が狂ってしまっているので、眼球部分をクリックしてインスペクタの「描写順」で「-1」を連打し、適正な描写順になるよう調整しましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-139-1024x484.png)
もしくは、まぶた部分をクリックして「+1」を連打するという方法でもよいです。このように、一応眼がかくれてくれさえすればOKです。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-141-1024x350.png)
その後、調整したいアートメッシュ(今回は左眼下まぶた)を選択した状態で、左上の「キーの3点追加」ボタンを押します。
「左目 開閉」のスライドバーはもともと動作点 (赤色の点) が2つでしたが、「キーの3点追加」ボタンを押すと3つになります。2点より3点の方が圧倒的に細かい調整ができるため、かならず3点にしてください。
アートメッシュ点の追加
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-142.png)
アートメッシュ点は多ければ多いほど、細かい修正がききやすくなります。
アートメッシュ点を増やしたいアートメッシュ(今回は左目下まぶた)をダブルクリックすると、「メッシュ編集」画面になります。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-143.png)
メッシュ点を適度に増やしたら、「レ」を押して元の画面に戻りましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-144.png)
元の画面に戻ったら、増やしたメッシュ点をドラッグしてまぶたが閉じだ状態でも違和感がなくなるようにしましょう。この作業を地道~~~~~にすべてのパーツ・すべての動作点で行っていくんです。非常に地道な作業ですが、モデルをキレイに動かすために必要不可欠な作業です。耐えましょう。
濃度調整
頬の照れは濃度の調整をすることによって表現がしやすいです。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-149-1024x568.png)
頬のあーとメッシュを選択した状態で、パラメーターの「・・・」ボタンをクリックしてキーを3点追加します。
その後、パラメーターの「照れ」の部分の赤い●ポイントを左側までスライドさせ、インスペクタの「不透明度」を20%に設定します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-150-1024x535.png)
その後、●ポイントを中央までスライドさせ、不透明度を50%に設定します。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-151-1024x574.png)
●ポイントを右側までスライドさせ、不透明度を100%に設定します。
おすすめ連動
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-147-1024x527.png)
今回はツインテールケモミミっ娘なモデルとなりますが、表情をつける際におすすめなのは「瞳の開閉と各所を連動させる」というテクニックです。
瞳は頻繁にまばたきをしますので、この動きに連動して顔のパーツが少し動くようにすると、動きの多いモデルとなります。
今回の場合、瞳が閉じるとツインテール・けもみみ・眉毛が少しだけ動くようにしています。頬の濃度をすこしだけ変動させるというのも表現として面白いとおもいます。
体や手・足のパーツが「髪揺れ 後ろ」に割り振られている点の解除
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-146.png)
モデルにテンプレートを適用している状態の場合、体や足・手といったパーツが「髪揺れ 後ろ」に自動的に割り振られてしまうことが多い。
そうなると、体や足・手が髪の毛のように揺れてしまうためおかしくなってしまう。なのでこの設定を解除しなければならない。
今回は右手が「髪揺れ 後ろ」に割り振られてしまっているので、これを例に解除方法を示す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-195.png)
基本的に解除したいアートメッシュを選択した状態で、上のマークをクリックすれば解除できますが、たまにうまくいかないことがあります。その場合は面倒ですが下の手法で解除しましょう。
・右手のアートメッシュを選択した状態にする
・「髪揺れ 後ろ」に緑色のポイントが1・2・3に割り振られているのを確認する。
・赤色のポインタを1にした後、Aをクリック
・赤色のポインタを2にした後、Aをクリック
・赤色のポインタを3にした後、Aをクリック
特殊な表情の作り方
今回、私は吹き出しを使って「!」や「?」の表現に挑戦したいと思っています。その際に使用するのが「パラメーター作成」と「アニメーション」です。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-152.png)
「パラメーター作成」をクリック
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-153.png)
適当に名前(今回はoko)をつけてOKを押す
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-154.png)
「oko」パラメーターができた。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-155-1024x282.png)
非表示にしてあったokoとhukidasiレイヤーを表示させる。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-156.png)
吹き出しが表示された。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-157.png)
デフォルトでは後ろ髪等に設定されてしまっているので、パーツを「Root Part」、デフォーマを[root」とでもしておこうか。こうしないと後ろ髪の動きに応じて不必要に吹き出しが表示されてしまう不具合が起きる。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-158-1024x402.png)
okoにパラメーターでキーを2点追加。そしてokoキーの●ポイントを左側までスライドさせ、不透明度を0%に設定。これで左側では吹き出しが消え、右側では吹き出しが現れる表現ができた。同様に怒りマークも設定する。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-159-1024x412.png)
このままだとデフォルト状態で吹き出しが50%くらいの薄さで表示されてしまっている。デフォルトのパラメーター値を設定しよう。
赤枠の「三」ボタンから「パラメーター設定」を開く。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-160.png)
okoのパラメーターのデフォルト値を-30に設定してok。
アニメーションの設定
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-161.png)
おこアニメーションを作成する。アニメーションは指定したキー操作によりキャラクターに特殊な動作を割り当てることができる技術だ。webカメラによる表情トラッキングは便利ではあるが、笑いや怒り、悲しみといった表現を表情トラッキングのみで表現するのは難しい。
なので、キーボードでのキー入力により表情を表現する必要がでてくる。そのときに役立つのがアニメーションだ。
Live2Dの左上の「Model」より「Animation」を選択しよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-162.png)
フィルムアイコンより「新規シーンの作成」
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-163.png)
OK
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-164.png)
インスペクタのサイズに、自身が作成したpdf画像ファイルの解像度サイズを指定する。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-165-1024x620.png)
プロジェクトのファイルをグラフエディタ領域へドラッグ・アンド・ドロップ
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-166-1024x619.png)
これで、アニメーションによる各種表現の設定が可能になった。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-167.png)
今回は1:00程度の短いアニメーションにしよう。
まずはアニメーションの開始時点である0:00に、キーフレームを挿入する。紫色の部分の0:00時点を右クリックして、”キーフレームの挿入”を押す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-168-1024x584.png)
0:00時点でキャラクターのデフォルト状態が保存された。同様に1:00時点にもデフォルト状態を指定しておこう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-169.png)
次に、”oko”のステータスを右側にスライドさせてoko吹き出しを表示させ、だいたい0:12くらいの地点を右クリックしてキーフレームの挿入をおす。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-170.png)
橙色と紫色と緑色のバーを1:00くらいに設定するため、バー右側をスライドさせる。
アニメーションが完成した。再生ボタンを押して表現を確認しよう。
同様に顔の表現や体の倒し方などのキーフレームを挿入していき、アニメーション表現を作ろう。
モーションファイルの書き出し
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-171-1024x486.png)
アニメーションが作成したらfacerigで使用するためのモーションファイルを書き出そう。
「ファイル」ー「組み込み用ファイル書き出し」ー「モーションファイル書き出し」と押す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-172.png)
初回は上のようなメッセージが出る。次回から表示しなくていいだろうので☑してOK
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-173.png)
OKをおす。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-174.png)
保存画面になる。LIVE2Dのデータを保存しているファイルの直下に「Motions」をいうフォルダーを作成しておこう。右クリックで「新規フォルダ」を選択してMotionsフォルダーを作成し、その中に今回のアニメーションファイルを保存するのだ。
Facerigで指定したキー操作をすると、キャラクターにアニメーションをさせる際にこのフォルダーが後々必要になってくるぞ。
ファイル名は「ase.motion3.json」としてあるがこの”ase”というのが、後ほど記述するfacerigでのコマンドに必要となってくるので、わかりやすいローマ字にしておこう。
Facerig用モデルの書き出し
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-175.png)
ついにモデルが完成した。facerigで使用するためのmocファイルを書き出そう。
「ファイル」ー「組み込み用ファイル書き出し」ー「moc3ファイル書き出し」という順番に押す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-176.png)
OKを押す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-177.png)
指定したフォルダーに保存。私は「tailXXXXXX」というフォルダーを作りそこにLIVE2D cubism Editorのファイルと、今回作成するFacerig用mocファイルと、先程作成したアニメーションファイルのMotionsフォルダーを保存してある。
保存を押そう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-178.png)
このようなフォルダー構成になった。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-179.png)
このフォルダーにFacerigでのアニメーション動作用のテキストファイルを作成する。
右クリックして「新規作成」ー「テキストドキュメント」と押そう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-181.png)
”cc_210219tail.cfg”とリネームした。”210219tail”部分はmocファイルの保存名称と合わせよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-182.png)
cc_210219tail.cfg を開き、上の用に記述した。環境に合わせて記述し直そう。
set_special_action_anim 210219tail ‘Motions/ase’ 1
set_special_action_anim 210219tail ‘Motions/bikkuri’ 2
set_special_action_anim 210219tail ‘Motions/hatena’ 3
set_special_action_anim 210219tail ‘Motions/oko’ 4
set_special_action_anim 210219tail ‘Motions/tenten’ 5
set_special_action_anim 210219tail ‘Motions/’ 6
Facerigへの適用
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-183.png)
ご自身のパソコンにインストールされているSTEAMからFacerigを開く。
右側のタスクバーアイコンのスチームアイコンを右クリックし、「ライブラリ」を押そう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-184.png)
スチームメニューが開いたら、「ライブラリ」ー「ソフトウェア」選択ー「Facerig」を右クリックし、「管理」ー「ローカルファイルを閲覧」と押していく。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-185.png)
Facerigフォルダーが開いた。うちの環境ではF:\steam\steamapps\common\FaceRigとなっているが、あなたの環境では違うかもしれない。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-186.png)
先程作成したFacerig用モデルのコピー先を開くため、ここから \Mod\VP\PC_CustomData\Objects と潜っていく。このObjectsフォルダーが、コピー先だ。
F:\steam\steamapps\common\FaceRig\Mod\VP\PC_CustomData\Objects
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-187.png)
ここに先程作成したmoc3ファイルやmotionsフォルダーが入った保存先フォルダーにコピーする。これでFacerigで使用する準備ができた。
Facerigでの使用
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-188.png)
とりあえずFacerigを起動しよう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-189.png)
LAUNCHボタンを押す。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-191.png)
Facerigが開いた。右上の「Ui」ボタンを押し、右側に出た「人間」マークを押す。
その中で下の方にある「(?)」のキャラクターを探そう。初回起動なのでキャラクターアイコンが作成されていないので(?)になっているのだ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-192.png)
できた!自作モデルがfacerigで動作した瞬間だ!感動ものですね。
自身の表情トラッキングでちゃんと動くか確認しましょう。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-193.png)
作成したアニメーションが動作するか確認しよう。
「歯車アイコン」をクリックし、「キーバインド」から「特殊アニメーション○を起こす」というキーバインドを確認。
設定してあるキーを押してアニメーションが起きればOKだ。
![](https://fps.ww3.jp/wp-content/uploads/2021/02/image-194.png)
フックトキーを有効にしておこう。フックトキーとはfacerigが最小化されている時など、非アクティブ状態でも特殊アニメーションキーが押された際にアニメーションが起こせる設定だ。
ゲーム配信などをしながら裏でfacerigが動いているようなときに、アニメーションを起こせるようになる。
ただし、筆者の環境だとフックトキーを有効にするとApexなどのFPSゲームをプレイする際にジャンプやしゃがみなどの行動が0.5秒ほど遅れるという動作が出てしまいました。
キーバインド設定で回避できるかもしれませんが・・・。
おわりに
このページでは新モデルているちゃんの作成を通し、Live2DによるFacerigモデリング・アニメーション作成の手法を紹介してきた。
正直、説明不足な面も多々あったと思うけれども、大体の流れはつかめたと思う。
上の動画は新モデル「ている姫」を実際にFacerigで使用した状態の動画だ。
Webカメラによるトラッキング→汗→!→?→怒→・・・の表情順にアニメーションを紹介しているので参考にしてほしい。
作成日数
作画:1~2日 Live2Dモデリング:1日 合計3日程
コメント