【初心者でもわかる高クオリティLive2D講座】PSDの読み込み～クリッピング
Added 2025-03-12 18:27:28 +0000 UTC皆さんこんにちは！乾物ひものです。
猫鮪にゃんちゃんの立ち絵を使った初心者用講座、今回から実際のLive2D作業の解説に入っていきたいと思います！
前回の記事はこちら↓
【初心者でもわかる高クオリティLive2D講座】私がLive2D用立ち絵のパーツ分け・着彩時に気を付けていること
皆さんこんにちは、乾物ひものです。 前回のPSDファイル配布記事でお伝えした通り↓ 今回はこちらの猫鮪にゃんちゃんの立ち絵を着彩&パーツ分けしていく際に気を付けた点&工夫した点をお話ししたいと思います！ Live2D講座というよりイラスト講座ですが、 恐らくイラストを描かれるモデラーさんも支援者さんの中にはいら...
最初に、本講座の「初心者用」の定義についてお話しします。
昨今はLive2Dの講座もだいぶ数が増えてきまして、YouTubeなどで「初心者向け+Live2D」と検索すれば良質な動画が沢山出てくるような状況です。
そんな中、わざわざ私のFanboxにお金を払って初心者用講座を見に来て下さる方は、初心者だけど「最初からそこそこ凝ったモデルをしっかり作りたい！！」という方が多いのかな？と推測しております！
なので、本講座では、シンプルではありつつも、販売用モデルとして耐えうるクオリティの作り方を、動作の一つ一つまでかみ砕いて説明することで、ガチガチの初心者の方でも説明通りに作れば何とか着いてこれる！という状態を目指したいなと思っております！
一般的に上級者向けと言われている物理演算補正なんかもガッツリ解説するつもりでいますが、その分初心者の方にはかなりの情報量になると予想されます。
そこで、それぞれの情報を、モデルを作るうえで「必須である項目」と「飛ばしても良い項目」に分けることにします。
＜例＞
まばたき→必須
目の物理演算→飛ばして良い
「飛ばしても良い項目」は、あるとモデルの華やかさがアップしますが、今作るのはキツイ……と思ったら作らなくても構いません！
Live2Dに慣れている方なら当たり前に行うような動作でもなるべく全て文章化+画像化するつもりでいますが、抜けが出る可能性もあるので、もし分からないことがあったらお気軽にコメントくださいませ！！
そして注意点です。
本講座はLive2DのPRO版(有料版)での制作を前提に作られています。
また、制作時点での最新版のLive2D Cubism Editor(後述)を使用いたします。
もし需要があったらFREE版(無料版)の講座も作るかもしれませんが、FREE版はかなり機能が制限されているため、ガッツリ作りたい今回はPRO版で解説することにしました。
前置きは以上です！では解説GO！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【必須】データ・アプリのDL～モデルの読み込みまで
初心者用講座なのでここからガッツリ詳細に解説しますよ！！
必須の項目ですが既に知ってるわ！って方は読むのは飛ばしてくださいね！
Live2Dモデルを作るうえでまず必要になるのは「Live2D Cubism Editor」「PSDファイル」の2つです。
「Live2D Cubism Editor」はLive2Dモデルを作るアプリの正式名称で、2025年2月現在5.2が最新版です。
まだLive2D Cubism Editorをダウンロード(DL)していない方は公式サイトからDLしましょう！↓
まず、お使いのOS(Windowsかmacか！)を選びます。
その後「使用許諾契約およびプライバシーポリシーに同意する」にチェックを入れ、
初めてDLする方は「初めてダウンロードする」にチェック、
DLしたことある方は「アップデートをダウンロードする」をチェックします。
初めてDLする方のみ、自分のメールアドレスを入れる必要があります！
ここまで出来れば「最新のリリース版をダウンロードする」ボタンが灰色→オレンジ色になってクリック出来るようになりますので、クリックしてDLします！
↑こんな感じのオレンジ色のアイコンのインストーラーがDL出来ますので、クリックしてインストールを開始します。
言語は「日本語」「英語」「中国語」「韓国語」が選択可能です。
お好きなものを選択して「OK」をクリック！
後は、「次へ」や「同意する」を順番にクリックしていき、
「インストール」を押してインストールします！
インストールが終わったら「完了」をクリックしてウィザードを閉じます。
インストールに成功していれば、アプリが二つインストール出来ているはずです！
今回使うのは上のアイコンの「Live2D Cubism Editor ○○(バージョン名)」ですので、こちらをクリックします。
Live2D Cubism Editorが起動します。私はダークモードを使用しているので黒っぽい画面ですが、デフォルトだとライトモード(白っぽい画面)になっているはずです。
(ダークモードへの変更方法は本記事の最後におまけで書きます)
今回はPRO版を使用した講座なので、「FREE版として起動」以外を選びます。
が！ここで注意点です。
初めて使う方はPRO版の無料トライアルが出来るのですが、期間は42日間です。
↑確認画面が出ますが私からも念押しです。
この記事をリアルタイムで読んでくださっている方の場合、おそらくトライアル期間を使い切るまでに講座が完成しません(´;ω;｀)
対処法としては途中からFREE版を使うか課金するか、もしくは講座が出来上がってからトライアルを開始するか……になります。個人的には課金しても損のない素晴らしいアプリなので、私の記事を待たずとも他の講座を参考にしてトライアル開始しちゃっても全然OKだと思います！
課金した方はメールでライセンスキーが届くので、それを入力→「ライセンス認証」をクリックしましょう！
こういうホーム画面が出た場合は右上の×ボタンで閉じちゃってください。
これでLive2D Cubism Editor側の準備はOKです！
続けて、「PSDファイル」を用意します。
PSDファイルとは、Live2Dモデルを作る際に必ず必要になる、パーツ分けされたイラストのデータのことです。
bandicam 2025-02-27 19-55-49-348
こんな感じで、「ケモ耳のリボン」とか、「ケモ耳のふわふわ」とか、イラストが細かいパーツごとに分かれています。
まずこのパーツ分け済みのPSDファイルを用意するのが結構大変なのですが、この講座を読んでいる方は私の作った猫鮪にゃんちゃんのPSDデータをDL出来ます。やったぜ！
【PSD配布】色塗り終わりました
だいぶ時間がかかっちゃいましたが色塗り完成しました！！ ひものちゃん以外の絵描くのいつぶりだろう？ イラスト制作の腕がなまりきってなくて良かったです。 (休止期間が長すぎて乾物ひものと「私」との乖離が起こってて、最近よく乾物ひものにちゃん付けしてしまいます) 詳しいパーツ分けとか塗り方とか諸々は実際に...
↑の記事から「【猫鮪にゃん】着彩.zip」をDLしてください！
(ちゃんと規約を確認してね！)
「【猫鮪にゃん】着彩.zip」を解凍(解凍が分からない方は「zipファイル 解凍」で検索！)すると、PSDファイルが二つ出てきます。
Live2Dのモデリングに使うのは下の「Nekomaguro_import.psd」です。
「【猫鮪にゃん】着彩.psd」は、パーツ調整をしたり、パーツ追加をしたいときに使うPSDファイルです。これの使い方は後々解説すると思いますので、今は一旦放置で！
「Nekomaguro_import.psd」を、先ほど起動したLive2D Cubism Editorの画面にD&D(ドラッグ&ドロップ)します！
するとこんな画面が出ます。
これは、にゃんちゃんのPSDファイルの解像度(ざっくりいうと画像のサイズのこと)がとても大きいために出る確認画面です。
原寸だと重くなる可能性があるため、プレビュー時は画質を落とすことが出来るんですね！
1/8プレビュー(左側)と原寸(右側)ではこんなに違います！
なるべくなら原寸を選びたいところですが、「<推奨」マークが1/4とか1/8とかに付いている方は、原寸は控えて最大でも1/2に抑えた方が良いかもしれません！
自分に合ったプレビューサイズを選択して「OK」をクリックすると、立ち絵が画面右側に表示されます！
立ち絵が表示されている部分(モデリングビューというらしいです)の上でマウスホイールをぐるぐるさせると、拡大縮小が出来ます。
……が、拡大してよく見ると何やら表示が崩れていますね？
顔や目の影がはみ出ちゃってるし、
スカートの周りは何やら赤いものがあります💦
これは後からでも直せるし、最初に直すと二度手間になる(後々の記事で解説します)ので、私は普段のお仕事では気にせず崩れたまま作っちゃってます。
が、見た目がとーっても悪いので、今回はクリッピング機能(後述)の勉強がてら、最初にこれを直してしまいましょう！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【飛ばして良い】外れたクリッピングを直す
※見た目悪いままでも気にならない！という方や、二度手間がいやだ！という方は飛ばしてOK
※Live2D初めての方で、クリッピング何それ知らん！て方は読むだけ読んだ方がいいかも
そもそもなんでこんな風に表示が崩れてしまうのか？
それは、Live2D Cubism Editorへ読み込んだ時に「クリッピング」という機能が外れてしまうからです。
イラストを描く方にはお馴染みの機能なので理解がしやすいかもしれませんが、Live2Dにおける「クリッピング」とは、元となるパーツ(A)の範囲だけに任意のパーツ(B)を表示させる機能です。
↑BをAに対してクリッピングするとこんな感じの見た目になります！
にゃんちゃんの立ち絵には、このクリッピング機能が沢山使われています。
顔だけ見ても、クリッピングが外れていない状態ではこんな感じですが……
ぎゃー！外れるとこんな感じで影がはみ出し放題になるのです！
Live2Dに読み込んだ時にクリッピングが外れてしまうのは恐らく仕様です。
大変ですが直していきましょう！
デフォルト状態だと、左上に「パーツパレット」があります。
この、PCのフォルダみたいなマーク(水色で囲った部分。便宜上フォルダと呼びます)の中に、更にフォルダがあったりパーツ(これもLive2D上だと正式名称がちょっと違ってややこしかったりするのですが便宜上パーツと呼びます)があったりします！
フォルダ横の「V」(水色で囲った部分)をクリックするとフォルダが開いて中身を見れます。目玉のマーク(赤色で囲った部分)をクリックすることで、表示・非表示を切り替えることが出来ます。
まずは「全身」→「頭」→「表情」→「瞳」とフォルダを開いた上で、
上から順に「ケモ耳」「横髪」「前髪」フォルダを非表示にしましょう！
影がはみ出てるのが分かりやすいですね。
続けて、「瞳→」フォルダを開くと、瞳のパーツがずらーっと出てきます
先ほどの図に例えると、「白目→」パーツがA、赤枠で囲った４つのパーツがBです。白目の範囲内にだけ瞳のパーツを表示させたいのですが、はみ出ちゃってる状況です。
↑よく見るとはみ出てるね
では、「白目→」パーツをクリックして選択した状態で、画面真ん中上部の「インスペクタパレット」を見ましょう。
インスペクタパレットでは、選択しているオブジェクト(パーツとかフォルダとかの総称)の情報を確認・編集することが出来ます。
今回重要なのは、上から2番目の「ID」と、上から5番目の「クリッピング」です。
「白目→」パーツのID、「ArtMesh43」をドラッグ→キーボードの「Ctrl+C」を押してコピーしましょう！
↑この状態でCtrl+Cです
～ここでちょっと注釈～
乾物ひものはWindowsを使用しているので、「Ctrl」のようなキーは全てWindows用のものになります。本当はmacの動作も網羅したいところですが、macを使ったことがないので分かりませんごめんなさい！「Ctrl macだと何」とかで検索するとmac用のものが出てくると思います！
～注釈終わり～
「白目→」パーツのIDがコピー出来たら、これを瞳のパーツのクリッピング欄にペースト(「Ctrl+V」キー)することでクリッピングが出来ます。
一つ一つやってもいいのですが、折角なので一気にクリッピングしてしまいましょう！
「白目影→」パーツをクリックして選択した状態で、Shiftキーを押しながら「瞳→」パーツをクリックしましょう！するとこのように、複数選択をすることが可能です。
複数選択をした状態で、インスペクタパレットのクリッピング欄に「白目→パーツ」のIDを入力→Enterキーを押します。
これで一気に瞳パーツを白目パーツにクリッピングすることが出来ました！
このままだと、複数選択中なのでモデリングビューでは点がいっぱいあって分かり辛いです。モデリングビュー上のパーツが無い部分(例えば水色で囲った部分とか)でクリックをすると、選択を解除することが出来ます。
反対側の瞳と比べると、影がはみ出ていないのが分かりますね！
～ちょっと小ネタ～
先程「Shiftキー」を押してパーツの複数選択をしましたが、複数選択は「Ctrlキー」でも可能です。ShiftキーとCtrlキーの違いは、「一気に選択するか」「一個一個選択するか」です！
試しに先ほどと同じように「白目影→」パーツをクリックして選択した状態で、Ctrlキーを押しながら「瞳→」パーツをクリックしてみます。
するとこのように「白目影→」パーツと「瞳→」パーツだけが選択できます！
一気に選択したいときはShiftキーの方が便利ですし、飛び飛びでパーツを選択したいときはCtrlキーが便利です。用途に合わせて使い分けましょう！
～小ネタ終わり～
さて、クリッピングの基本の動作は分かりましたでしょうか？
同じ動作でクリッピングが出来る部分をざーっと一覧にしますので、先ほどと同じようにクリッピングしてみてください！
「瞳←」フォルダ内の「白目←」パーツにBで囲ったパーツをクリッピング
「輪郭」フォルダ内の「輪郭」パーツにBで囲ったパーツをクリッピング
「後頭部」フォルダ内の「後頭部」パーツにBで囲ったパーツをクリッピング
「首」フォルダ内の「首」パーツに「首落ち影」パーツをクリッピング
「コルセット」フォルダ内の「コルセット」パーツに「コルセット線」パーツをクリッピング
「襟・首」フォルダ内の「首リボン垂れ」パーツに「首リボン垂れ影」パーツをクリッピング
「スカート緑」フォルダ内の「スカート端」パーツにBで囲ったパーツをクリッピング
※ここはちょっと分かり辛いかも
「スカート白」フォルダ内のそれぞれのAパーツに、それぞれのBパーツをクリッピング
(「スカート白1」パーツだとクリッピングするのは「スカート緑落ち影」パーツです。数字にそれぞれ対応してます！)
ここまで出来たら、全身の表示はこんな感じになっているはずです。
うーん、まだ表示は崩れていますね。
残っている部分は、更にクリッピングの仕方に一捻り加えてやる必要があります。
まずは胸とデコルテ部分の影です。(分かりやすいように他を非表示にしました)
影がはみ出ているのでクリッピングをしたいのですが、ここは
このように「胸」パーツと「デコルテ」パーツの両方にBで囲ったパーツをクリッピングしてやる必要があります！
Live2Dでは、クリッピングの元になるパーツも複数選択が可能です！
これまでのように、「胸」パーツのIDをコピーしてペーストして、次に「デコルテ」パーツのIDをコピーしてペーストして……と順番に行ってもいいのですが、クリッピングの元になるパーツの数が3個、4個と増えていくと大変ですよね？
ではここで、「胸」パーツと「デコルテ」パーツを複数選択した状態で、そのまま「Ctrl+C」キーを押し、Bで囲ったパーツのクリッピング欄にペースト(Ctrl+V)してみてください。
↑この状態でCtrl+C
↑その後、Bで囲ったパーツのクリッピング欄でペーストをすると、一気にIDを入れられる！
クリッピングのやり方にもいくつか方法がありまして、胸とデコルテパーツのように複数のパーツにクリッピングをしたい場合は、直接Ctrl+Cでコピーするやり方が便利だと思います。
※もう一つ方法があるのですがそれは記事の最後におまけで載せます！
ではこの調子で、残った部分のクリッピングもしていきましょう！
「脚」フォルダ内のAで囲ったパーツに、「スカート落ち影」パーツをクリッピング
「腕」フォルダ内のそれぞれのAで囲ったパーツに、それぞれのBのパーツをクリッピング
ここまで出来たら、残りはこの主張の強いスカート周りの赤いパーツをどうにかするだけです！
試しにこの主張の強い赤いパーツ、「スカートマスク」パーツを非表示にしてみると、スカートの塗りが大きくはみ出しているのが分かります。
「スカートマスク」パーツは、このはみ出しを隠す(マスクする)ためのパーツなんですね！
インスペクタパレットのクリッピング欄の下に、「マスクを反転」というチェック欄があるのにお気づきでしょうか。
クリッピング欄にマスクをしたいパーツのIDを入れた状態で「マスクを反転」にチェックを入れると、
クリッピングとは逆に、元となるパーツ(A)の範囲に任意のパーツ(B)を表示させないことが出来ます！
更に凄いのが、このマスク機能、パーツの不透明度を弄っても関係なく発動します。
どういうことか実際にやってみましょう！
まず「スカートマスク」パーツを選択した状態で、インスペクタパレットの「不透明度」の割合を0％にします。
すると「スカートマスク」パーツは完全に透明になり、非表示と同じような見た目になりますね。
この状態で、「スカート端」パーツのクリッピング欄に「スカートマスク」パーツのIDを入れ、「マスクを反転」にチェックを入れます。
すると……
あら不思議！！スカートのはみ出しが綺麗に消えました！
不透明度を0%にして見た目を透明にしても、マスク機能の範囲は無効にならないので、このように専用のマスク用パーツを作ってはみ出しを消す、なんて芸当が出来ちゃうんですね～。
なんでこんなまどろっこしい事をするかというと、実際に講座で作るのはまだまだ先になると思いますが、スカートの角度を付ける時に綺麗な回り込みを作ることが出来るからなんです！
↑4年前に制作させていただいたVTuberさんのスカート部分にもこの技法を使っています！
お仕事でも使える上級テクニックなので、この講座で是非覚えて使ってみてくださいね🥰
今回の講座はこの辺でオワリマス！次回はまばたきを作っていきます！
(本当はこの記事でまばたきまで解説したかったのですが、文章量が多くなりすぎて断念しました＞＜)
ここまでで何か分からない事・気になる事があればお気軽にコメントくださいね！！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
～おまけ①ダークモードへの変更方法～
左上の「ファイル」→「環境設定」→「全般」→「カラーテーマ」で「ダークモード」を選択することで、私の講座と同じような黒っぽい画面に変更することが可能です！(変更は再起動後に反映されます)
私は目を酷使しすぎて明るい画面を見ると目がチカチカするので、最近はダークモードを使ってます💦
環境設定では他にも言語やオブジェクトの色など細かいカスタマイズが出来るので、慣れてきたら自分好みにカスタマイズしてみると良いと思います！
～おまけ②クリッピングのもう一つの反映方法～
インスペクタパレットのクリッピング欄の右端に、なにやらマークがあるのにお気づきでしょうか？
ここをクリックすると、クリッピング欄の下にパーツパレットのような表示が出てきて、ここで「今クリッピングしているパーツ」を確認出来たり、チェックを付けは外しすることで直接クリッピングするパーツを変更したりできます！
ID名で確認するより直感的なので、私もたまに使います！
このように、今後おまけコーナーでは「何通りかあるツールの使い方のうち、講座で使わなかった使い方」を紹介したり、講座に入れるほどではない細かいTIPSをご紹介したいと思います🥰
それではまた次回の記事でお会いしましょう！！
Comments
わああ嬉しいお言葉ありがとうございます(´;ω;｀) メンバーシップも入っていただけてるなんて！！ 少しでもああさんのお勉強の参考になれば嬉しいです(´;ω;｀) これからも記事執筆頑張ります！！
乾物ひもの＠Vtuber
2025-03-15 08:11:26 +0000 UTCすごく分かりやすくて感動して言葉になりません....（ ; ; ） 最近live2D に触れたばかりの初心者で、ひものさんのYouTubeをメンバー登録させていただき作成動画を見ながら勉強させていただいてたのですが並行してこちらも参考にさせていただきます。 本当にありがとうございます（ ; ; ）
ああ
2025-03-14 16:15:18 +0000 UTC次こそ……次こそは動くはず……ッ 全部書き終わったらたかきさんもLive2D作れるくらいの情報量目指します(｀・ω・´)
乾物ひもの＠Vtuber
2025-03-14 09:37:02 +0000 UTC信じられるかい、こんだけの文章量で、にゃんちゃんまだ1ミリも動いてないんだぜ、、、 : : 誰も置いてかないぞっていう、ひものさんの並々ならぬ気概が見える、すごく丁寧な解説でした。 次回も楽しみにしています！
たかき
2025-03-13 13:42:18 +0000 UTC
