Claude Codeで画像を使う完全ガイド【2026年最新】：貼り付け・添付・読み込み・生成まで徹底解説

室谷

今回はClaude Codeでの画像の扱い方を全部まとめましょう。.AI（ドットエーアイ）コミュニティでも「画像どうやって渡すの？」って聞かれることが増えてきたんですよね。

テキトー教師

ですよね。実は画像の渡し方って複数あって、OS別に微妙に違うんですよ。

受講生さんに「貼り付けできない」って言われて調べてみると、ショートカットキーを間違えているパターンが多いですね。

室谷

あるあるです。「Ctrl+V（Cmd+V）押したのに何も起きない」って声、めちゃくちゃ多い・・・。

Claude CodeはテキストとImageでペーストのショートカットが分かれてるんで、そこを最初に押さえておくと全部解決するんですよね。

テキトー教師

整理すると、Claude Codeへの画像入力には大きく3つのアプローチがあります。ペーストで直接渡す方法、ドラッグ&ドロップ、そしてファイルパスを文章で伝える方法。

これを用途に応じて使い分けるのが基本です。

Claude Codeで画像を貼り付けする方法：OS別ショートカット

室谷

まずここを間違えると何も始まらないんですが、Claude Codeの画像ペーストは通常のペーストと別のキーなんですよね。

テキトー教師

ここが一番ハマるポイントです。OS別にまとめると：

OS / 環境	テキストのペースト	画像のペースト
macOS	Cmd+V	Ctrl+V
Windows	Ctrl+V	Alt+V
Linux	Ctrl+V	Ctrl+V（環境による）
iTerm2 (macOS)	Cmd+V	Ctrl+V または Cmd+V

Claude Codeの画像ペーストショートカット一覧：macOS・Windows・Linux別（公式ドキュメントより）

室谷

macOSだと普段Cmd+VでペーストするのにClaude CodeではCtrl+Vで画像ペースト、というのが直感に反するんですよね。MYUUUのメンバーも最初混乱してました・・・。

テキトー教師

Windowsはもっとわかりにくくて、Alt+Vなんですよ。Ctrl+Vを押したらテキストとして認識されて、画像が入らないというのが典型的な失敗パターンです。

エラーメッセージも出ないし、Claudeがシーンとしてるだけなので余計わかりにくい。

室谷

ここ、公式ドキュメントに書いてあるんですけど気づきにくい場所にあるんですよ。インタラクティブモードのショートカット一覧に「Ctrl+V or Cmd+V (iTerm2) or Alt+V (Windows): Paste image from clipboard」と記載されています。

テキトー教師

