Claude Codeにスクショや画像を渡して質問したい人向け
Web制作中のCSS崩れスクショ、エラー画面のキャプチャ、紙の資料の写真など、画像で見せた方が早い情報をClaude Codeに渡したい場面で押す。まずスクショアプリやプリントスクリーンでクリップボードに画像を入れて、入力欄に質問の前置きを打ち、続けてこのキーを押すと画像チップが入る。チップの前後に文章を書いて「この画像のここがおかしい」と位置を指して質問できる。
Claude Codeの入力欄でこのキーを押すと、コピー済みの画像を「画像チップ」として貼れる。CSSが崩れたスクショ、エラー画面のキャプチャ、UIモックの写真を、いちいちファイルに保存しなくてもそのまま渡せます。
キーはOSとターミナルで違って、macOSではどのターミナルでもCtrl+Vが画像ペースト用の汎用デフォルト。iTerm2を使っている場合はCmd+Vも追加で同じ動きをする(公式 verbatim「Ctrl+V or Cmd+V (iTerm2) or Alt+V (Windows)」)。WindowsはAlt+V。テキストではなく画像専用の動きです。
噛み砕くと
これは「画面の共有を、コピー&ペーストの感覚でやれるキー」です。会議で「ちょっとこの画面見てほしいんだけど」と言いたい時、普通ならスクショを撮ってチャットに貼り付けますよね。それと同じ操作を、Claude Code の入力欄で1キーでやる感じ。
面白いのは、貼った画像が [Image #1] という小さなチップに置き換わって、入力欄の文章の中に埋め込まれること。だから「この [Image #1] の左下、なんで色が灰色なんだろう?」みたいに、文章の中で画像を指差して質問できる。
大事な前提:クリップボードに「画像」が入ってる必要がある
テキストをコピーした状態で押しても画像チップは出てきません。先にスクショを撮るか、画像を右クリックして「画像をコピー」するかで、クリップボードの中身が画像になっている状態を作る必要があります。
OS別の代表的な撮り方はこのあたり。
「料理ブログのCSSバグをClaudeに見せて聞く」を例に、実際の手順を見る
iPhoneサイズで料理ブログのレシピカードだけレイアウトが崩れる、というシーンを想定します。Macの画面に開発者ツールでiPhone表示を出して、その崩れたところを画像で見せて「どこが原因?」と聞きたい場合の手順です。
ステップ1: 崩れている部分をスクショで撮る
MacならShift+Cmd+Ctrl+4を押して、画面上で範囲をドラッグ。これでクリップボードに画像が入ります。ファイル保存はされません。Ctrlを入れずにShift+Cmd+4だけだとデスクトップにファイル保存になるので、クリップボード行きにするにはCtrlが必須。
WindowsならWin+Shift+S。Snipping Toolが起動して、範囲を選ぶとクリップボードに入ります。
ステップ2: 入力欄に質問の前置きを打ってから貼る
Claude Code の入力欄に、まず「これ見てほしいんだけど、」と打ちます。それからCtrl+Vを押す。iTerm2の場合はCmd+V、Windowsの場合はAlt+Vです。
入力欄の見た目はこうなります。
これ見てほしいんだけど、[Image #1]
画像そのものは表示されません。代わりに小さなチップ表記に置き換わる。これがClaude側で「画像1枚目」として認識される識別子です。
ステップ3: チップの後に質問を続ける
チップの後にカーソルがあるので、そのまま続けて文章を書きます。
これ見てほしいんだけど、[Image #1] .recipe-card の中の画像と
タイトルが重なってるんだよね。iPhoneサイズだけで起きてる。
原因と修正案を出して。
ここで初心者がやりがちなのが、画像だけ貼って「これどう?」とだけ送ること。Claude側は画像を読めるけど、何を聞かれているか分からないと一般的な感想しか返ってきません。文章で「何を見てほしいか」を1行でも添えるだけで返答の精度が変わります。
ステップ4: Enterで送信して回答を待つ
送信すると、Claudeが画像を解析して「.recipe-card の flex-wrap が効いてない可能性がある」「img の max-width: 100% が抜けてる」みたいな具体的な指摘を返してきます。
ステップ5: 別の角度のスクショも追加する
「じゃあPC幅でも同じ場所を見せたい」となったら、同じ操作を繰り返すだけ。今度は[Image #2]として入力欄に入ります。番号は今のセッションの中で自動で連番になる仕組み。
PC幅だとこう。[Image #2] iPhone幅だと崩れて [Image #1] こうなる。
ブレークポイントの違いっぽい?
ステップ6: セッションを終わると画像参照は消える
Claude Code を一度終了して別日に /resume でセッションを戻しても、[Image #N] のチップとして渡した画像はそのまま復元されないことが多いです。後日もう一度同じ画像を見せたい場合は、再ペーストするか、画像をファイルに保存して @ で参照する方が確実。
つまりこのキーは何をしてくれるのか
- やってくれる: コピーした画像を
[Image #N]という識別子付きで入力欄に挿入。文章の途中に埋め込んで「この画像のここ」と位置参照できる - やってくれない: テキストの貼り付け。テキストは普通のCmd+V/Ctrl+Vの動きで貼られる。クリップボードに画像がない時はチップが出ない
- 意味が薄い場面: そもそも画像で見せる必要がない場面。エラーメッセージは文字列でコピペした方がClaudeも処理しやすい
使いどころ3シナリオ
シナリオ1: UI崩れを直す相談
Web制作中に「ボタンが思った位置に来ない」「フォントが大きすぎる」みたいな見た目の問題が出た時。HTML/CSSのコードを丸ごと貼って説明するより、ブラウザのスクショを1枚渡した方が圧倒的に早い。「右側のメニューがこの幅で折り返しちゃってる、修正案出して」と画像とセットで聞けば、ピクセル単位の指示まで返ってきます。
シナリオ2: エラー画面をそのまま見せる
古いツールやIDE(統合開発環境)の中には、エラーメッセージをテキストでコピーできないものがあります。ダイアログに出ているスタックトレース、設定画面のチェック項目、コマンドプロンプトの出力。これらをスクショで撮って渡すと、Claudeが画像のテキストを読み取って原因を推測してくれます。
シナリオ3: 紙の資料・ホワイトボードを取り込む
会議で書いたホワイトボードの図、紙にメモした構成案、本のページ。スマホで撮った写真をMacのプレビューアプリ等で開いてCmd+Cでコピー、Claudeに Cmd+V(iTerm2)で渡せば、内容をテキストに書き起こしてもらえます。手書きでも読めるレベルなら認識します。
初心者が踏みやすい落とし穴
- Cmd+V が画像ペーストになるのは iTerm2 だけ。Apple Terminal や Ghostty では
Cmd+VがOS側で先に処理されてしまい、画像チップにならず通常のテキスト貼り付けの動きになる場合がある。ただしCtrl+Vはどのターミナルでも画像ペーストとして動く汎用キー(iTerm2 を含む全ターミナルが対象、設定変更も不要)。iTerm2 以外を使っているなら迷わずCtrl+Vを選べばよい - クリップボードに画像がないと何も起きない。直前にテキストをコピーした状態で押すと、画像チップは出ず、テキストがそのまま貼られる。期待通り動かない時はスクショを撮り直すのが早い
- Windowsの
Alt+Vは特別な設定が要らない。他のAlt系キー(Alt+B、Alt+Fなど)はmacOSでOption as Meta設定が必要だけど、WindowsのAlt+Vは素のWindowsキーボードでそのまま動く - セッションを跨いで画像は残らないと考えた方が安全。
[Image #N]の N はそのセッションの中だけの連番で、/clearや/resumeで会話を切り替えると画像参照は復元されないことが多い。後日また同じ画像を見せたいなら、ファイルに保存して@で参照する方法に切り替える - 同じ画像を何度も貼ると毎回トークン消費する。画像はテキストよりトークン(AIが文字を数える単位)の消費が大きい。同じスクショを連続で貼り直すと、毎回コストがかかる。1セッションで使い回すなら一度貼って
[Image #1]として参照し続ける方がムダがない - 巨大な画像はそのままだと重い。フルHDのスクショをそのまま貼ると応答に時間がかかる。
Shift+Cmd+Ctrl+4でドラッグして必要な部分だけ切り取った方が、Claude側も人間側も読みやすい - ドラッグ&ドロップでも画像は渡せる。このキーバインドはあくまでクリップボード経由の話で、画像ファイルを入力欄にドラッグ&ドロップする方法もある。詳しくは「画像・スクショ入力」の辞書エントリ参照
書き方
(入力欄にカーソルがある状態で)
macOS(全ターミナル汎用): Ctrl+V
macOS iTerm2(追加で動く): Cmd+V
Windows: Alt+V
→ 入力欄に [Image #N] チップが挿入される
やってみるとこうなる
入力
(クリップボードに料理ブログのCSS崩れスクショが入っている状態で、入力欄に「これ見てほしいんだけど、」と打った後)
Cmd+V(iTerm2の場合)
出力例
(入力欄の表示)
これ見てほしいんだけど、[Image #1]
(ここから続けて文章を書ける)
これ見てほしいんだけど、[Image #1] .recipe-card の中の画像とタイトルが重なってる。iPhoneサイズだけで起きてる。原因と修正案を出して。
このページに出てきた言葉
- クリップボード
- パソコンが「直前にコピーした内容」を一時的に覚えておく場所。コピーとペーストの中継地点
- [Image #N] チップ
- Claude Codeの入力欄に画像を貼ると挿入される小さな識別子。Nはそのセッション内での画像連番
- iTerm2
- Mac用のターミナルアプリの1つ。標準のターミナル.appより高機能で、開発者の多くが入れ替えて使う
- スクショ
- スクリーンショットの略。画面の今映ってる内容を画像として保存・コピーする操作
- ブレークポイント
- 「画面幅が何ピクセル以下になったらレイアウトを切り替える」という境目の値。レスポンシブWeb制作で使う
- トークン
- AIが文字や記号を数える単位。文字数に近い概念で、入力と出力の合計トークンで課金される