Claude Codeに画像パスを渡してスクリーンショットを説明させる — 10分で最初の1枚

スクリーンショットを文章で説明し直すの、地味に難しいですよね。

Claude Codeなら、画像ファイルの場所を1行で伝えて、その画像を説明してもらえます。この記事では機能を1つだけ、ローカルにある画像のパスをClaude Codeへ渡す方法を試します。

今日のゴールは、左右2色の練習画像を渡し、Claude Codeから「左は赤系、右は青系」と答えてもらうこと。10分ほどで試せる最小構成です。

更新日: 2026-08-22

この記事の対象者

• AIエージェントという言葉は聞いたけれど、まだ自分で動かしたことがない方
• Claude Codeをこれからターミナルで使ってみたい方
• エラー画面やUIの見た目を、毎回文章で説明するのが大変な方

今回はmacOS、Linux、WSLを主な対象にします。WSLは、Windowsの中でLinux環境を動かす仕組みです。Windowsをそのまま使う場合の画像貼り付け操作は、最後のFAQで触れます。

そもそもClaude Codeと画像パスとは

Claude Codeは、Anthropicが提供するAIエージェントです。

AIエージェントとは、質問へ答えるだけでなく、必要なファイルを読んだり、コマンドを実行したりしながら作業を進められるAIのこと。公式ドキュメントでは、Claude Codeはコードベースを読み、ファイル編集やコマンド実行、開発ツールとの連携ができると説明されています。

この記事ではCLI版を使います。CLIは、ターミナルで文字を打って操作する方式です。ターミナルは、パソコンへ文字で指示を出すためのアプリです。macOSなら「ターミナル」、Windowsなら「PowerShell」や「Windows Terminal」が身近ですね。

画像パスは、画像ファイルがパソコンのどこにあるかを示す住所です。たとえば、次のような文字列です。

/Users/example/claude-image-practice/sample-screen.png

先頭から省略せず書いたものを絶対パスと呼びます。今回は迷いを減らすため、この絶対パスを使います。

なぜ画像を渡せると便利なのか

エラー画面、レイアウト崩れ、設計図、モックアップ。こういう情報は、文字だけで説明しようとすると時間がかかります。

「右上のボタンが少し下へずれていて、背景は青で、その下に赤い警告があって…」と書くより、画像そのものを文脈として渡した方が早い場面があります。

ただし、ここは大事です。画像は正解の保証ではなく、相談の入口です。Claude Codeの説明は、必ず元画像、ログ、再現手順と照らし合わせます。

画像を渡す前の安全確認3項目

実際のスクリーンショットを使う前に、次の3点だけは確認しておきます。

1. APIキー、アクセストークン、パスワードが写っていないか
2. 氏名、メールアドレス、住所などの個人情報が写っていないか
3. 社内限定のURL、顧客名、未公開コードが写っていないか

写っている場合は、必要な場所だけ切り出すか、読めないように塗りつぶしてから使います。

今回は外部の画像を使いません。自分のパソコンで左右2色のダミーPNGを作るので、この3項目を気にせず操作に集中できます。

手順1: Claude Codeをインストールする

すでにclaude --versionでバージョンが表示される方は、この手順を飛ばしてください。

macOS、Linux、WSLでは、公式のNative Installを使えます。ターミナルへ次を貼り付けます。

curl -fsSL https://claude.ai/install.sh | bash

これはAnthropic公式のインストール用スクリプトを取得して実行するコマンドです。会社のパソコンでは、ソフトウェアのインストール規則を先に確認してください。

終わったら、インストールできたか確認します。

claude --version

バージョン番号とClaude Codeが表示されれば、インストール確認は完了です。

公式Setupによると、Claude Codeの利用にはPro、Max、Team、Enterprise、Consoleのいずれかのアカウント、または対応する外部プロバイダーが必要です。無料のClaude.aiプランにはClaude Codeが含まれません。初回のclaude起動時にログイン案内が出たら、画面の案内に従います。

手順2: 練習画像を作る

まず、作業用フォルダを作ります。フォルダは、ファイルをまとめて置く箱だと思えば大丈夫です。

