Claude Codeの画像生成ガイド｜SVG・Design・外部AIの使い分け

Claude Codeで画像生成する3種類の方法

Claude Codeで画像を作る方法は、Claude Design、SVGのコード生成、外部画像生成モデルとの連携の3つです。Claude Codeは画像制作の要件整理やファイル操作を担い、必要に応じて専用機能や外部モデルへ処理を渡します。

Claude Codeの基本モデルが写真やイラストのラスター画像を直接出力する機能と、画像生成の作業全体を指揮する機能は分けて考える必要があります。PNGやJPEGの写真調画像が必要なら外部画像生成モデル、ロゴや簡単な図形ならSVG、レイアウトや資料デザインならClaude Designが候補です。

方法	向いている成果物	主な出力	特徴	注意点
Claude Design	レイアウト、資料、プロトタイプ	Designプロジェクト	対話しながら配置や見た目を調整できる	利用可能なプランやベータ提供状況を確認する
SVG生成	アイコン、ロゴ、概念図、簡単な挿絵	`.svg`	テキストとして編集・差分管理できる	写真のような質感や複雑な描写には不向き
外部画像生成モデル	写真調画像、イラスト、商品シーン	`.png`、`.jpg`など	高品質な画像生成や既存画像の編集に向く	API設定、料金、利用条件の確認が必要

Claude Designでレイアウトやプロトタイプを作る

Claude Designは、デザインやプロトタイプ、プレゼンテーションを作成するための機能です。Anthropicの公式ヘルプでは、Claude CodeからMCPで接続する方法と、/design-syncによる同期手順が案内されています。

公式ブログでは、Claude Code上の/designからデザインプロジェクトの作成や編集、同期ができると説明されています。

この方法は、画面構成や資料のレイアウトを対話しながら整えたいときに適しています。一方、写真調の画像を大量生成する用途とは役割が異なります。セットアップや使い分けを詳しく知りたい方は「Claude CodeのDesign機能とは？できること・使い方・料金を解説」もご覧ください。

SVGをコードとして生成する

SVGは、図形や文字をXML形式で記述するベクター画像です。Claude Codeにサイズ、色、余白、配置、表示する文字を伝えると、SVGファイルを直接作成できます。コードとして保存するため、Gitで差分を追いやすく、色や文言の一括変更もしやすい点が利点です。

たとえば「横1200px、背景は白、中央に3つの工程を矢印でつないだSVGを作成し、public/images/process.svgへ保存して」と依頼できます。生成後はブラウザで表示し、文字切れや余白を確認します。複雑な写真表現より、構造を正確に伝える図やアイコンに向く方法です。

外部画像生成モデルをAPIやMCPで動かす

PNGやJPEGの写真、イラスト、商品利用シーンを作る場合は、Claude Codeから外部の画像生成モデルを呼び出します。Claude Codeがプロンプトや出力ファイル名を整え、APIまたはModel Context Protocol（MCP）経由で生成を実行し、結果を所定のフォルダへ保存する構成です。

GoogleのGemini API公式ドキュメントでは、テキストからの画像生成と既存画像の編集が案内されています。用途に応じて、速度やコストを重視するモデルと、高解像度や文字描画を重視するモデルを選べます。特定モデル名を固定したスクリプトにせず、設定値で切り替えられる形にすると更新にも対応しやすくなります。

関連記事：Geminiの画像生成でできること｜無料の上限と商用利用まで整理

Claude Codeと外部画像生成AIの活用方法｜連携5ステップ

Claude Codeが制作要件を整理し、外部の画像生成AIへ処理を渡して成果物を検証・保存する流れを、初めて連携する読者が一目で理解できるようにする。

外部モデルを使う流れは、仕様を決め、接続方法を選び、認証情報を設定し、生成処理を実装して、出力を検証する順です。最初から大量生成せず、テスト用の1枚で接続と保存を確認してから広げます。

