Claude Anatomyとは？1行の指示で動く3D立体分解図を生成するClaude Codeスキルの使い方

Claude Anatomyとは、1行の指示文を与えるだけでWebブラウザ上で対話操作ができる3D立体分解図のコード一式を生成するClaude Code専用のオープンソーススキルです。複雑な機械構造や内部機構をわかりやすく伝えたい場面で、図解作成にかかる手作業を一気に削ぎ落とせます。

技術ドキュメントや製品仕様書を作成するとき、平面的で静止した画像だけでは部品の噛み合いや内部の流路が十分に伝わらない悩みを抱えていませんか。

専門の3Dモデリングツールを立ち上げて何時間もかけてモデルを組み上げなくても、ターミナルからClaude Codeに簡単な説明文を渡すだけで、部品ごとに分解・可動するインタラクティブな図解が手に入ります。

本稿では、Claude Anatomyの仕組みからClaude Codeへの導入手順、具体的なプロンプトの記述例、実務で役立てるための運用ポイントまで具体的に整理してお伝えします。

---

Claude Anatomyとは？1行から3D分解図を生成するスキルの実態

Claude Anatomyは、ターミナル上で対話型コーディングを行うCLIツール「Claude Code」に組み込んで動作する拡張機能（スキル）です。自然言語による機械の構造説明を読み取り、立体的なアイソメトリック分解図を含むHTMLおよびJavaScriptコードを自動で書き出します。

従来の画像生成AIでは、どれほど緻密な画像を生成してもカメラの角度を動かせず、内部の部品を拡大して調べる操作は不可能でした。Anatomyは静止画ピクセルを出力するシステムではありません。Three.jsや素のWebGLを用いた立体描画コードを直接構築し、ブラウザ上で滑らかに動く対話型オブジェクトを組み立てます。

指示文の入力（「ジェットエンジンの断面とタービンの回転」など）
   │
   ▼
Claude Code + Anatomy スキル
   │ （構造定義・部品座標・アニメーションループ・シェーダーコードの構築）
   ▼
単一のスタンドアロンHTMLファイル（Three.js / WebGL / CSS）
   │
   ▼
ブラウザ上で回転・拡大・部品分解・断面観察・透過表示

出力された成果物は外部依存の少ない単一のHTMLファイルとして保存されます。特殊な3Dビューワーアプリを用意しなくても、Google ChromeやSafariなどの一般的なブラウザで開くだけで即座に動作します。マウス操作で視点を360度自由に変えながら、各コンポーネントがどのように組み合わさっているかを直接観察できる点が最大の特徴です。

---

従来の静止画図解と何が違う？WebGLシェーダーと3Dモーションの仕組み

Claude Anatomyが従来のドキュメント作成手段と大きく一線を画す要因は、部品の「可動性」と「物理シェーダーの統合」にあります。

一般的な2Dイラストやダイアグラム作成ツールでは、矢印や透過レイヤーを駆使して内部構造を推測させる必要がありました。一方、Anatomyが生成する立体図解は、すべての主要コンポーネントが独立した3Dメッシュとして定義されます。

本物の3Dモーションと分解機能

出力された画面上には、スライダーやクリック操作による展開アニメーションが最初から実装されます。たとえばトランスミッションの構造を表示した場合、ギア同士が実際に噛み合って回転する様子を表現しながら、分解ボタンを押すことで部品が外側へスライドして並びます。部品ごとの位置関係と分解手順が視覚的に一瞬で把握できる構造です。

WebGLシェーダーによる流体・燃焼の動的描画

金属やプラスチックのソリッドな質感だけでなく、炎、水流、プラズマといった流体現象をWebGLフラグメントシェーダーによってリアルタイムに計算・描画します。ボイラーの燃焼室やポンプ内の水流サイクルなど、動きを伴わなければ理解しにくい熱力学・流体力学的な要素も直感的に表現可能です。

以下の表は、従来の図解手法とClaude Anatomyのアプローチを比較した整理です。

この比較から分かる通り、Anatomyは専門モデリングソフトの精密さと生成AIの手軽さの中間に位置し、Web上で即座に共有できる実用性を備えています。

---

Claude Anatomyで生成できる機械・構造モデルの表現力

Anatomyが対象とする領域は多岐にわたります。単なる幾何学的な立方体の組み合わせにとどまらず、工学的な合理性を持ったモデルが組み上がります。

工学機械と動力伝達機構

エンジン、ギアボックス、油圧ショベルのアームシリンダー、遠心ポンプなど、複雑なリンク機構を持つ装置を高い精度で視覚化できます。クランクシャフトの往復運動がピストンに伝わる一連のサイクルなど、静止画では説明しづらいメカニズムを破格の手軽さでシミュレーション可能です。

電気・電子機器のレイアウト

