archify スキルとは｜計画を触れる図にする使い方
「新サービスの案を文書にしたけれど、会議で全員に同じ理解で読んでもらえない」「仕組みとお金と心配事を、1枚で見せたい」——企画を人に伝える場面で、誰もがこの壁に当たります。
結論から言うと、archify スキルは、文章で書いた企画や仕組みを「クリックして中身を見られる、ブラウザで開くだけの1枚の図（HTML）」にしてくれるClaude Codeのスキルです。私が架空の会社の新サービス案を渡したところ、約1分53秒で、15個の箱を線でつないだ図ができました。
株式会社Fyveは、Claude Codeのスキルを1本ずつ実際に入れて試し、うまくいった点もいかなかった点も記録しています。この記事では、archify スキルの使い道、入れ方、頼み方、試した結果、スキルなしとの違い、安全面の確認、向かない場面を順に書きます。
archify スキルとは｜計画や仕組みを「触れる図」にするスキル
archify は、GitHubで公開されているスキル（tt-a1i/archify、ライセンスはMIT）です。READMEの説明は「理解したいこと、計画したいこと、共有したいことを、触れるビジュアルに変える」というものです。
出てくるのは、1つのHTMLファイルです。ブラウザで開けば、箱をクリックして詳細を見たり、2つの箱を選んで「ここからここまで」の経路を光らせたり、明るい配色と暗い配色を切り替えたりできます。閲覧する側にarchifyのインストールは要りません。HTMLを送れば、触れる状態のまま届きます。
作れる図は、構成図・流れ図・やりとり図（シーケンス）・データの流れ・状態の移り変わり・データベースの表（ERD）・クラス図・ツリー・時系列・処理時間の内訳の10種類です。コードの図だけでなく、旅行の行程や学習のマップのような身近なものにも使える、とREADMEは説明しています。
GitHubのスター数は86,562、公開は2026年4月15日、最終更新は2026年10月20日、安定版はv3.2.0（2026年10月18日）です（いずれも2026年10月21日時点、GitHubのAPIとREADMEで確認）。
この記事で試したのは、構成図の作成です。READMEにある「1ページで答えを返す解説ページ（explainer）」の機能や、リポジトリを読ませて図にする使い方、PNGやWebMなどの書き出しは試していません。
どんな仕事に使えるか
使い道は、「複数の要素のつながり」を、見る人が自分で確かめながら理解する場面です。
- 新サービス案の社内確認：仕組み、お金の流れ、手間、心配な点を1枚にして、会議で全員が同じ図を見る
- 業務や体制の説明：誰が何をして、どこで次の人に渡るのかを、クリックして確かめられる形で見せる
- システムの全体像：外注先や社内のエンジニアと、構成を確認する（コードを読ませて図にする使い方もREADMEにありますが、今回は試していません）
- お客様向けの説明：サービスの仕組みを、触れる図にして共有する
グラフや数字の集計表を作るスキルではありません。SKILL.mdにも「ダッシュボード用ではない」と書かれています。
入れ方（READMEの手順）
READMEの手順は、次の1行です。
- skills CLIで入れる：
npx skills add tt-a1i/archify -g（自分の環境全体に入る） - フォルダを置く：Claude Codeの場合、
~/.claude/skills/または、プロジェクト内の.claude/skills/にスキルのフォルダ（リポジトリのarchifyフォルダ）を置く、とインストール方法の表に書かれています
必要なものは、Node.js（18以上）です。SKILL.mdには「スキルのフォルダの中でインストール作業は要らない」とあります。私の環境では、図の最後の点検でChromeが使われました（Chromeが無い環境での動作は確認していません）。
今回の試験では、普段の環境を汚さないよう、スキルのフォルダを試験用フォルダの .claude/skills/archify/ にコピーして使いました。追加のインストール作業はしていません。npx skills add は試していません。
なお、このスキルは、動かすと「新しい版が出ていないか」を確認しにいきます。詳しくは「中身の安全確認」の節に書きます。
Claude Codeにこう頼む
READMEでは、「Archifyで〜を図にして」と頼む形が紹介されています。調整は「Redisを足して」「認証を左に動かして」のように、続けて頼めるそうです（続けての調整は今回試していません）。
今回は、スキル名を一度も言わずに、次のように頼みました。
work/new-service.md に、新しいサービス案（家具の定期メンテナンス便）が書いてあります。来週の社内の打ち合わせで、この案が「どういう仕組みで動いて、お金と手間がどう流れ、どこが心配か」を全員で確認したいので、触って確かめられる1枚の図にしてください。完成したら work/ に置いてください。
実行記録を見ると、最初にarchifyスキルが呼ばれていて、1回目の依頼で発動しました。頼み方のコツは、「何のための図か（今回は社内会議で確認）」と「図に載せたい観点（仕組み・お金・手間・心配）」を言葉にすることだと感じました。
試した結果｜架空の会社の新サービス案を図にした
試したのは、架空の会社（手作り家具を売る従業員12名の会社）の、「家具の定期メンテナンス便」という新サービス案です。月額2,980円・4,980円・1,500円の3プラン、1回の訪問の原価、職人の人数の限界、心配な点（職人不足・移動・解約・責任範囲・需要が未確認）が、短い文書に書いてあります。使ったモデルはSonnetです。
できあがったもの
約1分53秒（実測 112.9秒、8ターン、費用の目安は約0.31ドル）で、HTMLファイルが1枚できました（約820KB）。
上段（緑）は、プランの申込から、訪問の予約、職人の割り当て、お客様宅での作業までの流れです。下段（紫）は、月額の売上から、訪問の原価を引いて粗利が出るまでのお金の流れです。赤い箱は「心配な点」5つで、影響する箱に点線の矢印でつながっています。図の下には、プラン別の粗利、職人1人あたりの件数、「会議で決めたいこと」のカードが付きました。
箱をクリックすると、その箱の詳細カードが開き、そこから先に何がつながっているか（今回は「職人が足りない」から下流に5つ）が見えます。
「ROUTE」ボタンで2つの箱を選ぶと、その間の最短の経路が光ります。下の画面は「需要が未確認」から「粗利」までで、「既存のお客様」「月額の売上」を通る3ステップと表示されました。
正解と比べてどうだったか
- 元の文書にある数字（月額3プラン、1回の原価6,600円＝人件費4,500円＋交通費・車両費1,500円＋材料600円、粗利率63%と55%、職人は月16件まで、アンケートの期限11月5日）は、私が画面で見た範囲で、文書のとおりでした。全項目を1つずつ突き合わせたわけではありません
- 元の文書の「心配な点」5つ（需要が未確認・遠いと採算割れ・職人不足・破損時の責任・解約）は、すべて赤い箱として入っていました
- 元の文書にない数字（職人1人でさばける契約数の目安、スタンダード約48件・ライト約96件）が、カードに入っていました。計算は「月16件×12か月÷年の訪問回数」で合っていましたが、Claude自身が「元の資料にない数字なので、会議前に確認してください」と報告していました。勝手に足した数字を、足したと教えてくれる点は助かります
- 文書に原価の見積りがない「配送のみ」プランは、「未見積り」と書かれていました。数字を作り話で埋めてはいませんでした
うまくいかなかった点・気になった点
- ボタンなどの画面の文字が英語。図の中身は日本語ですが、「ROUTE」「LENS」「Export」「Semantic passport」などの操作部分は英語でした。Claudeの報告によると、日本語の表示データが用意されていないためです。社内の会議で全員に見せるなら、最初に説明が要ります
- 点検は自動のもので、見た目は人が見ていない。報告には「自動チェックは通ったが、人の目での見た目の確認はしていない」とありました。私が開いて見た範囲では、文字の重なりや切れはありませんでしたが、本番の前に自分の目で確認する前提です
- 入力した数字を動かして試算する機能はない。触れるのは、詳細の表示・経路の追跡・見え方の切り替えまでです。「契約数を変えたら粗利はいくらか」のような計算は、この図ではできません（次の節のとおり、スキルなしでは作れました）
- 作業用のファイルが残る。図のHTMLと同じフォルダに、点検結果のファイルが3つできました（Claude自身が「共有前に消してよい」と報告）
スキルなしとの違い
同じ依頼文を、archify を入れていない別のフォルダでも、1回だけ実行しました（実行記録にスキルの呼び出しがないことを確認済み）。1回ずつの結果なので、毎回この差が出るとは限りません。
スキルなしでも、約2分14秒で、触れる図が1ファイル（約22KB）できました。「仕組み」「お金」「手間」「心配な点」の4つの層をボタンで切り替えられ、箱をクリックすると右に詳細が出ます。心配な点は赤丸の番号で箱に付き、右のリストをクリックすると図の該当箇所が点滅します。さらに、下に「契約数を動かして確かめる」スライダーがあり、ライト・スタンダード・配送のみの契約数と職人の人数を動かすと、月の売上・訪問件数・粗利・職人の枠の使用率が変わります。画面の文字はすべて日本語でした。
私の見立てでは、次のように分かれます。
- 会議で「この案で採算が合うか」を触って確かめたい：今回はスキルなしのほうが向いていました。スライダーで数字を動かせて、画面も日本語です。ただし、スキルなしの図は、元の文書の粗利を計算上の33,360円ではなく「約33,000円」に合わせて表示した、とClaude自身が報告していました。数字の扱いは、確認が要ります
- つながりを見せたい・構成を確かめたい：archify のほうが向いています。2つの箱の間の経路を光らせたり、影響の範囲（上流・下流）を数えたり、PNG・SVGなどで書き出したりといった、「図そのものを探る」機能は、スキルなしの図にはありませんでした。見た目も、同じ規則で描かれるので、図の種類が違っても統一感があります
つまり、今回の題材のように「数字を動かして試す」場面は、スキルなしでも足りました。archify が効くのは、箱と線で表せる「つながり」が主役で、見た目を整えた図を、人に渡したり書き出したりする場面です。時間と費用は、今回はほぼ同じでした（約1分53秒・約0.31ドルに対し、約2分14秒・約0.33ドル）。
中身の安全確認｜何を外に送り、何を実行するか
入れる前に、SKILL.md・README・SECURITY.mdのほか、スキルのフォルダにあるスクリプト（bin・scripts・renderers）を読みました。
- 外部への通信：「更新の確認」で、固定のアドレス（作者のGitHub Pages）の更新情報を読みに行く処理があります。READMEによると、サーバーが受け取るのは通常の通信の情報（IPと時刻）だけで、バージョンや依頼の内容は送らず、更新も自動では入れません。実際に今回も、点検の結果に「ネットワーク経由で確認し、最新版（3.2.0）と同じ」と記録されていました。止めたいときは、環境変数
ARCHIFY_UPDATE_CHECK_DISABLED=1を設定します。このほか、ロゴ画像を取得する処理（ブランドのロゴを頼んだときだけ）があり、社内のアドレスは取得しない作りになっています。文書の内容を外へ送る処理は、読んだ範囲で見つかりませんでした - 実行するもの：Node.js自身、Chrome（図の表示確認）、git（コードから図を作るとき）、図を開くためのコマンドです。図を確認する用の、自分のPC内だけで動く小さなサーバー機能もあります。
evalやnew Functionは、読んだ範囲のスクリプトには見つかりませんでした - 手元に残るもの：今回の試験では、試験用フォルダの外の
~/Library/Caches/archify-skillに、更新確認の記録用のフォルダが作られました。普段の環境のスキルや設定は触っていません - 認証情報・allowed-tools：認証情報を読む処理は見つかりませんでした。
allowed-toolsの指定、hooks、plugin.json はありません
私が読んだ範囲では、説明と違う動きは見つかりませんでした。ただし全ファイルを1行ずつ精査したわけではなく、リポジトリは更新が続いているので、入れる時点で最新版の中身を見ることをおすすめします。
向かない場面
- 数字を動かして試算したい場合：スライダーで試算する機能はありません。今回の題材では、スキルなしのほうが向いていました
- グラフ・数字の集計表：作るものではありません
- 会議で、全員に日本語の画面で見せたい場合：操作ボタンが英語です。最初に使い方を説明する前提になります
- 見た目を人が確認する時間が取れない場合：点検は自動のもので、見た目の確認は人の仕事です
- 通信の制限が厳しい会社のPC：更新確認のための通信があります（止められますが、設定が必要です）
- Node.jsやChromeが使えないPC：Node.js（18以上）が前提で、図の点検にChromeが使われました
関連する記事
難しい資料を図にする別の使い方については、こちらの記事も参考になります。
スキルそのものの使い方を一から知りたい方は、こちらをご覧ください。
Claude Code Skillsの使い方｜業務をSkill化する実践手順
図解の見た目を整える方法が気になる方は、こちらもあわせてどうぞ。
まとめ｜入れる前のチェックリスト
- □ 見せたいものが「箱と線でつながる仕組み・流れ・構成」である（グラフや計算ではない）
- □ 元になる文書に、載せたい数字や条件が書いてある（足りない数字は、作り話で埋めずに「未見積り」と出るか確かめる）
- □ Node.js（18以上）とChromeが入っている
- □ ボタンなどの画面が英語でも構わない（または最初に説明する）
- □ 図は、自動の点検が通っていても、見た目を人の目で確認する
- □ 更新確認の通信が問題なら、
ARCHIFY_UPDATE_CHECK_DISABLED=1を設定する - □ 入れる時点の最新の中身を、一度読んでおく
- □ 数字を動かして試す図が欲しいなら、スキルなしの依頼も比べる
試験の日付と数字は、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ツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。