1日で作る着せ替え3Dキャラ：AIパイプラインから公開Webアプリまで

Tripo AI Blender AccuRig Claude Code Google Stitch

AI が 1 枚の画像から 3D キャラクターを作れることは、もうご存じでしょう。すごい——でも正直、静止した オブジェクトが 1 つあって何の意味があるのか。ゲームではそうはいきません。ゲームにあるのはキャラクター単体ではなく、キャラクター ＋ワードローブ一式——帽子、メガネ、衣装、靴を思いのままに着せ替えできる存在です。

そこでこういうアイデアです。自前の小物一式（クローゼット）を持つ 着せ替えキャラクター も同じくらい簡単に作れること、そしてそれを Web アプリに包んで誰でも着せ替えできるようにすることを、お見せします。これは最初から最後までの完全なワークフロー——コンセプト、3D モデル生成、AI テクスチャリング、組み立て、リギング、ちょっと Unreal Engine に寄り道し、最後に AI コーディングエージェントで遊べる Web アプリを作る、まで。全部でおよそ 1 日、そして本当に楽しい仕上がりになりました。

完成品はもう公開中——まず遊んでみて

以下のすべては 「Some Serious Drip」 に集約されます。「呪われてるけど愛おしい」コーデを着せ替えできる 3D Pepe で、ランダム化もでき、シェア用カードとして書き出せます。まず開いて、それから各パートの作り方を見に戻ってください。 Some Serious Drip のデモを開く →

楽しい非営利のパロディ

このキャラクターは Pepe で、原作者へのすべての権利を尊重し、そのまま保持しています。これはワークフローを見せるためのパロディのファンプロジェクトであり、製品でも営利目的でもありません。

フルビルドを見る

全工程を最初から最後まで YouTube で。

YouTube で開く

1. 何かを生成する前に、ワードローブを設計する

いきなりモデル生成に飛びつきたくなります。やめましょう。着せ替えキャラクターの良し悪しはアセットのリスト次第なので、私はまずホワイトボードでリストを確定させます。テーマは、この非常に濃密だった 5 年間のインターネット文化への皮肉まじりの振り返り。だからアセットは自然と決まりました——例の赤い帽子、Apple Vision Pro、ハンドスピナー、ベイプ、どこにでもある Starbucks カップ、N95 マスク、Supreme のニット帽、いくつかのミーム系パーカー、などなど。

すべてを、最終アプリで見せるカテゴリーに分類します——帽子、アイウェア、フェイスウェア、衣装、スキン、ブーツ、アニメーション——そして確定したものは赤でマーク。このボードが そのまま 仕様書です。何個メッシュを生成すべきか、後でそれらがどうグループ化されるかが、正確にわかります。

コンセプトボードはそのまま仕様書——アセットは帽子 / アイウェア / フェイスウェア / 衣装で分け、確定したら赤でマーク。

2. Tripo Smart Mesh でベースキャラを生成

リストが固まったら、コンセプトを Tripo に持ち込み、Smart Mesh で生成します。こういうクリーンでスタイライズされた見た目には最適で——そして見過ごされがちなコツは、ポリゴン数を アセットごと に選び、必要なところだけディテールを上げられることです。頭は設定 7 を選び、それ単体でほぼ完璧な結果でした。

頭付きでボディを生成する——後で頭は差し替えるとしても

頭なしのボディを生成すると、AI は首や肩の位置を推測することになり、プロポーションがずれます。だから私は正しい全体プロポーションのためにボディと頭を一緒に生成し、その後より正確なバージョンとして頭だけをもう一度生成します。両取りです——プロポーションは正確、頭はシャープ。

頭に Tripo Smart Mesh。ポリゴン数はアセットごとに選び、Blender 用に FBX で書き出す。

3. Blender での頭部スワップ術

両パーツを Blender に入れます。ボディから頭を切り離し、別途生成したより良い頭をその位置にマージします。2 つのメッシュをきれいにつなぐのは、聞くより簡単です。

2 つのエッジループをブリッジ

頭の底のループと首の上のループを選び、右クリックして Loop Tools → Bridge。ワンクリックで 2 つの開口部が縫合されます。首にセグメントをいくつか足すと、遷移がより滑らかになります。

シェーディングを直し、手で滑らかに

オブジェクトモードに戻ってシェーディングを再計算し、スカルプトモードに入って スムーズ ブラシで継ぎ目をなで、Elastic Deform で全体形状を微調整します。これは少ない労力で大きなコントロールが得られる——AI がメッシュ作成という最難関をすでに片付けてくれた今、まさに時間をかけるべきところです。

プロポーションのために頭付きでボディを生成し、頭をよりシャープなものに差し替えて首でブリッジ。

これらは 5 分で身につく Blender スキル

ループのブリッジ、シェーディング修正、スムージング——どれも高度なモデリングではありません。AI 生成メッシュを扱うときに絶大な効果を発揮する、ほんの一握りの Blender 基礎です。詳しい版が見たければ、私のチャンネルにそれぞれの無料解説があります。

