Canvaで作ったような「ちょいダサ」図解をClaude Codeで作る方法

画像生成AIで図解を作ろうとすると、多くの人が同じような課題にぶつかるのではないでしょうか。

そんな方に向けて、本記事ではClaude Codeで「手作り感」のある図解を作る方法について解説します。

別の記事で「AIが出した図解を下書きにして、人力で清書する」という方法を紹介していますが、その清書した図解を最初から出力するイメージです。すでにたくさん図解を作っており、自分の中のセオリーがある方なら、作成済みの図解をAIに渡すことで再現できます。

実際に私は、過去に自分が作った図解を数枚と、図解で意識しているポイントを一緒にClaude Codeに渡して図解を作っています。画像生成AIは通さず、図はコードで組み立てて画像化してもらいます。毎回同じテイストで、文字も崩れず、生成AI特有の質感も残りません。Canvaで自作したような、シンプルな図解（以下）が出力できます。

上記のような、洗練されすぎない「ちょいダサ」な見た目は、個人ブログとも相性が良いでしょう。画像生成AIの利用枠を消費しないのもメリットです。

自分の図解ルールをAIに渡す

「図解を作る方法」といっても、我々人間側がやることはそれほど多くはありません。過去に自分が作った図解を数枚と、作成時に気をつけているポイントを渡します。

私が添えたポイントは、たとえば次のようなものです。

すべてを言葉にできていなくても構いません。図解の実物を一緒に渡しているので、伝えられなかった特徴や体裁は、AIに図を見て特徴を把握してもらえます。私の場合は、過去記事で使った図解を9枚渡しました。言葉にしたポイントと実物の図解の両方があると、AI側で「この人はこう作る」という特徴を掴みやすくなります。

図解の型そのものが定まっていないなら、別の記事で解説している6つの型（対比・割合・手順・階層・ポジショニング・グループ関係）を先に読み込ませてください。どの型に当てはめるかを最初に決めてもらうと、図の骨格が安定します。

渡してすぐ、思い通りの図が一発で出てくることはまずありません。出てきた図を見て、「余白をもっと広くして」「矢印の形を変えて」と注文をつけ、直してもらいます。微修正を何度か往復して、自分の図解に近づけていきます。

ルールの中身は人によって違いますし、唯一の正解でもありません。大事なのは、自分がこれまで積み上げてきた図解とポイントを渡して、再現性を高めていくという考え方のほうです。

補足しておくと、図解とポイントを渡すことは、AIに学習させているわけではありません。その会話の中で見せて参照させているだけで、次の会話には残りません。中身はただの図と言葉なので、いつでも自分で見直せますし、書き換えることもできます。

AIが裏でやっていること

ルールを渡したあと、Claude Codeが何をしているのかも見ておきましょう。細かく理解しなくても図解を作ってもらうことはできますが、知っておくとAIに対して修正を頼むときに役立ちます。

AIは絵を描いているのではなく、Webページを作るのと同じ技術で図を組み立てています。箱や文字の配置は「HTML」と「CSS」、線や矢印は「SVG」という座標データで書きます。「この箱は左から640ピクセル、上から150ピクセルの位置に置く」「この線はここからここへ引く」と、図のすべてを文字と数値の設計図として書き、ブラウザに表示したものを画面キャプチャで画像に書き出す流れです。

揺れやすい見た目を「生成」するのではなく、数値で指定しているわけです。なので、修正時にもピクセルやパーセント単位で正確に依頼することが可能です。

コードで組む作りには、実務上の利点が2つあります。

この記事に載せている図も、すべてこの方法で作ったものです。

画像生成AIを使わないからこそ得られる3つの価値

このやり方の価値は、制作が楽になることに加えて、「画像生成AIを通していない」ということ自体にあります。3つに分けて説明します。

価値1：生成AIっぽさが構造的に生まれない

画像生成AIの精度は上がり続けていて、テイストの再現も以前よりずっと上手になりました。それでも、AI画像を見慣れた読者は独特の質感を敏感に見分けます。

ですが、本記事で紹介した方法で作る図は、文字も線も本物のテキストと図形なので、AI画像特有の質感がそもそも発生しません。図解の裏で動いているHTML/CSS、SVGなどのコードは、人間が書いてもAIが書いても大差ないからです。

また、GeminiやChatGPTなどの画像生成モデルで作られた画像には、AI製であることを示す電子透かし（GoogleのSynthIDなど）が埋め込まれます。これが「AIで生成された画像である」というシグナルとなるわけですが、本記事で紹介した手法なら透かしが最初から存在しません。消しているのではなく、そもそも透かしを入れる工程がないという違いです。

実際、この方法で作った図解をAI判定ツールにかけてみたところ、「人間が描いた可能性が高い」という判定が返ってきました。

図の設計（何をどう見せるか）は自分のルールから来ているので、実態としても「AIに描かせた絵」ではありません。「自分でもできるけど、AIに代わりに描いてもらった」という表現が一番しっくりきます。

価値2：著作権・意匠リスクの論点が消える

