Claude Code に絵のセンスはない？ 画像の AI と描き比べて解説

Claude Code は、コードを読み、ファイルを書き換え、コマンドを実行する AI の道具です。では、絵を頼むとどうなるのでしょうか。この記事では、Claude Code に「猫の絵を描いて」など 5 つのお題を頼み、同じお題を OpenAI の画像のモデルでも作って比べます。そのうえで、AI の絵の「センス」が何で決まるのかと、使い分けの目安を説明します。

Claude Code は、なぜ絵をコードで描くのか

絵の描き方は、大きく 2 つあります。絵を表すコードを書いて、ブラウザなどに描かせる方法と、画像そのものを出力する方法です。

Claude のモデルが出力できるのは文章だけ

Claude のモデルの一覧のページには、現行のモデルはすべて「text and image input, text output」(文章と画像の入力、文章の出力)に対応すると書かれています。画像は読めますが、出力は文章です。同じページは、Claude のモデルの強みとして、推論・コーディング・多言語の作業・長い文脈の扱い・誠実さ・画像の処理を挙げています。

画像の読み取りを説明するページの「よくある質問」には、画像の生成について、はっきり書かれています。

答えの文は「Claude は画像を理解するだけのモデルです。画像を読み取って分析できますが、生成・編集・加工・作成はできません」という意味です。

• Claude が読める画像の形式は、JPEG・PNG・GIF・WebP です。
• 画像は、28×28 画素(画素は、画像を作る小さな点)のまとまりに区切って読み取ると説明されています。

Claude Code は、この Claude のモデルで動きます。公式の説明は「reads your codebase, edits files, runs commands」(コードを読み、ファイルを編集し、コマンドを実行する)です。絵を頼まれた Claude Code にできるのは、絵を表すコードをファイルに書くことと、そのコードを動かすことです。

コードで描く絵の代表が SVG です。SVG は、2 次元の図形を文字で書き表す言語で、図形(直線や曲線でできた形)・画像・文字を扱えます(W3C の仕様)。ブラウザは SVG のファイルを読み、書かれたとおりに図形を描きます。

画像を出力するモデルは、別にある

画像そのものを出力するモデルは、各社が別に用意しています。

• OpenAI: 公式のガイドが、新しく使うモデルとして挙げているのは、gpt-image-2.5-sunburst と gpt-image-2.5-flare です。Sunburst は編集の正確さが大事な作業に、Flare は速くて質の高い日常の画像の生成に向くと説明されています。
• Google: Gemini の画像の生成の機能を「Nano Banana」と呼んでいます。文章から画像を作ることも、画像と文章を渡して編集することもできます。
• Stable Diffusion: 文章から画像を作る拡散モデル(ノイズだけの状態から、少しずつノイズを取り除いて画像にする仕組み)です。モデルのファイルが公開されていて、自分の GPU(画像などの計算に使う部品)で動かせます。

同じお題で描き比べる

試し方

• Claude Code は、編集部の検証環境の空のフォルダで起動しました。権限モード(AI がどこまで確認なしで進めるかの設定)は auto です。お題ごとに /clear で会話を消しました。お題 2 だけは、お題 1 と同じ会話で頼んでいます。
• お題 3 は、別の空のフォルダでもう 1 回頼みました。合わせて 6 回の依頼です。
• 画像のモデルには、Image API で、依頼の文をそのまま送りました。大きさは 1024×1024 画素(お題 3 と 5 は 1536×1024 画素)、品質は high です。お題 2 は、1 枚目の画像と依頼の文を、画像を編集する窓口に送りました。
• 「ハックベーカリー」は、この記事のために考えた架空の店の名前です。

お題 1「猫の絵を描いて」

Claude Code は、cat.svg というファイルに SVG のコードを書きました。そのあと、自分の絵を画像に変換して見ようとしています。記録では、変換の道具を 3 つ(rsvg-convert・ImageMagick・Python の cairosvg)試し、どれも見つかりませんでした。コードを読み直して、同じ場所に重ねて書いていた三角形を 1 つ消し、25 秒で終えています。最後に、描いた絵を表示して確認できていないことを報告しました。