ペーストすると「[Image #1]」のようなチップが表示されて、そのまま質問の文章と組み合わせられます。「この画像のUIのどこを直せばいい？」みたいな形で使えるんですよ。

ドラッグ&ドロップで画像を渡す方法

テキトー教師

ペーストより直感的な方法がドラッグ&ドロップです。ファイルをそのままClaude Codeのウィンドウに投げ込むだけ。

室谷

これ、Claude CodeのDesktopアプリやVS Code拡張機能で特に便利ですね。ターミナル版でも対応してるターミナルエミュレータなら使えます。

テキトー教師

対応しているターミナルの例だと、iTerm2、WezTerm、Ghostty、Kittyあたりですね。VS Codeの統合ターミナルでも動きます。

室谷

画像だけじゃなくてPDFやほかのファイルも同じ要領でドロップできるんで、覚えておくと作業効率が全然違う。

ファイルパスを直接指定して画像を読み込む方法

室谷

一番シンプルで確実なのは、ファイルパスを文章の中に書いてしまう方法ですね。

テキトー教師

「Analyze this image: /path/to/your/image.png」みたいな形で伝えれば、Claude Codeが自動でファイルを読み込んでビジョン機能で解析してくれます。

室谷

これ、スクリーンショットを撮ってそのパスを渡すフローにすると、UIレビューとかデバッグが劇的に効率化するんですよね。MYUUUでもフロントエンド開発のときに使ってます。

テキトー教師

講座でこの方法を教えると「え、それだけで画像見てくれるの？」って驚かれることが多いですよ（笑）。JPEG、PNG、GIF、WebPに対応してるので、ほぼ全ての一般的な画像形式は問題ないです。

Claude Codeが画像入力で何をしてくれるか

テキトー教師

渡し方はわかった、じゃあどういう使い方が実践的か、というのが本題ですよね。大きく分けると主に4つのユースケースがあります。

UIスクリーンショットからバグ修正
エラーダイアログ・ターミナル出力のキャプチャを渡してデバッグ
デザインカンプ（Figmaのスクリーンショット等）を渡してコード化
図解・ドキュメントの画像を読み込んで実装に反映

室谷

1と2は特に実務で頻繁に使います。コードを書いてもらったあと「ここの見た目がおかしい」ってなったとき、ブラウザのスクリーンショットを貼り付けて「どこ直す？」と聞くだけで済む。

テキストで「ボタンが右にずれてて、余白が16pxくらい多すぎる」って説明するより圧倒的に速い。

テキトー教師

3のデザインカンプのコード化は、結構実用的で。Figmaのスクリーンショットを渡して「これに合わせてReactのコンポーネント書いて」とやると、見た目に近いコードが出てくる。

ピクセルパーフェクトではないですけど、叩き台として十分なレベルのものが出てきます。

室谷

海外のドキュメントや技術仕様書が画像PDFになってるケースもあって、そういうときにファイルパスを渡すと内容を読んで実装に落とし込んでくれる。これはわりと感動するんですよw

Claude Codeで画像生成はできる？

室谷

ここ、よく混同される点なんですが・・・Claude Code自体に画像生成機能はないんですよね。

テキトー教師

Claudeは現時点で画像を出力する機能はありません。あくまで画像を入力して解析するのがClaudeのビジョン機能です。

画像認識と画像生成は別の機能で、Claudeは認識専門です。

室谷

画像生成がしたい場合は、Claude Code経由でAPIを叩いてStable DiffusionやDALL·Eに投げるようなMCPやスキルを組む、というアプローチになりますね。Claude Code自体がそれを実行できる、というイメージです。

テキトー教師

受講生さんから「Claude Codeで画像生成できますか」って聞かれたとき、「Claudeは画像を見ることはできるけど描くことはできない」と言うとわかりやすいですよ。見る専門、ということで。

画像読み込みがうまくいかないときの対処法

室谷

「画像貼り付けできない」「読み込んでくれない」ってトラブルシューティングの話もしておきましょう。

テキトー教師

よくある原因を整理するとこうなります。

症状	原因	解決策
ペーストしても何も反応しない	ショートカットキーの間違い	macOS: Ctrl+V、Windows: Alt+Vを使う
「no image found in clipboard」と表示	クリップボードに画像が入っていない	先に画像をコピー（Print Screen等）してから試す
ファイルパスを渡したのに読まない	パスに誤りがある	絶対パスで指定し直す
画像を読んだが内容が違う	画像が小さすぎる or 不鮮明	200px以上の解像度の画像を使う

室谷

Windowsユーザーが特にハマるのが「no image found in clipboard」パターンですね。スクリーンショットをPrint Screenで撮ったあと、ペイントに貼り付けて保存するひと手間が必要なこともある。

Snipping Toolを使うと直接クリップボードに画像が入るんでそっちが楽です。

テキトー教師

macOSだとCmd+Shift+Ctrl+4でクリップボードに直接スクリーンショットを撮れるので、そのあとCtrl+Vで貼り付けというフローが一番スムーズです。Cmd+Shift+4だとファイルに保存されるので、そちらはファイルパス方式で渡すことになります。

Claude Codeのビジョン機能とトークン数の関係

室谷

ビジョン機能ってトークンをどのくらい使うか、知ってる人少ないんですよね。APIを従量課金で使ってる人には重要な話で・・・。

テキトー教師

Anthropicの公式ドキュメントによると、画像のトークン数は「(幅px × 高さpx) / 750」で計算できます。例えば1000×1000pxの画像なら約1334トークンになります。

室谷

Proプランで定額利用していれば意識しなくていいですが、Claude CodeのAPIを直接叩いたり、Console経由で使っているケースでは画像ごとにコストがかかる。高解像度の画像を大量に渡すとじわじわ効いてくるんですよね。

テキトー教師

最適化のポイントとしては、必要以上に大きい画像は避けること。公式ドキュメントでは1.15メガピクセル（1568px以内）に収めるとタイムトゥファーストトークンが改善されると書かれています。

細かいUIをキャプチャするときも、全画面より必要な部分だけトリミングした方が効率がいいです。

スクリーンショット駆動開発：Claude Codeを「目のある」AIにする

室谷

最後に、画像入力を活用した実践的なワークフローを紹介しましょう。海外では「Screenshot-driven development」として注目されているアプローチで・・・。

テキトー教師

Capybaraのスクリーンショットを自動取得してClaude Codeに渡すという手法が海外で紹介されていて、フロントエンドの視覚的な検証を自動化するアプローチですね。コードを書く→ブラウザでレンダリングする→スクリーンショットを撮る→Claude Codeが見て問題を指摘する、というループです。

室谷

これ、人間がやってたビジュアルレビューをClaudeが担う形で。「コードが正しく動く」と「画面が正しく見える」は別の問題なんですよね。

Claude Codeはコードを読んで構造は理解できても、実際のブラウザレンダリング結果は見られない。そこにスクリーンショットを渡すことで「実際にどう見えるか」までレビューしてもらえる。

テキトー教師

実装のポイントは3つです。テスト時に自動でスクリーンショットを取るハーネスを組む、そのスクリーンショットをClaudeに渡すカスタムコマンドを作る、CLAUDE.mdに「フロントエンド変更後はスクリーンショットテストを実行する」と書く。

この3つを組み合わせると、Claude Code自身がビジュアル検証できるようになります。

室谷

Ruby on Railsの例が有名ですが、PlaywrightやCypressでスクリーンショットを撮って渡す方法もあって、フレームワークに依存しないアプローチなんですよね。.AIコミュニティでもこういう応用事例、もっと出てきてほしいなと・・・。

まとめ

テキトー教師

まとめると、Claude Codeで画像を使う方法は3つ。ペースト（macOS: Ctrl+V、Windows: Alt+V）、ドラッグ&ドロップ、ファイルパス指定。

このどれかが使えればUIデバッグ・デザインカンプのコード化・スクリーンショット駆動開発まで全部できます。

室谷

個人的に一番効果を感じたのはUIバグのデバッグで。「ここがおかしい」をテキストで説明するより、スクリーンショット1枚貼り付けて送信した方が圧倒的に速くて精度も高いです。

Claude Codeはもともとマルチモーダルなモデルで動いてるので、この機能を使わないのはもったいない。

テキトー教師

ショートカットキーさえ覚えれば後は直感的に使えるので、まだ試したことない方はぜひ。コードを渡す→画像を渡す→「このUI直して」というループを一度体験すると、戻れなくなりますよ（笑）。

FAQ

Claude Codeで画像認識はできますか？

できます。Claude Codeはビジョン（画像認識）機能を持つClaudeモデル上で動作しているため、JPEG・PNG・GIF・WebP形式の画像をペーストやドラッグ&ドロップ、ファイルパス指定で渡すと、内容を解析して回答してくれます。

Claude Codeで画像を貼り付けできない場合はどうすれば？

まずショートカットキーを確認してください。macOSはCtrl+V（Cmd+Vではない）、WindowsはAlt+V（Ctrl+Vではない）が画像ペースト用のショートカットです。次にクリップボードに画像が正しく入っているか確認し、ターミナルがドラッグ&ドロップに対応しているかも確認してみてください。

Claude Codeに画像を渡すと何ができますか？

UIのスクリーンショットからバグ修正、エラーダイアログの解析、デザインカンプからのコード生成、技術ドキュメント画像の読み込みによる実装補助などに使えます。

Claude Codeで画像を使う完全ガイド【2026年最新】：貼り付け・添付・読み込み・生成まで徹底解説

Claude Codeで画像を貼り付けする方法：OS別ショートカット

ドラッグ&ドロップで画像を渡す方法

ファイルパスを直接指定して画像を読み込む方法

Claude Codeが画像入力で何をしてくれるか

Claude Codeで画像生成はできる？

画像読み込みがうまくいかないときの対処法

Claude Codeのビジョン機能とトークン数の関係

スクリーンショット駆動開発：Claude Codeを「目のある」AIにする

まとめ

FAQ

Claude Codeで画像認識はできますか？

Claude Codeで画像を貼り付けできない場合はどうすれば？

Claude Codeに画像を渡すと何ができますか？

出典