室谷代表取締役今回はClaude Codeでの画像の扱い方を全部まとめましょう。.AI（ドットエーアイ）コミュニティでも「画像どうやって渡すの？」って聞かれることが増えてきたんですよね。
テキトー教師DotAI 認定講師ですよね。実は画像の渡し方って複数あって、OS別に微妙に違うんですよ。
受講生さんに「貼り付けできない」って言われて調べてみると、ショートカットキーを間違えているパターンが多いですね。
受講生さんに「貼り付けできない」って言われて調べてみると、ショートカットキーを間違えているパターンが多いですね。
室谷代表取締役あるあるです。「Ctrl+V（Cmd+V）押したのに何も起きない」って声、めちゃくちゃ多い・・・。
Claude CodeはテキストとImageでペーストのショートカットが分かれてるんで、そこを最初に押さえておくと全部解決するんですよね。
Claude CodeはテキストとImageでペーストのショートカットが分かれてるんで、そこを最初に押さえておくと全部解決するんですよね。
テキトー教師DotAI 認定講師整理すると、Claude Codeへの画像入力には大きく3つのアプローチがあります。ペーストで直接渡す方法、ドラッグ&ドロップ、そしてファイルパスを文章で伝える方法。
これを用途に応じて使い分けるのが基本です。
これを用途に応じて使い分けるのが基本です。
Claude Codeで画像を貼り付けする方法：OS別ショートカット
室谷代表取締役まずここを間違えると何も始まらないんですが、Claude Codeの画像ペーストは通常のペーストと別のキーなんですよね。
テキトー教師DotAI 認定講師ここが一番ハマるポイントです。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 |
室谷代表取締役macOSだと普段Cmd+VでペーストするのにClaude CodeではCtrl+Vで画像ペースト、というのが直感に反するんですよね。MYUUUのメンバーも最初混乱してました・・・。
テキトー教師DotAI 認定講師Windowsはもっとわかりにくくて、Alt+Vなんですよ。Ctrl+Vを押したらテキストとして認識されて、画像が入らないというのが典型的な失敗パターンです。
エラーメッセージも出ないし、Claudeがシーンとしてるだけなので余計わかりにくい。
エラーメッセージも出ないし、Claudeがシーンとしてるだけなので余計わかりにくい。
室谷代表取締役ここ、公式ドキュメントに書いてあるんですけど気づきにくい場所にあるんですよ。インタラクティブモードのショートカット一覧に「Ctrl+V or Cmd+V (iTerm2) or Alt+V (Windows): Paste image from clipboard」と記載されています。
テキトー教師DotAI 認定講師ペーストすると「[Image #1]」のようなチップが表示されて、そのまま質問の文章と組み合わせられます。「この画像のUIのどこを直せばいい？」みたいな形で使えるんですよ。
ドラッグ&ドロップで画像を渡す方法
テキトー教師DotAI 認定講師ペーストより直感的な方法がドラッグ&ドロップです。ファイルをそのままClaude Codeのウィンドウに投げ込むだけ。
室谷代表取締役これ、Claude CodeのDesktopアプリやVS Code拡張機能で特に便利ですね。ターミナル版でも対応してるターミナルエミュレータなら使えます。
テキトー教師DotAI 認定講師対応しているターミナルの例だと、iTerm2、WezTerm、Ghostty、Kittyあたりですね。VS Codeの統合ターミナルでも動きます。
室谷代表取締役画像だけじゃなくてPDFやほかのファイルも同じ要領でドロップできるんで、覚えておくと作業効率が全然違う。
ファイルパスを直接指定して画像を読み込む方法
室谷代表取締役一番シンプルで確実なのは、ファイルパスを文章の中に書いてしまう方法ですね。
テキトー教師DotAI 認定講師「Analyze this image: /path/to/your/image.png」みたいな形で伝えれば、Claude Codeが自動でファイルを読み込んでビジョン機能で解析してくれます。
室谷代表取締役これ、スクリーンショットを撮ってそのパスを渡すフローにすると、UIレビューとかデバッグが劇的に効率化するんですよね。MYUUUでもフロントエンド開発のときに使ってます。
テキトー教師DotAI 認定講師講座でこの方法を教えると「え、それだけで画像見てくれるの？」って驚かれることが多いですよ（笑）。JPEG、PNG、GIF、WebPに対応してるので、ほぼ全ての一般的な画像形式は問題ないです。
Claude Codeが画像入力で何をしてくれるか
テキトー教師DotAI 認定講師渡し方はわかった、じゃあどういう使い方が実践的か、というのが本題ですよね。大きく分けると主に4つのユースケースがあります。
- UIスクリーンショットからバグ修正
- エラーダイアログ・ターミナル出力のキャプチャを渡してデバッグ
- デザインカンプ（Figmaのスクリーンショット等）を渡してコード化
- 図解・ドキュメントの画像を読み込んで実装に反映
室谷代表取締役1と2は特に実務で頻繁に使います。コードを書いてもらったあと「ここの見た目がおかしい」ってなったとき、ブラウザのスクリーンショットを貼り付けて「どこ直す？」と聞くだけで済む。
テキストで「ボタンが右にずれてて、余白が16pxくらい多すぎる」って説明するより圧倒的に速い。
テキストで「ボタンが右にずれてて、余白が16pxくらい多すぎる」って説明するより圧倒的に速い。
テキトー教師DotAI 認定講師3のデザインカンプのコード化は、結構実用的で。Figmaのスクリーンショットを渡して「これに合わせてReactのコンポーネント書いて」とやると、見た目に近いコードが出てくる。
ピクセルパーフェクトではないですけど、叩き台として十分なレベルのものが出てきます。
ピクセルパーフェクトではないですけど、叩き台として十分なレベルのものが出てきます。
室谷代表取締役海外のドキュメントや技術仕様書が画像PDFになってるケースもあって、そういうときにファイルパスを渡すと内容を読んで実装に落とし込んでくれる。これはわりと感動するんですよw
Claude Codeで画像生成はできる？
室谷代表取締役ここ、よく混同される点なんですが・・・Claude Code自体に画像生成機能はないんですよね。
テキトー教師DotAI 認定講師Claudeは現時点で画像を出力する機能はありません。あくまで画像を入力して解析するのがClaudeのビジョン機能です。
画像認識と画像生成は別の機能で、Claudeは認識専門です。
画像認識と画像生成は別の機能で、Claudeは認識専門です。
室谷代表取締役画像生成がしたい場合は、Claude Code経由でAPIを叩いてStable DiffusionやDALL·Eに投げるようなMCPやスキルを組む、というアプローチになりますね。Claude Code自体がそれを実行できる、というイメージです。
テキトー教師DotAI 認定講師受講生さんから「Claude Codeで画像生成できますか」って聞かれたとき、「Claudeは画像を見ることはできるけど描くことはできない」と言うとわかりやすいですよ。見る専門、ということで。
画像読み込みがうまくいかないときの対処法
室谷代表取締役「画像貼り付けできない」「読み込んでくれない」ってトラブルシューティングの話もしておきましょう。
テキトー教師DotAI 認定講師よくある原因を整理するとこうなります。
| 症状 | 原因 | 解決策 |
|---|---|---|
| ペーストしても何も反応しない | ショートカットキーの間違い | 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を使うと直接クリップボードに画像が入るんでそっちが楽です。
Snipping Toolを使うと直接クリップボードに画像が入るんでそっちが楽です。
テキトー教師DotAI 認定講師macOSだとCmd+Shift+Ctrl+4でクリップボードに直接スクリーンショットを撮れるので、そのあとCtrl+Vで貼り付けというフローが一番スムーズです。Cmd+Shift+4だとファイルに保存されるので、そちらはファイルパス方式で渡すことになります。
Claude Codeのビジョン機能とトークン数の関係
室谷代表取締役ビジョン機能ってトークンをどのくらい使うか、知ってる人少ないんですよね。APIを従量課金で使ってる人には重要な話で・・・。
テキトー教師DotAI 認定講師Anthropicの公式ドキュメントによると、画像のトークン数は「(幅px × 高さpx) / 750」で計算できます。例えば1000×1000pxの画像なら約1334トークンになります。
室谷代表取締役Proプランで定額利用していれば意識しなくていいですが、Claude CodeのAPIを直接叩いたり、Console経由で使っているケースでは画像ごとにコストがかかる。高解像度の画像を大量に渡すとじわじわ効いてくるんですよね。
テキトー教師DotAI 認定講師最適化のポイントとしては、必要以上に大きい画像は避けること。公式ドキュメントでは1.15メガピクセル（1568px以内）に収めるとタイムトゥファーストトークンが改善されると書かれています。
細かいUIをキャプチャするときも、全画面より必要な部分だけトリミングした方が効率がいいです。
細かいUIをキャプチャするときも、全画面より必要な部分だけトリミングした方が効率がいいです。
スクリーンショット駆動開発：Claude Codeを「目のある」AIにする
室谷代表取締役最後に、画像入力を活用した実践的なワークフローを紹介しましょう。海外では「Screenshot-driven development」として注目されているアプローチで・・・。
テキトー教師DotAI 認定講師Capybaraのスクリーンショットを自動取得してClaude Codeに渡すという手法が海外で紹介されていて、フロントエンドの視覚的な検証を自動化するアプローチですね。コードを書く→ブラウザでレンダリングする→スクリーンショットを撮る→Claude Codeが見て問題を指摘する、というループです。
室谷代表取締役これ、人間がやってたビジュアルレビューをClaudeが担う形で。「コードが正しく動く」と「画面が正しく見える」は別の問題なんですよね。
Claude Codeはコードを読んで構造は理解できても、実際のブラウザレンダリング結果は見られない。そこにスクリーンショットを渡すことで「実際にどう見えるか」までレビューしてもらえる。
Claude Codeはコードを読んで構造は理解できても、実際のブラウザレンダリング結果は見られない。そこにスクリーンショットを渡すことで「実際にどう見えるか」までレビューしてもらえる。
テキトー教師DotAI 認定講師実装のポイントは3つです。テスト時に自動でスクリーンショットを取るハーネスを組む、そのスクリーンショットをClaudeに渡すカスタムコマンドを作る、CLAUDE.mdに「フロントエンド変更後はスクリーンショットテストを実行する」と書く。
この3つを組み合わせると、Claude Code自身がビジュアル検証できるようになります。
この3つを組み合わせると、Claude Code自身がビジュアル検証できるようになります。
室谷代表取締役Ruby on Railsの例が有名ですが、PlaywrightやCypressでスクリーンショットを撮って渡す方法もあって、フレームワークに依存しないアプローチなんですよね。.AIコミュニティでもこういう応用事例、もっと出てきてほしいなと・・・。
まとめ
テキトー教師DotAI 認定講師まとめると、Claude Codeで画像を使う方法は3つ。ペースト（macOS: Ctrl+V、Windows: Alt+V）、ドラッグ&ドロップ、ファイルパス指定。
このどれかが使えればUIデバッグ・デザインカンプのコード化・スクリーンショット駆動開発まで全部できます。
このどれかが使えればUIデバッグ・デザインカンプのコード化・スクリーンショット駆動開発まで全部できます。
室谷代表取締役個人的に一番効果を感じたのはUIバグのデバッグで。「ここがおかしい」をテキストで説明するより、スクリーンショット1枚貼り付けて送信した方が圧倒的に速くて精度も高いです。
Claude Codeはもともとマルチモーダルなモデルで動いてるので、この機能を使わないのはもったいない。
Claude Codeはもともとマルチモーダルなモデルで動いてるので、この機能を使わないのはもったいない。
テキトー教師DotAI 認定講師ショートカットキーさえ覚えれば後は直感的に使えるので、まだ試したことない方はぜひ。コードを渡す→画像を渡す→「この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のスクリーンショットからバグ修正、エラーダイアログの解析、デザインカンプからのコード生成、技術ドキュメント画像の読み込みによる実装補助などに使えます。
