画像入力（ビジョン）

Claude Code に画像を渡す：貼り付け・ドラッグ＆ドロップ・ファイルパス参照で、スクリーンショット・デザインカンプ・アーキテクチャ図・チャートをモデルに読ませる。QCode.cc のビジョンモデル対応、1 つの API Key が全エンドポイントで使えます。

API キーが必要ですか？ 登録する →·エンドポイントと Base URL →

Claude Code はコードを読むだけでなく、画像を見ることもできます。スクリーンショット、デザインカンプ、エラー画面、アーキテクチャ図を渡せば、ビジョン対応モデルが画像の中身を文字どおり「読み取り」、あなたのプロンプトと組み合わせて作業します——カンプを UI に起こす、エラーのスクリーンショットからバグを特定する、アーキテクチャ図やデータチャートを説明する、といった具合です。

このページが扱うのは画像入力、つまりあなたが画像を渡し、モデルがそれを理解することです。これは「画像生成」とは別物です。

⚠️ 画像生成と混同しないこと このページは画像をモデルに渡して理解させること（ビジョン入力）についてです。AI に画像を生成 / 編集させたい場合（ポスター、挿絵、UI カンプ、切り抜き・背景差し替えなど）は別の機能で、gpt-image-2 を使います。gpt-image-2 画像生成 を参照してください。 一言で言うと：画像を読む = このページ；画像を描く = image-2。

画像を渡す 3 つの方法¶

Claude Code のセッションでモデルに画像を渡す方法は 3 つあります。

macOS ではスクショは既定でクリップボードに入るので、そのまま Ctrl+V でいけます。ファイルとして保存した場合はドラッグかパス指定の方が確実です。貼り付けとドラッグの対応はターミナル / OS によって差があるため、認識されないときは最も確実な「ファイルパス参照」に切り替えてください。

パス参照の例¶

> ./design/dashboard.png のデザインカンプを見て、React + Tailwind で実装して
> このエラーのスクショ @screenshots/build-error.png は何が原因？どう直す？
> docs/architecture.png のシステム構成を説明して、各コンポーネントの連携も

パス参照の利点は再現性です。スクリプトやプロンプトテンプレートに書いておけば、毎回まったく同じ画像を正確に指せて、手作業の貼り付けに依存しません。

よくある使い方¶

1. デザインカンプ / スクショ → UI コード¶

カンプや既存ページのスクショを Claude Code に渡し、動くフロントエンドコードに起こさせます。

> これはカンプ @mockups/pricing-page.png。Next.js + Tailwind で実装して。
  レイアウト・余白・配色をできるだけ忠実に、コンポーネント分割も適切に

モデルは画像からレイアウト・文言・配色を読み取り、対応するコンポーネントコードを生成します。再現度は画像の鮮明さと、プロンプト内の制約（フレームワーク、スタイルシステム、命名規約など）に左右されます。

2. エラーのスクショ → 特定と修正¶

IDE・ブラウザのコンソール・ターミナルに出る赤いエラーは、長いスタックトレースを打ち直さずスクショで渡せます。

> @screenshots/ts-error.png この TypeScript エラーはどう解決する？関連コードは src/api/client.ts

モデルはスクショからエラーメッセージとスタックを読み取り、あなたが指定したコードファイルと合わせて修正案を出します。

3. アーキテクチャ図 / データチャート → 理解と説明¶

アーキテクチャ図、シーケンス図、フローチャート、監視ダッシュボード、データチャートを渡して、説明・データ抽出・それに基づくコード / ドキュメント作成をさせます。

> @diagrams/data-flow.png のデータフロー図を説明して、それを基に API ドキュメントのドラフトを書いて
> この監視スクショ @screenshots/latency.png を読んで、p95 レイテンシはどのくらい？異常なスパイクはある？

どのモデルが画像を見られるか¶

ビジョン能力はモデル次第で、すべてのモデルが画像を読めるわけではありません。QCode.cc 経由で使える、ビジョン対応モデル：

