図解やアイコンは、コードで描いてもらう

図解・グラフ・アイコンのように、文字や線を正確に描きたいものは、画像AIより Claude に「コードで描いて」と頼むほうが向いています。

絵とコードの違いを知る

画像AIは「点の集まり」を作るので、文字や線がにじんだり崩れたりします。Claude に SVG（線と文字で描く画像の形式）で描いてもらうと、文字は正確で、拡大してもぼやけません。

目的で使い分けます。この講座の図も、すべて右のやり方で作っています。

アーティファクトで描いてもらう

Claude に「〜の図を SVG で描いて」と頼むと、アーティファクトの画面に図が出ます。文字の修正も「この箱の文字を〜に」とことばで頼めます。

色をそろえる

「色は3色だけ。#1a1a1a、#d97757、#f5f0e8」のように指定すると、サイトや資料の色と合わせられます。

画像として保存する

アーティファクトからダウンロードした SVG は、そのままWebに使えます。PNG が必要なときは、ブラウザで開いてスクリーンショットを撮るか、変換ツールを使います。

そのまま使える頼み方の例

次の流れを、横に4つの箱が並ぶ図にして、SVGで描いてください。
企画 → 生成 → 確認 → 仕上げ
- 各箱の下に、小さく一言の説明（何を・誰に／何案も出す／事実・権利・質／人の手で整える）
- 箱は角丸、矢印でつなぐ
- 色は #1a1a1a（文字）、#d97757（矢印）、#f5f0e8（箱の背景）の3色だけ
- 横640px、縦160px

このサイトの図解とサムネイルは、すべてこのやり方で Claude に描いてもらい、文字や配置を直して使っています。

できたらチェック

Claude に SVG で図を描いてもらった
色を指定して、文字をことばで直してもらった

このステップ：0 / 2