Imported from halsk/skills (
skills/business-model-diagram/SKILL.md). Install upstream withnpx skills add halsk/skills --skill business-model-diagram. Copyright stays with the author (MIT).
business-model-diagram
目的
対象事業の資料(context ファイル・公開ドキュメント・URL 等)を典拠として、 図解総研の「ビジネスモデル図解ツールキット」の方法に基づく図解を、 自己完結 HTML/SVG として出力する。
この skill の背骨は「捏造させぬこと」である。 この種の図解の最大の失敗は、 資料に書かれていない主体やカネの流れをもっともらしく創作することである。 とくにカネの流れ(誰が誰に払うか)が最も捏造されやすい。 以下の掟を一つでも破った出力は成果物として無効。
出所と表示義務 (必読)
-
方法の出所 = 「ビジネスモデル図解ツールキット」©図解総研、ライセンス CC BY 4.0。 詳細は同ディレクトリの
SOURCE.md。 -
素材(ツールキット内の画像・図形データ)は複製しない。 方法に学んで自前の SVG を描く。
-
表示義務: 出力する図解には必ず次の一文(相当)を目に見える形で描画する:
本図解は「ビジネスモデル図解ツールキット」(©図解総研, CC BY 4.0)の方法に基づいて作成しています。ツールキットの素材は複製していません。
-
ツールキットの pptx そのものをリポジトリへ commit・再配布しない。
方法の核 (図解総研の方法)
図解は 3 要素だけで作る:
| 要素 | 意味 |
|---|---|
| 主体 | 重要な関係者・物 (箱で描く) |
| 矢印 | 主体間を流れる重要な関係性 |
| 補足 | 主体と矢印だけでは描ききれない情報 (吹き出しで描く) |
配置は 3×3 の格子に収める:
| 段 | 意味 |
|---|---|
| 上段 | 利用者 — その事業はだれのためか |
| 中段 | 事業 — なにがおこなわれるか (中央=事業名) |
| 下段 | 事業者 — だれがおこなうか |
マスは全部埋まらなくてよい(ツールキット自身が明記)。 これは捏造を防ぐ設計上の逃げ道でもある — 分からぬマスは空のままにせよ。
作図の手順 (この順で埋める)
- 中央の縦列・上段 — だれに? (利用者)
- 中央の縦列・中段 — なにを? (事業。製品が入ることも)
- 中央の縦列・下段 — だれが? (事業者)
- 中央の横列(左右) — なにが重要? (事業を特徴づける重要な関係者・物)
- 四隅 — だれが関係? (提携企業・関係会社・重要な関係者)
- (四隅の続き — 利用者側の関係者も見る)
- 矢印と補足 — モノ・カネ・情報がどう流れるか
記法
矢印は 3 種。線の色だけでなく、矢印の中心に印を置く(配布版 Ver.4.2 スライド 3 の凡例で実物確認済み・2026-09-06):
| 種類 | 線 | 中心の印 |
|---|---|---|
| モノの流れ | 実線(推定なら点線) | 緑の丸(塗りつぶし円。ラベルなし) |
| カネの流れ | 実線(推定なら点線) | 黄色の角丸四角+ ¥(丸ではない) |
| 情報の流れ | 実線(推定なら点線) | 水色の四角(角丸なし・ラベルなし) |
- 点線 = 確実に存在するとは限らない流れ。推定を載せる場合は必ず点線+「推定」の明示。
- 従属関係 = 細線 + ● (小さいオーバル)。「B は A に属す」なら、● は従属される側=B の端に付く (配布版スライド3のコネクタで実測: headEnd/tailEnd の oval が常に B 側)。 ● の位置は「右端固定」でも「左端固定」でもない — どちらが従属する側かを見て決める。 逆にすると意味が反転するので注意。
- 入れ子 = 小さい方(含まれる側)の箱自身の角に ● を付す(大きい方には付けない)。
- 補足 = 角丸の吹き出し(グレー塗り・枠線なし・三角の尻尾で対象を指す)。 「説明がないと理解が成り立たない」箇所に入れる。感動するポイント(その事業ならではの妙)も なるべく入れる。吹き出しの色は黄色にしない(黄色はカネの印の色として予約されている)。 なお、点線枠+白背景の注釈ボックス(メタ的な補足コメント)は吹き出しとは別物であり、 この skill の出力(3 要素図)には出さない — 吹き出しのみを使う。
主体のアイコン(8 種)
ツールキットは主体を 8 種のアイコンで描き分ける(配布版スライド3で実物確認済み)。
本 skill では素材を複製せず、以下の単純図形による自作アイコンを使う
(template.html の <defs> に icon-person などの id で収録済み。<use> で呼び出せる):
| 種別 | 見た目 | 用途の目安 |
|---|---|---|
| ヒト | 丸(頭)+ 台形(肩)の輪郭線 | 個人・利用者・会員 |
| 会社 | ビルの輪郭 + 窓 6 個 + ドア | 企業・組織・運営団体 |
| カネ | 縦長の容器。下部を黄色で塗り ¥ |
通貨・決済そのものを主体として描く場合 |
| モノ | 緑の塗りつぶし円 | 製品・物理的なモノ |
| 情報 | 縦長の容器。下部を水色で塗り「データ」 | データ・情報そのものを主体として描く場合 |
| スマホ | 端末の輪郭 + 画面 + ホームボタン | アプリ・クライアント端末・ソフトウェア |
| 店舗 | 屋根 + 建屋 + ドアの輪郭(自作の簡易グリフ。原本の画像は複製しない) | 店舗・拠点 |
| その他 | 無地の縦長矩形(輪郭のみ) | 上記に当てはまらない主体 |
現状は全主体が同じ矩形カードで描かれ種別が判別できない状態だった。今後は主体の箱ごとに 最も近いアイコンを 1 つ選び、箱の左上に小さく配置すること。 ツールキット自身が 「イメージに近いものを配置すればOK、正解があるわけではない」と明記しており(スライド3の 注記)、厳密な一意対応を求めるものではない。迷ったら「その他」でよい。
捏造防止の掟 (絶対)
- 主体・矢印・補足の 1 つ 1 つに典拠(ファイル名+行、または URL)を持たせる。 典拠なきものは図に載せない。
- 分からぬマスは空のままにする。 埋めるために推測を置かない。
- 推測を載せる場合は点線+「推定」の明示を義務とする。 根拠表の確度欄も「推定」とし、推定の根拠を書く。
- 図解と対にして根拠表を必ず出す (列: 要素 / 種別 / 内容 / 典拠 / 確度)。 図だけを出さない。根拠表は同じ HTML 内に置くのが基本。
- 資料に無い数値(金額・契約数・シェア等)を書かない。
- 公開前提の図には、公開資料に無い内部限定情報を混ぜない。 社外へ出る可能性がある図は、典拠を公開資料(公開 URL 等)に限るのが安全。 顧客名・売上・契約数は典拠が公開資料でない限り書かない。
出力仕様
- 自己完結 HTML + inline SVG 1 ファイル。外部 CDN・外部フォント・外部画像に依存しない (Artifact として公開されると CSP で外部リクエストが弾かれるため)。
- フォントは system font stack のみ。
- 明るい配色・暗い配色の両方で読めること。CSS カスタムプロパティを
:rootに定義し、@media (prefers-color-scheme: dark)は:root:not([data-theme="light"])でガード、 さらに:root[data-theme="dark"]でも同値を再定義する(明示切替に勝たせる)。bodyには必ずトークン背景色を明示する。 - 3×3 格子(行帯 3 段 + 縦の列区切り線 2 本)・矢印 3 種(各矢印の中心に規定の印: モノ=緑丸/ カネ=黄色角丸四角+¥/情報=水色四角)・点線・従属 ●(従属される側の端)・入れ子 ●(小さい方の 角)・グレーの吹き出し補足・主体アイコン(8 種から最も近いものを選択)・凡例・表示義務文言・ 根拠表を必ず含む。
- 横に広い内容は
overflow-x: autoの容器に入れ、body の横スクロールを出さない。 - 実装の骨格は
template.htmlを出発点にしてよい(これは本 skill の自作であり ツールキット素材ではない)。skills CLI (npx skills add) はスキルディレクトリの 全ファイルを配布するため、通常は SKILL.md と同じディレクトリに存在する。 万一無い場合は https://raw.githubusercontent.com/halsk/skills/main/skills/business-model-diagram/template.html から参照できる。template.html が無くても、本書の要件だけで作図してよい。
自己検査 (出力後に必ず実施し、結果を報告に含める)
- 図中の全主体・全矢印・全補足が根拠表に載っており、典拠が実在する (ファイルなら該当行を開いて確認、URL なら取得して確認)
- 資料に無い主体・カネの流れ・数値を創作していない
- 推定要素はすべて点線+「推定」表示になっている
- 空白マスを推測で埋めていない
- CC BY 4.0 / ©図解総研 の表示義務文言が実際に描画されている
- ツールキット素材を複製していない
- (公開前提の図の場合) 内部限定情報が図・根拠表のいずれにも無い
- 明暗両配色で全要素が可読 (両テーマで実際に開いて確認)
- モノの流れの矢印すべてに、中心の緑の丸がある
- カネの流れの矢印すべてに、中心の黄色の角丸四角(丸ではない)+¥ がある
- 情報の流れの矢印すべてに、中心の水色の四角(角丸でない)がある
- 主体の箱すべてに、8 種のうち最も近いアイコンが付いている(全箱が同じ無地カードになっていない)
- 3×3 格子に縦の列区切り線が 2 本描かれている
- 補足の吹き出しがグレー塗り・枠線なしになっている(黄色枠になっていない)
- 従属・入れ子の ● が「従属される側」の端(または小さい方の角)に付いている (A が B を含む・B が A に属す、なら ● は B 側)