テキスト / コード特化の軽量モデルは画像入力に対応しないことがあります。ビジョン非対応のモデルに画像を渡すと、画像は無視されるかエラーになります——モデル選びでは上記を狙ってください。4.x のビジョンモデル（claude-sonnet-4-6、claude-opus-4-8 など）は引き続き販売中です。モデルの切り替えは モデル選択 を参照。

QCode.cc の強みは、cr_ で始まる 1 つの API Key ですべてのプロトコルとモデルを使えることです。同じキーで Claude 系ビジョンモデルも GPT-5.x も呼べ、アカウントを切り替えずに必要に応じて使い分けできます。エンドポイントとプロトコルパスは 接続先と API フォーマット を参照（中国国内のユーザーは asia.qcode.cc を優先）。

実用的なヒント¶

• 画像は鮮明に：解像度が低すぎたり文字がつぶれていると、モデルは正確に読めません。カンプやエラースクショはできるだけ原画で、圧縮しすぎない。
• 一度に画像を盛りすぎない：画像が多く大きいほどトークンを消費し、要点を外しやすくなります。一度に重要な 1〜2 枚に絞る。
• 意図を文章で明示：画像のそばに何をしてほしいか書く（「React で再現」「エラー原因を特定」「表データを抽出」）と、画像だけ渡すより効果が高い。
• 機微情報は先にマスク：スクショ内のキー、トークン、内部アドレス、ユーザーデータなどは、渡す前に隠す。
• 一括処理にはパス：スクリプト / 自動化で画像を扱うなら「ファイルパス参照」が最も制御しやすく、自動化と CI/CD の headless モードと組み合わせれば一括処理できます。

画像の形式・サイズ・トークン消費¶

2026-10-15 時点の Anthropic 公式ビジョンドキュメントによる内容です（QCode 経由で Claude を使う場合の参考になります）。

実務上は、必要以上に大きなスクリーンショットを撮らないことです。4K 画面の全画面キャプチャは縮小されるため、増えたピクセルは送信サイズを増やすだけで鮮明さは上がりません。本当に見せたい領域を切り出して渡すほうが、全画面よりも正確でトークンも節約できます。

Claude Code での画像の添付¶

Claude Code 公式ドキュメントによると、画像はウィンドウへのドラッグ、またはコピーして Ctrl+V で貼り付けられます（Windows と WSL は Alt+V、iTerm2 は Cmd+V）。貼り付けると入力欄に [Image #1] のようなマーカーが入り、プロンプト内で番号を指定して参照できます。

よくあるエラーと切り分け¶

よくある質問¶

スクリーンショットは PNG でなければいけませんか？¶

いいえ。JPEG、PNG、GIF、WebP のいずれも使えます。文字の多い画面のスクリーンショットは、非可逆圧縮で文字がぼやけないよう PNG を優先してください。

画像は追加料金になりますか？¶

画像は入力トークンとして数えられ、テキストと一緒にトークン単位で課金されます。モデルごとの単価は qcode.cc/models にあります。画像が大きいほどビジュアルトークンが増えるので、送る前に切り出してください。

写真に写っている人物が誰か判別できますか？¶

できません。Anthropic のドキュメントには、Claude は画像内の人物の名前を特定するために使えず、拒否すると明記されています。場面の説明、文字の読み取り、グラフの解説は可能です。

一度に何枚まで送れますか？¶

Anthropic のドキュメントでは API の上限は 1 リクエストあたり、コンテキスト 200K トークンのモデルで 100 枚、それ以外のモデルで 600 枚ですが、20 枚を超えると寸法上限が厳しくなり、リクエストサイズの上限に先に達することもあります。日常的には 1〜2 枚の要点となる画像に絞るのがおすすめです。

関連ドキュメント¶

• gpt-image-2 画像生成 — 画像の生成 / 編集（このページの「画像を読む」の逆）
• モデル選択 — ビジョン対応モデルを選ぶ
• 接続先と API フォーマット — エンドポイント、プロトコルパス、自己テスト方法
• 自動化と CI/CD — スクリプトで画像を一括投入

1 つの QCode.cc API Key で、Claude のビジョンモデルと GPT-5.x のマルチモーダル能力を、全エンドポイント共通の枠で使い倒せます。プランと価格を見る →

企業版 →