用途と出力形式で使い分ける

選定時は「何を作るか」から逆算します。写真調のキービジュアルなら外部画像生成モデル、Web上で拡大しても崩れない説明図ならSVG、複数要素を配置する資料や画面案ならClaude Designが基本です。1つの方法に統一する必要はなく、Claude Designで構成を詰め、外部モデルで素材画像を作り、SVGで注釈を加える組み合わせも可能です。

判断に迷う場合は、最終成果物の拡張子、必要な解像度、文字を正確に表示する必要性、同じ形式を何枚作るかを先に決めましょう。この4点が定まると、Claude Codeと画像生成APIの役割分担が明確になります。

関連記事：画像生成AIの種類一覧｜主要ツールの特徴・料金・選び方を比較

STEP 1｜画像の仕様と保存先を決める

最初に、用途、縦横比、解像度、画風、入れたい要素、避けたい要素、文字の有無を決めます。保存先と命名規則も指定し、既存ファイルを上書きしない条件を加えます。指示が曖昧なまま生成すると、構図の修正を重ねるうちに成果物の目的がぶれます。

仕様は短い箇条書きで管理すると再利用しやすくなります。たとえば、用途を「記事の見出し画像」、比率を「3:2」、必須要素を「ノートPCと作業画面」、禁止要素を「判読不能な文字や企業ロゴ」と定義します。そのうえでClaude Codeに、仕様から画像生成用プロンプトを組み立てるよう依頼します。

STEP 2｜APIとMCPのどちらで接続するか選ぶ

API連携は、生成条件や保存処理をコードで細かく制御したい場合に向きます。公式SDKやHTTPリクエストを使うスクリプトを用意すれば、ファイル名の採番、メタデータの記録、複数プロンプトの連続実行まで設計できます。既存の開発環境へ組み込みたい場合もAPIが扱いやすいでしょう。

MCPは、Claude Codeから外部ツールを共通の仕組みで呼び出したい場合に向きます。Claude Codeの公式MCPドキュメントでは、HTTP接続とローカルの標準入出力接続が説明されています。導入するMCPサーバーが信頼できるか、どのデータへアクセスするかを確認してから追加してください。

AIエージェントの作り方

AIエージェントを「どう作り、どう育てるか」を、GiftX記事制作エージェントの実物で解説。

無料ダウンロード →

STEP 3｜APIまたはMCPの接続を設定する

APIを使う場合は、利用するサービスでAPIキーを発行し、環境変数へ設定します。キーをソースコードやプロンプトへ直接書かず、.envなどのローカル設定ファイルを使い、そのファイルをGitの追跡対象から外します。Claude Codeには「キーの値を表示せず、環境変数が存在するかだけ確認して」と指示できます。

MCPを使う場合は、公式ドキュメントにある接続コマンドを基準に設定します。追加後は、使えるツールの一覧と引数を確認し、いきなり本番用素材を渡さず、公開可能なテストデータで動作を確かめます。外部MCPサーバーは入力内容を受け取るため、機密情報や未公開画像を送ってよい接続先かも確認が必要です。

STEP 4｜生成スクリプトを作り、テスト画像を1枚出す

Claude Codeには、使用する公式SDK、モデル名を設定値にすること、入力プロンプト、保存先、失敗時の処理を伝えてスクリプト作成を依頼します。生成結果を標準出力に流すだけでなく、画像ファイルとして保存し、実行日時や元プロンプトをログへ残すと再現しやすくなります。

依頼例は次のように整理できます。

目的：記事用の写真調画像を1枚生成する
接続：公式SDKを使い、認証情報は環境変数から読む
出力：output/test-001.pngへ保存し、既存ファイルは上書きしない
検証：レスポンス形式を確認し、画像が無い場合は理由を表示する

この依頼を実行する前に、Claude Codeが作成したコードを読み、送信データと保存先を確認します。テストが成功したら、複数案の生成や連番保存へ拡張します。