4. Tripo でテクスチャ、Modddif で修復

メッシュがきれいなので、Blender でサッと UV を作ります——テクスチャを安全に保つためにシームを数本入れるだけ（無料の UV Packer アドオンがあるとさらに良い）。そして Tripo に戻り、元の UV を保持し、最初に使ったのと同じ画像をアップロードして テクスチャ生成。すぐ使える出来栄えで、マテリアルで PBR を足したら先へ進みます。

同じ開始画像＋元の UV ＝ Tripo でのクリーンなベーステクスチャ、その上に PBR。

Pepe の目はブラシ 2 ストロークで

目は Blender で空白テクスチャを作り、白で塗りつぶし、黒のブラシを 1 ストローク引くだけ——これで目は完成。ラフネスは好みで調整。リアルな目が欲しい？球を置いて Nano Banana / Gemini で目のテクスチャを生成し、投影すればいい。

いくつかのアセットは文字が崩れて戻ってきます——「Supreme」のボックスロゴが少し変で、Starbucks カップの背面は完全にぐちゃぐちゃでした。問題ありません。Modddif（無料ツール）に入り、壊れた領域を塗り、修正を生成して、正しい文字で投影し直します。同じやり方で どんな テクスチャもあっという間に直せます。

Modddif で崩れた Starbucks テクスチャを修復——壊れた領域を塗り、再生成し、投影し直す。

なぜ Tripo でテクスチャし、必要な時だけ直すのか

Tripo でベーステクスチャを作り、問題箇所だけ直すと膨大な時間が浮き、単純なオブジェクトは一発で完璧です。Tripo は最近パーツセグメンテーションを本当に使えるものにし（v2）、8K テクスチャと PBR アップスケールを追加しました。私のチームが頼りにしているツールです。各ジェネレーターの実力は私たちの Arena リーダーボードで見られますし、修復ツールの詳しい解説は私の Modddif ガイドにあります。

5. Blender でワードローブを組み立てる

さあ楽しいところです。各アセットを Blender に戻し、スカルプトモード で 1 つずつボディに配置します。使うのは同じ小さな道具セット——移動、スケール、回転、そして衣服をきれいに垂らし重ねるための Elastic Deform と スムーズ ブラシ。手持ち品（コーヒー、ベイプ）は少し扱いが違いますが、帽子・メガネ・トップス・靴のワークフローはおおむね同じです。合計で、ワードローブ全体の組み立てと位置合わせに約 30 分 かかりました。

各アセットをボディに合わせ、コレクションに整理——帽子、トップス、ボトムス、靴、小物。

今や「組み立て」こそが本当のスキル

AI はすでに最難関——メッシュ作成——を解決しました。残るのは、そしてこれから一番大きなスキルになると私が思うのは、組み合わせること：プロポーション、フィット感、何が映えるかへのセンスと判断です。時間はそこに使うべきです。

6. AccuRig で一度だけリギング

FBX で書き出し、 AccuRig に持ち込みます。手間を大幅に省く 2 つの書き出しのコツ：手持ち品の重複は書き出す必要なし（後でマテリアルを差し替え、1 つだけリグすればいい）、そしてオブジェクトを結合する必要も ありません——分離したまま書き出して分離したまま保てば、後でマテリアルをきれいに再割り当てできます。

マーカーを置いてキャリブレーション

AccuRig はいくつかのジョイントマーカーの配置を案内してくれます。Pepe は 指が 4 本 なので、4 本指のハンドリグを選んでください——ここは飛ばさないこと。キャリブレートを押せば結果は良好。よくある問題箇所は脇の下と非標準プロポーションですが、スタイライズされたキャラには ポーズオフセット オプションが対応してくれます。

無料アニメーションをいくつか取得

AccuRig は無料で、無料アニメーションも付属します。私は 2 つ書き出します——普通のアイドルと、何かを持っているアイドル——キャラにはコーヒーやベイプを持つ状態があるからです。

AccuRig：マーカーを置き、4 本指のハンドリグを選び、キャリブレート。無料・高速、アイドルアニメ付き。

着せ替えアバター向けのウェイト 2 つの近道

剛体アクセサリー（Vision Pro、帽子、メガネ）は頭ボーンだけに追従させます。塗る代わりに、頂点グループで頭ボーンをロックし、ロックされていないグループをすべて削除——これで一手で 100% 頭ウェイトになります。
脚をボディから分離 して別オブジェクトにし、衣服が覆う部分を隠せるようにします。ゲームではパンツの下のボディはレンダリングしません——脚かパンツのどちらかを表示し、両方は決して出さない。これでクリッピングを避けられます。

7. 任意の寄り道：Unreal Engine に投入する

まったく同じキャラクターをそのままゲームエンジンに入れられます。変えるのは、AccuRig から書き出すときに Unreal Engine 5 のスケルトン を選ぶことだけ。キャラとそのアセットすべてを UE5 に持ち込み、アニメーションをデフォルトの サードパーソン ブループリントテンプレートにリターゲットし、オブジェクトを切り替える簡単なブループリントを組みます。そこから先は、あなたのゲームロジック次第です。

