画像入力（ビジョン）

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

画像入力（ビジョン）¶

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

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

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

画像を渡す 3 つの方法 ¶

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

方法	操作	適した場面
貼り付け	画像をコピーして `Ctrl+V` で入力欄に貼り付け	スクショツールで撮った画像、クリップボード内の画像
ドラッグ＆ドロップ	画像ファイルをそのままターミナルにドラッグ	ファイルマネージャーにある既存の画像ファイル
パス参照	プロンプトに画像ファイルのパスを書く	プロジェクト内の既存画像、スクリプトでの一括処理

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 経由で使える、ビジョン対応モデル：

モデル	説明
`claude-opus-4-8`	フラッグシップ。ビジョン + 推論ともに強く、複雑なカンプ / チャートの第一候補
`claude-sonnet-4-6`	バランス型。日常の画像読み取り / UI 再現にコスパが高い
GPT-5.x（`gpt-5.5` / `gpt-5.4` / `gpt-5.4-mini`）	OpenAI 系のビジョンモデル、マルチモーダル理解が強い

テキスト / コード特化の軽量モデルは画像入力に対応しないことがあります。ビジョン非対応のモデルに画像を渡すと、画像は無視されるかエラーになります——モデル選びでは上記を狙ってください。モデルの切り替えはモデル選択を参照。

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

実用的なヒント ¶

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

画像入力（ビジョン）