STEP 5｜生成条件を固定し、繰り返し実行できる形にする

最初の1枚が作れたら、プロンプトの共通部分、画像ごとの差分、モデル設定、出力先を分離します。CSVやJSONに画像ごとの要件をまとめ、Claude Codeが1件ずつ読み込む設計にすると、再実行時に変更箇所を特定しやすくなります。

大量生成では、失敗した行から再開できる仕組み、APIの呼び出し間隔、生成枚数の上限、ファイル重複の回避も必要です。実行前に見積もり件数を表示し、人が確認してから開始する二段階にすれば、意図しない大量実行を防げます。

さらに、採用した画像と不採用理由を同じ台帳に残すと、次回のプロンプト改善に使えます。生成数だけでなく採用率も確認し、無駄な呼び出しを減らしましょう。

接続に失敗したときは4段階で切り分ける

生成に失敗した場合は、指示を何度も変える前に、認証、接続、レスポンス、保存のどこで止まったかを確認します。Claude Codeへエラーメッセージを渡すときも、APIキーの値や入力画像そのものを不用意に貼らず、必要な範囲だけを共有します。

認証：環境変数名が正しいか、キーが有効か、利用権限があるかを確認する
接続：モデル名、APIの接続先、MCPサーバーの起動状態を確認する
レスポンス：画像データではなくエラー情報が返っていないか、応答形式が想定と一致するかを見る
保存：出力フォルダが存在するか、書き込み権限とファイル名の重複を確認する

切り分け後は、失敗した条件と解消方法をログへ残します。再実行は失敗した1件だけに限定し、同じリクエストを一括で繰り返さないようにします。タイムアウトや一時的な混雑が原因なら、回数上限と待機時間を決めた再試行にすると、無限実行を防げます。

テスト画像が保存できたら、同じ入力で再実行してファイル名とログが重複しないことも確認します。ここまで通ってから生成件数を増やすと、途中停止しても再開しやすくなります。

Claude CodeとClaude Visionで生成画像を確認・修正する仕組み

生成画像をClaude Visionで確認し、具体的な修正指示へ変換して再生成する反復サイクルを示す。

生成できた時点では完成ではありません。要件との一致、表示品質、権利や公開上の問題を確認し、修正履歴を残して採用版を決めます。Claude Codeに画像を読み込ませて確認を補助させることはできますが、最終判断は人が行います。

Claude Visionで確認し、修正指示を具体化する

ClaudeのVision機能は画像を理解・分析する機能です。AnthropicのVision公式ドキュメントでは、画像をURL、Base64、Files APIなどで入力する方法が説明されています。これは画像生成モデルではなく、生成済み画像を確認して修正点を言語化する用途に向きます。

「良い画像か」と尋ねるだけでは、回答が抽象的になりやすいため、仕様と照合させます。「必須要素がすべてあるか」「主役が中央にあるか」「文字が判読できるか」「ブランドカラーから外れていないか」を表形式で評価し、該当箇所と修正案を返すよう指示すると、次の生成プロンプトへ反映しやすくなります。

修正は一度に一つの軸へ絞る

構図、色、質感、文字、背景を同時に変えると、何が改善したのか判断できません。まず構図を固定し、次に色や照明、最後に細部を調整するように修正軸を分けます。既存画像の編集に対応するモデルなら、元画像を入力して変更箇所だけを指示します。

修正前後のファイルを残し、draft-01.png、draft-02-layout.pngのように変更内容を名前へ含めます。元プロンプトと修正指示もテキストで保存すると、似た画像を作るときの再現性が上がります。

公開前は原寸と実際の掲載面で見る

サムネイルでは問題がなくても、原寸では手指、細い線、文字、反射などの不自然さが見つかることがあります。原寸表示に加え、実際のWebページや資料へ配置し、トリミング後の主役位置、文字との重なり、モバイル表示を確認します。

