結論：Claude Code は「テキストで説明しづらいもの」を画像で渡すと、往復が一気に減ります。エラー画面のスクリーンショット、デザインモック、DBスキーマ図、崩れたUI——これらは言葉で書き起こすより1枚貼った方が速く、しかも正確です。本記事では Claude Code に画像を渡す3つの方法と、実装現場での使いどころを、公式仕様に沿ってまとめます。
- 要点1：画像の渡し方は「ドラッグ&ドロップ /
ctrl+vでペースト / ファイルパス指定」の3つ。cmd+vは使わないのが公式の注意点。 - 要点2：対応形式は JPEG・PNG・GIF・WebP。画像は内部で 28×28px の「ビジュアルトークン」に分解されて消費される。
- 要点3：エラー画面→原因特定、モック→CSS/HTML生成、図→スキーマ修正、が公式に挙がっている定番ユースケース。
対象読者：Claude Code をすでに触っているエンジニア・PM。今日できること：手元のエラー画面を1枚貼って「これ何が原因？」と聞くところから始められます。
正直、最初に Claude Code を CLI で触り始めたとき、「ターミナルのツールに画像なんて渡せるのか？」と半信半疑でした。コードを書く相棒だと思っていたので、ビジュアルを読ませる発想がそもそも無かったんです。
転機は、CSS が思った通りに効かずに小一時間ハマった日でした。レイアウトの崩れを文章で「ヘッダーの下のカードが右に寄っていて、しかもモバイルだと重なる」と説明しても、なかなか噛み合わない。試しにブラウザのスクリーンショットを1枚ターミナルに貼り付けて「この崩れの原因を特定して」と投げたら、該当の flex 設定をピンポイントで指摘してきた。あの瞬間に、画像入力は「あると便利」じゃなくて「使わないと損」な機能だと認識が変わりました。
この記事では、その後いろいろな現場で使い倒してわかった「画像をどう渡すか」「どこで効くか」「どこでハマるか」を、公式ドキュメントの仕様と突き合わせながら整理します。
Claude Code に画像を渡す3つの方法
公式の Common workflows に明記されている画像の渡し方は、次の3通りです。どれも数秒で済みます。
方法1：ドラッグ&ドロップ
画像ファイルを Claude Code のウィンドウ（ターミナル）に直接ドラッグ&ドロップする方法です。Finder やエクスプローラーからファイルを掴んで放り込むだけ。複数枚をまとめて渡すこともできます。
方法2：コピーして ctrl+v でペースト
クリップボードにコピーした画像を、CLI に ctrl+v でペーストします。ここで 公式が明示的に注意しているのが「cmd+v は使わないこと」。Mac ユーザーは反射的に cmd+v を押しがちですが、画像ペーストは ctrl+v である点に注意してください。macOS の標準ショートカット（cmd+v）はターミナルのテキスト貼り付けに割り当てられているため、画像が正しく取り込まれません。
このフローが一番速いです。macOS なら Cmd+Shift+4 で範囲スクショ→クリップボードにコピー→ターミナルで ctrl+v、という流れで「画面の一部を切り取って渡す」が10秒で完結します。
方法3：ファイルパスを文章中で指定
すでにファイルとして保存されている画像なら、プロンプトの中でパスを書くだけで読み込ませられます。公式の例はこうです。
Analyze this image: /path/to/your/image.png日本語でも同じで、「この画像を見て: ./screenshots/error.png」のようにパスを書けば取り込まれます。スクリプトやドキュメントに紐づいた画像を、ファイルとして管理しているプロジェクトではこの方法が確実です。
ちなみに Claude が応答の中で画像を参照するとき（例：[Image #1]）、そのリンクを Mac なら Cmd+Click、Windows/Linux なら Ctrl+Click すると既定のビューアで画像を開けます。複数枚を扱っているときにどれを指しているか確認できて便利です。
対応している画像形式とサイズの注意点
ここは「動くけど読みづらい」を避けるために、最初に押さえておきたい仕様です。すべて Anthropic 公式の Vision ドキュメントに基づきます。
対応形式
サポートされている形式は JPEG / PNG / GIF / WebP の4つです。スクリーンショットは PNG、写真や大きい画面キャプチャは JPEG/WebP に圧縮、と使い分けると無駄が減ります。
画像は「ビジュアルトークン」として消費される
意外と知られていないのが、画像もトークンを消費するという点です。Claude は画像をピクセル単位ではなく、28×28px の「パッチ（ビジュアルトークン）」に分解して読み込みます。1枚あたりのトークン数は ⌈幅 / 28⌉ × ⌈高さ / 28⌉ で計算されます。
つまり巨大な画像をそのまま貼ると、それだけコンテキストとコストを食います。公式は、画像が大きすぎる場合に自動でリサイズされる仕様だと説明していて、ほとんどのモデルでは 長辺1568px / 1568トークンが上限です。Claude Opus 4.7 以降の高解像度対応モデル（Opus 4.8 など）では 長辺2576pxまで上がり、スクリーンショット理解やドキュメント解析の精度が上がる一方、画像トークンは最大で約3倍になり得ます。
実務上の指針はシンプルで、テキストを読ませたい画像（エラーログ・コード画面）は、文字がつぶれない範囲で事前にリサイズ&トリミングしてから渡すこと。公式も「画像が大きいとリサイズされてテキストが読みにくくなることがある」と注意しています。逆に4Kのスクショを丸ごと貼っても、内部で縮小されるので解像度の恩恵は限定的です。必要な部分だけ切り取る方が、読みやすさもコストも改善します。
ユースケース1：エラー画面のスクショから原因を特定する
一番効くのがこれです。スタックトレースが長い、あるいはブラウザのコンソールエラーが入り組んでいるとき、文章で書き起こすより画面ごと渡す方が圧倒的に速い。公式も「コンテキストとして画像を使う」例として、まさにこのパターンを挙げています。
Here's a screenshot of the error. What's causing it?
（このエラーのスクショです。原因は何ですか？）実際の現場では、こう投げると Claude がエラーメッセージを読み取り、関連しそうなファイルを @ 参照で開いて、原因の仮説と修正案まで出してきます。ポイントは、スクショと一緒に「再現手順」や「実行コマンド」をテキストで添えること。画像だけだと「画面の状態」しか伝わらないので、「npm test を実行したらこれが出た」のように状況を1行足すと精度が上がります。
❌ ありがちな失敗：画面全体を貼って丸投げ
❌ ブラウザの全画面スクショ（4K）を貼って「直して」とだけ言う → どこを見ればいいか焦点が定まらず、リサイズで肝心のエラー文字もつぶれる。
⭕ エラーが出ているパネルだけをトリミングして貼り、「このコンソールエラーの原因をプロジェクト内から特定して」と範囲を指定する。
ユースケース2：デザインモックから CSS/HTML を生成する
Figma の書き出しやデザイナーから受け取ったモック画像を渡して、実装の叩き台を作らせるパターンです。公式が挙げている例はこうです。
Generate CSS to match this design mockup
（このデザインモックに合わせた CSS を生成して）
What HTML structure would recreate this component?
（このコンポーネントを再現する HTML 構造は？）ゼロから手で組むより、まず画像から構造の下書きを出させて、そこから細部を詰める方が速い。とくにカードやフォームのような「よくあるUIパターン」は、モックを1枚渡すだけでかなり近いマークアップが返ってきます。
ただし鵜呑みは禁物です。画像から起こした寸法やカラーは「だいたい」なので、余白・フォントサイズ・ブレークポイントは必ず実数で指定し直す。Claude の空間認識には限界があると公式も明言しているので、ピクセルパーフェクトを期待せず「8割の叩き台を3割の時間で」という使い方が現実的です。Claude Code でのUI実装をもっと深掘りしたい人は、Claude Code × Web/UIデザインの実装事例も参考になります。
ユースケース3：図・スキーマを読ませて設計を相談する
ER図、アーキテクチャ図、シーケンス図など、構造を表す画像も読ませられます。公式の例はDBスキーマです。
This is our current database schema. How should we modify it for the new feature?
（これが現在のDBスキーマです。新機能のためにどう変更すべき？）
Are there any problematic elements in this diagram?
（この図に問題のある要素はありますか？）既存システムの設計を Claude に共有するとき、コードを全部読ませるよりも図を1枚渡す方がコンテキストの節約になります。テキストで関係性を説明すると長くなるものを、画像なら一発で伝えられる。これは前述の「ビジュアルトークン」の観点でも理にかなっていて、込み入った関係図を文章化するより画像の方がトークン効率が良い場合が多いです。
ユースケース4：UIの崩れ・ビジュアルリグレッションを見せる
「文章で説明しづらいレイアウト崩れ」こそ画像の独壇場です。公式も「テキストでの説明が不明瞭・煩雑になる場合に画像を使う」ことを推奨しています。
Describe the UI elements in this screenshot
（このスクショのUI要素を説明して）修正前と修正後の2枚を並べて渡せば、Claude が差分を読み取って「どこが変わったか・どこがまだ崩れているか」を言語化してくれます。1つの会話で複数の画像を扱えるのは公式仕様なので、Before/After のビジュアル比較は素直に使えます。デザインレビューやQAの一次切り分けに向いています。
画像入力で詰まりやすいポイントと回避策
ここまでの内容を踏まえ、現場で実際にハマったパターンを失敗→正解の形で残しておきます。
❌ 失敗1：cmd+v でペーストして「貼れない」と悩む
❌ Mac の癖で cmd+v を押して画像が取り込まれず、「画像入力が壊れている」と誤解する。
⭕ 画像ペーストは ctrl+v。これは公式に明記された注意点で、最も多いつまずきどころです。
❌ 失敗2：文字がつぶれた巨大画像を渡す
❌ 4Kモニタのフルスクショをそのまま貼り、内部リサイズで肝心のログ文字が読めなくなる。
⭕ テキストを読ませたい画像は、事前に該当部分をトリミング&リサイズ。長辺は2000px以下を目安にすると、リサイズによる劣化を避けつつトークンも節約できる。
❌ 失敗3：画像だけで状況を伝えようとする
❌ スクショだけ貼って「直して」 → 画面の「状態」しか伝わらず、再現条件が不明なまま的外れな修正になる。
⭕ 画像 + テキストの併用。「この画面で送信ボタンを押すとこのエラーが出る」のように、画像で見せて言葉で文脈を足す。
❌ 失敗4：画像の出力を寸法まで信じ込む
❌ モックから起こした CSS の数値をそのまま本番に採用する。
⭕ Claude の空間認識には限界があると公式も認めている。余白・座標・サイズは叩き台と割り切り、実数は人が確定させる。
セキュリティ・運用上の注意
画像にも機密情報が写り込むことを忘れないでください。スクリーンショットには、APIキー、顧客名、社内URL、未公開の画面が映り込みがちです。Claude Code に画像を渡すこと自体は、テキストを渡すのと同じデータ取り扱いの考え方で運用すべきです。
とくにチームで導入する場合は、「どんな画像を渡してよいか」をテキストのプロンプトと同じ基準で線引きしておくと安全です。権限設計やデータの扱いを体系的に固めたい場合は、Claude Code 権限設計ガイドもあわせて確認しておくと、画像を含むコンテキスト全体の管理方針が整理しやすくなります。
よくある質問
Claude Code に動画は渡せますか？
公式が対応形式として挙げているのは JPEG・PNG・GIF・WebP の静止画像です。動画そのものを直接読ませる用途は想定されていません。動画の特定フレームを確認させたい場合は、そのフレームを静止画として書き出してから渡すのが現実的です。
何枚まで一度に渡せますか？
Claude Code の会話内で複数画像を扱えるのは公式仕様です。基盤となる Vision の上限は、claude.ai では1メッセージあたり20枚、API では200kトークンのモデルで1リクエスト100枚です。実装作業では、関連する数枚（Before/After、エラー画面+該当コードのスクショ等）に絞った方が、焦点が定まって精度も上がります。
画像を渡すとコストはどれくらい増えますか？
画像は ⌈幅 / 28⌉ × ⌈高さ / 28⌉ のビジュアルトークンを消費します。たとえば 1000×1000px の画像は約1,296トークン相当です。大きい画像は内部で長辺1568px（高解像度モデルは2576px）まで縮小されるため、それ以上の解像度を貼っても比例してコストが増えるわけではありません。必要な部分だけ切り取るのが、読みやすさとコストの両面で最適です。
スクショを撮ってすぐ渡す一番速い方法は？
macOS なら範囲スクショのショートカットでクリップボードにコピーし、ターミナルで ctrl+v。ファイルとして保存せずに直接ペーストできるので、デバッグ中の往復が一番速くなります。
まとめ：画像入力は「説明コストの削減装置」
Claude Code の画像入力は、派手な新機能ではありません。けれど「言葉で書くと長くなるもの・伝わりにくいもの」を1枚で渡せる効果は、毎日のデバッグやUI実装でじわじわ効きます。エラー画面、モック、スキーマ図、レイアウト崩れ——これらを抱えたら、まず1枚貼ってみる癖をつけるだけで往復が目に見えて減ります。
今日からできる3アクション：
- ① いま手元にあるエラー画面を1枚スクショして、
ctrl+vで貼り「原因を特定して」と聞いてみる。 - ② 次に CSS で詰まったら、崩れた画面のスクショを渡して該当箇所を指摘させる。
- ③ 渡す前にトリミング&リサイズして、文字がつぶれない・トークンを無駄にしない渡し方を習慣化する。
次回予告：画像入力と相性が良い「拡張思考（extended thinking）」を組み合わせて、複雑なUIバグを段階的に詰める方法を扱う予定です。
Claude Code をチームに本格導入し、画像入力を含むワークフローを業務に定着させたい場合は、Uravation の Claude Code 個別指導・導入支援も活用できます。現場のコードと業務に合わせた実装伴走を行っています。
著者プロフィール
佐藤傑（さとう・すぐる）。株式会社Uravation代表取締役。X（@SuguruKun_ai）フォロワー約10万人。100社以上の企業向けAI研修・導入支援を手がける。著書『AIエージェント仕事術』（SBクリエイティブ）。SoftBank IT連載を執筆。