mkdir -p ~/claude-image-practice
cd ~/claude-image-practice

続いて、Python 3の標準機能だけで、左半分が赤、右半分が青のPNG画像を作ります。外部ライブラリの追加は不要です。

python3 - <<'PY'
import struct
import zlib

def chunk(kind, data):
    payload = kind + data
    return struct.pack(">I", len(data)) + payload + struct.pack(">I", zlib.crc32(payload))

width, height = 320, 160
rows = []
for _y in range(height):
    row = bytearray([0])
    for x in range(width):
        row.extend((235, 87, 87) if x < width // 2 else (66, 135, 245))
    rows.append(bytes(row))

png = b"\x89PNG\r\n\x1a\n"
png += chunk(b"IHDR", struct.pack(">IIBBBBB", width, height, 8, 2, 0, 0, 0))
png += chunk(b"IDAT", zlib.compress(b"".join(rows), 9))
png += chunk(b"IEND", b"")

with open("sample-screen.png", "wb") as image:
    image.write(png)

print("created sample-screen.png")
PY

次の2コマンドで、画像が作られた場所を確認します。

pwd
ls -l sample-screen.png

pwdは、今いるフォルダの絶対パスを表示するコマンドです。たとえば次のように表示されます。

/Users/example/claude-image-practice

この末尾へ/sample-screen.pngを足したものが、今回Claude Codeへ渡す画像パスです。

/Users/example/claude-image-practice/sample-screen.png

exampleの部分は人によって違います。上の例をそのまま使わず、自分のpwdの結果を使ってください。

手順3: Claude Codeを起動する

同じフォルダで、次を実行します。

claude

ここから入力場所が変わります。

• mkdir、cd、pwd、claudeは通常のターミナルへ入力
• 次の質問文は、claudeを起動した後のClaude Code入力欄へ入力

最初はこの境目でつまずきやすいんですが、わからなくて当然です。画面にClaude Codeの入力欄が出てから、次へ進みます。

手順4: 画像パスと質問を1回で送る

Claude Codeの入力欄へ、次を貼り付けます。画像パスの部分だけ、自分のpwdの結果に置き換えます。

この画像を読んでください: /Users/example/claude-image-practice/sample-screen.png
左半分と右半分の色を、それぞれ1行で答えてください。ファイルは変更しないでください。

公式のCommon workflowsでは、Claude Codeへ画像を渡す方法として、ドラッグ&ドロップ、クリップボードからの貼り付け、画像パスの提示が案内されています。今回は、そのうち画像パスを提示する方法だけを使っています。

成功確認

言葉が完全に同じでなくても、次の2点が取れていれば成功です。

左半分: 赤系
右半分: 青系

「コーラルレッド」「明るい赤」「青」「ブルー」のような表現の違いは問題ありません。元画像の左右と合っているか、自分の目で答え合わせします。

ここで起きたことは小さいです。でも、AIエージェントに文字だけでなく、ローカルの画像を文脈として1つ渡せた。これが今日の初回成功です。

つまずきポイント7件

1. claude: command not foundと出る

インストール直後で、ターミナルが新しい設定をまだ読み込んでいない可能性があります。ターミナルをいったん閉じて開き直し、次を試します。

claude --version

それでも出る場合は、公式のインストールトラブルシューティングを確認します。

2. python3: command not foundと出る

Python 3が入っていない環境です。今回のPythonは練習画像を作るためだけに使っています。自分で安全なスクリーンショットを1枚撮り、sample-screen.pngという名前で練習フォルダへ置いても進められます。

3. 画像が見つからないと言われる

通常のターミナルで、ファイルがあるか確認します。

cd ~/claude-image-practice
pwd
ls -l sample-screen.png

lsにファイル名が出なければ、手順2から作り直します。

4. /Users/example/...をそのまま使っている

exampleは説明用のダミー名です。pwdで表示された自分のパスへ置き換えます。

パスに空白が含まれていて認識されない場合は、質問文の中でパスをバッククォートで囲みます。

この画像を読んでください: `/path/with space/sample-screen.png`

5. 質問文を通常のターミナルへ入力した

質問文は、claudeを実行した後のClaude Code入力欄へ送ります。通常のターミナルへ日本語の質問文だけを入れても、シェルはコマンドとして解釈しようとして失敗します。

6. ログイン画面で止まる

初回起動時はログインが必要です。公式の案内に従って認証します。会社やチーム管理の環境では、指定されたアカウントや外部プロバイダーを使います。

7. 色は答えたが、実際の原因まで断定した

画像から読み取れることと、不具合の原因は別です。実務のエラー画面なら、次のように「見えている事実」と「仮説」を分けてもらうと確認しやすくなります。

画像から直接確認できる事実と、原因の仮説を分けてください。
仮説ごとに、次に確認するログやコマンドを1つ示してください。
ファイルは変更しないでください。

最終判断は、実際のログや再現手順と照合して人間が行います。

この機能が向かない場面

エラー文を選択してコピーできるなら、画像ではなくテキストで渡す方が速く、文字の読み間違いも減らせる場合があります。

次のエラーを、原因の候補と確認手順に分けて説明してください。

ここにエラー文を貼る

画像が向いているのは、レイアウト、色、図、ボタンの位置、文字にしづらい崩れ方など、見た目そのものが情報になる場面です。

無料の汎用的なやり方でも、まず1枚を渡して説明を得るところまでは十分に役立ちます。その先で、自分のプロジェクトの制約や過去の判断まで踏まえさせるには、画像だけでなく、関連ファイルやログ、プロジェクト固有の指示を別途渡す必要があります。

よくある質問

ドラッグ&ドロップでも渡せますか

公式Common workflowsでは、Claude Codeのウィンドウへ画像をドラッグ&ドロップする方法も案内されています。この記事では操作を1本に絞るため、画像パスだけを使いました。

クリップボードから貼り付けられますか

公式Interactive modeでは、クリップボード画像の貼り付けとしてCtrl+V、iTerm2ではCmd+V、WindowsとWSLではAlt+Vが案内されています。ターミナル側がキーを受け取る場合があるので、うまくいかない時は今回の画像パス方式がわかりやすいです。

画像を渡すと、勝手にファイルが変更されますか

画像を説明してもらうだけなら、プロンプトに「ファイルは変更しないでください」と書いて目的を明確にします。ただし、文章だけを強制的な安全境界とは考えません。重要なプロジェクトでは、権限設定や読み取り専用の作業環境も併用します。

画像の説明が間違うことはありますか

あります。小さい文字、ぼやけた表示、似た色、画像外にある前提は誤認や見落としにつながります。必要部分を大きく切り出し、元画像と答えを照合してください。

筆者環境で確認した範囲

2026-08-22に、次を確認しました。

• Claude Code 2.1.224
• Pythonスクリプトの構文チェック
• 320×160、8-bit RGB、左赤・右青のPNG生成
• 画像の絶対パスを含むClaude Codeコマンドの実行開始

ただし、筆者環境ではOAuthセッションの期限切れによりモデルの回答取得まで進めませんでした。そのため、色の回答部分は筆者環境で動作未確認です。画像パスを提示できること、画像を扱う3方式、貼り付けキーは、下記の公式ドキュメントと照合しています。

まとめ

今回使った機能は1つだけです。

1. 安全な練習画像を用意する
2. claudeを起動する
3. 画像の絶対パスと質問をClaude Code入力欄へ送る
4. 左右の色を元画像と照合する

画像を渡せるようになると、画面の見た目を文章へ変換する時間を省けます。一方で、画像の説明は最終判断ではありません。まずダミー画像で成功し、その後に秘密情報を隠した自分のスクリーンショット1枚で同じ質問を試す。この順番なら、無理なく進められるかなと思います。

参考リンク

• Claude Code Overview
• Claude Code Common workflows — Work with images
• Claude Code Interactive mode — General controls
• Claude Code Setup

生成AI活用エンジニア&3児のパパ。AI×開発の実践知を毎日発信しています → X