Claude Codeで画像指示する方法【貼り付け方やできない時の対処法も紹介】

Claude Codeを使い始めたものの、画像を貼り付ける方法がわからず困っている人は多いですよね。Claude Codeではテキストだけで伝えるより、画像を見せながら指示したほうが意図が正確に伝わるため、画像貼り付けの方法を理解することは重要です。

ただ、ターミナルベースのツールなので「どこに画像を貼ればいいの？」と戸惑いがちです。とくにWindowsやWSL環境では、クリップボードからの貼り付けが思うようにいかないケースもあります。

そこでこの記事では実例も交え、Claude Codeで画像を貼り付けて指示する方法を詳しく解説します。OSごとの手順やうまくいかない場合の対処法も紹介するので、ぜひ参考にしてください。

Claude Codeの特徴をおさらいしておきたい人は、次の記事を参考にしてください。

Claude Codeで画像を使って指示する3つの方法

ここからは、Claude Codeで画像を使って指示を出す3つの方法を解説します。

環境や状況に応じて、自分に合った方法を選んでください。

ファイルパスを指定して画像を読み込む

ファイルパスを指定する方法は、もっとも安定して画像を入力できる手段です。ローカルに保存している画像ファイルのパスを、テキストの指示と一緒に入力するだけで読み込めます。

プロンプト欄に以下のように入力するだけで完了できるため、ターミナルでの操作に慣れていれば難しくありません。

この画像のUIを参考にして、同じデザインのボタンを実装してください。
/Users/username/Desktop/design.png

なお、パスは絶対パスでも相対パスでも機能します。Windowsの場合は C:\Users\username\Desktop\design.png の形式で指定してください。

また、画像が大量にある場合も、複数のパスを並べて入力するだけで一括送信できます。ファイル管理がしやすく、後から再利用もしやすいため、定期的に同じ画像を参照する場面に向いています。

クリップボードから画像を貼り付ける

スクリーンショットを撮ってそのまま貼り付けたい場合は、クリップボード経由が手軽です。Claude Codeのチャット欄でCtrl+V（MacもCmd+VではなくCtrl+V）を押すと、クリップボードの画像を直接貼り付けられます。。

スクリーンショットを撮影してから保存せずに貼り付けられるので、UIのバグを報告するときやエラー画面を見せたいときに便利です。

ただし、ターミナルの種類によっては貼り付けが機能しない場合があります。とくにWindows環境のWSL（Windows Subsystem for Linux）上では制約がある点に注意が必要です。うまくいかない場合は、後述する「対処法」のセクションを参照してください。

ドラッグ＆ドロップで画像を入力する

ファイルをチャット欄に直接ドラッグ＆ドロップして入力する方法もあります。ファインダー（Mac）やエクスプローラー（Windows）からファイルを掴んで、チャット欄にドロップするだけで画像をコンテキストとして追加できます。

ドラッグ＆ドロップを利用すれば、ファイルパスを手入力する必要がなく、直感的に画像を共有可能です。また、複数画像をまとめて追加できる環境もあります。

ただし、ドラッグ＆ドロップが機能するかどうかはターミナルやClaude Codeのインターフェースの仕様に依存します。ブラウザベースのインターフェースでは比較的安定して動作しますが、標準ターミナルアプリでは対応していない場合もあります。

Claude Codeで画像指示する際の実例

ここでは、Claude Codeで画像指示を出す方法を、2つのシーン別に解説します。

スクリーンショットでUI修正を依頼する例

既存のUIに問題がある場合、スクリーンショットを見せながら修正を依頼するのが効果的です。テキストだけで「ボタンがずれている」と伝えるより、画像で現状を見せるほうが修正精度が格段に上がります。

たとえば、以下のようなプロンプトを入力します。

添付のスクリーンショットを確認してください。
ナビゲーションバーの「ログイン」ボタンが右にはみ出しています。
CSSを修正して、ボタンが中央に収まるようにしてください。
/Users/username/screenshot_nav.png

この形式で送ると、Claude Codeは画像を解析してレイアウトのずれを特定し、修正すべきCSSのプロパティを提案してくれます。「どこが問題か」を言葉で説明する必要がないため、やり取りの回数が減って作業効率を高めることが可能です。

スクリーンショットはOSの標準機能で手軽に撮影できます。MacはCmd+Shift+4、WindowsはWin+Shift+Sで撮影し、そのまま貼り付けるか保存してパスを指定するだけです。

デザイン画像から実装を指示する例

FigmaやAdobe XDなどのデザインツールで作成したモックアップ画像を見せて、実装を依頼することもできます。デザイナーが作成した仕様書を、そのままClaude Codeに渡して実装に落とし込めます。

具体的には、以下のようなプロンプトが効果的です。

添付の画像はサービスのトップページのデザインカンプです。
このデザインをHTMLとCSSで実装してください。
フォントはNoto Sans JP、カラーコードは画像から読み取ってください。
/Users/username/lp_design.png