PC内部のマザーボード、ヒートシンク、グラフィックボードの配置関係や、密閉されたスマートフォン筐体内の基板・バッテリー・カメラモジュールの積層構造も再現できます。外装ケースを半透明化するトグルスイッチが標準で配置されるため、内部基板への熱移動経路や配線の取り回しを解説する資料作成が捗ります。

科学・物理現象のモデル化

ロケットエンジンの燃焼室からノズルへ向けて噴射される超音速ガス流や、核融合炉のトカマク型磁場構造など、目に見えないエネルギーの流れをシェーダー演出で可視化します。色温度の変化や乱流のゆらぎがプログラミングコードとして直接記述されるため、フレームレートの落ちない滑らかな描画が持続します。

---

Claude Codeへの導入手順と必要な動作環境

Claude Anatomyを自身のローカル環境に導入する手順は極めて簡潔です。Claude Codeのスキル拡張機能を活用するため、複雑なビルド工程を挟む必要はありません。

前提となる動作環境

Anatomyを動作させるには、あらかじめ以下のツールがセットアップされている必要があります。

1. Node.js: バージョン18以上がインストールされている環境
2. Claude Code: Anthropicが提供するCLIツールが導入済みで、認証が完了していること
3. ブラウザ環境: Chrome、Firefox、Edge、SafariなどWebGL 2.0をサポートするブラウザ

Claude Codeの基本的なプロンプト設計やシステム構成については、CLAUDE.mdの書き方ガイドでも詳細をまとめています。作業プロジェクト全体の挙動を制御したい場合は、併せて設定しておくと出力のブレを防止できます。

スキルの登録手順

ターミナルを開き、Claude Codeの対話モード、あるいはプロジェクト配下のスキルディレクトリにAnatomyのリポジトリを登録します。

# Claude Codeを起動
claude

# Anatomyのスキル定義を取り込む（プロジェクト内またはグローバル）
# 公式リポジトリの指示に基づきスキル設定を追加
/skill add https://github.com/.../anatomy

スキルが正しく認識されると、Claude Codeのコマンド一覧に立体図解生成用のハンドラが追加されます。以降はプロンプト内で明示的に「anatomy」の文脈を指定するだけで、自動的に3D描画用のテンプレートとシェーダー合成ロジックが呼び出される体制が整います。

開発環境を最新のAI基盤と連携させたい場合、モデル側の能力も影響します。高度な空間推論や正確な3D座標計算を求める際は、Claude 5世代の主力モデルであるClaude Sonnet 5.5やClaude Opus 5.5が割り当てられていることを確認してください。推論性能の向上によって、部品同士のめり込みや位置ズレの発生頻度が著しく低下します。

---

1行の指示文から立体分解図を出力する基本操作

導入が完了した後は、ターミナルから自然言語で作成したい機械の名前や動きを一行で指定するだけです。

基本プロンプトの実行例

claude "四気筒エンジンの分解図をアイソメトリックで作成して。ピストン運動と燃焼シェーダーを含めて"

このコマンドを送信すると、Claude CodeはAnatomyスキルの定義を参照し、以下のプロセスをバックグラウンドで一気に実行します。

