ドパ資料は、ドーパミンが出るような目新しい図で読ませる資料のことで、Qiita の kikuziro 氏の「『ドパ資料』の作り方」 が名付けました。SVG図解を Claude Code に描かせると、どこかで見た箱と矢印の図になりがちです。元の記事は、「赤ペン先生みたいに」「製図風に」とテイストを一言添えるだけで図の印象が変わることを、8つの例で示しました。この記事では、その一言を色・書体・必ず入れるもの・入れないもの・機械の検査まで決めた Claude Code のスキルに落とし込み、実際に描かせて測りました。下の図は、スキルで描いた赤ペン先生のテイストです。
30秒でわかる（2026-11-11）
- ・何ができる：題材を8つのテイストのどれかで SVG にし、検査して PNG と6秒ループの GIF に書き出す
- ・何を解決する：「SVGで図にして」だけで出る、見慣れた図。スキルなしは検査で26件、スキルありは4回とも0件
- ・入れ方：zip を
~/.claude/skills/に展開する。Playwright と ffmpeg が要る
図とデザインの決まりごとを先に固める考え方は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 にまとめています。
「ドパ資料」の記事が言っていること
元の記事の主張は、文章だけの記事は AI が書いたものと見分けがつかず読まれにくいので、図を差し込もう、というものです。ただし「SVGで構成図にして」とだけ頼んで出てくる図も、もう見慣れられています。そこで同じ題材のままプロンプトにテイストを足し、赤ペン先生・製図・雑誌・マンガ・スイス・取扱説明書・ファミコン・動物園の8通りを描いています。さらに、矢印の上をリクエストが流れるアニメーションを付けて GIF にする頼み方も紹介しています。きっかけは みのるん氏の X の投稿 だと書かれています。
この方法は手軽ですが、テイストは一言で伝えるので、大きさや文字の太さは毎回 AI まかせです。文字のはみ出しや重なりにも、人が見て気づくしかありません。
PROMPT vs SKILL元記事の頼み方と、スキルにして足したもの
テイストの一言を、守れる仕様と検査にした
元記事：プロンプトで頼む
「赤ペン先生みたいにして」
- テイストは一言で伝える
- 大きさ・文字の太さは毎回まかせる
- 崩れたかは自分で見て気づく
スキル：svg-style-figure
SKILL.md と styles.md と2つの検査スクリプト
- 8テイストに色・書体・必ず入れるもの・入れないもの
- 1200×675・文字16px以上・外部参照なしを lint で数える
- PNG と 6秒ループの GIF まで書き出す
ドパ資料を作るスキル svg-style-figure の中身
スキルは4つのファイルです。SKILL.md に手順と SVG の決まり、styles.md に8つのテイストの仕様、scripts/ に検査と書き出しのスクリプトを置きました。
| ファイル | 決めていること |
|---|---|
SKILL.md |
最初に決める5項目（伝えたい1点・要素3〜6個・テイスト・濃さ1〜3・動き）、SVG の決まり、動きの決まり、報告すること |
styles.md |
8テイストごとの地の色・線と文字の色・書体・必ず入れるもの・入れないもの |
scripts/lint.mjs |
Chromium で実際に描き、はみ出し・重なり・16px 未満・外部参照・書体の受け皿・viewBox を数える |
scripts/render.mjs |
2倍の PNG と、6秒を30コマ撮って組む GIF を書き出す |
テイストの仕様は、一言を具体的な指定に開いたものです。たとえば赤ペン先生なら「方眼は 24px 間隔、箱は ±1.5度だけ傾ける、赤（#d6332a）の丸囲み1つ・短いコメント2つ・下線1本を必ず入れる、影とグラデーションは入れない」と書きました。濃さ（元記事の言う「ドパ度」）は1〜3で、2は「テイストの特徴をすべて入れる」です。3の演出は表紙など1枚目だけに使う、と決めてあります。
HOW THE SKILL RUNSスキルが1枚を作る手順
決める → 描く → lint で0件 → 書き出して目で見る
-
1
伝えたい1点とテイストを決める
要素は3〜6個。濃さ（ドパ度）は1〜3で既定は2
-
2
SVG を描く
styles.md の色・書体・必ず入れるものに従う。記憶で補った名前は確かめてから入れる
-
3
lint.mjs で検査
はみ出し・重なり・16px未満・外部参照・受け皿の書体を数え、0件まで直す
-
4
render.mjs で書き出す
PNG は2倍で。動きがあれば6秒を30コマ撮って GIF に
ドパ資料のスキルで実際に描かせた結果：スキルなし26件、スキルあり0件
Claude Code 2.1.322 の claude -p に、同じ題材「MCP でAIエージェントが外部ツールを呼ぶ流れ」を描かせました。スキルなしは「SVGの図を作って」とだけ頼み、スキルありはテイストと濃さ2を指定しました。どれも lint.mjs で同じように検査しています。
| 作り方 | テイスト | lint の問題 | 費用 | 時間 |
|---|---|---|---|---|
| スキルなし | — | 26件（16px 未満20、はみ出し4、viewBox の違い1、width/height 1） | $0.69 | 78秒 |
| スキルあり | 赤ペン先生 | 0件 | $0.93 | 96秒 |
| スキルあり | 製図＋GIF | 0件 | $1.36 | 163秒 |
| スキルあり | ファミコン | 0件 | $1.49 | 153秒 |
| スキルあり（改訂後） | スイス | 0件 | $1.20 | 133秒 |
出典: 当サイトの実測（2026-11-11）。費用は claude -p が返した値
スキルなしの図は決まりを知らずに描いているので、26件は図の質の良し悪しではなく、決まりどおりに描けたかの差です。中身は整った流れ図で、見た目は元記事の言う「見慣れた図」そのものでした。スキルありの3回は、どれも自分で lint を回して0件にしてから PNG を書き出しました。ファミコンでは、ドット絵を手で並べず、SVG を組み立てる小さなスクリプトを書いて出力していました。
1つ、直した点があります。最初の3回は、図に tools/list・tools/call といった MCP のメソッド名を入れたうえで、「記憶で書いた。仕様の原文と照合していない」と報告してきました。名前はどれもMCP の仕様と合っていましたが、記事の図に確かめていない名前が入るのは困ります。そこで SKILL.md に「記憶で補った名前は一次情報で確かめ、確かめられないものは図から外して報告に挙げる」と足しました。改訂後のスイスの回では、一次情報を渡さなかったので、メソッド名を「ツール一覧を尋ねる」「実行を依頼する」という説明に置き換え、外した名前を報告に並べました。
GIF で流れを見せる：動きの決まり
動きは「流れ」「順番」「経路」がある図だけに付けます。主役は矢印の上を流れるリクエストで、届いた箱は 0.3秒だけ光らせ、文字は動かしません。すべての動きを 6秒にそろえて継ぎ目なくループさせ、prefers-reduced-motion のときは止めます。元記事の頼み方を、守れる数字にしたものです。
書き出しは render.mjs が受け持ちます。CSS アニメーションと SVG の SMIL の両方を止めた状態で、時刻を 0.2秒ずつ進めながら30コマを撮り、ffmpeg で 960px 幅・128色の GIF に組みます。この製図の GIF は 166KB でした。
スキルの入れ方と使い方
zip を Claude Code の個人用スキルの置き場所に展開します。
mkdir -p ~/.claude/skills && cd ~/.claude/skills
curl -fsSLO https://ai-heartland.com/assets/skills/svg-style-figure.zip
unzip svg-style-figure.zip && rm svg-style-figure.zip
検査と書き出しには Playwright（Chromium）と ffmpeg を使います。Playwright は図を作るプロジェクトで npm i -D playwright と npx playwright install chromium を実行して入れます（この記事ではこの2つのコマンドは実行していません）。日本語の文字を描くので、Noto Sans JP などの日本語フォントも要ります。あとは Claude Code に頼むだけです。
MCP でAIエージェントが外部ツールを呼ぶ流れを、svg-style-figure スキルで図にして。
テイストは drawing、濃さは2。矢印の上をリクエストが流れる動きも付けて figure.gif も書き出して。
自分で直した SVG も、同じスクリプトで確かめられます。わざと崩した SVG では、はみ出し・小さすぎる文字・重なり・外部参照など8件をすべて拾いました。
node ~/.claude/skills/svg-style-figure/scripts/lint.mjs figure.svg
node ~/.claude/skills/svg-style-figure/scripts/render.mjs figure.svg figure.gif --gif
lint が0件でも、文字が図形に隠れていないか、テイストの「必ず入れるもの」が入っているかは目で見て確かめてください。スキルの文章の書き方そのものは Claude Skillsとは｜「スキル=フォルダ」の仕組みと作り方・使い方を徹底解説 が参考になります。UI の作法をスキルで守らせる別の例は Refactoring UIの原則をClaude Codeに守らせるスキル｜実測すると発火しない条件がある、AI っぽい UI を避ける例は unslopとは｜AIっぽいUIをデザイナーの目で直すClaude Codeスキルを実際に動かした で扱っています。
参照ソース
- 「ドパ資料」の作り方（kikuziro・Qiita） — 8つのテイストのプロンプトと GIF 化の頼み方（2026-11-11 確認）
- みのるん氏の X の投稿 — 元記事が挙げるきっかけ
- Model Context Protocol：Tools（仕様 2025-06-18） — tools/list・tools/call の確認に使用
- svg-style-figure.zip（当サイト・MIT） — この記事のスキル一式