本記事で紹介している手法は、単純な四角や丸、矢印、テキストをコードで配置するだけなので、意図しない意匠権・著作権の侵害リスクが構造上発生しません。

一方で、GeminiやChatGPTなどの画像生成AIは、既存のデザインやイラストを学習したうえで画像を「生成」するため、偶然どこかのブランドロゴやキャラクターに似てしまうリスクの完全な排除が難しいのが現状です。この「意図せぬ模倣リスク」がないことは、ビジネス商用利用において大きな安心材料になります。

※画像生成AIの商用利用リスクについては、以下の記事でも詳しく解説しています。

価値3：画像生成の利用枠を消費しない

2つ目の経済的なメリットは、画像生成のクレジット（利用枠）を一切消費しない点です。

画像生成AIを使って図解を作る場合、修正を重ねるたびにクレジットや回数制限が削られていきます。納得の一枚にたどり着くまでに「枠を使い切ってしまった」という経験がある方も多いのではないでしょうか。

今回の手法はコード（テキスト）を生成してブラウザで描画する仕組みのため、画像生成の制限枠とは無関係に、何度でも気が済むまで修正・生成を繰り返せます。Claude Codeを動かすAPIのトークン代はかかりますが、テキスト処理のため非常に軽量で、コストは微々たるものです。

壁打ちで再現性を育てる

本記事で紹介した方法も、ルールを渡せば完璧な図が出てくる、という話ではありません。壁打ちをしながら「育てていく」という感覚が必要です。

最初に出てくる図は、たいてい何かが違います。余白が足りないとか、強調する箇所が違うとか、要素を詰め込みすぎているとか。ただ、この「何か違う」という感覚は、実際の図を見るまで自分でも言語化できないものです。

そこで、Claude Codeが作ってきた図解に対して指摘をして、ルールに書き足していってもらうという運用が有効です。一度指摘すれば、次からはよりイメージに近い図解を作ってくれます。このサイクルを繰り返すほどルールは厚くなり、出てくる図の精度が上がっていきます。

私自身、画像の書き出しがうまくいかず、原因が分からないまま小一時間つぶしたこともあります。最初からスムーズにいったわけではありません。ルールは一度作って終わりではなく、使いながら書き足して育てるものだと考えておきましょう。

手作業で作る図解は、AIに渡すデータになる

手作業を続けることには、意味があります。

別の記事では「あえて手作業で図解を作る」ということをすすめています。今もその考えは変わっていません。ただ、手作業の位置づけは変わりました。手で作った図解は、その一枚が記事に載って終わりではなく、自分のスタイルが入った事例としてAIに渡せるデータになるからです。

自分のスタイルの図解が手元に何枚もあれば、そこからルールを抜き出せます。逆に一枚もなければ、元になるデータもないということです。生成AIが出した画像を自分のスタイルに直す清書作業も、同じことです。目の前の一枚を仕上げる作業であると同時に、あとでAIに渡すためのデータを作る前処理にもなっています。これを意識しておくと、手作業の時間が使い捨てになりません。

図解を作るたびに事例が増え、ルールが精密になり、AIの再現度が上がる。この順番で積み上がっていくのです。

AIで作れる図解・作れない図解

すべての図解をAIに寄せる必要はありません。向き不向きがはっきりしています。

この方法が向いているのは、線と図形と文字だけで構成できる図解です。フロー図、比較図、構造図、階層図のような、パーツの位置関係で意味を伝えるものは、位置をコードで指定できるのでそのまま作れます。

ですが、本記事の方法では絵や写真そのものを描き起こすことはできません。質感やタッチが要るデザインも同様です。そうしたものは画像作成ツールで作ればいいですし、下書きを画像生成AIに任せる方法も引き続き有効です。

ただし、使いたいイラストや写真がすでに手元にあるなら、その画像をClaude Codeに渡せば、図解の中に組み込むことはできます。素材そのものを描かせるのではなく、用意した素材を配置してもらう、という使い方です。アイコン素材やキャプチャ画像を並べて、そこに矢印と文字を添えるような図解であれば、この方法の範囲で作れます。素材を自分で用意する手間はかかりますが、そのぶん出来上がりは自分のスタイルに寄ります。

まとめ：ルールを渡して、育てる

図解作成時のAIの使いどころは、私の場合は「ゼロから描いてもらう」から「自分の代わりに描いてもらう」に移ってきていると感じています。

自分の図解の癖を言葉にして渡し、出てきた図を見て、違うところをルールに足してもらう。過去に手作業で作った図解は、次にAIへ渡すデータとして残る。この往復を続けるほど、AIは自分らしい図解に近づいていきます。渡す情報が増えるほど、返ってくるものが自分専用になっていく。図解に限らず、AIを使ううえでいちばん大切なのはここだと考えています（いわゆる「コンテキストを渡す」といわれているもの）。

まずは、自分が過去に作った図解を、作成時に意識しているポイントと一緒にClaude Codeに渡してみてください。言葉にしきれていない癖まで含めて、AIがあなたの図解の特徴を掴んで、あなたの代わりに図解を作ってくれるようになるはずです。