デザインカンプをそのまま入力することで、色・レイアウト・余白などを一括で読み取ってもらえます。FigmaからエクスポートしたPNGやJPEGをそのまま使えるため、デザインと実装の連携がスムーズになります。

デザイン変更が頻繁に発生するプロジェクトでは、修正のたびに最新のデザインカンプを渡す運用にすると、手戻りを最小限に抑えることが可能です。

【OS別】Claude Codeに画像を貼り付ける手順

ここからは、画像の貼り付け手順を、下記のOS別に解説します。

Windowsでの貼り付け手順

Windowsでは、スクリーンショットを撮影してからクリップボード経由で貼り付ける流れが基本です。以下の手順で操作してください。

• Win+Shift+S でスクリーンショットを撮影する（範囲選択が可能）
• 撮影すると自動的にクリップボードにコピーされる
• Claude Codeのチャット欄にフォーカスを当てる

ファイルから入力したい場合は、エクスプローラーでファイルを右クリックして「パスのコピー」を選択し、チャット欄に貼り付けてパスを指定する方法も使えます。

ただし、Windowsネイティブ環境およびWSL環境では、クリップボードからの画像貼り付けは現時点で機能しません。Windowsで画像を送る場合は、ファイルに保存してからドラッグ＆ドロップかファイルパス指定を使用してください。詳しい対処法は後述の「対処法」セクションを確認してください。

WindowsでClaude Codeを使う方法を詳しく知りたい人は、次の記事を参考にしてください。

Macでの貼り付け手順

Macはスクリーンショット機能が充実しており、クリップボード貼り付けが非常にスムーズです。以下の手順で操作できます。

• Cmd+Ctrl+Shift+4で範囲を選択してスクリーンショットを撮影する（ControlキーはCmd+Shiftと同時に押す）
• 撮影と同時にクリップボードに直接コピーされる
• Claude Codeのチャット欄にフォーカスを当てる
• Ctrl+V で貼り付ける

Controlを組み合わせずにCmd+Shift+4で撮影した場合は、デスクトップにファイルが保存されます。その場合はFinderからファイルをドラッグ＆ドロップするか、ファイルパスを指定する方法に切り替えてください。

MacはWindowsと比べてクリップボード経由の貼り付けがとくに安定しており、スクリーンショットからそのまま貼り付ける運用が一番スムーズです。ターミナルアプリはiTerm2やmacOS標準のターミナルどちらでも動作します。

MacでClaude Codeを使う方法を詳しく知りたい人は、次の記事を参考にしてください。

Claude Codeに画像を貼り付けできない時の対処法

ここからは画像が貼り付けできないときの対処法を、次の原因別に解説します。

クリップボード経由で貼り付けできない場合

クリップボードからの貼り付けができない場合、まず確認すべきなのは「画像がクリップボードに正しくコピーされているか」です。画像ではなく、テキストがコピーされた状態では画像の貼り付けはできません。

Windowsの場合、Win+Shift+Sで撮影した後に通知が表示されます。その通知をクリックせずに貼り付けを試みた場合はクリップボードに入っていないこともあります。

対処法として、以下の手順を試してください。

ファイルパス指定はクリップボード経由より安定しているため、クリップボードで詰まった場合の第一の代替手段としておすすめです。

ファイル形式やサイズが原因の場合

Claude Codeが対応している画像形式は、PNG・JPEG・GIF・WebPです。BMP・TIFF・HEICなどの形式は認識されない場合があります。

ファイル形式が原因の場合は、対応形式に変換してから再度入力してください。Windowsであればペイント、Macであればプレビューアプリで簡単に変換できます。

サイズに関しては、1ファイルあたり5MBを超えると認識精度が下がるか、エラーが発生する場合があります。大きな画像ファイルは圧縮してから送りましょう。

画像圧縮におすすめのツールは、次のとおりです。

ターミナルの種類で制約がある場合

使用しているターミナルアプリによって、画像の貼り付けに対応していない場合があります。とくにWSL（Windows Subsystem for Linux）環境では制約が生じやすいです。

WSL上でLinux版のClaude Codeを使っている場合、クリップボードからの直接貼り付けはほぼ機能しません。代わりに以下の対処法を使ってください。

WSL環境ではファイルパス指定がもっとも確実な方法です。/mnt/c/ 以下にWindowsのファイルシステムがマウントされているので、そこに画像を置いてパスを指定するとスムーズに読み込めます。

Claude Codeで画像指示の精度を上げる4つのコツ

ここからはClaude Codeで画像指示の精度を上げるコツを、4つにまとめて解説します。

テキストで意図を補足する

画像を送る際は、必ずテキストで意図を補足してください。「この画像を見てください」だけでは、何をしてほしいのかClaude Codeが判断できません。

たとえば、エラー画面のスクリーンショットを送る場合でも、以下のように意図を明示する必要があります。

悪い例：

スクリーンショットを添付します。
/Users/username/error.png

良い例：

