anatomy skillとは｜業務の流れを立体の図にする使い方
「新入社員に業務の流れを説明したいけれど、表や箇条書きでは伝わらない」「流れ図を作っても、結局だれも見てくれない」——文書を図にしたいとき、誰もがこの壁に当たります。
結論から言うと、anatomy skill は、文章で書いた業務の流れを「触って動かせる立体の図」にしてくれるClaude Codeのスキルです。私が架空の会社の受注から出荷までの10工程を渡したところ、約11分半で、レールの上を木箱が進む等角投影の図がHTMLファイルとして出てきました。
株式会社Fyveは、Claude Codeのスキルを1本ずつ実際に入れて試し、うまくいった点もいかなかった点も記録しています。この記事では、anatomy skill の使い道、入れ方、頼み方、試した結果、安全面の確認、向かない場面を順に書きます。
anatomy skillとは｜仕組みを「立体の図」にするスキル
anatomy は、GitHubで公開されているスキル（wheresryan22/anatomy、ライセンスはMIT）です。作者の説明は「アイデアを、実際に動くものとして組み立てて説明する」というものです。たとえば「キャッシュの仕組み」を説明したいとき、箱と矢印を描くのではなく、「条件が揃ったときだけ回る錠前」のような物を作り、その動きで仕組みを見せます。
作られる図は、小さな部品を多数組み合わせた等角投影（斜め上から見下ろした立体）のSVG図で、HTMLファイルとして出てきます。ブラウザで開くと、マウスで触ったりキーを押したりして動かせます。
GitHubのスター数は17,719、公開は2026年10月8日、最終更新は10月18日です（いずれも2026年10月21日時点、GitHubのAPIで確認）。
この記事で試したのは、作者が「中核」と位置づけているSVGの図の作成です。READMEには、シェーダー（炎や水の表現）を使う図、真の3Dで回る図（ベータ版）、印刷用PDFを作る機能も書かれていますが、今回は試していません。
どんな仕事に使えるか
README自身が「機械・道具・家具のような、仕組みのあるものは得意。人物や地図は描けない」と書いています。仕事での使い道は、「流れ」や「仕組み」を、見る人が触って理解する場面です。
- 新入社員への説明：受注から出荷までの流れ、経費精算の流れなど、工程が順に進む業務
- 社内マニュアルの導入部：文章の前に、全体像を動く図で見せる
- お客様向けの説明ページ：サービスの仕組みを、触れる図にして載せる
- 研修・会議の資料：投影して、工程をクリックしながら説明する
グラフを作るスキルではありません。数字を並べる用途には向かず、READMEにも「グラフ（軸・系列・データプロット）は作らない」と明記されています。
入れ方（READMEの手順）
READMEに書かれている方法は複数あります。Claude Codeの場合の代表的な2つは次のとおりです。
- skills CLIで入れる：
npx skills add wheresryan22/anatomy -g -a claude-code（自分の環境全体に入る。~/.claude/skills/anatomy） - gitで入れる：
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy（プロジェクト単位なら.claude/skills/anatomyに置く）
必要なものは、Node.js 20.10以上と、図の点検に使うChrome（またはChromium）です。READMEによると、追加のライブラリ（npm install）は不要です。
今回の試験では、普段の環境を汚さないよう、リポジトリを試験用フォルダの .claude/skills/anatomy/ にコピーして使いました（gitで入れる方法と同じ置き方です）。npx skills add は試していません。
Claude Codeにこう頼む
使い方は、READMEでは /anatomy に続けて頼む形が紹介されています。名前を呼ばなくても、「立体の図」「説明用の図」のような依頼で自動的に呼ばれるとも書かれています。
実際に、スキル名を一度も言わずに次のように頼みました。
work/workflow.md に、うちの会社の受注から出荷までの業務の流れが書いてあります。新入社員に流れを説明するときに使いたいので、この流れを、触って動かせる立体の図にしてください。完成したら work/ に置いてください。
実行記録の最初の動きが anatomy スキルの呼び出しで、1回目の依頼で発動しました。作者のREADMEは「何を説明する図か」と「実際の数字（個数・日数・しきい値）」を伝えるのが良い頼み方としています。今回は、10工程の表（担当と日数つき）の文書を渡したのが、それにあたります。
試した結果｜架空の会社の10工程を立体の図にした
試したのは、架空の会社（手作り家具を売る従業員12名の会社）の「受注から出荷までの業務の流れ」です。注文受付から到着確認まで10工程、各工程に担当と所要日数が書いてあり、補足として「在庫品は工程5・6を飛ばす」「検査で不合格なら工程5へ戻る」「未入金は7日後に自動キャンセル」の3つの例外があります。使ったモデルはSonnetです。
できあがったもの
約11分30秒（実測 692秒）で、HTMLファイルが2枚できました。明るい配色と暗い配色で、どちらも約520KB、ネット接続なしで動きます。
工程1の机とモニター、工程2のレジ、工程3の棚、工程9のトラックなど、見れば仕事の中身が分かる小さな装置が並び、レールの上を注文の木箱が順に進みます。図の下には、選んだ工程の担当・所要日数・内容が出ます。上のボタンで、補足の4つのパターン（受注生産品・在庫品・検査で不合格・未入金）を切り替えて動かせます。
在庫品を選ぶと、木箱は近道の線路に入ります。画像の中央にある斜めの短いレールがそれです。
正解と比べてどうだったか
- 工程名・担当・日数・内容は、私が画面で確認した範囲（工程1・2など）で、元の文書のとおりに表示されていました。全10工程を1つずつ突き合わせたわけではありません
- 在庫品は工程5・6を飛ばす、検査不合格は工程6から5へ戻る、未入金は工程2で止まる、という3つの例外が、ボタンで切り替えられる動きとして作られていました。私が画面で確かめたのは在庫品の近道のレールまでで、不合格と未入金の動きは、Claude自身の「確認した」という報告によります
- Claude自身の報告では、画面の表示の変化を確かめ、コンソールにエラーはなく、スマホ幅でも横にはみ出さないとのことでした。私が開いたときも、エラーは出ませんでした
- Claudeは、工程4を在庫品でも止まる作りにした理由（元の文書が「飛ばす」と書いたのは工程5・6だけ）を、気づいた点として自分から報告してきました。元の文書の読み違いではなく、確認を求める形になっていました
うまくいかなかった点・気になった点
- 図の中に工程名が出ない。図の中の装置には番号だけが付き、工程名は下のパネルで読む作りでした。初めて見る人は、番号と下の一覧を行き来することになります。これは出力の好みの問題で、頼み方で変えられる可能性がありますが、今回は試していません
- 時間がかかる。約11分半でした。READMEも「意図的に時間をかける作りです」と書いています
- Claude自身の点検に抜けがある。報告には「工程2〜6の細部は拡大して見ていない」「線の端が1.3px浮いているものが1本ある」と書かれていました。正直に書いてくれるのは良い点ですが、細部の確認は人が見る必要があります
スキルなしとの違い
同じ依頼文を、anatomy を入れていない別のフォルダでも、1回だけ実行しました（実行記録にスキルの呼び出しがないことを確認済み）。結果は次のとおりです。1回ずつの結果なので、毎回この差が出るとは限りません。
スキルなしでも、約2分50秒で、動く立体の図が1ファイルできました。色分けした箱が並び、箱の高さが所要日数になっていて、図の中に工程名・担当・日数が書いてあります。ドラッグで回転でき、「流れを再生」ボタンで荷物が進みます。
私の見立てでは、次のように分かれます。
- とにかく早く、読める図が欲しい：スキルなしのほうが向いています。工程名が図の中に出ていて、日数が高さで見比べられます。ただし、ラベルが箱の一部に重なって見える角度があると、Claude自身が報告していました
- 見た目の作り込みと、触って動かす楽しさ：anatomy のほうが上です。装置の細かさ、レールを木箱が進む動き、4つの例外パターンを切り替えて見せられる点は、スキルなしの図にはない部分でした。未入金のパターンも、スキルなしでは右の説明文に出るだけでした
つまり、「情報を分かりやすく見せる」だけならスキルなしでも足ります。anatomy が効くのは、見る人の目を引く、よくできた見た目が要る場面です。費用の目安は、anatomy ありが約1.58ドル、スキルなしが約0.40ドルでした（実行記録の数字）。
中身の安全確認｜何を外に送り、何を実行するか
入れる前に、SKILL.md・READMEのほか、scripts と kit の中身を読みました。
- 外部への送信：スクリプト内のネットワーク通信は、手元のChromeを操作するための
127.0.0.1（自分のPC内）への接続だけでした。外部のサーバーへ送る処理は見つかりませんでした。できあがった図のHTMLに含まれる外部のURLも、SVGの名前空間の宣言だけでした - 実行するもの：Node.jsのスクリプトと、点検用のヘッドレスChrome（画面を出さない起動。使い捨てのプロファイル）です。スクリプトの
drive.mjsは、渡されたJavaScriptをページ内で動かします。作者のSECURITY.mdにも「信頼できるページにだけ向けること」と書かれています - GitHubへの公開機能：
publish.mjsは、図を作者のコミュニティギャラリーに投稿する機能で、GitHubのCLI（gh）を使います。READMEとreferencesには、ユーザーが頼んだときだけ動くと書かれていて、今回は頼んでいないので動きませんでした。なお、このときは Claude Code のセッション記録（所要時間・使用量）を読んで投稿に添える作りで、省くには--no-sessionを付けると書かれています - 認証情報・allowed-tools：認証情報を読む処理は見つかりませんでした。
allowed-toolsの指定はありません
私が読んだ範囲では、説明と違う動きは見つかりませんでした。ただし全ファイルを1行ずつ精査したわけではなく、リポジトリの更新が続いているので、入れる時点で最新版の中身を見ることをおすすめします。
向かない場面
- 急ぎの資料：1枚の図に10分以上かかります。会議の直前には向きません
- グラフ・数字の表：作れません。README自身が「グラフ作成ツールではない」と書いています
- 人物・地図・組織図：機械や道具の形をした仕組みが得意で、人や地図は描けないとされています
- 仕組みが無い話：「物として組み立てられる動き」がない抽象的な話は、出来が弱くなるとREADMEが書いています
- 図の中に文字を読ませたい場合：今回の出力は、図の中に工程名が出ませんでした
- PCが古い・ブラウザが限られる場合：Node.js 20.10以上とChromeが前提です
関連する記事
文章を図にして説明する別の使い方については、こちらの記事も参考になります。
スキルそのものの使い方を一から知りたい方は、こちらをご覧ください。
Claude Code Skillsの使い方｜業務をSkill化する実践手順
見た目を整えるスキルとの違いが気になる方は、こちらもあわせてどうぞ。
まとめ｜入れる前のチェックリスト
- □ 説明したいものが「仕組み」「流れ」「道具のように動くもの」である（グラフや人物ではない）
- □ 元になる文書に、工程名・担当・日数など、実際の数字がある
- □ Node.js 20.10以上とChromeが入っている
- □ 1枚の図に10分以上かかっても構わない
- □ 図の中に工程名が出なくても、下のパネルで補える（または、頼み方で調整する）
- □ 出来上がった図は、細部を人の目で確認する
- □ 入れる時点の最新の中身を、一度読んでおく
- □ 急ぎ・読みやすさ優先なら、スキルなしの依頼で十分なこともある
試験の日付と数字は、2026年10月21日時点のものです。スキルは更新が続くため、結果が変わる可能性があります。
「図で説明する」のスキルは、ほかに2本を同じ架空の会社の材料で試しています。
仕事でAIを使う人が「絶対に」知っておくべき Claude Codeスキル TOP10
31本を実際に入れて、スキルなしと比べた結果つき（全28ページ）
スキルを入れても、Claude が急に賢くなるわけではありませんでした。31本を架空の会社の仕事で試し、同じ依頼をスキルなしでも検証して比べたうえで、導入する価値があった10本を仕事別にまとめています。
- 文章・スライド・図・数字・調べもの・契約書など、仕事別の10本
- 1本ごとに、スキルなしと比べた時間・費用・出来
- 実物の画面と、Claude Code にそのまま貼れる頼み方
- 外した5本の理由と、入れる前に確かめる4つのこと
メールアドレス登録で他にも様々な資料を閲覧できます
＋9PDF 18点・合計468ページ ＋ すぐ使えるzip素材 3点
どれも登録後の受け取りページから、まとめてダウンロードできます。
毎週配信の無料ニュースレター「AIネイティブ超研究」の購読特典です。メール登録後すぐ、受け取りページのご案内が届きます。そこにはこの資料に加えて、過去の特典もすべてまとめて置いてあります。あわせて、AI活用に関するお知らせやお役に立てそうなご案内をお送りすることがあります。解除はいつでも1クリック。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。