公開日: 最終更新:
結論:Claude Code単体は写真やイラストを生成しません。画像生成は、SVG・HTMLをコードで作るか、外部の画像生成APIやMCPツールをClaude Codeから呼び出して実現します。
- 画像を読む:スクリーンショット、帳票、UI、図表を解析できる
- 画像を作る:SVG・HTMLは直接作成でき、PNG・JPEGは外部APIやMCPと連携する
- 注意点:小さい文字、正確な個数、座標の判断には限界があるため、人が確認する
対象読者:Claude Codeで画像生成・画像認識・OCRを行いたい担当者、エンジニア、DX推進担当者
今日やること:必要なのが「画像解析」「SVG作成」「写真・イラスト生成」のどれかを決め、適切な方法を選ぶ
この記事の目次
「Claude Codeで画像生成できるのか」を先に答えると、Claude CodeとClaudeモデルは画像理解に対応しますが、PNG・JPEGの写真やイラストをネイティブには生成しません。Anthropic公式のVisionドキュメントにも、Claudeは画像を解析できる一方、画像の生成・編集・加工はできないと明記されています。ただし、Claude Codeはコード実行や外部ツール連携が得意です。SVG・HTMLを生成する方法、画像生成APIをスクリプトから呼ぶ方法、MCPツールを追加する方法により、画像制作の工程を自動化できます。本記事では画像生成と画像認識の違い、実装方法、スクリーンショット分析、OCR、注意点を一次情報に基づいて解説します。
Claude Codeの画像機能(Vision)とは?
Claude Codeは、テキストだけでなく画像を読み取って理解する「ビジョン機能」を備えています。写真・スクリーンショット・図表・手書きメモなど、さまざまな画像を分析して回答・処理することが可能です。
できること・できないことを整理
まず、Claude Codeの画像機能で「何ができて、何ができないか」を整理しておきましょう。
できること:
| 機能 | 具体的な用途 |
|---|---|
| 画像認識・内容説明 | 写真の内容を説明・分類する |
| OCR(文字読み取り) | 帳票・レシート・名刺のテキストを抽出 |
| スクリーンショット分析 | エラー画面の診断、UIのフィードバック |
| 図表・グラフの読み取り | データの傾向分析、数値の抽出 |
| 複数画像の比較 | 変更前後の差分分析 |
| 手書きメモの解読 | 議事録・ノートの文字起こし |
できないこと:
- Claude Code単体での画像生成(ラスター画像の出力)— ただしMCP連携や外部ツールとの組み合わせで対応可能。詳しくは後述します
- リアルタイムのカメラ映像の取り込み(静止画のみ対応)
ポイント「Claude Codeで画像生成できますか?」という質問をよく受けますが、単体では直接的な画像ファイルの生成はできません。ただし、SVGやHTMLを使った図表生成、MCP経由での外部サービス連携など、実務では十分に対応できます。
対応形式と制限はClaude Code固有値とAPI仕様を分けて考える
Anthropic公式Visionドキュメントでは、JPEG、PNG、GIF、WebPをサポートし、GIFは先頭フレームのみを処理すると説明されています。最大寸法は1画像8,000×8,000ピクセルです。ただし、大きな画像はモデルに応じて縮小されるため、細かい文字が読みにくくなる場合があります。
一方、claude.aiの「1メッセージ20画像」やClaude APIの「1リクエスト100または600画像」という数値は、claude.aiとAPIの仕様です。Claude Codeの対話画面にそのまま当てはめられる固有上限ではありません。大量処理では、画像枚数よりもリクエストサイズ、コンテキスト、処理時間、料金を含めて検証してください。
精度を上げるコツ:文字が小さい画面は必要部分を切り出す、回転を直す、圧縮しすぎない、複数画像には「画像1」「画像2」と名前を付ける、といった前処理が有効です。
Claude Codeに画像を渡す3つの方法
Claude Codeで画像解析を始める方法は、利用環境に合わせて次の3つから選びます。2026年8月時点のClaude Code公式Interactive modeドキュメントでは、クリップボード画像の貼り付け操作が明記されています。
方法1:クリップボード画像を貼り付ける
エラー画面やUIを最短で確認する方法です。Claude Codeの入力欄に画像を貼り付けると、カーソル位置に[Image #N]のチップが入り、プロンプト内で画像番号を指定できます。
- macOS:通常は
Ctrl+V。iTerm2ではCmd+V - Windows / WSL:
Ctrl+VまたはAlt+V - 向いている用途:エラー診断、UIレビュー、画面差分の確認
テキスト貼り付けと画像貼り付けのショートカットは、端末やキーバインド設定で異なる場合があります。画像チップが表示されたことを送信前に確認してください。
方法2:画像ファイルをドラッグ&ドロップする
Claude CodeのVS Code拡張など、ドラッグ&ドロップに対応したUIでは、Finderやエクスプローラーから画像を入力欄へ追加できます。端末アプリで動作しない場合は、クリップボード貼り付けかローカルパス指定へ切り替えます。
方法3:ローカルファイルのパスを指定する
プロジェクト内の画像を繰り返し扱う場合は、ファイルパスを明示する方法が管理しやすくなります。
screenshots/error-2026-08-27.png を確認し、
1. 画面に表示されたエラー文
2. 原因の仮説
3. 確認コマンド
4. 修正案
の順で報告してください。
公開URL上の画像を扱う場合は、Claude Code自身への画像添付と、Web取得ツールやClaude APIのURL画像入力を混同しないでください。Claude APIはURLソースに対応しますが、アクセス制限、認証、robots設定などにより取得できない場合があります。
\ AI導入の進め方を一緒に整理しませんか /
AI顧問の無料相談はこちら業務で使えるスクリーンショット分析の活用法
画像の渡し方を理解したら、実務での活用シーンを見ていきましょう。スクリーンショット分析は、業務効率化において特に効果的です。
エラー画面の診断と解決策の取得
システムやアプリのエラーが発生した際、スクリーンショットをそのままClaude Codeに渡して原因と解決策を取得できます。
活用例のプロンプト:
(エラー画面のスクリーンショットを貼り付けて)
このエラー画面を見て、発生している問題の原因と、解決するための手順を教えてください。
社内システムの担当者に共有できる形でまとめてください。
UIデザインのレビューとフィードバック
変更前・変更後のUIのスクリーンショットを2枚同時に送り、差分分析やフィードバックを受け取ることができます。
活用例のプロンプト:
(before.png と after.png を添付)
この2つの画面を比較して、
① 変更された箇所の一覧
② ユーザビリティの観点からの改善点
③ デザインの一貫性に関するコメント
をまとめてください。
Webページの現状確認とコンテンツ分析
競合サイトや自社サイトのスクリーンショットを分析させることで、コンテンツ改善のインサイトを素早く取得できます。
活用例のプロンプト:
(競合サイトのスクリーンショットを添付)
このWebページのキャッチコピー・CTAボタンの配置・訴求ポイントを分析して、
自社サイトに取り入れるべきポイントを3つ提案してください。
帳票・文書画像のOCRと情報抽出
Claude Codeのビジョン機能は、OCR(文字認識)としても活用できます。紙の帳票や画像化された書類からテキストやデータを抽出する業務に特に効果的です。
レシート・請求書の自動データ化
経費精算や仕入れ管理において、紙のレシートや請求書を写真で撮影してClaude Codeに渡すだけで、構造化データに変換できます。
活用例のプロンプト:
(レシートの写真を添付)
このレシートの情報を以下の形式でJSON形式に変換してください:
- 店舗名
- 日付
- 購入品目(品名・単価・数量・小計)
- 合計金額
- 支払い方法
金額や税区分は誤読の影響が大きいため、抽出結果をそのまま会計処理へ登録せず、原本照合と承認を行います。
名刺・手書きメモの読み取り
展示会でまとめて入手した名刺や、会議中の手書きメモをまとめて文字起こしする作業も自動化できます。
活用例のプロンプト:
(名刺の写真を添付)
この名刺の情報をCSV形式(氏名, 会社名, 部署, 役職, メールアドレス, 電話番号)で出力してください。
読み取れない部分は[不明]としてください。
PDF画像からの情報抽出
スキャンして画像化されたPDFや、テキストデータが埋め込まれていないPDFからの情報抽出にも対応しています。
契約書・仕様書・過去の議事録など、デジタル化されていない資料のデータベース化を効率的に進めることが可能です。
\ 業務自動化のお悩みをAI顧問に相談できます /
AI顧問の無料相談はこちらClaude Codeで画像生成する3つの方法
Anthropic公式Vision FAQは、Claudeについて「画像を理解・解析できるが、画像を生成・編集・加工はできない」と明記しています。したがって、Claude Codeで画像生成を行うときは、成果物に応じて次の3方式を使い分けます。
| 方法 | 向いている成果物 | 特徴 |
|---|---|---|
| SVG・HTMLをコード生成 | 図解、フロー、チャート、アイコン | 差分管理・修正・再現がしやすい |
| 画像生成APIをスクリプトから呼ぶ | 写真、イラスト、バナー | API仕様、料金、認証管理が必要 |
| 画像生成MCPツールを追加 | 会話から反復生成する制作工程 | 自然言語で呼べるが、提供元と権限の確認が必要 |
方法1:SVG・HTMLをClaude Codeに作らせる
フローチャート、構成図、簡単なイラスト、グラフは、画像生成モデルを使わずにSVGやHTML/CSSとして作成できます。テキストや色、座標をコードで管理できるため、ブランドカラーの統一や再修正に向きます。
受注→在庫確認→出荷→請求の業務フローを、
幅1200px、背景白、濃紺と青を基調にしたSVGで作成してください。
日本語フォントのフォールバックを指定し、矢印が要素に重ならないようにしてください。
出力先は assets/order-flow.svg とします。
生成後はブラウザで開き、文字切れ、重なり、余白、コントラストを確認します。必要ならClaude Codeへスクリーンショットを戻し、「見切れている文字を直す」のように反復できます。
方法2:画像生成APIをスクリプトから呼び出す
写真や質感のあるイラストが必要なら、利用規約とAPI提供条件を確認した画像生成サービスを選び、Claude Codeに呼び出しスクリプトを書かせます。Claude Codeはプロンプト設計、APIリクエスト、ファイル保存、命名、エラー処理、生成履歴の記録を担当できます。
- 利用するAPIの公式ドキュメントで、モデル、入力項目、料金、出力形式を確認する
- APIキーを環境変数で管理し、ソースコードやGitに書かない
- まず低枚数で生成し、プロンプトと出力をレビューする
- 承認後にバッチ処理し、生成条件と利用権限を記録する
この画像生成APIの公式ドキュメントを確認して、
.env の API_KEY を読み込み、1枚だけテスト生成するスクリプトを作成してください。
キーやレスポンス全体をログに出さず、HTTPエラー時は本文から機密情報を除いて表示してください。
方法3:画像生成MCPツールを連携する
Claude CodeはMCPを通じて外部ツールやAPIへ接続できます。公式のClaude Code MCPドキュメントでは、リモートサービスにはHTTP接続が推奨され、設定の共有範囲としてlocal・project・userなどが説明されています。画像生成MCPを導入すると、会話からツールを呼び、保存先や修正指示まで一連の流れにできます。
ただし、MCPサーバーはClaude Code本体とは別のソフトウェアです。運営元、ソースコード、送信データ、要求権限、課金、保存ポリシーを確認し、最小権限で導入してください。詳しい設定はClaude Code MCP連携ガイドも参照してください。
画像生成後はClaude Codeで品質確認する
外部モデルが作った画像をClaude Codeへ戻し、要件との一致を確認できます。たとえば「文字が崩れていないか」「16:9か」「ブランドカラーに近いか」「禁止要素がないか」をチェックリスト化します。ただし、Claudeの判定にも誤りがあるため、公開前には人が原寸で確認してください。
画像生成・画像認識・画像編集の違い
- 画像生成:新しい画像を作る。Claude Code単体ではなく外部画像生成API・MCP、またはコード生成を使う
- 画像認識:既存画像を読み、説明・比較・抽出する。ClaudeのVisionが担当する
- 画像編集:既存画像の画素を直接変更する。専用APIや画像処理ライブラリと連携する
「Claude Codeがすべてを内蔵している」のではなく、Claude Codeを制作工程の司令塔として使う、と理解すると設計しやすくなります。
企業で想定できる画像活用シーン
以下は特定企業の実績ではなく、画像理解と外部生成ツールを業務へ組み込む場合の代表的な設計例です。金額・人数・正確な個数・合否判定など重要な結果は、人による確認を工程に含めます。
製造:検査写真から報告書の下書きを作る
検査写真と社内基準を照合し、観察事項を整理します。Claudeの空間認識や個数判断は近似になり得るため、自動合否ではなく担当者の確認を支援する用途から始めます。
小売・マーケティング:商品画像から説明文案を作る
商品画像から特徴を列挙し、EC用の説明文案へ変換します。画像に映らない素材・寸法・性能を推測させず、商品マスターと照合します。
経理:帳票画像を構造化する
請求書や領収書から日付、取引先、金額の候補を抽出します。会計処理へ登録する前に原本照合し、個人情報や金融情報の送信ルールを定めます。
IT:スクリーンショットでUI差分をレビューする
変更前後の画面を比較し、文字切れやレイアウト崩れの候補を抽出します。Playwrightなどのテストと組み合わせ、最終判定は機械的なピクセル差分や人の確認で補完します。
広報:外部APIでバナー案を生成する
Claude Codeから画像生成APIを呼び、サイズ、トーン、保存名を統一します。人物・商標・著作物・利用権限の確認を公開前の承認フローに組み込みます。
\ AI活用の「次の一手」を一緒に考えませんか /
AI顧問の無料相談はこちらよくある質問
Q. Claude Codeは画像生成できますか?
Claude Code単体では、写真やイラストのようなPNG・JPEG画像をネイティブ生成できません。SVG・HTMLをコードとして作るか、画像生成APIをスクリプトから呼ぶか、画像生成MCPツールを連携します。
Q. Claude Codeで画像を貼り付けるショートカットは?
公式Interactive modeドキュメントでは、通常はCtrl+V、iTerm2はCmd+V、WindowsとWSLはAlt+Vも案内されています。貼り付け後に[Image #N]チップが表示されたことを確認します。
Q. Claude CodeとClaude APIの画像上限は同じですか?
同じとは限りません。公式Visionドキュメントの20枚はclaude.ai、100枚または600枚はモデル条件に応じたClaude APIの上限です。Claude Code固有の上限として読み替えず、実際の環境でリクエストサイズやコンテキストも含めて検証してください。
Q. 画像認識はどこまで正確ですか?
公式ドキュメントは、低品質・回転・200ピクセル未満の小さな画像で誤り得ること、座標は近似であること、多数の小さな物体の正確なカウントが苦手なことを挙げています。重要な読み取り結果は原本と照合してください。
Q. Claude CodeはAI生成画像を見分けられますか?
信頼できる判定には使えません。Anthropic公式ドキュメントも、Claudeは画像がAI生成かどうかを正確に判断できない場合があると説明しています。
Q. 業務画像を送るときの注意点は?
個人情報、認証情報、顧客データ、未公開情報をマスキングし、契約プランとデータ保持条件を確認します。Claude Codeのデータ保持はアカウント種別や設定で異なるため、公式Data usageドキュメントと社内規程を確認してください。
まとめ
Claude Codeの「画像生成」は、Claude自身が写真やイラストを出力する機能ではありません。Claude Codeを司令塔として、成果物に応じて作り方を選びます。
- スクリーンショットや帳票を読む:ClaudeのVisionで画像認識・OCR・比較を行う
- 図解やチャートを作る:Claude CodeにSVG・HTMLを生成させる
- 写真やイラストを作る:画像生成APIまたは審査済みMCPツールと連携する
- 公開品質を担保する:Claude Codeによる確認に加え、人が原寸・権利・機密情報を確認する
まず「読みたいのか、コードで描きたいのか、生成モデルで作りたいのか」を分けると、不要なツール導入を避けられます。Claude Codeの基本的な活用範囲はClaude Codeでできること、外部連携はClaude Code MCP連携ガイドもあわせて確認してください。
参照した一次情報
- Anthropic:Claude Code Interactive mode(画像貼り付けのショートカット)
- Anthropic:Vision(対応形式、制限、精度上の注意、画像生成非対応)
- Anthropic:Connect Claude Code to tools via MCP(MCPの接続・スコープ・安全な運用)
- Anthropic:Data usage(アカウント種別ごとのデータ保持)
法人向けAI導入・活用の月額伴走サービス
AI導入の疑問を、週1回のMTGで相談できる「AI顧問」
株式会社Nexaでは、ChatGPT・Claude・Claude CodeなどのAI導入に関する質問や、社内活用・業務自動化の進め方を週1回相談できる 月額15万円のAI顧問サービス を提供しています。
「自社では何から始めるべきか」「この業務はAI化できるか」「どのツールを選ぶべきか」を、無料相談で整理します。





