Claude Codeに画像を添付する方法4選｜添付できないときの対処法も解説

最終更新日:2026/06/16

Claude Codeに画像を添付すれば、エラー画面の診断やUIのレビューを言葉で説明する手間なく進められます。

この記事では、ドラッグ＆ドロップからURLの指定まで4つの添付方法と、添付できないときの原因・対処法をまとめています。

「Claude Codeを使い始めたが、画像の送り方がわからない」という方はぜひ参考にしてください。

Claude Codeの「画像機能（Vision）」とは何か

Claude CodeはAnthropicが開発したAIコーディングツールで、コマンドラインから利用するCLI（コマンドラインインターフェース）形式で提供されています。

その基盤にはマルチモーダルモデル（テキストと画像の両方を扱えるAI）が採用されており、文字だけでなく、スクリーンショット・図表・手書きのメモなども理解できます。

この機能を「Vision（ビジョン）」と呼びます。

ここでは、Visionで何ができるか・できないかを整理します。

Claude Codeでできること

Claude CodeのVision機能では、以下のようなことができます。

Claude CodeのVision機能は、文字の読み取り（OCR）と視覚的な内容の解釈（何が描かれているかの理解）を同時に行える点が特徴です。

レシートや名刺のような書類から、複雑なシステム構成図やUI画面まで、幅広い種類の画像に対応しています。

たとえば、デザイナーが作ったモックアップ画像を渡して「このデザインをReact + Tailwind CSSで実装して」と指示すれば、そのままコードを出力してもらえます。

Claude Codeでは画像生成はできない

注意点として、Claude Codeは「画像を読み取る」機能は持っていますが、「ゼロから画像を作り出す」機能は単体では搭載されていません。

「送った画像を理解する」ことと「新しい画像を出力する」ことは別の機能です。DALL-EやStable Diffusionのような画像生成AIとは役割が異なります。

ただし、MCP（Model Context Protocol）と呼ばれる外部ツール連携の仕組みを使えば、画像生成AIとClaude Codeを組み合わせることは可能です。画像生成が必要な場合は、MCP経由での連携を検討してください。

Claude Codeに画像を添付する方法4選

Claude Codeに画像を添付する方法は主に4つあります。

• ドラッグ＆ドロップする
• クリップボードに貼り付けて添付する
• ファイルパスで指定する
• URLで直接渡す

それぞれ詳しく解説します。

添付したい画像をドラッグ＆ドロップする

最もシンプルな方法が、ターミナルウィンドウへのドラッグ＆ドロップです。

デスクトップやフォルダに保存された画像ファイルを、Claude Codeのターミナル画面に直接ドラッグして離すだけで添付が完了します。特別なコマンドや設定は要りません。

UIモックアップやデザインファイルをそのまま共有したいときに向いています。画像を添付したら、続けてプロンプト（指示文）を入力して送信します。

以下のような指示と組み合わせると、具体的なコードをすぐに得られます。

なお、うまくドロップできない場合はShiftキーを押しながら操作することで、ファイルが別タブで開かずプロンプトに正しく添付されます。

画像をクリップボードに貼り付けてからClaude Codeに添付する

スクリーンショットを撮ってすぐに貼り付ける方法です。エラー画面やUIのキャプチャを、その場でClaude Codeに共有したいときに向いています。

Macの場合は、Cmd＋Shift＋4でスクリーンショットを撮影したあと、Claude Codeのプロンプト入力中にCtrl＋Vで貼り付けます。Windowsの場合は、Win＋Shift＋Sでキャプチャしたあと、Alt+Vで添付します。

貼り付けただけでは何を分析してほしいかが伝わらないため、以下のような指示文をセットで入力することが重要です。

「画面のどの部分に問題があるか」「何をしてほしいか」を一緒に伝えると、より精度の高い回答が返ってきます。

ファイルパスで指定する

ファイルを手元に移動せず、保存場所を直接指定する方法です。

パスとは、コンピューター上でファイルがある場所を示す文字列のことです。（例：/Users/yamada/Desktop/design.png）

プロンプトの中にパスを入力すると、Claude Codeがそのファイルを読み込みます。いくつもの画像を連続で参照するときや、作業フォルダ内の画像をまとめて確認させたいときに向いています。

パス指定では、Claude Codeが動いているターミナルの作業ディレクトリを基準に相対パスも使えます。

「./」から始めると、現在の作業フォルダ内のファイルを指定できます。

画像をURLで直接渡す

Web上に公開されている画像のURLを、そのままプロンプトに貼り付ける方法です。画像をダウンロードしなくてもその場で分析できます。

競合サイトのUIや、公開されているデザイン参考画像の調査に向いています。

ただし、ログインが必要なURL（社内GitLabやNotionのプライベートページなど）は参照できません。外部からアクセスできる公開URLのみが対象です。

社内ツールの画像を使いたい場合は、先にダウンロードしてからファイルパス指定かドラッグ＆ドロップで渡してください。