• Claude Code の猫は、円・楕円・三角形・線など 31 個の図形でできています。色は 11 色、ファイルは 2.5KB です。
• 画像のモデルは、「猫の絵」という依頼だけで、毛並み・窓からの光・部屋の背景まである、写真のような絵を出しました。1024×1024 画素で、ファイルは 1.7MB です。

お題 2「もっと写真のようにリアルにして」

同じ会話で続けて頼むと、Claude Code は描き方を変えました。使える道具を調べ直して、Chrome(ブラウザ)が入っていることを見つけています。そして、毛並みは Python のプログラムで毛を 1 本ずつ描くこと、Chrome で画像を確かめながら進めることを伝えてから、作業を始めました。

• Claude Code は、Python のプログラム(できあがりは 443 行)を書き、それを動かして SVG を作りました。SVG の中の図形は約 3 万 7 千個で、ほとんどが毛の線です。ファイルは 3.3MB になりました。
• できた SVG を Chrome で画像にし、その画像を自分で読んで、目の大きさ・耳の毛の長さ・ひげの太さなどを直しました。記録では、画像を読んだのは 3 回、プログラムを直したのは 2 回です(Claude Code の報告には「3回調整しました」とあります)。
• 最後の報告は、「プログラムで描く方法なので本物の写真と見分けがつかないほどにはならず、『リアル寄りのデジタルイラスト』くらいの仕上がりです」でした。
• 画面に表示された作業の時間は、3 分 5 秒です。

画像のモデルには、1 枚目の画像と同じ依頼の文を送りました。35 秒で、同じ構図のまま、毛や光が描き直された画像が返ってきました。

お題 3「春の公園のイラストを描いて」

• 1 回目(図の ①)は、お題 1・2 のファイルが残っているフォルダで頼みました。Claude Code はフォルダの中を調べ、前の依頼で作った Python のプログラムを読んで、同じやり方を選びました。Python で SVG を作り、Chrome で画像にして確かめています。SVG の要素は 2,065 個です。
• 空のフォルダで頼んだ 2 回目(図の ②)は、HTML のページを 1 枚書きました。SVG と Canvas(プログラムで絵を描く、ブラウザの仕組み)で描いていて、ブラウザで開くと花びら・雲・チョウが動きます。
• 画像のモデルは、桜の幹の質感、石だたみに落ちる影、遠くの人や遊具まで描き込んだ絵を出しました。頼んでいない看板と、「みどりの広場」という文字も入っています。

同じ依頼でも、Claude Code の描き方は、フォルダにあるファイルと、使える道具で変わりました。

お題 4「ロゴの案を作って」

• Claude Code は、4 つの案を 1 枚の HTML のページにまとめました。「ハック」を、プログラムで使う記号に見立てた案などです。案ごとに色の見本を付け、48・32・16 ピクセルに縮めた見え方も並べています。
• この回の Claude Code は、できたページを画像にして確かめていません。報告にも「レンダリング結果はまだ確認していません」と書かれています。
• 画像のモデルは、コック帽をかぶった犬のような動物とパンの絵に、店の名前を組み合わせた案を 1 つ出しました。「ハックベーカリー」と「HACK BAKERY」の文字は、どちらも正しく描かれています。

お題 5「数値の決まった棒グラフ」

• Claude Code は、66 行の Python のプログラムで SVG を作りました。棒の高さは、依頼の数値から計算されています。4 本の棒の幅と間隔は同じです。
• 画像のモデルのグラフも、題・目盛り・数値の文字は正しく描かれていました。目盛りの線と棒の上端の画素の位置から値を計算すると、120.7・95.4・140.5・180.4 で、ずれは 1 人未満です。棒の幅は 197〜203 画素で、少しずつ違いました。

