Claude Codeで画像生成はできる？画像の読み取りと図の作り方を解説

「Claude Codeに頼めば、ブログ用のイラストやバナーも作ってもらえるのか」「ChatGPTのように、文章で頼むと絵を描いてくれるのか」と調べている方も多いのではないでしょうか。

結論から言うと、Claude Codeには、写真やイラストを描く画像生成の機能はありません。Claude Codeの公式ドキュメントに画像生成の機能は載っておらず、Claudeのモデル自体も、画像を理解する専用で、画像を生成・編集できないと案内されています。一方で、画像を貼り付けて読み取らせる、SVGやHTMLといったコードで図や画面案を作る、外部のサービスとつなぐ、といった形で、画像に関わる仕事の多くは任せられます。

この記事では、公式の説明を整理したうえで、画像の渡し方、コードで図を作る方法、外部の画像生成サービスとつなぐときの考え方、使う前の注意点を順に解説します。内容は2026年10月時点の公式情報にもとづいています。機能は更新が早いため、使う前に公式ページもあわせて確認してください。

Claude Codeで画像生成はできるのか

公式の説明

確認できる公式の説明は2つあります。

1つ目は、開発者向けのAPIドキュメント（Vision）のよくある質問です。「Claudeは画像を生成・編集できますか」という問いに、画像を理解するモデルであり、画像の生成・編集・加工・作成はできないと答えています。Claude CodeはこのClaudeのモデルを使う道具なので、同じ前提で考えるのが自然です。

2つ目は、Anthropicのヘルプセンターにある「Claudeは画像を作れますか」という記事です。写真やイラストは、画像生成ツールのようには作らない、と書かれています。その代わりに、図・グラフ・操作できるビジュアルを会話の中で作れると案内されています。

「画像」に関わる4つのこと

「画像を作りたい」と言っても、求めているものは人によって違います。Claude Codeでできるかどうかを、目的別に整理しました。

つまり、Claude Codeが得意なのは「画像を読む」と「コードで図や画面を作る」の2つです。絵そのものが必要な場合は、ほかの手段と組み合わせることになります。

チャットのClaude・Codexとの違い

同じClaudeでも、使う場所によって画像に関わる機能は少し違います。Codexについても並べておきます。

画像を描かせることが目的なら、Codexのほうが目的に合っています。Codexの画像生成については、別の記事で解説しています。

画像を読ませる

Claude Codeは、画像を見ながら作業を進められます。エラー画面の写真、デザイン案、図面などを渡して、原因の調査や画面の作成を頼む使い方が公式にも紹介されています。

画像を渡す方法

公式ドキュメントに載っている方法は次のとおりです。使っている画面によって操作が変わります。