Claudeの判定だけで公開可否を決めるのは避けます。Vision公式ドキュメントでも、画像がAI生成かどうかを確実に判定する用途には向かないとされています。事実関係、ロゴ、人物、権利、公開基準は人が別途確認してください。

Claude Codeによる画像生成のBefore/After

毎週10枚の案内画像を作るケースで、作業の変化を試算します。導入前は素材確認、構図検討、画像作成、書き出しを1枚ずつ進め、1枚20分なら週200分かかります。

導入後は、Claude Codeが共通仕様と画像ごとの差分を整理し、画像生成モデルへ一括で指示します。人は候補確認と修正に集中し、準備10分と1枚5分の確認で週60分とすると、削減率は70%です。時給3,000円で換算した場合、週約7,000円、年約36万円相当の時間を別の作業へ振り向けられます。

この試算は、プロンプトが安定し、出力形式と確認基準が決まっていることが前提です。画像の用途が毎回変わる場合や、細かな修正が多い場合は削減幅も変わります。自社の作業時間を1週間だけ計測し、実測値で置き換えると導入判断に使いやすくなります。

まずは対象となる画像を一つに絞って比較してください。削減時間だけでなく、修正回数と採用率も記録すると、品質を落とさず効率化できたか判断できます。同じ条件で2回測ると、一時的な差かも見分けやすくなります。

AI活用実態調査レポート

全国8,000人調査で、AIの活用方法によって生産性向上に約3.8倍の差が生まれることが判明。

無料ダウンロード →

Claude Codeで画像制作を効率化した2つの事例

Claude Codeを画像生成の司令塔として使い、仕様整理から生成、保存までをつないだ事例を2つ紹介します。成果を再現するには、モデルを導入するだけでなく、入力の型と確認工程をあわせて設計します。

バナー制作を3日から4時間へ短縮

バナー制作でClaude Codeが共通仕様と差分を整理し、制作工程を効率化する変化をBefore/Afterで伝える。

訴求軸をAIで整理し、Claude Code、画像生成AI、Figma MCPを組み合わせてバナーを量産した事例では、1回あたり10パターンを約3日かけて作っていた工程が、50パターンを約4時間で作れる形になりました。制作工数は約85%減り、バリエーションは5倍になっています。

効果を支えたのは、サイズや構成をテンプレート化し、変える要素を絞ったことです。全画像を一から考えるのではなく、固定する要素と試す要素を分け、候補の比較と最終調整に人の時間を使いました。

商品シーン画像を1シーン約10分で作成

商品単体の写真から利用シーン画像を作った事例では、撮影の調整と実施に1シーン約2日、5万円かかっていた工程を、Claude Codeと画像生成AIによって約10分、数百円へ短縮しました。工数は約95%削減され、記事やLPで必要な画像を追加しやすくなっています。

ただし、実物と異なる形状や表示が生成されれば、そのまま公開できません。元の商品写真と照合し、形、色、ラベル、付属品に差異がないかを確認する検証工程を組み込んだうえで運用します。

画像生成を自動化する前のチェックリスト

画像生成の仕組みは、生成できるかだけでなく、安全に繰り返せるかで評価します。次の項目を満たしてから、件数を増やしましょう。

目的：掲載先と画像の役割が1文で説明できる
仕様：比率、解像度、必須要素、禁止要素が決まっている
接続：公式APIまたは信頼できるMCPサーバーを使っている
認証：APIキーをコードやGitへ保存していない
費用：テスト件数と最大実行件数を決めている
保存：命名規則があり、既存ファイルを上書きしない
検証：原寸、掲載面、事実関係、権利を人が確認する
再現：モデル設定、元プロンプト、修正履歴が残る

すべてを最初から自動化する必要はありません。まず1種類の画像と1つのサイズに限定し、生成から公開前確認までを一巡させます。問題なく回せた条件だけをテンプレートにして、対象を広げるのが安全です。