記録では、Claude Code はこの依頼で、dataviz という組み込みのスキルを読み込んでいます。スキルは、Claude に手順や決まりを文章で渡す仕組みです。公式の説明では、dataviz はグラフのためのデザインの手引きで、グラフの形の選び方、役割ごとの色の割り当て、色覚の違いに配慮した色の検査などを定めています。棒の青(#2a78d6)も、この手引きの色でした。

かかった時間と費用

• 時間は、画像のモデルが 1 枚 22〜35 秒でした。Claude Code は 25 秒から 3 分 5 秒で、お題によって大きく違います。
• 費用は、画像のモデルが 1 枚 0.04〜0.06 ドルでした。Claude Code は 1 回 0.18〜0.75 ドルで、画像のモデルの約 4〜12 倍です。
• Claude Code の費用は、記録されたトークン(AI が文章を区切って数える単位)の数に、Opus 5.5 の API の単価をかけた額です。月額のプランで使う場合に、この額が請求されるわけではありません。
• お題 2 の 0.75 ドルには、許可を求める画面で止まっていた間にキャッシュ(一度送った内容を一時的に保存し、次から安い単価で読み込む仕組み)の期限が切れ、会話を送り直した分が入っています。
• 画像のモデルの費用は、API の応答に書かれたトークンの数に、公式の単価をかけた額です。

単価は 2026年10月12日に確かめました。最新の料金は、Claude の料金のページと OpenAI の料金のページで確かめてください。

絵の中身を比べる

2 つの絵は、ファイルの中身がまったく違います。

• Claude Code の猫(SVG)は、「この位置に、この大きさの楕円を、この色で」という文字の並びです。目は 4 行で描かれています。
• 画像のモデルの猫(PNG)は、約 105 万個の画素の色の並びです。使われている色は、約 13 万色でした。
• SVG は、拡大するとブラウザが図形を描き直すので、輪郭はなめらかなままです。PNG は画素の数が決まっているので、拡大すると粗くなります。

コードで描いた絵は、書き換えて直せる

• 猫の色: SVG の中の色の番号を 3 種類(合わせて 12 か所)置き換えると、茶色の猫がグレーの猫になりました。形と表情は変わりません。
• グラフの数値: プログラムの先頭のデータで、7月の 180 を 110 に書き換えて動かし直すと、7月の棒と数字だけが変わりました。
• 画像のモデルの絵: 画像と依頼の文を送って、作り直します。お題 2 の猫を 1 枚目と比べると、構図は同じでも、約 8 割の画素で色が変わっていました(赤・緑・青のどれかの値が 16 を超えて変わった画素の割合です)。

コードで描くのが向くもの・向かないもの

OpenAI の公式のドキュメントは、GPT Image のモデルの限界として、次の点を挙げています。

• 文字: 大きく改善したが、文字の正確な配置と鮮明さでは、まだ苦戦することがある。
• 一貫性: 何度も作るとき、同じ登場人物やブランドの要素の見た目を保てないことがある。
• 構図: 決まった配置や、レイアウトが大事な構図で、要素を正確に置くのが難しいことがある。

今回の 5 枚では、絵の中の文字に誤りは見つかりませんでした。棒グラフも、ほぼ数値どおりです。ただ、画像のモデルの絵を直すときは、画像と依頼の文を送って作り直すことになります。お題 2 では、構図は同じでも、約 8 割の画素で色が変わりました。

コードで描く側の限界は、お題 2 で見たとおりです。線を約 3 万 7 千本重ねても、写真のような質感にはなりませんでした。

AI の絵の「センス」は何で決まるのか

今回のお題では、Claude Code に絵を頼むと、最初に出てきたのは、図形を並べた平らな絵でした。「センスがない」と見えるのは、このためだと編集部は考えています。今回の結果と公式の説明から、絵の「センス」に見えるものを 4 つに分けました。

1. 出力の形式

Claude のモデルが出せるのは文章だけです。絵は、「図形をどこに、どの色で置くか」を文字で書いたものになります。毛の 1 本 1 本を文字で書こうとすると、お題 2 のように、数万個の図形が要ります。画像のモデルは、画素の色を直接出すので、質感をそのまま表せます。

2. 学習したデータ

画像のモデルは、大量の画像を使って学習します。どの画像で学ぶかは、開発元が選びます。たとえば Stable Diffusion v1 の公式の説明では、LAION-5B という画像のデータベースの一部で学習しています。後半の学習には、「美しさの推定スコアが 5.0 を超える」画像を集めたデータを使っています。モデルが何を見て学ぶかを、開発元が「美しさ」の点数で選んでいる例です。

Claude のモデルが絵の描き方を何から学んだかは、今回確かめた公式のページには書かれていません。

3. 手引き

Claude Code は、文章で渡された決まりに沿って描きます。お題 5 では、組み込みのスキル dataviz を読み込み、その色と形の決まりでグラフを描きました。記録では、お題 3 の 2 回目とお題 4 でも、デザインの手引きのスキルを読み込んでいます。Claude Code の絵の仕上がりには、こうした文章の手引きも関わっています。

4. 見て直す

Claude は画像を読めます。お題 2・3(1 回目)・5 では、描いた絵を Chrome で画像にして読み、確かめたり直したりしました。道具が見つからなかったお題 1 では、絵を見ないまま終えて、そのことを報告しています。今回、Claude Code が仕上がりを自分で確かめたのは、ブラウザを使った回だけでした。

編集部の実例: このメディアの図は、コードで描いている

このメディアの図解・表紙・バナーは、Claude Code が HTML と CSS で組み、ブラウザ(Chrome)で開いて撮った画像です。この記事の図も、同じ方法で作りました。

• 図解を撮る道具は、25 行のプログラムです。HTML を Chrome で開き、図の部分を WebP の画像にします。
• 図のもとになる HTML は、2026年10月12日の時点で 280 枚あまりあります。
• 数字を直すときは、HTML の文字を書き換えて撮り直します。記事の本文と同じ値を、そのまま図に入れられます。
• 表紙は、題と札を文字で組み、右側に実際の画面や作例の画像を置いています。

画像のモデルも使っています。編集部の運営会社では、社内のサイトのアイコンを作るときに、画像のモデルで案を何枚か作り、構図を選びました。生成した画像のままでは、16 ピクセルや 32 ピクセルに縮めると形がつぶれました。そのため、採用した形を SVG で描き起こしています。

この記事の 5 枚の画像も、組み合わせで作りました。Claude Code が、画像の API を呼ぶ短いプログラムを書き、それを動かして画像を受け取っています。

使い分けの目安

• コードで描く(Claude Code): 図解・表・グラフ、ロゴやアイコンの下書き、Web の画面。数字や文字が正確でないと困るもの、何度も直すものに向いています。
• 画像のモデル: 写真のような絵、描き込みの多いイラスト、記事や資料のイメージ画像。文字や数値を入れるときは、出力を見て確かめます。
• 組み合わせる: 絵は画像のモデルで作り、文字・枠・番号はコードで重ねます。

Claude Code に絵を頼むときは、次の点で結果が変わりました。

• 形式(SVG・HTML など)を指定しなくても、Claude Code が選んで描きました。写真のような絵がほしいときは、最初から画像のモデルを使います。
• フォルダに前の作業のファイルがあると、それに合わせた描き方になりました。
• ブラウザが使える環境では、描いた絵を画像にして、自分で確かめました。
• 作業フォルダの外に置いた画像を読むときは、許可を求める画面が出ることがあります。

注意

• この記事の結果は、どれも 1 回ずつ試したものです。モデルや版が変わると、結果も変わります。
• 画像のモデルで作った画像を使うときは、各サービスの利用の決まりを確かめてください。Google の説明では、Gemini で生成した画像には、SynthID という電子透かしが入ります。
• 料金は変わることがあります。使う前に、公式の料金のページで確かめてください。

Claude Code に画像を読ませる方法は画面の画像を渡して Claude Code に直してもらうで、画像や動画を作るモデルの使い方はAI で長い映像を作るで説明しています。Claude Code の料金はClaude Code のサブスクと API、どちらが得かにまとめています。