Claude Codeに画像が添付できないときの原因と対処法

うまくClaude Codeに画像を添付できない場合は、以下の原因が考えられます。

それぞれの対処法を試してみてください。

画像がクリップボードに正しく貼り付けられていない

クリップボード貼り付けで画像が添付できない場合、スクリーンショットがクリップボードではなくファイルとして保存されている可能性があります。

Macでは、Cmd＋Shift＋4で撮影するとデスクトップにファイルが保存されます。クリップボードに送るには、同じショートカットにCtrlを加えた「Cmd＋Ctrl＋Shift＋4」で撮影してください。

Windowsの場合、Win＋Shift＋Sで撮影した画像をAlt+Vで貼り付けます。Ctrl＋Vを使用すると、ターミナルがテキスト貼り付けとして処理してしまうため、画像が貼り付けられない場合があります。

それでも貼り付けられない場合は、画像をいったんデスクトップに保存し、ドラッグ＆ドロップまたはファイルパス指定で渡す方法に切り替えましょう。

ファイル形式・サイズがClaude Codeに対応していない

Claude CodeがサポートするファイルはJPEG・PNG・GIF・WebPの4形式です。

これ以外の形式（たとえばHEIC・BMP・TIFFなど）は読み込めません。

iPhoneで撮影した写真はデフォルトでHEIC形式になっているため、変換が必要です。Macであれば「プレビュー」アプリでPNGやJPEGに書き出しましょう。

サイズについては、1枚あたり5MB・最大解像度8,000×8,000ピクセルが上限です。

これを超えると以下のエラーが表示されます。

このエラーが出た場合は、画像を縮小してから再度送信してください。MacではプレビューアプリでもWindowsのペイントでも、サイズ変更が可能です。

また、画面全体のキャプチャより、エラー箇所やUIの一部分だけを切り取ったほうが、画像サイズが小さくなり、Claude Codeの解析精度も上がります。

セッションが破損している

同じセッション（会話）の中で画像エラーが繰り返し発生するケースがあります。

これは会話のコンテキスト（やり取りの履歴）が壊れた状態になっており、一度エラーが出るとそれ以降の操作が続けて失敗することがあります。

解決策は2つです。まず、/rewindコマンドでエラー直前の状態に戻します。それでも改善しない場合は/clearコマンドで会話履歴をリセットし、新しいセッションとして画像を再送信してください。

Claude Codeのバージョンが古い

Claude Codeは定期的にアップデートが配信されており、古いバージョンでは画像添付が動作しない場合があります。

たとえば、ターミナル上で添付画像をプレビューできる機能はv2.0.73から追加されました。

以下のコマンドで最新バージョンに更新できます。

Shell

npm install -g @anthropic-ai/claude-code@latest

更新後、ターミナルを再起動して再度試してください。

エラーの原因がわからないときは

上記4つをすべて試しても解決しない場合は、デバッグログを使って詳細を確認します。

ターミナルで以下のコマンドを入力してClaude Codeを起動してください。

Shell

ANTHROPIC_LOG_LEVEL=debug claude

これは「詳細なログを出力する」モードで起動する設定です。通常は表示されないエラーの詳細情報がターミナルに出力されるため、何が原因かを特定しやすくなります。

ログを見てもわからない場合は、Anthropicの公式ドキュメント（https://docs.anthropic.com）で同様のエラー報告を検索してください。既知のバグであれば、回避策が掲載されている場合があります。

それでも解決しない場合は、公式ページのサポートページからエラーの内容を報告し、対応を仰いでください。

まとめ

この記事では、Claude Codeに画像を添付する4つの方法と、添付できないときの対処法を解説しました。

Claude CodeのVision機能を使うと、エラー画面の診断・UIレビュー・帳票のOCRなど、テキストだけでは時間のかかる作業をスムーズに進められます。

画像を添付する際は、どの方法で渡すかだけでなく、「何を分析してほしいか」を具体的に指示文に含めることが精度向上のポイントです。

添付できないときは、ファイル形式・サイズ・バージョンの順に確認していくと原因が見つかりやすくなります。まずスクリーンショット1枚を貼り付けるところから試してみてください。

アイスマイリーでは、生成AI のサービス比較と企業一覧（画像生成AI）を無料配布しています。課題や目的に応じたサービスを比較検討できますので、ぜひこの機会にお問い合わせください。

AIsmiley編集部

株式会社アイスマイリーが運営するAIポータルメディア「AIsmiley」は、AIの専門家によるコンテンツ配信とプロダクト紹介を行うWebメディアです。AI資格を保有した編集部がDX推進の事例や人工知能ソリューションの活用方法、ニュース、トレンド情報を発信しています。

・Facebookでも発信しています @AIsmiley.inc
・Xもフォローください @AIsmiley_inc
・Youtubeのチャンネル登録もお願いいたします@aismiley
メルマガに登録する