作成日：2026年10月25日(日)
TL;DR
- 『ビジネスモデル2.0図鑑』の 3×3図解 を、Claude Code の Agent Skill として自動生成できるようにしました。「メルカリのビジネスモデルをWebで調べて図解して」の一言で、SVG と PowerPoint（PPTX）が出てきます。
- 設計の肝は「AIに絵を描かせず、JSONを書かせる」ことです。主体・矢印・補足を並べた図解定義JSONから、スクリプトが毎回同じ SVG と PPTX を組み立てます。
- 素材のアイコンは、PowerPoint のオートシェイプを pptx → JSON → SVG に変換する治具で吸い出しました。
- 同じスキルを Claude Agent SDK + FastAPI で包み、Webサービスとしても動くようにしました。「アプリはスキルの中身を知らない」設計です。
- 素材のツールキットは現在有償提供に移行しており、権利者への確認が取れていないため、スキルとWebサービスは公開していません。この記事では設計の考え方と、実際に踏んだ4つの罠（重なり、PPTX崩れ、タイムアウト、ゾンビセッション）を共有します。
生成例: Palantir FDE（2026年8月時点の公開情報にもとづく）
※実在企業の図解は、公開情報をもとにAIが生成し筆者が確認した、筆者個人の解釈によるものです。各社の公式見解ではありません。
※図解フォーマット：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研（出典）、Licensed under CC BY 4.0。改変: アイコンをSVGに変換し、色とサイズを変更
1. はじめに
『ビジネスモデル2.0図鑑』の3×3図解が好きで、気になる会社のビジネスモデルを自分でも描いてきました。ただ、手で描くと1枚に数時間かかります。主体を選び、矢印を引き、補足を書き、レイアウトを整える。この手間のせいで、図解は「たまにやる趣味」に留まっていました。
そこで生成AIに描かせることにしました。以前、Dify-1.1.3からClaude 3.7 SonnetでSVG図解をする という記事で SVG の図解を試しましたが、自由に描かせると体裁が毎回バラバラで、3×3の型を守った図にはなりませんでした。本記事はその続編です。今回は「AIにどう描かせるか」を設計し直し、Claude Code の Agent Skill と、それを包んだWebサービスにしました。
この記事で分かること:
- Agent Skill で「作法」をAIに渡す設計 — 自由に描かせず、ルールとデータで縛る
- pptx のオートシェイプを JSON / SVG 素材にする考え方 — 手描きし直さずに素材を吸い出す
- スキルをそのまま Webサービスに組み込む構成 — Claude Agent SDK でスキルを実行する
- 長時間エージェントをWebで動かすときのハマりどころ — おそらく本記事の一番の価値です
なお、内容は執筆時点（2026年10月）の情報です。Claude Agent SDK などは変化が速いので、試すときは一次情報を確認してください。
また、先にお断りしておくと、作ったスキルとWebサービスは公開していません（理由は2-3で説明します）。この記事は「作り方の記録」で、配布物はありません。
2. ビジネスモデル2.0図解とは
本題の前に、題材の図解手法と、使った素材の扱いを説明します。図解をご存じの方も、2-3 だけは読んでいただけると助かります。
2-1. 3×3で事業を描く図解手法
『ビジネスモデル2.0図鑑』（近藤哲朗 著、KADOKAWA、2018年）で使われている図解の手法です。100の事例をすべて同じ3×3の型で描いているので、業種の違う事業を同じ土俵で比べられます。書籍の内容は note で全文公開されています（ビジネスモデル2.0図鑑 #全文公開チャレンジ）。
- 構成要素は 主体・矢印・補足 の3つだけ
- 3×3の行は固定で、上段が利用者、中段が事業、下段が事業者。中央の縦列が「だれに・なにを・だれが」を表す
- 矢印は モノ（緑）・カネ（黄、¥マーク）・情報（水色） の3種類。確定しない流れは点線で描く
- 補足には「なぜそうなのか」と「感動ポイント」を書く
3×3の型と、3種類の流れ
2-2. ビジネスモデル図解ツールキット（配布版）
図解を描くための PowerPoint 素材が「ビジネスモデル図解ツールキット」です。ヒト・会社・カネ・モノ・情報・スマホ・店舗・その他の8種類のアイコンと、3×3のフォーマットが入っています。2018年7月に note で無料配布が始まりました（ビジネスモデル図解ツールキットを無料で配布してみた（追記あり））。
私は2019年頃から使っていて、今回使ったのは 2020年6月10日更新の配布版（Ver.4.2） です。この版には、ライセンスが CC BY 4.0 であることがファイルの中に明記されています。
- 1枚目の更新履歴に「商用利用可・許可不要で利用できる本資料の著作権の扱いを明確にしたほうがいいとおすすめいただいたので、クリエイティブ・コモンズライセンスで最も緩い CC BY 4.0 を付与しました（4.1）」とある
- 1枚目と、2・3・7・8枚目のフッタに「©図解総研 (Licensed under CC BY 4.0)」とある
- 7枚目には「本ファイルまたはファイル内のデータ、素材をそのまま商用利用・再配布することはお控えください（このツールキットそのものを販売するようなことです）。それ以外の、本ツールキットで制作した図解を仕事でお使いいただくのは問題ありません」とも書かれている
配布版（Ver.4.2）の1枚目。更新履歴と下部に CC BY 4.0 の記載がある
※出典：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研（出典）、Licensed under CC BY 4.0。1枚目のスクリーンショットを縮小して掲載
ただし、2026年10月25日に確認した時点で、無料の配布版は配布されていません。
- 上記の note 記事に「今後は有償で提供させていただきたいと思います」と追記があり、無料ダウンロードへのリンクはありません。「もうすでに無料版をダウンロードした方は、そのままお使いいただいて大丈夫です」とも書かれています
- 図解総研の告知によると、製品は「ビズグラムツールキット」に名称を変えて全面リニューアルされました（2025年3月5日付）。2026年10月の追記では「いまは『ビズグラムツールキット3.0』を扱っています」とあります（ビジネスモデル図解ツールキットがリニューアル！）
- 図解総研のオンラインストアでは「ビズグラムツールキット3.0」が1,650円で販売されています。購入時に利用規約への同意が必要で、法人利用は「法人・内部」と「法人・外部」（組織外への公開を含む）に分かれています。CC BY 4.0 ではなく、販売元の利用規約にもとづく商品です
- 現在の note 記事・リニューアル告知・販売ページのいずれにも、CC BY 4.0 の記載は見当たりません
ツールキットの配布状況の移り変わり（2026年10月時点で確認できた範囲）
有償に切り替わった正確な時期は、どのページにも書かれていませんでした。年表では「時期不明」としています。
CC BY 4.0 なら再配布してよいのか
結論から言うと、ライセンス上は、条件（表示）を守れば再配布してかまいません。営利目的でも、改変したものを配っても大丈夫です。クリエイティブ・コモンズ公式のライセンス要約にもとづいて、できることと条件をまとめます。
| No | 項目 | 内容 |
|---|---|---|
| 1 | 共有 | どのようなメディアやフォーマットでも、複製・再配布できる（営利目的も可） |
| 2 | 翻案 | リミックス・改変・別の作品のベースにできる（営利目的も可） |
| 3 | 条件: 表示 | 作者のクレジット（©図解総研）を表示し、ライセンスへのリンクを示す。変更した場合はその旨を書く |
| 4 | 条件: 推奨の示唆の禁止 | 許諾者が自分や自分の使い方を推奨しているように見せない |
| 5 | 条件: 追加的な制約の禁止 | 受け取った人が同じ自由を使えないような、法的・技術的な制限をかけない |
| 6 | 撤回できない | 条件を守っている限り、許諾者は上の自由を取り消せない |
今回の素材に当てはめると、次のようになります。
- 無料配布のときに CC BY 4.0 で入手した配布版（Ver.4.2）は、有償化された後も、上の条件を守れば再配布まで可能です
- ただし、ライセンスが及ぶのは CC BY 4.0 で提供された版だけです。有償の「ビズグラムツールキット3.0」は販売元の利用規約にもとづく商品なので、同じように扱ってよいわけではありません
- 配布版にある「ファイル・素材をそのまま再配布・販売するのは控えて」は、ライセンス本文の条件ではなく、配布元からのお願いです。CC BY 4.0 は利用者に追加の制約を課せない仕組みなので、法的な拘束力は弱いと考えられます。それでも、権利者の意向として尊重したいと考えました（これが 2-3 の判断につながります）
注意： 公式の要約（コモンズ証）は法的な効力を持ちません。判断の根拠はライセンス本文（リーガルコード）で確認してください。また、私は法律の専門家ではありません。
2-3. 権利者への確認と、公開を控えている理由
2-2 のとおり、入手済みの配布版はライセンス上は再配布まで可能だと理解しています。一方で、配布版は現在有償提供に移っていて、配布版の中でも「素材をそのまま再配布するのは控えて」「制作した図解を仕事で使うのは問題ない」とお願いされています。
今回作ったスキルには、ツールキット由来のアイコン（JSON化したもの）と、図解の作法をまとめたルールが入っています。これを配布すると、有償のツールキットや書籍の売れ行きに影響するおそれがあります。
そこで、2026年9月に、念のため権利者（図解総研）へ利用範囲と公開の可否を問い合わせました。問い合わせの要旨は次のとおりです。
- 配布版（2020年6月10日更新版）を CC BY 4.0 にもとづいて使っていること、現在は有償提供であることを承知していること
- 生成AIで図解を自動生成するツールを個人で作ったこと
- ツールキットが有償で提供されている現状を踏まえ、書籍やツールキットの売れ行きに影響するおそれがあるため、一般公開は見送り、勤務先での限定的な利用にとどめたいこと。その範囲での利用の可否
- 生成物には帰属表示（©図解総研 / CC BY 4.0）を入れていること
記事の公開時点（2026年10月25日）で、回答はいただけていません。そのため、作成した Agent Skill・Webサービス・ソースコードは、どこにも公開していません。回答をいただけたら、この記事に追記します。
ライセンス上は使えても、返事が来るまでは手元に置いておく
この記事でやること・やらないことを整理しておきます。
| 区分 | 内容 |
|---|---|
| やる | 設計の考え方、構成図、設計を説明するための短いコード抜粋、ハマりどころ、生成した図解の例（帰属表示付き） |
| やらない | ソースコード・スキル一式・コンテナイメージの配布、導入手順、アイコンのデータや作法書の中身の掲載、Webサービスの公開 |
注意： この記事をまねて同じものを作る場合は、素材は正規に入手したもの（現在はビズグラムツールキット）を使い、提供元の利用条件を確認してください。
3. なぜ「AIにそのまま描かせる」とうまくいかないのか
自由に描かせると絡まる。カードに書かせて、描画は機械に任せる
LLM にいきなり「〇〇のビジネスモデルを SVG で図解して」と頼むと、それっぽい図は出てきますが、
- 3×3の型を守らず、矢印の色や種類もバラバラ
- 座標の計算までAIがやるので、毎回レイアウトが揺れる
- 修正のたびに全体が描き直され、前の版と比べられない
- 出典や時点が分からず、終わった事業を現役のように描いてしまう
になりがちです。
そこで、次の4段階を順番に踏むことにしました。
- ルール化: 図鑑の描き方を、AIが読める手順書に書き直す
- 素材のデータ化: ツールキットのアイコンを座標データに変換する
- スキル化: 手順一式を Claude Code の Agent Skill にまとめる
- Webサービス化: ブラウザからボタン一つで呼べるようにする
技術的な全体像は、3フェーズ7ステップの図にまとめています。
全体像: 3フェーズ7ステップ
4. この記事で使う言葉（用語集）
| 用語 | 一言でいうと | この記事での例 |
|---|---|---|
| CC BY 4.0 | 帰属表示をすれば、改変・再配布・商用利用ができるライセンス | ツールキットの素材。生成するSVGのフッタに帰属表示を自動で入れる |
| Agent Skill | SKILL.md と参照資料・スクリプトを束ねた「手順のパッケージ」 | 今回作った business-model-diagram スキル |
| Webグラウンディング | 実行時のWeb検索・ページ取得で、回答の根拠を補うこと | WebSearch / WebFetch で一次情報を優先して調べる |
| 図解定義JSON | 主体・矢印・補足の3つの配列で図解を記述したデータ | ここから SVG と PPTX を毎回同じように生成する |
Agent Skill そのものについては、Claude Agent Skills完全ガイド にまとめています。
5. 作ったもの：business-model-diagram Skill
Claude Code 上で「〇〇のビジネスモデルを図解して」と頼むと、自動的にスキルが読み込まれ、作法を読み、調べ、JSONを書き、SVG と PPTX を生成し、自分で検品して直すところまで進みます。
設計の中心方針
- AIに座標を計算させない。 列と行の基準座標を作法書に固定し、AIは「どのマスに置くか」だけを決めます。
- AIにはSVGではなくJSONを書かせる。 描画は Python のスクリプトが担当します（標準ライブラリのみ）。
- AIに目を持たせる。 生成したSVGをPNGにして、AI自身に見せて検品・修正させるループを手順に組み込みます。
AIが書くのはJSONだけ。描画はスクリプト、検品はAIが画像を見て行う
1枚の図解を描く工程を、AIが自分で回して止められるループとして設計しました。最近の言葉でいえば、ループエンジニアリングの考え方を、スキルの中の小さなループに取り入れた形です。
この検品ループは「ループエンジニアリング」と言えるか
2026年6月ごろから「ループエンジニアリング（loop engineering）」という言葉が広まっています。名付け親とされる Addy Osmani 氏のエッセイ「Loop Engineering」（2026年6月7日）では、エージェントにプロンプトを打つ人を、自分から仕組みに置き換えること、と説明されています。ループは「目的を決めると、AIが完了するまで反復する再帰的なゴール」で、エージェントを動かす土台（ハーネス）の一段上の層に位置づけられています。
上の図の「生成 → PNG化 → AIが画像を見て検品 → JSONの差分で修正」は、AIが完了条件を満たすまで自分で回すループなので、考え方は同じです。Osmani 氏が挙げる構成要素と対応させると、次のようになります（○: 当てはまる / △: 一部 / ×: 当てはまらない）。
| No | Osmani 氏の構成要素 | 意味 | このスキル | 対応 |
|---|---|---|---|---|
| 1 | Skills | プロジェクトの知識を SKILL.md にまとめ、エージェントに推測させない | 3×3の作法・JSONの書式・よくある崩れの表を SKILL.md と参照資料にまとめた | ○ |
| 2 | State（状態） | 会話の外に「済んだこと・次にやること」を残す | 版ごとの図解定義JSON（v1, v2…）と、修正履歴を含む再現用プロンプト | ○ |
| 3 | Plugins and connectors | 外部のツールにつなぐ | WebSearch / WebFetch で公開情報を取りに行く | △ |
| 4 | Sub-agents | 作る役と確かめる役を分ける | 検品するのは、図を描いたのと同じAI | × |
| 5 | Automations | スケジュールで仕事を見つけて振り分ける | 起動のきっかけは人の依頼 | × |
| 6 | Worktrees | 並行作業を作業ツリーごとに分ける | 1枚ずつ順に描くので不要 | × |
止め方と検証についても照らし合わせました。
- Osmani 氏は「確かめられる条件で止める」ことを勧めています。このスキルは、よくある崩れ（重なり・はみ出し）がなくなったら止めます。ただし判定はAIが画像を見て下すもので、テストのように機械で合否が出る条件ではありません
- 「完了はAIの主張であって証明ではない。検証は人に残る」とも書かれています。このスキルも、仕上げは人が入れる前提で使っています（12章）
- 回数と時間には上限を設けています。検品は「2〜4回は回る前提」、Webサービスでは1ジョブ5分で打ち切ります（11章）
Osmani 氏は、Claude Code の /goal（書いた条件を満たすまで作業を続ける、セッション内の仕組み）を「この考え方に近い」としつつ、ループエンジニアリング本体は、タイマーで起動し、補助のエージェントを立て、実行をまたいで状態を持ち続ける、より大きな仕組みとして区別しています。今回の検品ループは /goal に近い位置づけです。
結論：ループエンジニアリング「そのもの」ではなく、その考え方をスキルの中の小さなループに取り入れた形です。作る役と確かめる役を分けていない点や、人の依頼で動き出す点は、本来のループエンジニアリングとは違います。
スキルの構成
スキルは次の4つで構成しています（中身は公開していないので、役割だけ示します）。
business-model-diagram（Agent Skill）
├─ SKILL.md … 手順書（調査→JSON→SVG→検品→修正）
├─ 参照資料 … 3×3の作法、JSONの書式、よくある崩れと対処表
├─ 素材 … アイコンのデータ、完成例
└─ スクリプト … SVG生成 / PPTX生成 / 検品用PNG化
Agent Skill は、普段は name と description だけがコンテキストに載り、依頼が description に合ったときに初めて SKILL.md の本文が読み込まれます。参照資料やスクリプトは、必要になったときだけ読まれたり実行されたりします。スクリプトはコードそのものがコンテキストに載らず、実行結果だけが返るので、「描画はスクリプトに任せる」設計と相性が良いと感じました。
図解定義JSON
図解1枚は、主体・矢印・補足の3つの配列で書きます。たとえば矢印は、つなぐ主体のIDと接続位置（アンカー）で指定します。
{ "from": "customer.bottom", "to": "uniqlo.top", "type": "kane",
"label": "商品代金", "label_at": [700, 378], "marker_t": 0.505 }
この形にしたことで、次の3つが手に入りました。
- AIはSVGの座標を直接いじらず、JSONの数値を少し変えるだけで修正できる
- 同じJSONからPowerPoint版も生成できる（11章で詳しく書きます）
- 図解の差分が Git で読める
生成サンプル
実際にこのスキルで生成した図解です。
| 依頼（要約） | Web調査 | 主体 / 矢印 / 補足 |
|---|---|---|
| ユニクロ（説明文から描いたお手本） | なし | 7 / 11 / 7 |
| メルカリ | あり | 8 / 11 / 7 |
| マクドナルド（Form 10-K から） | あり | 7 / 11 / 5 |
| Palantir FDE（TL;DR の図） | あり | 8 / 11 / 6 |
生成例: ユニクロ（説明文から描いたお手本。Web調査なし）
開発の初期に手で調整しながら作った完成例で、スキルに同梱してAIの記述例にしています。顧客の購買データが情報の流れでアプリに戻り、需要予測と商品改良につながる「情報製造小売業」の循環が見どころです。
生成例: メルカリ（2026年8月時点の公開情報にもとづく。Web調査あり）
「メルカリのビジネスモデルをWebで調べて図解してください」と頼んだ結果です。購入者からメルカリへ、手数料10%を差し引いて売上金として出品者へ、というカネの流れが閉じることも確認しています。検品ループでは、ラベルとカネのマークの重なり、ラベル同士の接触を2回自分で直しました。
生成例: マクドナルド（2024年12月期 Form 10-K にもとづく。一次資料から描いた例）
タイトルは「店舗を貸して稼ぐフランチャイズ」。本社が土地と建物を押さえて加盟店に転貸し、賃料とロイヤルティを得る構造です。「飲食業ではなく不動産業」という逆説が、図にすると一目で見えます。
※実在企業の図解は、公開情報をもとにAIが生成し筆者が確認した、筆者個人の解釈によるものです。各社の公式見解ではありません。
※図解フォーマット：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研（出典）、Licensed under CC BY 4.0。改変: アイコンをSVGに変換し、色とサイズを変更
6. 実際の作り方（フェーズごと）
ここからは、4段階をどう進めたかを順に書きます。どのフェーズも、Claude Code に日本語で依頼して進めました。
Phase 1: 作法をAIが読めるルールにする
最初に、図解総研の公開記事と配布版のスライドを読み込ませ、Markdown の作法書に書き直してもらいました。実際に渡したプロンプトはこれだけです。
以下の記事からビジネスモデル図解ツールキットの使い方.mdファイルをまとめてください。
SVGを生成するときは./jsonフォルダ内のアイコン情報を参照するようにしてください。
https://note.com/tck/n/n95812964bcbb
ここから人とAIで何度かやり取りし、作法書を育てました。中身は次のとおりです。
- 3×3のルール、アイコンの選び方、矢印3種の作法、補足の作法、色や線幅など素材の実測値
- 書籍の「図解をよむ7つのステップ」を描く手順に転用（中央の縦列 → 中段の左右 → 下段の左右 → 上段の左右 → 矢印 → 補足の順）
- 情報源から3×3へ落とし込む判断のルール。特に「カネの流れが閉じるか（誰が誰に払うかがつながるか）」は必ず確認させる
- 標準レイアウト座標。列の中心と行の上端を固定し、AIに座標の計算をさせない
- 「よくある崩れと対処」を、症状・原因・対処の表にしたもの。AIが自分で直すときの辞書になる
図鑑の描き方を、AIが読める「レシピ本」に
学び：自由に描かせるより、正解の座標と禁止事項を渡したほうが安定する。
Phase 2: pptx のオートシェイプを JSON / SVG にする治具
ツールキットのアイコンは、PowerPoint のオートシェイプ（図形の組み合わせ）です。手で描き直すのではなく、pptx を解析して座標を吸い出す治具を作りました。依頼はこう始めています。
PowerPoint内のオートシェイプの構造を解析してオブジェクト毎にJSONファイルに変換するプログラムを作成し、
そのJSON構造からオブジェクト毎のSVGを生成してください。
治具は2段に分けました。
- pptx → JSON: pptx は XML の ZIP なので、スライドの図形ツリーを読み、グループの入れ子と拡大率を解決して、すべての図形をスライド上の絶対座標に正規化します
- JSON → SVG: 座標の換算（96dpi で 9525 EMU = 1px）と、プリセット図形・カスタムパスの変換だけを行います
いちばんの山は、グループの入れ子の解決でした。PowerPoint のグループは、子の座標を「子の座標空間」（chOff / chExt）で持っていて、親の位置と大きさ（off / ext）で写し直す必要があります。入れ子のたびに変換を合成していきます。
def compose_group(self, off, ext, ch_off, ch_ext) -> "Transform":
"""親側の変換に、このグループの子空間 -> 親空間の写像を合成する。"""
cx = ext["cx"] / ch_ext["cx"] if ch_ext["cx"] else 1.0
cy = ext["cy"] / ch_ext["cy"] if ch_ext["cy"] else 1.0
# 子空間の点 p -> off + (p - chOff) * scale -> さらに親の変換
sx, sy = self.sx * cx, self.sy * cy
tx = self.tx + self.sx * (off["x"] - ch_off["x"] * cx)
ty = self.ty + self.sy * (off["y"] - ch_off["y"] * cy)
return Transform(sx, sy, tx, ty)
一つだけ例外がありました。店舗のアイコンだけ、オートシェイプではなくPNG画像だったのです。そのまま埋め込むと拡大したときに劣化します。そこで、軸に平行な線だけでできた絵であることを利用し、二値化して最大の長方形に分割していく方法でベクタ化しました。結果は元の画像とピクセル単位で一致します。
pptx → JSON → SVG の2段構成。画像だった図形は途中でベクタ化する
学び：「pptx → JSON」と「JSON → SVG」の2段に分けると、途中にベクタ化などの後処理を挟める。
Phase 3: Skill Creator で Agent Skill 化
最初は、作業フォルダにツールと使い方のメモを置き、Claude Code に毎回プロンプトで指示していました。これを Skill Creator で Agent Skill に整理しました。手順書（SKILL.md）、作法とJSONの書式の参照資料、アイコンのデータと完成例、生成・検品スクリプトの4つです。
Agent Skill では、依頼と description を照らし合わせて読み込むかどうかが決まるので、description には「何ができるか」と「どんな依頼で使うか」の両方を書きました。「〇〇のビジネスモデルを図解して」「3×3で図解して」「利用者・事業・事業者で整理して」など、実際に使いそうな言い回しを並べています。これで「図解して」と言うだけで、AIが自分で作法を読み、JSON作成、SVG生成、PNGでの検品、修正のループを回すようになりました。
口頭指示、スキル、自販機の3段階
Phase 4: Webサービス化（Claude Agent SDK + FastAPI）
次に、Claude Agent SDK（Python）と FastAPI でチャット型のWebサービスにしました。依頼の書き出しはこうです。
business-model-diagramスキルをClaude Agent SDKを使って専用のWebユーザインタフェースを備えた、コンテナサービスにしてください。
構成は次のとおりです。
ブラウザ → FastAPI（非同期ジョブ / SSE）
└─ Claude Agent SDK → SKILL.md を読んで実行
└─ WebSearch / WebFetch / スクリプト実行
ここでの設計原則は「アプリはスキルの中身を知らない」です。スキルのフォルダを丸ごとコンテナにコピーし、アプリが依存するのは「SKILL.md がある」ことだけにしました。スキルを直したら、コンテナを作り直すか、スキルのzipを差し替えるだけで、アプリのコードは変わりません。
アプリはスキルを「差し替え可能な箱」として扱う
ダウンロードは、SVG、PowerPoint版、図解定義JSON、再現用プロンプトの4点セットにしました。
- 図解定義JSONがあれば、スクリプトで同じSVGを機械的に再現できます。手で数値を直して再生成する使い方もできます
- 再現用プロンプトは、元の依頼、時点、出典URL、主体・矢印・補足の一覧、適用済みの修正履歴を含む、自己完結の指示文です。別の環境の Claude Code に貼れば、同じような図解が出ます
Webサービスの画面構成（プレビューの図解はサンプル）
※図解フォーマット：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研（出典）、Licensed under CC BY 4.0。改変: アイコンをSVGに変換し、色とサイズを変更
学び：スキルという単位で「手順」を固めておくと、Webサービス側は薄い実行基盤で済む。
7. セキュリティとライセンス
生成AIと連携するサービスで重要なのが、認証情報とライセンスの扱いです。
- シークレットを載せない: マネージドIDと Key Vault 参照を使い、APIキーを設定に直接書かない。コンテナは非rootユーザで実行する
- 入力を残さない: 入力プロンプトはログに残さず、完了時に破棄する。生成物は最終更新から72時間で自動削除する
- ライセンスを分けて管理: 自作プログラムは MIT、ツールキット由来のアイコンと図解フォーマットは CC BY 4.0（「改変あり」も明記）と、ライセンスを分けて整理しました。ただし、配布はしていません（2-3）
- 帰属表示を自動で入れる: 生成するSVG・PPTXのフッタと、Webサービスの画面フッタに帰属表示を入れる
実は、帰属表示には小さなハマりどころがありました。CC BY 4.0 の第3条(a)では、共有するときに作者・著作権表示、出典、ライセンス名とそのURL、改変した旨を示す必要があります。最初の帰属表示には「改変した旨」と「ライセンスのURL」が抜けていて、この記事を書いている途中で気づいて直しました。
4点を1行に入れると長すぎるので、帰属表示を2行にし、そのぶんキャンバスを下に伸ばしました（図の中身と重ならないように）。
図解フォーマット：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研 出典: https://note.com/tck/n/nb76ac2c2a709
Licensed under CC BY 4.0（https://creativecommons.org/licenses/by/4.0/deed.ja） 改変: アイコンをSVGに変換し、色とサイズを変更
教訓：CC BY 4.0 の素材を改変して使うなら、「改変した旨」を書き忘れない。図の中の帰属表示は縮小すると読めないので、記事に貼るときは画像の下にも書く。
8. 実行環境の構成（概要）
配布物がないため、導入手順は載せません。どういう構成で動かしているかの説明に留めます。
- コンテナ構成: Python 3.12 のスリムイメージに、Node.js 20（Agent SDK 内蔵の CLI に必要）と日本語フォントを同梱しました。フォントは Noto Sans CJK JP の1書体だけにして、90MB の一式を17MBに抑えました
- CI/CD: GitHub Actions で main への push をきっかけに、非公開のコンテナレジストリへイメージを自動で発行します
- 実行環境: Azure App Service（Web App for Containers）で動かし、LLM は Microsoft Foundry 上の Claude Opus 5 をバージョン固定で使います
- アクセス制御: 利用者の認証は App Service 認証（Easy Auth）と Entra ID を前提にした設計です。加えて、接続元ごとに1時間50リクエストのレート制限をかけています
- ローカル: docker compose で起動します。VPN 経由のプライベートエンドポイントに WSL から届かないケースに備えて、Windows でそのまま起動するスクリプトも用意しました
つくる・ためる・うごかすの3段。リポジトリもレジストリも非公開
動きは環境変数で切り替えられるようにしています。主な項目は次のとおりです（シークレットは Key Vault 参照で渡すので、ここには含めていません）。
| 環境変数 | 既定 | 役割 |
|---|---|---|
MODEL_ALIAS |
opus |
使うモデル。実際のモデルIDは Foundry 側で固定する |
AGENT_EFFORT |
medium |
エージェントの思考量。高すぎると1ターンに数分かかるため medium に固定 |
WEB_RESEARCH_ENABLED |
1 |
Web調査を許可するか |
JOB_TIMEOUT_SEC |
300 |
1ジョブの上限（5分） |
MAX_CONCURRENT_JOBS |
2 |
同時に動かすジョブ数 |
RATE_LIMIT_PER_HOUR |
50 |
接続元ごとの1時間あたりのリクエスト上限 |
RETENTION_HOURS |
72 |
生成物を自動削除するまでの時間 |
学び：「スキルを差し替えて再デプロイするだけ」を受け入れ基準にしたので、CI/CD とコンテナ化が自然に必要になった。
9. 動かしてみた様子
Claude Code から（自然言語）
スキルを入れた Claude Code で、
「スターバックスのビジネスモデルをWebで調べて図解してください」
と頼むだけです。Claude がスキルを読み込み、WebSearch / WebFetch で一次情報を調べ、図解定義JSONを書き、SVG と PPTX を生成して、PNG にした画像を見ながら重なりを直していきます。最後に、保存先、出典URL、カネの流れが閉じるかの確認結果を返してくれます。
Webサービスから
ブラウザでは、事例ボタンを押すか自由文を入力し、Web調査のON/OFFを選んで送信します。Web調査ONは他社の事例を公開情報から描くとき、OFFは自社の説明文から描くときに使います。
- 進捗は「調査中 → 図解定義を作成中 → SVG生成中 → 検品・修正中（n回目）」の4段階で表示します
- 新規の生成は数分、修正指示は2分程度です
- 生成後は、同じ入力欄が修正指示の欄になります。「矢印のラベルを『手数料』に変えて」「上段左に広告主を追加して」と頼むと、v2、v3 と版が積まれていきます。修正はJSONへの最小の差分として処理し、指示に関係ないレイアウトは変えません
進捗は4段階で表示。修正はJSONの差分として版を積む
Web調査では、次のルールを守らせています。
- 有価証券報告書・IR資料・公式サイトなどの一次情報を優先し、確認できた数値だけを書く
- 図のサブタイトルに時点を明記し、出典URLを結果に添える
- 資料にない部分は勝手に埋めず、空きマスのままにする。3×3は全部埋めなくてよい、というルールがここで効きます
10. 【追記】国際化（i18n）— 翻訳だけでは足りなかった
あとから、Webサービスの画面を英語・日本語・中国語・韓国語・スペイン語の5言語に対応させ、図解は依頼文の言語で描くようにしました。やってみると、文言を訳すだけでは足りない点が3つありました。
- 素材に埋まった文字: 情報アイコンの中に「データ」という日本語が入っていた。アイコン内の文字を差し替える項目を追加（DATA、Daten、数据、데이터）
- 通貨: カネのマークが ¥ に固定だった。通貨記号を指定する項目を追加（$、€、₩）
- 折り返し: 英語は文字幅が狭い代わりに単語が長い。補足の折り返しを単語の切れ目で行うように変更
同じ図解定義から生成した英語版（日本語版は5章の図）
※実在企業の図解は、公開情報をもとにAIが生成し筆者が確認した、筆者個人の解釈によるものです。各社の公式見解ではありません。
※図解フォーマット：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研（出典）、Licensed under CC BY 4.0。改変: アイコンをSVGに変換し、色とサイズを変更
学び：国際化は文言だけでなく、「素材に埋まった文字」「通貨」「折り返し」まで含む。
11. ハマりどころ（実際に踏んだ罠）
ここからは、実際にやってみて困ったことと、その対処です。各節は症状、原因、対策の順に書きます。
1. 一度の描画ではオブジェクトが重なる
描く、画像で見る、直す。2〜4回は回る
症状: 補足が主体名に重なる。矢印のラベル同士が重なる。矢印が主体名を貫く。平行な線が1本に見える。補足の最終行が1文字だけになる。
原因: 文字数と幅の相性、同じ高さに並ぶ複数のラベル、接続位置の選び方。座標を決める工程が残る以上、一発では決まりません。
対策:
- SVG を PNG に変換し、AI自身に画像を見せて検品させます。「2〜4回は回る前提」と手順書に明記し、省略を禁止しました
- 症状・原因・対処の表を参照資料に置きました。幅を縮める、ラベルを上下に振る、側面の接続位置から出す、45px以上ずらす、などです
- プレビューの偽陽性を先に教えました。プレビュー用の描画エンジンでは、代替フォントで「ー」や「・」が消えたり、点線が実線に見えたりします。これは SVG の不具合ではないので、直そうとしないよう明記しました
- Webサービスでは、検品中の SVG を8秒ごとに取得して、生成途中のプレビューを表示しています
2. PowerPoint で「図形に変換」するとテキストがはみ出す
「図形に変換」をやめ、PPTXを直接生成する
症状: 生成した SVG を PowerPoint に貼って「図形に変換」すると、テキストが枠からはみ出し、折り返し位置がずれる。
原因: 変換のときに、フォントサイズが px から pt（1px = 0.75pt）に計算し直され、端数のサイズや日本語フォントの幅の差で崩れる。
対策: 2段階で対処しました。
- 応急: フォントサイズを4の倍数px（16、20、24、32、40）にそろえ、整数のptに写るようにする
- 根本: SVG の変換をやめ、同じ図解定義JSONから PPTX を直接生成する。テキスト・矢印・マーク・補足は PowerPoint の図形として、アイコンは透過PNGとして配置するので、「図形に変換」なしでそのまま編集できます
学び：中間表現をJSONにしておいたので、出力形式を1つ増やすだけで済んだ。
3. Webグラウンディングが終わらず、App Service の240秒タイムアウトで切れる
「どこで止めるか」を指示しないと止まらない
症状: 調査モードで20分以上返ってこない。App Service の前段のタイムアウト（240秒）でHTTP接続が切れる。
原因: エージェントが有価証券報告書のような長大なPDFを熟読する。思考量の多いモデル設定で、1ターンに数分かかる。
対策:
- 調査に上限を設けました。検索は最大3回、ページ取得は最大2件、長大なPDFの熟読は禁止。「誰が・何を・いくらで・どう儲けるか」がそろったら打ち切ります
- エージェントの思考量（effort）を medium に固定しました
- HTTP の同期応答をやめ、**非同期ジョブと SSE（Server-Sent Events）**で進捗を配信するようにしました。1ジョブの上限は5分です
- タイムアウトしても途中の SVG があれば、未検品の版として返すようにしました（途中結果の救済）
- 待ち時間が長いので、ツールを呼ぶたびに「Web検索: 〇〇」「SVG生成中」といった1行を画面に流します
4. ブラウザのリロードでセッションがゾンビ化する
再接続、停止、消失時の案内の3つを設計する
症状: 生成中にリロードすると、画面は初期状態に戻るのに、サーバ側のジョブは走り続ける。結果を受け取れず、止めることもできない。
原因: SSE の接続がブラウザ側で切れるだけで、サーバのジョブと画面の結び付きが失われる。
対策:
- 図解IDをブラウザの sessionStorage に保存し、リロードしたら実行中のジョブへ再接続する
- 停止ボタンを追加。サーバ側で非同期タスクをキャンセルし、その時点の SVG があれば「停止時点の版」として保存する
- ジョブの状態はプロセス内のメモリに置き、消えることを許す設計にした。サーバの再起動で図解IDが見つからなければ「セッションがリセットされました」と表示して新しく始める
教訓：長時間エージェントをWebに載せるなら、「どこで止めるか」「再接続」「停止」を最初から設計する。
12. 事例から見えた傾向と限界
| 観点 | 傾向 |
|---|---|
| 検品ループの回数 | どの事例でも2〜3回で収束。崩れの種類は「ラベルと矢印のマークの重なり」「補足と主体名の重なり」「サブタイトルの長さ」に集中 |
| Web調査の量 | 出典3〜5件で収まる。検索3回・取得2件の上限でも、図解に必要な要点はそろう |
| 要素数 | 掲載した4事例で、主体7〜8・矢印11・補足5〜7。3×3の型が要素の膨張を抑えている |
限界もあります。数値の精度は出典次第です。補足に書く「感動ポイント」は、人が書いたものに及ばないことがあります。Osmani 氏の言う「完了はAIの主張であって証明ではない」のとおりで、仕上げの一手は人が入れる前提で使うのがよさそうです。
13. まとめ
- 描く対象をSVGではなくJSONにしたことで、再現性・差分修正・PPTX出力がすべて手に入った
- AIに目を持たせる（描画 → 画像化 → 自己修正）ことで、重なりの問題が実用レベルになった。ループエンジニアリングの考え方を、スキルの中の小さなループに取り入れた形
- スキルとアプリを分離したので、スキルの差し替えが再デプロイだけで済む
- 素材のライセンスが CC BY 4.0 でも、提供形態が変わった素材は、権利者への配慮から公開を控えた。回答をいただけたら扱いを見直して追記する
- 今後の改善案: 検品を別のエージェントに任せ、「描いたAIが自分の絵を採点する」状態をなくしたい（ループエンジニアリングでいう、作る役と確かめる役の分離）
Agent Skill は Claude Code の中だけでなく、Webサービスの「中身」としても使える単位だと感じました。手順をスキルに固めておけば、呼び出し口がチャットでもブラウザでも、同じ品質の図解が出てきます。
14. 関連記事
- Claude Agent Skills完全ガイド
- 仕様駆動開発（Kiro流SDD）でClaude Code用の画像生成Skillを作ってみた（この記事のイラストは、このSkillで生成しました）
- Dify-1.1.3からClaude 3.7 SonnetでSVG図解をする
15. 参考URL
- ビジネスモデル2.0図鑑 #全文公開チャレンジ（note）
- ビジネスモデル図解ツールキットを無料で配布してみた（追記あり）（note）
- ビジネスモデル図解ツールキットがリニューアル！（株式会社図解総研）
- ビズグラムツールキット3.0（図解商店）
- CC BY 4.0 コモンズ証（要約）
- CC BY 4.0 リーガルコード（本文）
- Agent Skills（Claude Docs）
- Agent SDK overview（Claude Code Docs）
- Loop Engineering（Addy Osmani, 2026-06-07）
- An Introduction to Loop Engineering（Machine Learning Mastery）
- Loop Engineering Emerges as Developers Put AI Coding Agents on Repeat（ADTmag, 2026-07-01）
図解フォーマット：ビジネスモデル図解ツールキット 配布版 Ver.4.2 ©図解総研（出典）、Licensed under CC BY 4.0。記事中の図解のアイコンは、オートシェイプをSVGに変換し、色とサイズを変更して使用しています。
本記事のヘッダー画像とイラストは gpt-image-2 で生成したものです。ヘッダー画像の人物は実在しません。また、ツールキットの実物アイコンや実在のロゴを模倣していません。