自作の着せ替え人形を公開
1枚の設計図から3Dまで
Opus 5.5と協力して検証したワークフローです。ChatGPT、Tripo、Blender、three.jsを使い、1枚の設計図から、ブラウザ上で着せ替え、ダンス、4言語での発話ができる3D着せ替え人形を作りました。各ステップに、やり方、合格基準、理由を添えています。
1枚の設計図、10のステップ
動画に登場するのは陽菜 Hinaで、4種類のスタイルでそれぞれ別の言語を話します。OLスーツでは怒りながら中国語、アイドル衣装では恥ずかしそうに日本語、ショートヘアでは韓国語、元のスタイルでは英語です。陽菜は3D着せ替え人形で、VRM（3Dキャラクターでよく使われるファイル形式）として保存しています。ChatGPTで描いた設計図から始めて、2026-09-29に着工し、10-05に公開版が完成しました。途中でClaude Codeの利用枠を使い切ってしまい、数日間止まっていました。
このプロジェクトは、最初から最後までOpus 5.5との対話で進めました。この記事では、検証して分かったやり方を10のステップにまとめています。各ステップは次の3つに分かれています。
- やり方：そのとおりに進められる手順
- 検収：測定できる基準
- 理由：テスト中に遭遇したことと、そこからこの形に決めた経緯
使用したツールは次のとおりです。ChatGPT（設計図、四面図）、Tripo（3D 生成、自動リギング）、Blender（組み立てと修正）、three.js と three-vrm（Web レンダリング）、ElevenLabs（音声）、wav2vec2（リップシンク）、Mixamo（モーション）。
私が画像を見て決め、Opus 5.5 が手を動かす
役割分担は初日に決め、その後は変えていません。
- 私：デザインの方向性を決める。各ステップの終わりに画像を見て合否を判断する。Tripo のポイントを使う前に承認する。アカウントのログインと支払いを行う
- Opus 5.5：Blender、計測、Web 用のコードを書き、Blender をバックグラウンドで実行する。ChatGPT と Tripo の Web 画面を操作する。各ステップの成果として比較画像を私に見せる
画像の確認には 2 つのルールがあります。
- 検収用の画像は 1024 px 以上にし、顔は別途切り出して拡大した画像を用意する
- 顔は正面、左右 30°、真横の 4 つの角度から確認する
理由
1 回目は、1 枚の設計図からモデル全体を一気に生成しようとしました。これは虫が良すぎる考えでした。生成されたモデルはポリゴン数が足りず、ディテールも不足していました。そこで、頭・髪・体を別々に生成し、最後に結合する方法に変更しました。
まず品質の基準を決める
やり方
作業を始める前に、three-vrm 公式のサンプルモデルを同じプレビューページに入れてスクリーンショットを撮り、「このレベルまで仕上げる」という目標を先に決めました。
理由
1回目は基準がなく、作り終えてウェブページに載せてみて初めて、大きく違っていることに気づきました。参考にした2人のクリエイターも、完成品はまだ粗いと話しており、そのうち1人の言葉をそのまま引くと「カメラを近づけると持ちこたえられない」とのことです。期待値は、着工前にはっきり伝えておく必要があります。
四面図を3セット描く
やり方
- ChatGPT に四面図（正面、左、右、背面）を3セット描いてもらいます：
- 頭：髪のない坊主頭で耳を出す。目は大きく開いて虹彩全体が見えるようにする。口は「あ」の形に開き、上の前歯と舌が見えるようにする。首は鎖骨の上で水平にカットする
- 髪：髪と髪飾りだけで、中は空洞にする
- 体：T字ポーズで立たせる。首は頭と同じ高さでカットする
- どの画像にも、デザイン画と同じ角度のビューを添付し、「添付画像を編集して」と依頼します
- 1枚ごとに新しいチャットを開きます
- 体の側面図には「腕をカメラに正対させる」と明記します
検収
- 頭頂、顎、肩、足裏の高さの差が、4枚の図のあいだで画像の高さの2%未満であること
- 左側面図で、キャラクターの顔が画面の左側を向いていること
- 4枚の図でアクセサリーの数が同じであること
理由
- 頭は口を開けた状態で生成すると、歯・舌・口腔が立体メッシュになります。閉じた口は後から作り戻せますが、口を閉じた頭からは口腔を作れません
- テキストの説明だけで描かせた髪の四面図は、髪型がデザイン画とかなり違ってしまいました
- 同じ会話の中で続けて側面を生成すると、3/4 ビューになってしまいます。体の側面を明記しないと、腕が背中側に伸びてしまいます
- デザイン画自体が矛盾することもあります。側面の鼻先は目からあごまでの 44% の位置ですが、正面では 27% です。正面を基準にしました
Tripo で生成し、テクスチャは最後に適用します
やり方
- Smart Mesh P2.0 のマルチビューで、パーツを一つずつ送ります：頭 → 体 → 髪。1パーツあたり 100 ポイントです
- 送信のたびに次の 4 項目をリセットします：モデル P2.0、アップロード枠の 2 番目のアイコン（マルチビュー）、面数 25,000、プライバシー Private
- まずはメッシュだけを生成します。組み立てと比率の調整をすべて終えてから、最後にテクスチャを適用し（1パーツ 20 ポイント）、頂点位置をもとに UV を修正済みのメッシュへ移します
検収
ダウンロード後に面数を数えます。1パーツあたり約 25,000 の四角形面になっているはずです。5,000 しかない場合は、設定がリセットされています。
理由
- ページを読み込むたびにデフォルト値に戻り、面数のデフォルトは 5,000 だからです
- アップロード枠の 3 番目のアイコンはバッチモードで、4 枚の画像からそれぞれ 1 つずつモデルを生成し、300 ポイント消費されます
- 頭が最も難しいので、先に頭を生成し、気に入らなければ頭だけ引き直します
- 実測したところ、テクスチャを適用してもメッシュは変わりません。頭の 52,220 面はすべて見つかり、頂点位置も同じで、UV シームに沿って分割されるだけでした。なので、メッシュは先に安心して修正できます
- Left の枠にはキャラクター自身の左側面を入れます。最初の回は左右を逆に入れてしまい、頭の側面が後頭部にできて、360 ポイントが無駄になりました
デザイン画の高さに合わせて組み立てる
やり方
- デザイン画上で、頭頂、目、あご、首の付け根のピクセル高さを測ります
- スカートの裾と靴底からメートルに換算し（今回は1ピクセルあたり0.785 mm）、その高さに合わせて3つのパーツを配置します
- 行ごとにモデルとデザイン画のシルエット幅を比較し、差分表を作ります
- 一度に1か所ずつ直し、直したら表全体をもう一度実行してから、次の箇所を直します
- 正面と背面が合わないときは、両方の平均を取ります
検収
一か所直すたびに比較表を再実行し、修正前後の比較画像を見せてください。
理由
- 首の幅に合わせてスケールしたところ、頭が1.4倍大きくなりました。生成された首は、体側の部分より細かったのです
- 最初の比較表には十数項目の差が並びましたが、そのうち2項目は測り間違いでした。あごが「22%狭い」というのは目で読んだ数字で、列ごとに測り直すと70対69 pxでした。足首が「16%細い」というのは靴の履き口を測ったもので、モデル側の該当行はまだ靴下でした。差が不自然に大きいときは、まず測った位置を確認します
- デザイン画の正面図と背面図は食い違います。同じスカートなのに、正面のほうが背面より10%広いのです
継ぎ目は一層ずつ直します
やり方
頭と体は首でつながっているので、以下の順序で確認と修正を行います。
| 順序 | 層 | 確認項目 | 修正方法 | 今回の結果 |
|---|---|---|---|---|
| 1 | ジオメトリ | 境界に沿ってサンプリングし、隙間を測ります | 身体の切り口に、頭側の輪を構成する各頂点を補います | 0.19 mm → 0 |
| 2 | 法線（光の当たる向き） | 継ぎ目の両側の法線がなす角 | 継ぎ目には両側の平均法線を使います | 22.2° → 0.01° |
| 3 | テクスチャ | 切り口の両側の RGB の差 | 身体のテクスチャのうち肌色に近いピクセルに、チャンネルごとにゲインを掛けます | (13, 9, 11) → (1, 1, 2) |
| 4 | ウェイト（どのボーンに追従して動くか） | 7 種類のポーズでの最大の亀裂 | 頭の縁を身体の縁に貼り付け、ウェイトは身体側から補間し、上方向に 15 mm かけて元のウェイトへブレンドして戻します | 3.27 mm → 0.001 mm |
| 5 | 輪郭線 | 目視 | 継ぎ目から 1 cm 以内には輪郭線を描きません | 黒い線が消えました |
理由
頭と体を別々に生成したため、継ぎ目はどの層でも一度は問題を起こしました。前の層を直して初めて、次の層の問題が見えてきます。ウェイトは 2 回に分けて修正しました。1 回目は上を向いたときの裂け、2 回目はうつむいたときのあごの下のしわの対処です。
リグ設定とスプリングボーン
やり方
- 全体を 4.5 万面にリダクションし、Tripo Auto Rig（VRM 1.0 ヒューマノイドボーン、20 ポイント）にアップロードします
- ダウンロード後、90° ずつ 4 方向を試し、ICP で元の位置に合わせます
- 最近傍の面から補間して、ウェイトを完全なメッシュにコピーします
- 髪のウェイトはすべて頭骨のみに設定します
- スプリングボーンを追加します。髪は頭を囲んで 20° ごとに 1 本のチェーン（13 本、各 5 節）、スカートは腰ボーンを囲んで 30° ごとに 1 本（12 本、各 3 節）です
- スカートの左右の半分は、高さに応じてウェイトの一部を同じ側の太ももに振り分け、裾は最大で半分までとします
- 胴体のシルエットを計測します（2 cm ごとに 1 層、各層 36 方位）。Web で動作を再生するとき、手がシルエットに入ったら上腕を外側に回転させます。1 回あたり 4°、最大 48° です
検収
- ウェイトのない頂点は0個、位置合わせの残差は約1 mmです
- 6つのポーズ（腕を45°下ろす、肘90°、膝60°、腰をひねる20°、首を回す30°、うなずき15°）のクローズアップです。関節や首は破綻していません
- 36個のテストポーズで、胴体にめり込んだ手の頂点が976個から59個に減りました
理由
- 15.7万面のモデル全体をAuto Rigに送ると、「Polygon Limit Exceeded」が表示されます
- Tripoはアップロードしたモデルの向きを変え、さらに高さ1 mに縮小します
- Tripoが出した髪のウェイトを使うと、腕を下ろした途端に前髪が引っ張られてしわになります
- スカートは20° × 4節で試しました。スカートの裏地が太ももに密着しすぎていてコライダーが5 mmまで縮み、太ももがそのまま突き抜けました
- Mixamoのモーションは別の体型で作られているため、手が胸や腰にめり込みます
表情は口を開けた状態から逆向きに作る
やり方
- 口を閉じる表現も目を閉じる表現も、口を開け目を開けたモデルから逆向きに押し戻して、シェイプキー（頂点の変位を記録する変形）にしました
- 別途、目と口を閉じた参照用の頭部（100ポイント）を生成し、位置合わせしたうえで、まぶたと唇にその表面の深さを取らせ、周囲に向かって徐々に弱めています
- まぶたのスライドは調和場で解き、まぶたの硬い部分、下まぶた、外周を固定しました
- 唇の間の歯のテクスチャは、口紅で塗りつぶします。両唇の間のくぼみに沿って顔のテクスチャにベイクし、唇のラインから上2.2 mm以内で唇の色より明るいピクセルを、先に唇の色で塗りつぶします
- 口紅は色相だけを変え、元の唇の色の明暗は残しています
検収
- 口を閉じた状態：5つの角度から口の中を見て、見えるピクセルは 0 でした（対照群：全開時の正面は 10,854 px）
- 口を開けた状態：25%、50%、75%、100% まで開いても、歯も舌も唇を突き抜けません
- 目を閉じた状態：正面と左右 30° から、露出してしまう眼球の隙間を数えました（今回の確定版では右目が 0 本、左目が 1–3 本）
- すべての表情を側面からも一度確認します
理由
- この頭部は、眼球が周囲の皮膚より 6 mm 深い位置にあります。まぶたを元の深さのまま下へ滑らせると眼窩にU字型のへこみができ、平らにならすと今度は腫れたように見えてしまいます
- 上唇をそのまま閉じると 6.4 mm 前に突き出てしまいますが、正面からは分かりません。参照用の頭部を借りたところ 3.8 mm まで下がりました。参照用の頭部自体は 4.0 mm です
- Tripo は上の歯を口を開けたテクスチャに描いており、口を閉じると上唇の下端にちょうど重なって、正面からは白い線に見えます。口紅を焼き込んだところ、唇のライン上の白いピクセルは 577 個から 0 になりました
着せ替えと表情
やり方
- 服：ChatGPT に四面図を新しい服に描き換えてもらい → Tripo で T ポーズの頭なし身体を生成 → ICP で陽菜に位置合わせ（各ラウンドで誤差が最大の 30% を除外）→ 各頂点に陽菜の身体の最近傍点のウェイトをコピー（スカートは除き、影響の大きい上位 4 本のボーンを残す）→ 首の切り口を頭に接続します
- 髪型：Tripo で「頭＋髪」を生成し、陽菜の頭をその頭に重ねて位置合わせを算出します。髪はこちらに移して、頭ボーンにバインドします
- 怒り、照れ：眉毛をテクスチャから切り出してパーツにし、元の位置は肌色で埋めます。照れにはさらに頬の赤みを追加します
検収
すべての服をウェブページ上で実際に着せ、すべての表情をウェブページ上で一度ずつ切り替えました。
理由
- 一度体にリグを組めば、服はそのウェイトをコピーするので、何着替えてもボーンを組み直す必要はありません
- 眉毛を肌に描いた場合、肌が 2–4 mm 動くと、眉尻付近で 22–47 個の三角形が裏返ります
- 紫色のカールヘアは作ったものの、載せませんでした。髪が薄すぎて、禿頭のように見えたからです
現在、ヘアスタイルはハイポニーテール、お姫様ヘア、ショートの3種類、衣装はアイドル衣装とOLスーツの2着があります。
声とリップシンク
やり方
- ElevenLabs の Voice Design でテキストから声質を記述して陽菜（ひな）の声を生成し、Eleven v4 で中国語・日本語・英語・韓国語のセリフを読み上げさせます（無料プランです）
- wav2vec2（XLSR-53、国際音声記号を出力するバージョン）で、20 ms ごとに音を1つ認識します
- 音素を a、i、u、e、o の5種類の口形にまとめます。i、u で始まる渡り音（「月」「亮」のような音）では、後ろの母音の口形を使います。b、p、m、f、v では一瞬口を閉じます
- 口の開き具合は音量で決め、閉じ・半開き・全開の3段階とし、1秒あたり30フレームで処理します
- モデルには口を開いた形状が1つしかありません。i、e、o、u はウェブ上でその形状から導きます。口の開きを小さくし、口角を外に引くと i、e、内側にすぼめて前に突き出すと o、u になります
- 字幕は ElevenLabs が返す単語ごとのタイミングを使い、言語ごとにオフセットを1つずつ補正します
検収
字幕のタイミングは音声と合っている必要があります。「この単語を発音している最中」と「音が十分に大きい」という2本のタイムラインをずらしながら比較し、重なりが最も多くなるオフセットを採用しました。今回の結果は、中国語が0.24秒、韓国語が0.15秒、日本語が0.12秒、英語が0.04秒の前倒しでした。
理由
リップシンクは音声だけを見ているので、4言語で同じプログラムを共用できます。ElevenLabs が返すタイミングは実際の音声より遅れており、その遅れ幅は言語によって異なります。
ウェブページに載せる
やり方
VRMを書き出し、three.jsとthree-vrmを使ってWebページ上でリアルタイムにレンダリングしています。Mixamoのモーションは、先にローカルで陽菜（ひな）のスケルトンに変換しています。完成品は記事の一番下にあり、そのまま遊べます。
公開版には、さらに三層の保護を施しました：
- テクスチャは256 pxに下げ、オリジナル版は自分のパソコンに保管しています
- モデルとモーションは暗号化して配信します
- テクスチャには目に見えない透かしを埋め込みました
Webページ上で回せるモデルは、ファイルが最終的に読者のパソコンに届いてしまいます。この三層は、ハードルを上げることしかできません。
検収
ライセンスは一つずつ確認しました。
- Mixamo：商用利用は可能ですが、元のモーションファイルは再配布できません。公開版には変換後のモーションだけを置いています。これはゲームでの扱い方に倣って規約を解釈したもので、Adobeには確認していません
- Bandai Namco モーションデータセット：CC BY-NC-ND。別のキャラクターに適用すると改変にあたるため、公開版には入れていません
- ElevenLabs無料プラン：elevenlabs.ioを表記、非営利
いくらかかったか
記録に残っている現金支出は、Tripoの1か月分のProプランだけです。月額CN¥140で、初月は30％オフとなり、実際の支払額はCN¥98でした。2026-09-29に支払い、請求期間は9/29–10/29です。P2.0のモデルを書き出すにはProが必要です。
ポイント（記録が残っている分のみ。着せ替えの生成は記録していません）：
| 用途 | ポイント |
|---|---|
| 頭、体、髪のメッシュ | 300 |
| 体と髪のテクスチャ（頭は 8K を試用、0 ポイント） | 40 |
| Auto Rig | 20 |
| 目と口を閉じた参照用の頭 | 100 |
| 1回目は左右を逆にしてしまい、無効になりました | 360 |
その他のツール：ElevenLabs は無料プラン、Mixamo は無料、Blender と three.js はオープンソースソフトウェアです。ChatGPT と Opus 5.5 のサブスク代は、上記の現金には含めていません。
Opus 5.5 がこの1週間で書いたコードと修正は、合計 93 コミットです。
まだ終わっていないこと
現時点で分かっている問題：
- 目を閉じたときに目尻の外側に細い断片が出ます。まつ毛はやや太めで、数本とがった部分があります。左目は横から見ると、眼球の継ぎ目が 1～3 本見えてしまいます
- うつむきながら首を回すと、あごの下に薄いしわがまだ残ります
- 右の口角に、60° を超えて折れ曲がっている小さな面が 2 つあります
- 近くで見ると、下唇の下に細かい粒状のノイズがあります
- T ポーズのときに腕が髪を貫通します（公開版では腕を下ろした状態がデフォルトです）
- スマートフォンでのパフォーマンスはまだ測っていません。公開版ページの統計では約 27 万個の三角面で、輪郭線の描画によってモデルがもう一度描画されます
次は陽菜（ひな）を完全な着せ替え人形に仕上げます。以下の3項目は、まだどれも試していません：
- 着せ替えシステム
- 瞳の色：眼球は独立したメッシュなので、そのテクスチャの色だけを差し替える予定です
- 表情：VRM 標準の「嬉しい」「悲しい」「驚き」「リラックス」を追加します
- 服装とモーション：引き続き追加
- 体型と顔型を作り込む
- 身長、脚の長さ、頭と顔の大きさ：ボーンをスケーリングする予定です。想定しているリスクは、非等比スケーリングによって顔や手が変形してしまうことです
- バスト、ウエスト、ヒップ、顔幅：shape key にして、スライダーで調整する予定です
- 服：どの服にも、体に対応する shape key を一組ずつ用意する必要があります。体を太らせたときに服も一緒に変形するようにするためです。ここが最も作業量の多い部分になる見込みです。体型スライダーを 1 本増やすたびに、すべての服で一組ずつ追加作業が発生します
- webcam モーションキャプチャ：ブラウザ上で顔と体のランドマークを検出し、ボーンの角度と表情のウェイトに変換して、陽菜（ひな）にリアルタイムで適用する予定です。映像は読者のパソコン内だけで処理し、アップロードしません
遊んでみる
ドラッグで視点を回転でき、ボタンで髪型・服・表情を切り替えられます。右上のメニューには 38 個のモーションがあります。モデルが直接ダウンロードされるリスクを下げるため、Web 版のテクスチャは 256 px に落としています。近くで見ると少しぼやけますが、これは正常な仕様です。
著作権表示
- 陽菜 Hina のキャラクターデザイン、3D モデル、テクスチャ、表情、着せ替えは © 2026 JonesHong に帰属します。このページでの閲覧に限り、ダウンロード、転載、再配布、改変はできません
- 3D メッシュとテクスチャ：Tripo AI で生成（tripo3d.ai）
- デザイン画と四面図：ChatGPT（OpenAI）で生成
- 音声：ElevenLabs で生成（elevenlabs.io）
- モーション：Mixamo（© Adobe）。ページには変換後のモーションデータのみを掲載しており、元ファイルは提供していません
- Web レンダリング：three.js（MIT、© three.js authors）、@pixiv/three-vrm と @pixiv/three-vrm-animation（MIT、© pixiv Inc.）
- 3D 編集：Blender（GNU GPL、Blender Foundation）
- リップシンク：wav2vec2 XLSR-53 音素認識モデル（Apache-2.0、Meta）
10 ステップをあなたのキャラクターファイルと照らし合わせる
分けて生成する、層ごとに継ぎ目を直す、表情は横から確認する、公開前にライセンスを調べる。この四つが最も見落としやすいポイントです。
以下の文章をお使いのAIに貼り付けて、手元の3Dキャラクターと照らし合わせてもらいましょう。
さらに読む
| リソース | なぜ重要か |
|---|---|
| Nano（@Dstudio_ai）さんの制作紹介 | 頭と体はそれぞれ2万面で、半分以上の時間をウェイトのペイントに費やし、顔のテクスチャは手作業で修正する必要があります。そのため、各パーツを25,000面に設定しました。 |
| お寿司職人（@SushiNFTart）さんの長文記事 | 髪、頭、体の三つを別々に生成し、口は口を開いたモデルから逆算して作ります。このワークフローの順序は、この記事に由来しています。 |
| three-vrmのhumanoidAnimationサンプル | MixamoのモーションをVRMのスケルトンに変換する方法です。ステップ10でモーションを事前に変換する際に使っているのが、このコンバーターのコードです。 |