同じリグ・UE5 スケルトン：サードパーソンテンプレートにリターゲットし、小さなブループリントで小物を切り替える。

8. Claude Code + Google Stitch で Web アプリを作る

ここが一番楽しかった部分です。準備済みでリグ済みのアセットを GLB で書き出し、Blender で各オブジェクトにわかりやすい名前を付け、AI コーディングエージェントにコンフィギュレーターを作らせます。エージェントに渡す重要な前提：アセットはすべて 1 つのアーマチュア上にあり名前も付いているので、表示と非表示を切り替えるだけでいい、ということ。

私は Claude Code を 2 つのスキルパックで動かします——コミュニティの Designer Skills と Google Stitch Skills——さらに Stitch MCP を加え、まっさらなプロジェクトフォルダーで：

# In an empty project folder, add the skills to Claude Code:
npx -y skills@latest add julianoczkowski/designer-skills -y -a claude-code
npx -y skills@latest add google-labs-code/stitch-skills  -y -a claude-code

# Then connect the Stitch MCP (stitch.withgoogle.com -> Settings -> Setup MCP),
# and restart Claude so the new skills + MCP load.

そこから、デザインからアプリへのパイプラインは一連のスキルです：

/grill-me → ブリーフ

まず /grill-me を使い、最初にデザインに集中したいと伝え（スタックの選定に深入りしないように）、質問攻めにしてもらいます。出てくるのはデザインブリーフ。/design-brief がそれを本物のデザイン文書にします。私が欲しかったのはアセットを選ぶシンプルな UI——そしてこの最中に、自分が「スタイル」、つまり drip を測っているのだと気づきました。そこから名前が生まれました：drip メーター付きの Some Serious Drip。

/stitch デザインシステム → /stitch-loop

/enhance-prompt で Stitch 用プロンプトを磨き、 /stitch manage-design-system で土台を築き、それから /stitch-loop——中核スキル——を実行して全画面（デスクトップ＋モバイル）をデザインします。ここで複数の異なるデザインシステムを探求することもできます。

/design-tokens → 計画 → ビルド

/design-tokens でデザインから実際の変数を生成し、 /frontend-design でビルドします。私の最も強い Claude Code 一般アドバイス：まず計画。実装前に /brief-to-tasks でビルドをクリーンなタスクリストに切り分ける——結果がはるかに安定します。あとは動くのを見て、レビューする。

/design-review → 修正

最後に、/design-review がエージェントに、ブリーフ・デザイン文書・先ほどの Stitch コンセプト画面に照らして自分の成果物を批評させ、見つけた問題を修正させます。画面サイズをいくつか手で確認すれば、完成です。

Web アプリのフロー：Designer ＋ Stitch スキルをインストールし、grill-me → design-brief → stitch-loop → design-tokens → brief-to-tasks → frontend-design → design-review の順に実行。

エージェントが自分でパスを直す

GLB は 1 つのアーマチュア上で、明確なオブジェクト名を付けて書き出されているので、エージェントは表示/非表示のロジックを自分で配線します。データ——名前、カテゴリー、どれがスキンでどれが衣服か——を渡せば、配管はエージェントがやってくれます。

9. 成果：Some Serious Drip

しばらくすると、アプリができあがりました。プリセットを選び——touch grass、btc gold、chrome、wet slime——この男を着せ替えると、drip メーターが Drip・Chaos・Cringe・Aura をその場で再評価します。ボディ全体を置き換えるスキンに替えたり、アイテムを脱がせたり（「パンツなんて要る？」）、そして シェア用カードを書き出す こともできます——私のは「The Quiet Flex」になりました。あとは友達に送るだけ。最高でしょう？

完成したコンフィギュレーター——プリセット、リアルタイムの drip メーター、ボディを置き換えるスキン、そしてワンクリックのシェア用カード。

本ガイドのデモは TOP 3D AI で公開中です。カエルを着せ替え、コーデをランダムに引いて、自分のカードを書き出してみてください。

Some Serious Drip を開く

実際に手に入るもの

再利用できるキャラ＋クローゼット

リグ済みのベースメッシュ 1 つと、着せ替え可能な AI 生成アセットのライブラリ。

ゲーム向けの最適化

分離したボディパーツと、頭ボーンだけのアクセサリー——クリッピングも無駄もなし。

エンジンも Web も、同じソース

まったく同じリグが Unreal Engine 5 にもブラウザのコンフィギュレーターにも入る。

1 日で出せるアプリ

あなたの GLB とデザインブリーフから、AI エージェントがビルドして自己レビュー。

これが全パイプラインです：コンセプトから、着せ替え可能でリグ済みのキャラクター、そして公開された Web アプリまで、1 日で、重労働は AI に、一番大事な部分はあなた自身のセンスで。こうしてキャラを組み立てる新しいツールは次々と登場します——登場すればすぐに Arena に入るので、手を出す前に比べられます。