こんな経験、ありませんか

• AIに「図解して」と頼んだら、虹色のグラデーションと絵文字だらけのスライドが返ってきた
• 前回は良い図が出たのに、今回は全く違うテイストになった
• 毎回「グレーで」「文字を大きく」「枠線は使わないで」と同じ指示を打っている
• チャットで細かく直させているうちに、自分で描いた方が早い気がしてきた

これ、AIの限界ではありません。

デザインの判断基準を、AIが参照できる形で持っていないだけです。

この講座で学べること

この講座では、実際に日常運用されている Claude Code スキル「svg-diagram」を丸ごと教材にします。SVG図解のデザインルール約100項目を、「なぜそのルールが必要なのか」から一つずつ解説します。

• スキルの仕組み — Claude Codeのスキルがどう自動発動するか、SKILL.mdとreferencesの分割設計
• デザインルールの中身 — グレー8段階のカラーパレット、1図1メッセージ、グリッド整列、直角コネクタ、対比図の整合ルール、アンチパターン集
• ルールの「なぜ」 — 各ルールが何の事故を防いでいるのか。NG/OKの対比画像で体感できます

スキルファイル一式はダウンロードできます。そのまま自分の Claude Code に入れて使ってもいいし、自分の業務用に書き換えるベースにしても構いません。

対象者

この講座は主に以下の方を対象にしています。

• スライド・提案資料・記事の図解を日常的に作るビジネスパーソン
• Claude Code などの AI エージェントに資料作成を任せたい方
• 「AIに毎回同じ指示を打つのに疲れた」方

Claude Code を使ったことがなくても読めるように、スキルの仕組みから説明します。逆に、デザインルール自体は AI を使わない手描きのスライド作りにもそのまま役立ちます。

本講座の特徴

本物のスキルをそのまま解剖する

教材用に作ったサンプルではなく、現役で使われているスキルファイルそのものを扱います。ルールの一つひとつに、実際の失敗（文字のはみ出し、メッセージの分裂、ダサい装飾）から生まれた背景があります。

「なぜ」を最優先で解説する

ルールの丸暗記では、自分のスキルを作るときに応用できません。各ルールを「ルール → なぜ必要か → NG/OK → チェックリスト」の順で解説し、判断基準ごと持ち帰れるようにしています。

講座内の図解自体が実例

この講座に登場するNG/OK対比の図解は、すべて svg-diagram スキル自身を適用して作られています。講座の画像そのものが、スキルのアウトプット見本です。

講座の構成

Ⅱ Claude Codeスキルの仕組み

スキルとは何か、frontmatterの設計、本体とreferencesの分割。ここでスキルファイル一式をダウンロードできます。

1. 図解の目的とメッセージ設計

図は手段であって目的ではない。根無し図表の禁止、1図1メッセージ、情報量の過不足。すべてのルールの土台になる章です。

2. カラーパレットとテキスト

グレー8段階＋マゼンタ4段階のパレットと、フォントサイズの階層。「なぜグレーだけで描くのか」から解説します。

3. レイアウト・背景色・viewBox

タイトル・外枠・線の使い方と、事故が多発するカード内テキスト配置の防止ルール。

4. グリッド整列

12カラム・8pxベースラインのグリッド規律。塗りだけで分離し、近接の法則でグルーピングする方法。

5. HTMLへの埋め込み

インラインSVG禁止の理由、XMLエスケープ、スクリーンショット目視確認までの実務ワークフロー。

6. 矢印・コネクタとデータチャート

直角コネクタの規律と、ホバーに頼らないデータチャートの作り方。

7. 対比図・図セットのルール

左右対比図・複数図セットを並べるときの高さ・マージン・ラベルの整合ルール。

8. アンチパターンと変換ワークフロー

「ダサいスライド」を生む装飾の一掃と、紙資料の図をSVG化するワークフロー。関連スキルとの役割分担も扱います。

本講座で扱わないこと

• Claude Code のインストール・セットアップ手順 — 公式ドキュメントに譲ります
• SVGの文法そのもの — rect / text / line などの基本要素は登場のつど最小限だけ説明します
• 何を図解するかの選定（図解の型選び） — 本講座は「決めた図をどう描くか」に集中します。型選びは別スキル（visual-design-essentials）の領分として、最終章で役割分担だけ紹介します