コンテンツにスキップ

Claude Code 完全ガイド

Claude Codeに画像を添付する方法：貼り付け・ドラッグ・パス指定

対象 / ポイント

対象: エラー画面、UIモック、図表などをClaude Codeへ渡したい開発者

ポイント:

  • クリップボード画像はmacOS/LinuxでCtrl+V、WindowsでAlt+Vを使う
  • 画像ファイルはターミナルへドラッグするか、プロンプトでパスを指定できる
  • サイズエラーでは不要部分を切り出し、長辺2,000pxを目安に縮小する

3つの添付方法

1. クリップボードから貼り付ける

エラー画面やブラウザ表示をすぐ共有する方法だ。

  1. Cmd+Shift+4などで画面をコピーする
  2. Claude Codeの入力欄でCtrl+Vを押す

注意: ターミナルの画像貼り付けはCmd+VではなくCtrl+Vを使う。

  1. Win+Shift+Sで画面をコピーする
  2. Claude Codeの入力欄でAlt+Vを押す
  1. スクリーンショットをクリップボードへコピーする
  2. Claude Codeの入力欄でCtrl+Vを押す

Claude Codeの現行キーバインドでは、chat:imagePasteがCtrl+V、Windowsの代替がAlt+Vとして定義されている1。

貼り付けに成功すると[Image #1]のようなチップが表示される。チップが出る前に送信しない。

2. ファイルをドラッグ＆ドロップする

FinderやExplorerから画像をターミナルへドラッグする。Figmaの書き出し、保存済みスクリーンショット、デザイン比較に向く。

[画像をドラッグ]
この画面をReactとCSSで再現して。最初にレイアウト構造を説明して。

ターミナルやホストアプリによっては、ドラッグが画像添付ではなくパス文字列になる。その場合も、Claude Codeが読めるローカルパスなら次の方法として利用できる。

3. ファイルパスを指定する

リポジトリ内の画像や、複数画像を再現可能な形で渡す方法だ。

./screenshots/before.png と ./screenshots/after.png を比較し、
UIの回帰を重要度順に列挙して。

絶対パスも使える。

/tmp/repro/error.png を読み、表示されているエラーと
関連しそうなコードを変更せずに調査して。

パスに空白がある場合は引用符で囲むか、ターミナルの補完を使う。Claude Codeの作業範囲外にあるファイルは、読み取り許可を求められる場合がある。

方法の選び方

状況方法理由
今見ているエラー画面貼り付け撮影から共有までが速い
Figmaなどから書き出した1枚ドラッグファイル選択が直感的
リポジトリ内の画像パスプロンプトを再実行しやすい
before / after比較パス対応関係を明示しやすい
画像の一部だけが重要切り出して貼り付けノイズと容量を減らせる

画像と一緒に何を伝えるか

画像だけでは、どこを直すか、何を維持するかが曖昧になる。目的と制約を添える。

[Image #1]
対象はモバイル幅390px。
ヘッダーと検索カードの余白だけを画像に合わせる。
色、フォント、記事カードのDOM構造は変更しない。
実装前に差分候補を3点以内で説明して。

エラー画面では再現手順も付ける。

[Image #1]
1. 設定画面を開く
2. 保存を2回押す
3. このエラーが出る
ログと`src/settings/`を読み、原因を特定してから修正案を出して。

Anthropicのベストプラクティスも、スクリーンショットやモックなど豊かな文脈を渡すことを勧めている3。

対応形式とサイズ制限

一般的に使う形式はJPEG、PNG、GIF、WebPだ。スクリーンショットや文字を含むUIはPNG、写真はJPEGまたはWebPが扱いやすい。

公式エラーリファレンスの現行上限は次の通りだ2。

  • 画像1枚では長辺8,000pxまで
  • コンテキストに複数画像がある場合は長辺2,000pxまで
  • APIリクエスト全体は30MBまで

Claude Codeは大きすぎる貼り付け画像を縮小する場合があるが、会話全体の画像と文脈が大きければ失敗する。

サイズエラーが出たら次の順で直す。

  1. Escを2回押し、画像を追加した直前の状態へ戻る
  2. 問題箇所だけを切り出す
  3. 長辺を2,000px以下へ縮小する
  4. 現在の問いに不要な画像を外す
  5. 画像を新しい会話へ分ける

ImageMagickを使う例は次の通りだ。元ファイルを上書きしない。

magick input.png -resize '2000x2000>' output.png

添付画像を開いて確認する

画像チップやリンクは、macOSではCmd+Click、Windows/LinuxではCtrl+Clickで開ける。実際の動作はターミナルとホストアプリに依存する1。

画像が添付されたか不安な場合は、送信前に[Image #N]が表示されたことを確認する。送信後は「画像内の左上にある見出しを読み取って」と依頼すれば、対象を認識しているかを変更なしで検査できる。

トラブルシューティング

ショートカットを押しても何も起きない

  • macOS/LinuxでCmd+VではなくCtrl+Vを使う
  • WindowsではAlt+Vを使う
  • クリップボードにファイルパスではなく画像データがあるか確認する
  • ターミナルの独自キーバインドと競合していないか確認する
  • 代替としてファイルを保存し、パスを指定する

画像ではなく文字列が貼り付く

コピー元が画像データをクリップボードへ入れていない可能性がある。スクリーンショット機能で撮り直すか、一度PNGへ保存してパスを渡す。

複数画像で失敗する

各画像が2,000px以下でも、合計30MBや会話全体の文脈で失敗する。比較に必要な2枚だけへ絞り、残りは別ターンまたは別会話へ分ける。

まとめ

  • すぐ共有する画像はCtrl+VまたはWindowsのAlt+V
  • 保存済みファイルはドラッグまたはパス指定
  • 画像だけでなく目的、対象範囲、維持する条件を伝える
  • エラー時は切り出し、2,000px以下、30MB以下を目安に整理する

添付方法より、画像のどこを見て何を変えるかを明示する方が結果を大きく左右する。

関連記事

  1. Customize keyboard shortcuts — Claude Code Docs ↩↩

  2. Error reference: Image was too large — Claude Code Docs ↩

  3. Best practices: Provide rich content — Claude Code Docs ↩