チェック結果は担当者名と確認日を添え、共有場所へ保存します。不合格だった画像の理由も残せば、次回の禁止条件や確認項目へ反映できます。

月に一度はチェック項目自体を見直し、実際の不合格理由に合わない項目を更新してください。

画像生成で確認したいセキュリティと利用条件

APIキーをコードやプロンプトへ書かない

APIキーは秘密情報として扱い、ソースコード、共有チャット、画像生成プロンプトへ貼り付けません。環境変数やシークレット管理機能を利用し、権限を必要最小限にします。漏えいが疑われる場合に備え、キーの失効と再発行の手順も確認しておきます。

MCPサーバーの接続先と権限を確認する

MCPサーバーを追加するときは、提供者、接続先、アクセス範囲、送信されるデータを確認します。Claude CodeのMCP公式ドキュメントも、第三者のMCPサーバーは自己責任で利用し、信頼できるものだけを接続するよう注意を促しています。社外秘の画像や個人情報をテストに使わないことも基本です。

関連記事：MCPの危険性とは？主なセキュリティリスクと安全に使うための対策

生成物と入力素材の利用条件を確認する

生成物の利用条件は、利用するサービス、プラン、モデル、素材によって異なります。商用利用の可否、生成物に関する権利、入力素材の扱い、人物や商標を含む画像の制限を公式規約で確認します。モデル側の安全機能があることを、公開許諾の代わりにはできません。

また、画像に埋め込まれる来歴情報や透かしの扱いも確認します。GoogleはGemini APIで生成した画像にSynthIDを付与すると説明しています。画像を加工した場合も、社内の記録には使用モデル、生成日、元プロンプト、確認者を残すと追跡しやすくなります。

画像コンテンツをAIで内製するときに陥りがちな3つの落とし穴

AIによる画像制作を継続するには、ツールの選定だけでなく、費用、人手、品質を一つの流れとして設計する必要があります。よくある3つの落とし穴を確認します。

落とし穴1｜外注は単価が高く、本数を増やせない

外注だけに頼ると、1枚ごとの単価や調整コストが積み上がり、必要な本数を増やしにくくなります。AIで下案を作り、人が採用候補を絞る工程を定型化すると、外部の専門性を最終調整へ集中できます。

落とし穴2｜社内に作れる人がおらず、兼任では回らない

専任の人手がなく、担当者が兼任で毎回プロンプトや保存方法を考える状態では運用が続きません。仕様書、命名規則、確認表をテンプレートにし、誰が実行しても同じ工程をたどれる形にする必要があります。

落とし穴3｜AIツールだけでは、そのまま出せる品質に届かない

画像生成AIの出力には、文字崩れ、事実と異なる表現、商品形状の差異などが含まれる可能性があります。ツールだけで公開可否を決めず、原寸確認、内容確認、掲載面確認を行う品質基準を設けます。

検証工程を持ったうえで、まず1コンテンツを型にする

最初からすべての画像へ広げず、用途、サイズ、画風が固定しやすい1コンテンツから小さく始めます。生成条件と検証結果を記録し、修正が減った段階でテンプレートにします。この型ができれば、別サイズや別テーマへ展開しても品質を保ちやすくなります。

GiftXでは、検証工程を含めたコンテンツ制作を1コンテンツ単位から伴走支援しています。詳細はAI活用コンテンツ制作支援をご覧ください。

まとめ

Claude Codeで画像生成に取り組む方法は、Claude Design、SVG生成、外部画像生成モデルとの連携の3つです。レイアウトやプロトタイプ、コードとして管理する図、写真調の画像では適した方法が異なります。

外部モデルと連携するときは、仕様と保存先を決め、APIまたはMCPを設定し、まず1枚を生成します。その後、Claude Visionによる確認補助と人の最終確認を組み合わせ、プロンプト、設定、修正履歴を残します。検証工程を含む1コンテンツを型にしてから対象を広げることが、品質と効率を両立する近道です。