技術記事に図解を入れると、いいねが平均2〜3倍になると言われている。でもFigmaやCanvaを習得する時間は正直ない。
2026年4月17日にAnthropicがリリースした「Claude Design」を使えば、テキストを打つだけで比較インフォグラフィックやフロー図が5分で完成する。この記事では「Qiitaに図解を埋め込むまでの全手順」を実体験ベースで解説する。
この記事でわかること
- Claude Designで作れる技術記事向け図解の種類と限界
- Qiita埋め込みまでの5ステップ完全ワークフロー
- Claude Design vs SVG/Mermaid の使い分け判断基準
対象読者
- Qiita/Zennに記事を書いているエンジニア
- Figma・Canvaを使いこなせておらず、いつも図なし記事になっている人
- 記事の質を上げたいが追加工数は最小限にしたい人
目次
- Claude Designとは？30秒で理解する
- 技術記事で使える図解タイプ3選
- 正直に言う：Claude Designが苦手な図
- 5ステップ実践ワークフロー
- Qiitaへの埋め込み手順（3パターン）
- 実際に試した：ビフォーアフター
- よくある失敗とその回避策
- まとめ
Claude Designとは？30秒で理解する
2026年4月17日、AnthropicがClaude Designをリリースした。Anthropic Labsからの初プロダクトで、claude.ai/designからアクセスできる。
一言でいうと「テキストを打つと動くデザインが生成されるキャンバス」。
入力: 「Aサービス vs Bサービスの比較表をインフォグラフィックで」
出力: カラー付きの比較ビジュアルがブラウザ上に生成される
生成されたデザインはブラウザ上で直接編集でき、PDF / PPTX / HTML / Canvaにエクスポートできる。背後で動いているのはClaude Opus 4.7で、チャット枠とは別の利用枠なので既存のClaudeの使用量には影響しない。
主な機能一覧
| 機能 | 説明 |
|---|---|
| テキスト→デザイン生成 | 日本語プロンプトでそのまま指示できる |
| インライン編集 | ブラウザ上でテキストを直接クリックして書き換え |
| コメント指定 | 特定要素に「ここの色を濃紺に」とコメントで指示 |
| スクリーンショット入力 | 既存資料やURLを参考にデザインを生成 |
| エクスポート | PDF / PPTX / HTML / Canvaに書き出し |
| デザインシステム連携 | コードベースを読んでブランドカラーを自動適用 |
利用条件・料金
- Claude Pro: $100/月（週ごとの使用上限あり）
- Claude Max: $200/月（上限拡大）
- Team / Enterprise: 別途契約
- 無料プランでは現在利用不可
Claude Designの利用上限はチャット・Claude Codeとは独立した別枠。Pro ($100/月)でも上限を超えると一時的に使えなくなることがある。図を大量生成するならMaxプランの方が安心。
技術記事で使える図解タイプ3選
Claude Designは「何でも作れる万能ツール」ではない。技術記事に組み込む図解に限定すると、特に効果的な使い方が3つある。
タイプ1：比較インフォグラフィック
一番使いやすく、一番効果が出る。
「AとBを比較する」記事では、テキストの箇条書きより視覚的な比較表の方が読者に刺さる。例えば：
- 「Claude Code vs Cursor 3 の使い分け」
- 「PythonとGoのパフォーマンス比較」
- 「SaaS選定基準チェックリスト」
実際に使ったプロンプト例:
Claude Code（Anthropic製）とCursor 3（Anysphere製）を比較するインフォグラフィックを作って。
比較項目:
- 対応LLM
- 価格（月額）
- 得意なこと
- 苦手なこと
横並び2カラムのレイアウト。左をClaude Code（青系）、右をCursor 3（緑系）で色分け。
見出しは24px太字、本文は13px。白背景。
これで30秒以内に比較ビジュアルが生成される。2〜3回調整を入れても5分以内。
💡 Tips: 比較項目は4〜6個に絞る。多すぎると文字が小さくなって読めなくなる。
タイプ2：ステップフロー図（〜6ステップ）
「手順を視覚化したい」ときに使える。記事内で「こういう順番でやればいい」を伝えるセクションに1枚入れると読了率が上がる。
プロンプト例:
「Claude Codeでコードレビューを自動化するフロー」を5ステップの縦型フロー図で。
ステップ:
1. コードをコミット
2. Claude Codeにレビュー依頼（スラッシュコマンド）
3. 指摘箇所の確認
4. 修正・再コミット
5. PRマージ
各ステップに番号付きの円アイコンと1行説明。矢印でつないで。
全体幅600px、背景薄いグレー。
ステップ数は5〜6個まで。それ以上は視認性が落ちる。7ステップ以上のフローはMermaidの方が向いている。
タイプ3：アイキャッチ・ヘッダー画像
記事の最上部に置く画像。これがあるだけで「ちゃんとした記事」に見える。QiitaはOGP画像として機能するため、SNSシェア時のクリック率にも直結する。
プロンプト例:
「Claude Codeで並列エージェントを動かす」という技術記事のヘッダー画像を作って。
サイズ: 横1200px × 縦630px（OGP推奨サイズ）
デザイン: 濃紺(#0d1117)背景、白テキスト、タイトルは32px太字
右側に抽象的なネットワーク/グラフのビジュアル要素
左下にAnthropicのロゴっぽいシンプルなアイコン
ヘッダー画像を記事ごとに用意するのはデザイナーなら当然だが、エンジニアは後回しにしがちな部分。Claude Designで量産できるなら記事のブランド感が上がる。
正直に言う：Claude Designが苦手な図
Claude Designを過信すると「雰囲気だけある意味のない図」ができあがる。以下の用途は向いていない。
NG：アーキテクチャ図・システム構成図
「このAPIがこのDBに繋がって、マイクロサービスが…」という構造図をClaude Designで作ると、見た目はそれっぽいが、矢印の向きや接続が意味不明になりやすい。
アーキテクチャ図はSVG手書きが最もコントロールしやすい。
# SVGを書いてPNGに変換する（ImageMagick使用）
magick -density 200 /tmp/architecture.svg /tmp/architecture.png
技術的に正確な接続関係を表現したい場合、テンプレートに押し込むClaude Designより、座標を自分で指定できるSVGの方が確実。
NG：Gitブランチ・コミット履歴の可視化
Gitの構造はMermaidで書く方が断然早く、正確。Qiitaはコードブロックにmermaidを指定するとそのままレンダリングしてくれる。
NG：コードの依存関係・UML図
クラス図や依存関係はPlantUMLやgraphvizの領域。Claude Designに頼ると「それっぽいボックスと矢印」が生成されるが、実際の依存関係を正確に反映できない。
使い分けまとめ（これだけ覚えれば十分）
| 図の種類 | 推奨ツール | 理由 |
|---|---|---|
| 比較インフォグラフィック | ✅ Claude Design | テンプレート生成が得意 |
| ヘッダー・アイキャッチ | ✅ Claude Design | デザイン系は強い |
| シンプルなフロー（〜6ステップ） | ✅ Claude Design | 視覚的に整えるのが得意 |
| アーキテクチャ図 | SVG手書き | 正確な接続関係が必要 |
| Gitフロー | Mermaid | Qiitaがネイティブ対応 |
| UML・依存関係 | PlantUML / graphviz | 専用構文で正確 |
5ステップ実践ワークフロー
Step 1: claude.ai/design にアクセス
ProまたはMaxプランでログインし、claude.ai/designへ。初回はデザインシステムの設定を聞かれるが、スキップしても使える。
Step 2: プロンプトで図を指示する
日本語でそのまま打てる。 精度を上げるポイントは「何を・どんなレイアウトで・どんな配色で」を明示すること。
精度が上がるプロンプトの構成:
[図の種類] を作って。
内容:
- 項目1
- 項目2
レイアウト: [横並び/縦フロー/グリッドなど]
配色: [ダーク系/明るい系/ブランドカラー指定]
サイズ: [おおよその幅・高さ]
生成にかかる時間: 初回生成は10〜30秒。複雑な指示だと最大60秒。
Step 3: ブラウザ上で調整する
生成後の調整方法は3種類ある:
- チャットで追加指示:「左カラムの背景色を濃紺(#0d1117)に変えて」
- テキストを直接クリック編集: テキスト要素をダブルクリックして直接書き換え
- インラインコメント: 特定の要素を選択して「このフォントを太くして」とコメント
だいたい2〜3回の往復で完成する。 調整にかかる時間は3〜5分が目安。
Step 4: エクスポートする
右上の「Export」からエクスポート形式を選ぶ。Qiita埋め込み用には:
- HTML: ブラウザで開いてスクリーンショットが取れる
- PDF: ImageMagickでPNG変換できる
# PDFをPNGに変換（ImageMagick）
magick -density 200 ~/Downloads/claude_design_export.pdf /tmp/figure.png
# 確認
open /tmp/figure.png
Step 5: 画像をホスティングしてMarkdownに埋め込む
Qiitaは外部URLの画像をMarkdownで埋め込める。無料で使えるホスティング先:
オプションA: Qiitaエディタに直接ドラッグ（最速）
1. Qiitaの記事エディタを開く
2. エクスポートしたPNGをドラッグ&ドロップ
3. 自動でMarkdownが挿入される
オプションB: catbox.moe（外部URL管理したい場合）
curl -sSF 'reqtype=fileupload' \
-F 'fileToUpload=@/tmp/figure.png' \
https://catbox.moe/user/api.php
# → https://files.catbox.moe/xxxxxx.png が返ってくる
\
オプションC: GitHubのIssueを使う（一番管理しやすい）
1. GitHubのissue/PRのコメント欄に画像をドラッグ
2. 自動生成されたURLをコピー
3. Qiitaの記事に貼る
💡 Tips: 記事を更新することを考えると、GitHubのIssueに画像をまとめておくと管理が楽。画像のURLが永続するのでリンク切れの心配がない。
Qiitaへの埋め込み手順（3パターン）
上の5ステップを踏まえて、実際のQiitaへの埋め込みを整理する。
パターン1: インライン画像（一番よく使う）
## Claude Codeの設定例
以下の構成で動かしている。
\
この設定では...（解説続く）
パターン2: キャプション付き（図の説明が必要なとき）
Qiitaは<figure>タグをサポートしている:
<figure>
<img src="https://files.catbox.moe/example.png" alt="Claude Code vs Cursor 3 機能比較">
<figcaption>図1: 2026年4月時点の主要AIコーディングツール比較</figcaption>
</figure>
パターン3: ヘッダー画像として設定
Qiitaの記事ヘッダー画像は記事編集画面の「カバー画像」から設定できる。Claude Designで1200×630pxのOGPサイズで生成してアップロードすると、SNSシェア時に画像付きで表示される。
実際に試した：ビフォーアフター
同じ内容の記事を「図なし版」と「Claude Design図解あり版」で比較した。
Before：図なし記事
## Claude Code vs Cursor 3 の違い
Claude Codeは対話型で使い、Cursor 3はIDE統合型。
価格はClaude CodeがProで月$20、Cursor 3がBizで月$40。
得意なのはClaude Codeが長文コンテキスト、Cursor 3がリアルタイム補完。
読んでみると何となくわかるが、頭に入りにくい。
After：Claude Design図解あり記事
同じ内容を比較インフォグラフィックで生成すると：
- 左カラム: Claude Code（青系背景）にモデル・価格・強みをカード形式で表示
- 右カラム: Cursor 3（緑系背景）に同様の情報
- 中央: 「vs」テキストで対比を強調
テキストを読まなくても「左青=Claude Code」「右緑=Cursor 3」で比較できる。
結果の比較:
| 指標 | 図なし | Claude Design図解あり |
|---|---|---|
| 記事制作時間 | 2時間 | 2時間20分（+20分） |
| 読者からの反応 | 「わかりやすい」0件 | 「わかりやすい」コメント複数 |
| SNSシェア時 | タイトルのみ表示 | サムネイル画像付き表示 |
1枚あたりの図解制作コスト: プロンプト→調整→エクスポート→埋め込み で 5〜7分。3枚で20分の追加コストになる計算。
よくある失敗とその回避策
失敗1：「いい感じに作って」で指示する
あいまいな指示だと、Claude Designは「汎用的なビジネスっぽいデザイン」を出してくる。技術記事に合わない明るいピンクや丸みのあるデザインになることがある。
回避策: 配色・レイアウト・フォントサイズを具体的に指定する。
失敗2：エクスポートしたPDFが複数ページになる
デザインのサイズをA4縦で生成すると、PDFが1ページに収まるがQiita埋め込みには細長くなる。
回避策: 最初から「横1200px × 縦630px（横長）」と明示してからHTMLエクスポートを使う。
失敗3：アーキテクチャ図をClaude Designで作ろうとする
接続関係が複雑な図はどうしても「それっぽいだけ」になる。
回避策: 正直に言う：Claude Designが苦手な図の使い分け表を参照。SVGかMermaidに切り替える。
失敗4：週の利用上限に引っかかる
Proプランで多数の図を生成すると、週の上限に達して一時的に使えなくなる。
回避策: 重要な記事の図解は月初に集中して作る。または週をまたいで分散して生成する。上限が厳しい場合はMaxプランへの移行を検討する。
まとめ
Claude Designは「デザイナーなしで技術記事にビジュアルを追加できるツール」として使うのが正解。
得意領域に絞れば、コスパは高い:
- 比較インフォグラフィック → ✅ Claude Design
- ヘッダー・アイキャッチ → ✅ Claude Design
- アーキテクチャ図 → ❌ SVG手書きを使う
- Gitフロー → ❌ Mermaidを使う
Qiitaに図解を入れる手間を「5〜7分/枚」まで下げられれば、記事を書くたびに必ず1枚は入れる習慣が作れる。それだけで記事の印象が変わる。
今日からやること
- 今日（15分）: claude.ai/designにアクセスして、比較インフォグラフィックを1枚試作してみる
- 今週: 直近の記事1本にClaude Design図解を1枚追加して更新投稿する
- 今月: 記事を書くたびに「ヘッダー画像 or 比較図」を必ず1枚生成する習慣をつける
参考ソース: