Claude Codeは、写真やイラストを生成する機能を持っていません。Anthropicの公式ヘルプでも、Claudeは画像生成ツールのようには動作しないと明記されています。一方で、HTMLのコードを書かせ、ブラウザで表示・保存することで、図解や表、見出し画像などを「画像として」作ることは可能です。この記事では、公式情報で確認できる画像まわりの仕様と、実際にこの方法を試してわかった作り方・つまずきどころを順番に解説します。
Claude Codeに画像生成機能はあるのか公式情報で確認する
結論から整理します。Claude Codeに、写真やイラストを生成する機能はありません。これはAnthropicの公式ヘルプで明言されている内容です。一方で、会話の中で図表やグラフをHTML・SVGで組み立てる機能はベータで用意されていますが、これはClaude webとdesktopに限られた機能です。まずは公式情報で確認できる範囲を整理します。
公式が明言する「写真やイラストは生成しない」という説明
AnthropicのヘルプセンターにあるFAQ「Can Claude produce images?」では、次のように説明されています。
Claude doesn’t generate photos or illustrations the way image-generation tools do. （Can Claude produce images?）
同じ趣旨の説明は、開発者向けのPlatform Docsでも確認できます。画像入力の仕様を扱うページには、Claudeは画像を理解するモデルであり、画像の生成・編集・加工・作成はできないと明記されています。
Claude is an image understanding model only. （Vision - Claude Platform Docs）
同じページには、画像を扱う際の仕様もまとまっています。入力できる画像の上限はclaude.aiで1メッセージあたり20枚、APIでは利用するモデルによって100枚または600枚までとされ、1枚あたりの最大サイズは8000×8000pxです。対応フォーマットはJPEG・PNG・GIF・WebPで、アニメーションは非対応（最初のフレームだけが使われます）。つまりClaude Codeは、画像を読み取って内容を説明したり、画像をもとにコードを書いたりすることはできますが、ゼロから画像を描き起こす機能は持っていません。
この説明は、Anthropicが1,250人の専門職にインタビューした調査レポートでも補強されています。創造的な職業へのAIの影響を扱う章には、次の注記があります。
Claude does not produce images, videos, or music （Introducing Anthropic Interviewer）
この注記は、インタビュー参加者が語った不安がAI全般に向けたものであり、Claude固有の機能についての話ではないと補足するために付けられたものです。裏を返せば、Anthropic自身が「Claudeは画像を生成しない」という前提を繰り返し確認していることが分かります。
会話内でHTML・SVGの図表を作れるベータ機能の位置づけ
前述のヘルプページには、もう一つ重要な説明があります。Claudeは会話の中で、図表やグラフ、インタラクティブな視覚要素をHTMLとSVGを使って作成できるという内容です。この図表生成機能は、Claude webとdesktopでベータ提供されていると明記されており、Claude Code（コマンドラインなどで動くエージェント型のツール）への提供は、現時点の公式情報では確認できません。
ここでいう図表は、写真のような画像データそのものではありません。HTMLやSVGのコードを組み立てて、ブラウザ上に図形やグラフとして表示させる仕組みです。Claude Codeで画像を作る方法については、次のセクションで仕組みから具体的に解説します。
画像生成AIと混同しないためのポイント
ChatGPTの画像生成機能やMidjourneyのような画像生成AIは、テキストの指示から写真やイラストに近い画像データを直接作り出します。Claudeの仕組みはこれとは異なり、画像データを直接生成する機能は持っていません。そのかわり、HTMLやSVGといったコードを書き、それをブラウザで表示・書き出すことで、画像の形に仕上げます。整理すると次のようになります。
| 比較項目 | 画像生成AI（ChatGPT・Midjourneyなど） | Claude / Claude Code |
|---|---|---|
| 生成の仕組み | テキストから画像データを直接生成 | HTMLやSVGのコードを書く（図表のベータ機能はClaude web・desktop限定） |
| 出力されるもの | 写真・イラスト風の画像 | コードを介した図表・画像（スクリーンショットなどで画像化） |
| 公式の位置づけ | 画像生成ツールとして提供 | ベータ機能（web/desktop）または一般的なコード生成の応用（Claude Code） |
この違いを押さえておくと、「Claude Codeで画像生成ができない」と知って探すのをやめる必要はないと分かります。写真やイラストそのものは作れませんが、業務で必要になる図解やグラフ、レポート用の画像であれば、HTMLを土台にした別の方法で用意できます。その具体的な手順は、次のセクションで扱います。あわせて、スライド形式の資料作りに関心がある場合は、Claude Codeでスライドを作る方法も参考にしてください。
画像生成はできなくても、Claude Codeで『画像を作る』方法はある
前のセクションで見たとおり、HTML・SVGで図表を作るベータ機能はClaude webとdesktop向けのものであり、Claude Codeへの提供は公式情報では確認できません。しかし、Claude Codeでも画像を作ることは可能です。実際にGOROがClaude Codeで行っているのは、このベータ機能とは別の方法です。Claude CodeにHTMLファイルをコードとして書かせ、そのファイルを別のプロセス（ヘッドレスChromeと呼ばれる、画面を表示せずに動くブラウザ）で開いてスクリーンショットを撮る、という2段階の作業です。コードを書く力と外部のツールを組み合わせて、画像を作り出しています。
HTMLで組んでブラウザ（ヘッドレスChrome）で画像に書き出す仕組み
HTMLは、ウェブページのレイアウトを組むための言語です。Claude Codeに図解や表のレイアウトをHTMLで指示すると、見た目を整えたHTMLファイルができあがります。このファイルを、画面を表示せず裏側で動くブラウザ（ヘッドレスChromeと呼ばれる仕組み）で開き、スクリーンショットとして書き出すと、1枚の画像ファイルになります。
HTMLのタグを自分で覚える必要はありません。レイアウトを組む作業自体はClaude Codeが担当するので、作りたい内容を言葉で伝えるだけで進められます。流れを整理すると、次の4段階です。
| 手順 | 内容 |
|---|---|
| 1 | 画像にしたい内容（図解・表・グラフなど）をClaude Codeに伝える |
| 2 | Claude CodeがHTMLでレイアウトを組む |
| 3 | ヘッドレスChromeでHTMLを開き、画像として書き出す |
| 4 | 書き出した画像を確認し、必要なら修正を依頼する |
ここからは、この方法を実際の制作現場で使った例を2つ紹介します。
代表ブログの図版を『ここに画像』で止めずHTMLで組んだ例
代表のブログ記事では、原稿の中に「ここに画像」とだけ書いて作業を止めるのではなく、図版そのものをHTMLで組んで画像に書き出す方法に切り替えました。書き出しの幅は1400pxに統一し、背景は薄いグレー、カード部分は白、アクセントの色は指定の色にそろえ、過去の図版と見た目を合わせています。見出しの文字は大きめに調整し、英語のサブ見出しは付けない方針になりました。できあがった画像は、Notionの画像アップロードの仕組みを通じて記事に差し込んでいます。
実録GOROの作業記録
記事の図版を「ここに画像」の指定で止めず、HTMLで組んで画像に書き出した
図版は
<!-- 画像 -->の指定で止めず、HTMLで組んでChromeのヘッドレスで書き出す。ヘッドレスChromeは画像を書き出したあと終了しないことがあるので、1枚ごとにプロセスを止める。
出典：GOROの社内の作業記録
元データが見つからない見出し画像をHTMLで再現した例
もう一つの例は、代表のnote記事に使う見出し画像です。公開済みの記事はすべて同じデザインの型でそろっていますが、その元になった制作データは、デザインツールのファイルとしては残っていませんでした。
そこで、見出し画像をHTMLで再現し直しました。見出しの文字部分を書き換えてヘッドレスChromeでスクリーンショットを撮るだけで、同じデザインの画像を何枚でも作れるようになっています。サイズは1280×670pxが基本で、解像度を上げたいときは2倍の2560×1340pxでも書き出せます。
文字数には制約があります。見出しを長くすると、画像の右下に配置したキャラクターのイラストに文字がぶつかってしまうため、見出しは1行8字前後までに収めています。なお、このキャラクターはSVGで近づけたもので、元の画像と完全に同じではありません。
実録GOROの作業記録
元データが見つからない見出し画像のテンプレートを、HTMLで再現して使い回せるようにした
元の制作データ（Figma・Canvaなど）はローカルにもダウンロードフォルダにも見つからなかった。2026-10-04に、HTMLで再現した版を作った。
見出しは1行8字前後までにする。長くすると、右下のロボットにぶつかる。
出典：GOROの社内の作業記録
実際の使い方：図版・見出し画像・Slackの表・月次レポートを画像にする
HTMLで画像を作る仕組みは、ブログの図版だけでなく、日々の業務連絡にも応用できます。ここでは、社内で実際に使っている2つの場面を紹介します。
Slackで表を見せたいときに画像にして貼る
Slackの通常メッセージには、表組みを描く機能がありません。
表を見せたいときは、HTMLで表を組み、画像として書き出してからSlackに添付します。
実録GOROの作業記録
Slackのメッセージでは表を描けないので、HTMLで表を作って画像にして添付する
Slackの通常メッセージは表を描けない。表を見せたいときはHTML→PNGで画像にして添付する。
出典：GOROの社内の作業記録
社員ブログの月次レポートを画像にして毎月投稿する
もう一つの例は、社員ブログの月次レポートです。前月の数字を画像にまとめ、Slackへ自動で投稿する仕組みを作っています。
投稿までの流れは、数字を集計し、画像に書き出し、崩れがないかを目で確かめてから投稿する、という順番です。画像が文字欠けや空白だけになっていた場合は投稿を止め、担当者に状況を知らせる形にしています。あわせて、その月に反応が一番よかった記事を1本選び、理由を1〜2文添えてスレッドに投稿します。理由の書き方には制約を設けています。
実録GOROの作業記録
社員ブログの前月の数字を画像にしてSlackへ投稿し、「今月の1本」をデータの重みづけで選んで理由を書くスキル
推測で数字や理由を作らない（「シェアされた」「話題になった」など、データにないことは書かない）。
他の人の記事を下げる言い方はしない（「〇〇さんより」は使わない）。
出典：GOROの社内の作業記録
スライドなど他の資料づくりに応用したい場合
ここまでの図版・見出し画像・表・レポートの考え方は、スライド資料の一部にも応用できます。背景やレイアウトをHTMLで組み、必要な枚数だけ画像として書き出せば、スライドの素材として差し込めます。
ただし、スライド全体の構成や枚数の組み立て方には、画像の書き出しとは別の考え方が必要です。スライド作成の具体的な進め方は、Claude Codeの活用事例もあわせてご覧ください。
書き出しが固まったときに疑うべきこと
ここまで紹介した図版・見出し画像・表・レポートの書き出しは、いつも一度で成功するとは限りません。ヘッドレスChromeを使った書き出しでは、途中で動かなくなる場面が実際にありました。ここでは、固まったときにまず何を疑えばいいかを整理します。
書き出しに時間がかかる・終わらないときに疑う点
書き出しが何分経っても終わらない場合、最初に疑うべきはChrome自身の起動の仕方です。顧客向けのデモ素材を用意する作業で、Claude CodeのBashからヘッドレスChromeに直接スクリーンショットの指示を出したところ、1枚の書き出しに時間がかかって終わらない状態になりました。
実録GOROの作業記録
Claude CodeからヘッドレスChromeで画像を書き出すと1枚15分固まり、オプションを足すと2秒で終わった
Claude CodeのBash（サンドボックス内）から
Google Chrome --headless --screenshotを叩くと、Chrome自身のサンドボックスが初期化できず1枚あたり約15分固まる
--no-sandbox --no-first-run --disable-extensions --user-data-dir=<書き出しごとに別ディレクトリ>を付ける。2秒で終わる。出典：GOROの社内の作業記録
原因は、Chrome自身が持つ保護の仕組み（サンドボックス）が、Claude Codeの作業環境の中でうまく初期化できないことでした。起動時のオプションを足すだけで、同じ書き出しが数秒で終わるようになっています。
前回の書き出しが残っていて次の書き出しに失敗するケース
続けて書き出していると、前回の書き出しの影響で失敗することがあります。この場合は、前回の書き出しの残りが影響していないかを疑います。
実録GOROの作業記録
ヘッドレスChromeで続けて書き出すときは、1枚ごとにプロセスを止め、作業フォルダも分ける
同じuser-data-dirを使い回すと、前回のロックで即失敗する
出典：GOROの社内の作業記録
前述のとおり、ヘッドレスChromeは書き出し後もプロセスが残ることがあります。同じ作業用フォルダ（user-data-dir）を使い回すと、前回の処理が残したロックが邪魔をして、次の書き出しがすぐに失敗します。そのため、1枚ごとにプロセスを止め、書き出しごとに作業用フォルダを分けるようにしています。
この記事と合わせて読みたい
- Claude Codeでスライド作成はできる？仕組みと実際の作り方を解説 — 画像の作り方がわかった読者が次に気になる『スライドや資料も同じように作れるのか』という疑問に答える記事です。
- Claude Codeはデザイナーに使える？Figma連携でできることと学び方を解説 — 図解や画像づくりの延長で、Figma連携によるデザイン業務での活用をもっと知りたい読者に向く記事です。
- Claude Code活用事例｜非エンジニアの会社・個人が実際にどう使っているか解説 — 画像づくり以外に、Claude Codeを非エンジニアがどんな場面で使っているかを幅広く知りたい読者に向く記事です。
Claude Codeを業務で使いたい方へ
自分の業務を題材に試したい方には、1対1で進めるClaude Code マンツーマン講座があります（オンライン・回数制）。部署やチームで導入する場合は、業務に合わせて内容を設計するClaude Code法人研修をご覧ください。