添付のスクリーンショットはReactアプリのコンソールエラーです。
エラーの原因を特定して、修正方法を教えてください。
/Users/username/error.png

テキストと画像を組み合わせることで、Claude Codeは画像のどの部分に注目すべきかを正確に把握できます。「左上のナビゲーション部分を参照してください」のように、注目箇所を具体的に伝えるとさらに精度を上げることが可能です。

Claude Codeで使えるプロンプトを詳しく知りたい人は、次の記事を参考にしてください。

1枚あたり5MB以内の容量で送る

画像ファイルのサイズは、1枚あたり5MB以内に抑えることをおすすめします。容量が大きすぎると処理が遅くなるか、エラーが発生する場合があるからです。

一般的なスクリーンショットは1〜3MB程度に収まることが多いです。デザインカンプや高解像度の写真を使う場合は、事前に圧縮することを意識してください。

容量を抑えつつ画質を保つには、PNG形式よりJPEG形式の方が圧縮率が高く効果的です。ただし、テキストが多く含まれるスクリーンショットはPNGの方が文字が鮮明に残ります。用途に応じて使い分けましょう。

1,000×1,000px以上のサイズで送る

解像度が低すぎる画像は、Claude Codeが細部を認識できない場合があります。テキスト・アイコン・細かいUI要素を正確に読み取ってもらうには、1,000×1,000px以上の解像度で送ることが目安です。

スマートフォンのスクリーンショットは2,000px以上あることが多く、そのまま送って問題ありません。また、MacのRetinaディスプレイのスクリーンショットも高解像度なので、そのまま使えます。

逆に、サムネイルや縮小した画像を送ると「文字が読めない」「細部が判断できない」という結果になりがちです。解像度を確認してから送るよう習慣づけましょう。

形式（PNG/JPEG/WebP）を使い分ける

用途によって適切なファイル形式が異なります。以下を参考に使い分けてください。

スクリーンショットはPNG形式がもっとも高精度に認識されます。テキストやコードの文字がつぶれにくく、Claude Codeが正確に内容を解析できます。写真やグラデーションが多いデザイン素材はJPEGで圧縮して送ると効率的です。

Claude Codeで画像指示する際によく抱く疑問

ここからは、Claude Codeで画像指示をする際によく挙がる疑問を4つにまとめて回答します。

一度に複数の画像を送れる？

複数の画像を一度に送ることは可能です。ファイルパスを複数並べて入力するだけで、まとめて入力できます。

以下のように、パスを改行して並べてください。

3枚の画像を比較して、デザインの違いを教えてください。
/Users/username/design_v1.png
/Users/username/design_v2.png
/Users/username/design_v3.png

ただし、一度に大量の画像を送ると処理が重くなることがあります。1回のプロンプトあたり3〜5枚程度に抑えると、レスポンスが安定します。また、合計ファイルサイズが大きくなりすぎないよう、1枚あたりの容量を抑えておくことも大切です。

動画も一緒に送れる？

現時点では、Claude Codeは動画ファイルの直接入力には対応していません。動画を使いたい場合は、動画から静止画を切り出してスクリーンショットとして送る方法を使ってください。

なお、動画の特定フレームを見せたい場合は、以下の方法で静止画を取得できます。

「動画のこの部分を修正したい」という場合は、問題のある場面を静止画で切り出して送ると、意図が正確に伝わります。

指示は日本語と英語どちらがいい？

日本語でも英語でも、Claude Codeは問題なく対応します。ただし、コードに関する指示は英語の方が精度が高くなる傾向があるのも事実です。

Claude Codeは英語の学習データが豊富なため、技術的な指示を英語で書くと回答がより具体的になることがあります。とくにエラーメッセージの解析や、特定フレームワークのコード生成では英語で指示した方が期待に近い結果を得やすいです。

一方、UIの修正依頼や「このデザインを実装して」といった直感的な指示は、日本語でも十分に機能します。慣れないうちは日本語で指示し、思うような回答が得られない場合に英語に切り替えてみるのがおすすめです。

画像の内容はどこまで認識される？

Claude Codeは画像内のテキスト・レイアウト・色・アイコン・コードなど、幅広い要素を認識できます。スクリーンショット内のエラーメッセージの文字列も読み取り可能です。

ただし、以下のケースでは認識精度が下がる場合があります。

スクリーンショットは明るく、文字がはっきり見える状態で送ることが精度を上げる基本です。認識が不正確だと感じたら、画像の品質を確認してから再度送ってみてください。

まとめ

Claude Codeで画像を使って指示する方法は、「ファイルパス指定」「クリップボード貼り付け」「ドラッグ＆ドロップ」の3つです。

環境やシーンに応じて使い分けることが、スムーズに作業を進めるコツです。うまく貼り付けられない場合は、ファイル形式・サイズ・ターミナルの種類を確認してください。

画像指示を活用すると、テキストだけでは伝わりにくいUIの修正やデザイン実装をClaude Codeに正確に伝えられます。この記事を参考に、ぜひ実践してみてください。