貼り付けると、入力欄に [Image #1] のような表示が入ります。「Image #1 の左上のボタンを直して」のように、番号で指定して頼むこともできます。また、会話の中で [Image #1] が表示されたとき、Windowsでは Ctrl を押しながらクリックすると、標準の画像ビューアで開けます。

Windowsでは、貼り付けのショートカットが Ctrl+V ではなく Alt+V である点に注意してください。公式ドキュメントでも、WindowsとWSLでは Alt+V が案内されています。

読み取りの使いどころ

コードを書く道具なので、画像は「作業の材料」として渡すのが基本です。公式ドキュメントでも、文章で説明しにくいときに画像を使うとよいとされています。

公式の使い方ガイド（Best practices）には、デザイン画像を貼ったうえで「この画面を実装して。できあがりのスクリーンショットを撮って、元の画像と比べ、違いを挙げて直して」と頼む例が載っています。画像を見て作り、結果を自分で見比べて直させる流れです。

画像を渡して頼む流れ

1. 画像を整える必要な部分だけを切り取ります。社名や個人名、顧客の情報が写っていないか確認し、写っていれば隠します。
2. 画像を貼り付けるWindowsでは Alt+V、ドラッグ＆ドロップ、ファイルの場所の指定のどれかで渡します。入力欄に [Image #1] が出ていれば成功です。
3. 知りたいことと形を書く「原因を3つ挙げて」「同じ見た目のHTMLを作って」のように、何をしてほしいかを具体的に書きます。
4. 結果を画像と照らす読み取りの結果や作られた画面を、元の画像と見比べます。数字や固有名詞は特に注意します。
5. 直す点を伝える違う箇所を、場所を指して伝えます。「右上のボタンの色が違う」のように具体的に伝えると、やり直しが減ります。

苦手なこと・数の上限

Claude Code自体の画像の枚数やサイズの上限は、公式ドキュメントに案内がありません。参考として、Claudeのモデルを扱うAPIの文書には、次の内容が書かれています。

• 対応する形式はJPEG、PNG、GIF、WebP。動くGIFは最初の1コマだけが使われる
• 1枚の大きさは縦横とも8000ピクセルまで
• 画質が低い、回転している、200ピクセル未満など小さい画像では、読み間違いが起きやすい
• 画像の人物が誰かを答えることはしない
• 物の数を数える作業は、おおよその数になる
• 画像がAIで作られたものかどうかは判定できない

コードで図や画面案を作る

絵は描けなくても、図や画面案なら、コードを書くことで作れます。Claude Codeはファイルを作ったり書き換えたりする道具なので、画像として使える形式のファイルを書かせることができます。

SVGで図やアイコンを作る

SVGは、図形や文字を文章の形で記述する画像の形式です。中身はテキストなので、Claude Codeがファイルとして書き出せます。多くのブラウザで開いて確認でき、拡大しても粗くなりません。業務フロー図、組織図、簡単なアイコン、アイキャッチ用の図形などに向いています。

受注から出荷までの業務フローを、SVGで作ってください。手順は「受注→在庫確認→出荷指示→梱包→出荷」の5つ。横に流れる形で、1つの手順を四角で囲み、色は青と灰色の2色まで。保存先は flow.svg にしてください。

公式ドキュメントのアーティファクトの説明でも、図はラスター画像（写真のような画像）を埋め込むより、SVGやHTMLとCSSで作るほうが出力量（トークン）を抑えられると案内されています。

ただし、写真のような細かい絵や、人物の表情を描くのには向きません。会社のロゴのように権利や長く使うことが関わるものは、デザイナーへの依頼を検討してください。

HTMLでチラシや資料のたたき台を作る

チラシや1枚の資料は、HTMLとCSSで作れます。ブラウザで開けばそのまま見られるので、見た目を確認しながら直せます。画像として残したい場合は、ブラウザで開いてスクリーンショットを撮る方法があります。

公式ドキュメントでは、Claude CodeをChromeのブラウザ拡張機能（Claude in Chrome）とつなぐと、Claudeがページを開いて確認し、スクリーンショットをファイルとして保存できると案内されています。次のように頼みます。

localhost:3000 で表示しているチラシのページを開いて、スクリーンショットを撮り、画像ファイルとして保存してください。保存した場所も教えてください。

公式ドキュメントの例は、パソコン上のサーバー（localhost）で動かしているページを開く形です。HTMLのファイルをそのまま開く場合の動作は、公式に案内がありません。確実に画像にしたいときは、自分でブラウザに表示してスクリーンショットを撮る方法もあります。

この方法を使うには、条件があります。

• Google ChromeかMicrosoft Edgeなどに、Claude in Chromeの拡張機能を入れる
• Pro・Max・Team・Enterpriseのいずれかのプランで、/login でサインインしている
• WSL（Windows上のLinux環境）では使えない
• スクリーンショットをファイルに保存する機能は、Claude Codeのv2.1.211以降が必要

なお、公式ドキュメントでは、ブラウザの動きをGIFで記録する機能も紹介されています。ログイン済みのページを記録すると、アカウントの情報も写り込むため、社外に出す前に確認するよう注意されています。

/design で画面のデザイン案を作る

Claude Codeには、画面や資料のデザイン案を作る /design という機能があります。公式ドキュメントによると、/design のあとに作りたいものを書くと、Claudeが画面の案をキャンバス上に並べ、Claude Designのアーティファクトとして公開します。

/design 社内の経費精算システムの、申請画面の案を3つ

• できた案は、パソコンのブラウザで開いて確認する。要素を選んで直すと、自動で保存される
• 各案（アートボード）は、PNGまたはPDFで書き出せる
• 使えるのは、Pro・Max・Team・Enterpriseのプラン。Claude Codeのv2.1.265以降と、/login でのサインインが必要
• テンプレートはベータ版。Enterpriseでは、管理者がDesignのテンプレートを有効にするまで使えない
• Amazon Bedrockなど、別のクラウド経由でClaudeを使っている場合は、アーティファクトが使えない

公式の案内には、/design が写真やイラストを生成するかどうかの説明はありません。この記事では、「できる」とも「できない」とも書きません。画面の案や資料のレイアウトを作る機能と考えておくと安全です。

グラフを画像ファイルにする

売上の推移などを折れ線グラフの画像にしたいときは、データを渡して「グラフを作って、画像ファイルとして保存して」と頼みます。Claude Codeはプログラムを書いて実行できるため、パソコンにPythonなどの実行環境があれば、グラフの画像を作らせることもできます。

ただし、これは「コードを書いて動かす」というClaude Codeの基本機能を使った一般的な方法で、画像づくり専用の公式の手順があるわけではありません。実行環境がない場合は、HTMLでグラフを作り、ブラウザで開いて保存する方法もあります。

方法の比べ方

外部サービスとつなぐ

写真やイラストがどうしても必要なときは、画像生成に対応した別のサービスを使います。Claude Codeとの組み合わせ方は、大きく2通りです。

指示文だけClaudeに書かせる

いちばん手軽なのは、画像生成サービスは自分で操作し、そこに入力する指示文（プロンプト）だけをClaudeに書かせる方法です。記事の内容や使う場面を伝えて、「画風・色・構図・入れないもの」を決めた指示文を作ってもらいます。この方法なら、画像生成サービスに渡す情報も、自分で選べます。

画像生成サービスで作った画像を、Claude Codeに貼り付けて「このページに組み込んで」と頼む流れも使えます。画像を読ませるだけなので、外部サービスとの接続設定は要りません。

MCPでClaude Codeからつなぐ

もう1つは、MCP（Model Context Protocol）を使う方法です。MCPは、Claude Codeを外部のツールやデータにつなぐための共通の仕組みです。つなぎ方は、公式ドキュメントでは次のように案内されています。

インターネット上のサービス（HTTPのサーバー）につなぐ場合：

claude mcp add --transport http <名前> <URL>

パソコン上で動くプログラム（stdioのサーバー）につなぐ場合：

claude mcp add [オプション] <名前> -- <コマンド> [引数...]

つなぐ範囲（スコープ）は、--scope で選べます。

最初は、影響範囲がもっとも狭い local で試すのが安全です。

画像が返ってきたとき

公式ドキュメントによると、MCPのツールがPNG・JPEG・GIF・WebPの画像を返すと、Claudeはその画像を会話の中で見ることができます。また、Claude Codeは元の画像データをファイルとして保存し、場所をClaudeに伝えます。Claudeは、そのファイルを切り取ったり、形式を変えたりして使えます。ファイルの保存には、Claude Codeのv2.1.283以降が必要です。

つまり、画像を返す仕組みのMCPサーバーがあれば、Claude Codeはその画像を受け取って、作業に使えることになります。

公式に案内がないこと

一方で、公式ドキュメントには、画像生成を目的としたMCPサーバーの案内や、おすすめのサービスの紹介はありません。どのサービスが使えるか、画質や費用がどうなるかは、サービス側の公式の情報で確かめる必要があります。この記事でも、具体的なサービス名は挙げません。

つなぐ前の確認の流れ

1. 提供元を確認するサービスの運営会社と、MCPサーバーの作成元を確かめます。公式のものか、個人が作ったものかも見ます。
2. 規約と料金を読む生成した画像を商用で使ってよいか、禁止されている使い方、料金の仕組みを確認します。Claude Codeの料金とは別に、サービス側の料金がかかるかも確かめます。
3. 渡す情報を決める画像生成サービスに送る文章や画像の範囲を決めます。社外秘や個人情報は入れません。
4. localで試すまず自分だけの範囲でつないで、少ない回数で試します。
5. 結果を人が確認する他社のロゴやキャラクターに似ていないか、意図と違う表現がないかを、人が確認してから使います。

目的別の選び方

用途ごとに、向いている方法を表にまとめました。「Claude Codeだけで足りるか」「ほかの手段が要るか」を目安にしてください。

使う前の注意点

画像を扱うときは、文章の場合とは別の確認点があります。次の項目を、あらかじめ確認しておきましょう。

著作権・商標

他社のロゴやキャラクター、商品に似た画像を作らせたり、そのまま公開したりすると、権利を侵害するおそれがあります。画像生成サービスで作った画像でも、他のものに似ていれば同じ問題が起きえます。生成した画像を商用で使ってよいかは、サービスごとの利用規約で決まっているため、使う前に必ず確認してください。

画像に写り込む情報

スクリーンショットには、思わぬ情報が写り込みます。画面の片隅の顧客名、URL、ログインID、通知の内容などです。Claude Codeに貼り付けた画像は、AIのモデルに送られて処理されます。貼り付ける前に、不要な部分を切り取る、または隠す習慣をつけましょう。

• 顧客や従業員の顔・名前・連絡先が写っていないか
• 社外秘の数字や契約の内容が写っていないか
• URLやログインID、アクセスキーなどが写っていないか

社内ルール

どの画像生成サービスを使ってよいか、どんな情報を渡してよいかは、会社として決めておくと混乱を防げます。MCPでつなぐサービスは、特に決めておく必要があります。

• 業務で使ってよい画像生成サービスと、使ってはいけないサービス
• 画像生成サービスに渡してよい情報と、渡してはいけない情報
• 社外に公開する画像は、誰が確認してから出すか
• AIで作った画像であることを、どの場面で示すか

公開前の確認チェックリスト

• 図の数字・日付・社名は、元のデータと一致しているか
• 他社のロゴ、キャラクター、作品に似ていないか
• 人物や写真は、使ってよい権利があるか
• 画像に写り込んだ個人情報や社外秘がないか
• 文字が小さすぎないか、色だけに頼って伝えていないか
• 社内の確認者が目を通したか

よくある質問

まとめ

「Claude Codeで何でも作れる」と期待しすぎず、得意な範囲を知って使い分けるのが、仕事で使うときのコツです。まずは、エラー画面やデザイン案の画像を1枚貼り付けて、読み取りの結果を確認するところから試してみてください。

社内に広げる段階では、どの業務に使うか、どのサービスをつないでよいか、画像の確認を誰が行うかなど、決めることが増えます。INTERCREATE JAPANでは、Claude Code・Codexなどの導入と、社内で使い続けられる仕組みづくりをお手伝いしています。