1. 要求された機械に必要な構成部品（シリンダーブロック、ピストン、コネクティングロッド、クランクシャフト、バルブ）のパーツ一覧を策定
2. Three.jsライブラリをCDN経由で読み込むHTML構造の作成
3. 各部品のジオメトリ、マテリアル、配置座標、親子関係の階層構造を定義
4. アニメーション関数にクランクの回転周期とピストンの上下動を連動させる数式を組み込み
5. 点火プラグ付近に配置する燃焼シェーダー（頂点・フラグメント）を記述
6. 視点操作用のOrbitControlsと、パーツ分解（Explode）用スライダーUIのDOMを構築
7. 完成したコードを engine-anatomy.html などのファイル名で作業ディレクトリに出力

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Four Cylinder Engine Anatomy</title>
  <style>
    body { margin: 0; overflow: hidden; background: #0f172a; font-family: sans-serif; }
    #ui { position: absolute; top: 16px; left: 16px; z-index: 10; color: #fff; }
    .slider { width: 200px; }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
  <div id="ui">
    <label>分解展開: <input type="range" id="explode" class="slider" min="0" max="1" step="0.01" value="0"></label>
  </div>
  <script>
    // Three.js シーン・カメラ・レンダラー初期化
    // 各パーツのメッシュ構築と配置
    // GLSL シェーダーの組み込み
    // アニメーションループ処理
  </script>
</body>
</html>

出力完了後、ターミナルから open engine-anatomy.html を実行すれば、その場でブラウザが立ち上がり、滑らかに回転・可動するエンジン図解を操作できます。

---

CLAUDE.mdやカスタム設定で図解精度を底上げする手法

1行の指示でも動作する図解は生成されますが、業務レベルで使える精密さを求めるなら、プロジェクトルートに配置する CLAUDE.md や指示文の記述作法を洗練させる手法が手堅い選択肢です。

部品ごとのカラーパレットとデザイン統一

デフォルトの出力では、Three.jsの標準的なマテリアルカラーが自動選択されます。企業のデザインガイドラインやUIテーマに合わせたい場合は、あらかじめ配色ルールを定義しておきます。

## 3D Anatomy Generation Rules
- 背景色はダークネイビー（#0a0f1d）を標準とすること
- 外装パーツは透過率0.3の半透明ガラスマテリアルで表現すること
- 可動部品（ギア・ピストン等）はアクセントカラー（#38bdf8）を割り当てること
- UIパネルは右上に配置し、フォントはInterまたはNoto Sans JPを指定すること

このように共通ルールを固定化しておけば、複数の図解を出力した際にもトーン＆マナーが崩れません。デザインツールとの連携やビジュアル設計の比較を検討中の方は、Figma AIとClaudeの比較解説も参考になります。

マウスホバーによる部品名表示の追加

プロンプトに「部品名のアノテーション」を指定すると、3D空間上のパーツにRaycaster（マウス衝突判定）が埋め込まれます。ユーザーが気になる部品にカーソルを合わせると、パーツの正式名称やスペックがツールチップとして浮かび上がる仕様をコードレベルで追加可能です。

部品点数の多いアセンブリ図を提示する場合、このアノテーションの有無で資料としての完成度が劇的に変わります。

---

業務で使う場合の用途と向かないケース

Claude Anatomyは極めてユニークで強力なツールですが、あらゆる視覚化作業を代替できるわけではありません。得意な領域と不得意な領域の境界を冷静に見極める必要があります。

圧倒的な効果を発揮する場面

• 開発者向けドキュメント: Web上で公開するAPI仕様書やハードウェア連携SDKの解説ページに、そのままiframeで埋め込んで動的な説明を付与する用途に重宝します。
• 社内技術研修・オンボーディング: 新人エンジニアや非エンジニアのチームメンバーに対し、システム全体の物理構造やインフラの階層関係を直感的に共有できます。
• 製品LP・インタラクティブな技術デモ: ユーザーが自分で触って内部のメカニズムを体感できるリッチコンテンツを、外注費をかけずに短時間でプロトタイピング可能です。

現時点で向かないケース

• ミリ単位の精密機械設計: 実際の工作機械で削り出すためのCADデータ（STEPやIGESファイル）の代わりにはなりません。Anatomyが生成するのはブラウザ表示用のポリゴンメッシュと概念構造です。
• 複雑すぎる有機的デザイン: 人体解剖図や精密な毛髪表現、衣服のドレープなど、数百万ポリゴンを要するスカルプト造形はレンダリング負荷とプロンプト再現性の観点から実用的ではありません。

以下は、実務導入における各用途への適性を整理したマトリクスです。

つまり、Webブラウザを介して「構造の理屈を他者に伝える」目的において、現行のソリューションの中でも抜きん出たコストパフォーマンスを誇ります。

---

開発元・ライセンス形態と商用利用の注意点

Claude Anatomyはオープンソースソフトウェアとして公開されており、ライセンス形態は寛容な「MITライセンス」が採用されています。

商用プロジェクトでの利用条件

MITライセンスに基づいているため、個人開発だけでなく企業による商用利用、コードの改変、社内ツールへの組み込み、さらには生成されたHTML/JavaScriptファイルを自社の商用Webサービスに無償で組み込んで再配布することが法的に認められています。

ライセンス表示（著作権表示および許諾表示）を生成コードのヘッダー部分に維持する点だけを守れば、ロイヤリティの支払いや特殊な契約を結ぶ義務は発生しません。

生成コードの著作権とセキュリティ

Anatomy自体はローカルマシン上で稼働するClaude Codeを介してThree.jsの標準コードを組み立てる仕組みです。生成されたHTMLファイルはユーザーのローカルディスクに保存されるため、自社独自の製品アイデアや未発表の内部構造に関するプロンプトが外部の不特定多数に公開されるリスクはありません。

ただし、Claude Codeの背後で呼び出されるAnthropicのAPI利用規約には準拠する必要があります。入力データが学習に利用されないオプトアウト体制やAPI契約のセキュリティ基準を満たしているかは、自社のコンプライアンス規程と照らし合わせて確認しておく必要があります。

---

Claude CodeスキルのエコシステムにおけるAnatomyの位置づけ

Claude Codeは、単なるテキストのやり取りを行うチャットボットから、ターミナル内のローカル環境を自律的に操作する本格的なエージェントツールへと進化を遂げました。その拡張性の中心にあるのが「スキル（Skills）」と呼ばれる仕組みです。

AIが自律的にタスクを分散処理するアーキテクチャについては、Claude Managed Agentsの仕組み解説でも取り上げていますが、個別の作業環境において特定のアウトプットを特化させるアプローチとしてスキル機能は極めて直感的です。

これまでのClaude Code向けスキルといえば、Gitコマンドの自動化、テストスイートの巡回、データベースのマイグレーション生成など、バックエンド寄りの地味な作業を補助するものが主流でした。そこに登場したAnatomyは、「AIがグラフィカルな表現物を単一ファイル完結型で直接創り出す」という新しい方向性を提示しています。

コード生成AIがテキストやロジックの領域を越え、WebGLを通じた立体表現のオーサリングツールとしても機能し始めた好例です。今後、同様のアプローチで音声UIやアニメーション制御を専門とするスキル群が次々と登場してくる流れが予想されます。音声生成やメディア編集ツールとの連携に関心がある方は、Adobe PodcastとClaudeの使い分けもチェックしてみてください。

---

AI PICKS編集部の判定

Claude Anatomyに対するAI PICKS編集部の判定は、「Webドキュメントの表現力を手軽に底上げしたいチームなら今すぐ導入すべき一択のスキル」です。

これまでThree.jsとGLSLシェーダーを組み合わせて滑らかに動く分解図を1からコーディングするには、フロントエンドの3D数学に精通した専門エンジニアが数日がかりで取り組む必要がありました。それが1行の指示文から数十秒で立ち上がる体験は、まさに破格と評せます。

一方で、生成されるポリゴンモデルの形状精度やトポロジーは、プロが手作業でリトポロジーしたアセットに比べると荒削りな部分が残ります。そのため、ミリ単位の精度を求める製造業の図面用途には正直イマイチであり、過度な期待は禁物です。

しかし、「Web上で読者に仕組みを直感させたい」というドキュメントやマニュアルの領域においては圧倒的な威力を発揮します。単一HTMLで完結し、サーバーレスでそのまま自社サイトに埋め込める取り回しの良さは重宝します。Claude Codeを日頃からターミナルで常用している開発者であれば、入れておいて損のないツールです。

---

よくある質問（FAQ）

Q. Claude Anatomyは無料で利用できますか？

スキル自体のコードはMITライセンスのオープンソースとして無償提供されています。追加のサブスクリプション費用などはかかりません。ただし、スキルを駆動するためにターミナル上でClaude Codeを動かす必要があり、その通信に伴うAnthropicのAPI利用料、またはClaudeの所定プラン利用枠が消費されます。

Q. Blenderなどの3Dソフトを触ったことがなくても使えますか？

問題なく使えます。専門的なモデリング知識やUI操作は一切不要です。「何を作りたいか」「どのような動きをさせたいか」を日本語または英語の文章でClaude Codeに伝えるだけで、カメラ制御や照明設定も含めたコードが自動生成されます。

Q. 日本語のプロンプトで指示を出しても正しく3D化されますか？

日本語のプロンプトを十分に理解して立体モデルを構築できます。「小型ドローンの展開図」「蒸気機関のピストン機構」といった日本語の入力に対し、適切なパーツ分類とアニメーション処理を割り当てたHTMLコードが出力されます。画面上のUIラベルを日本語で統一したい場合は、「UIは日本語で表記して」と一文添えるだけで反映されます。

Q. 生成された3D図解を自分のWebサイトに埋め込むことはできますか？

可能です。生成される成果物はThree.jsの描画ロジックとシェーダーコードが1つにまとまった単一のHTMLファイルです。Webサーバーにそのままアップロードしてiframeタグで読み込むだけで、WordPress、Notion、自作のWebサービスなどあらゆる環境に埋め込めます。

Q. 動作が重くなったり、スマートフォンのブラウザで崩れたりしませんか？

Anatomyは比較的軽量なジオメトリ計算とWebGLの標準機能でレンダリングを行うため、最近のスマートフォンやノートPCであれば60fpsで快適に動作します。ただし、パーツ点数を極端に増やしたり、複雑なフラグメントシェーダーを大量に重ねた場合は低スペック端末で描画負荷が高まることがあります。実機で事前に動作確認を行うのが確実です。

---

あわせて見たいツール・カテゴリ

3D表現やAIエージェントによる開発自動化をさらに推し進めたい方は、以下の関連カテゴリやツール情報もチェックしてみてください。

• AIコーディングツールおすすめ一覧
• AIデザインツールおすすめ一覧
• 自律型AIエージェントのトレンド
• AIコーディングツール最新ランキング
• AIデザインツール最新ランキング
• Claude（Anthropic）の特徴と料金
• Claude Codeの使い方と設定

次に読むなら、Claude Codeの環境構築と基本ルールを体系的にまとめたCLAUDE.mdの書き方ガイドをおすすめします。開発環境の設定を盤石にしておくことで、Anatomyを含む各種スキルの出力精度が安定します。