Claude Codeを使い始めたばかりで、画像をAIに渡したことがない人向け
スクショを見せて改善案を出してほしい、エラー画面の意味を読み取らせたい、参考にしたいデザイン画像をそのまま渡したい、といった「文字で説明するより画像見せたほうが早い」場面で使う。スクショはクリップボードに直接コピーされるキー（Macなら `Shift+Cmd+Ctrl+4`、Windowsなら `Win+Shift+S`）で撮ってから、会話入力欄で貼り付けて、続けて「これを見て○○してほしい」と質問文を1行添えて送信する
Claude Codeに見せたいスクショやデザイン画像があるとき、わざわざ画像をフォルダに保存して、その場所を文字で打ち込んで、と段取りを踏まなくていい。スマホやMacのスクショと同じ感覚で、画像をコピーして会話入力欄にそのまま貼り付けると、Claudeが画像を見て答えてくれる。
「ここのデザインだけ直したい」「このエラー画面の意味を教えて」みたいな、文字で説明するより画像見せたほうが早い場面で一気に効く機能です。
噛み砕くと
会話入力欄を、メッセージアプリのトーク画面と同じものだと思ってください。LINEに画像を貼って一言添えて送るあの動きが、そのままClaude Codeでもできます。違いは、画像をコピーして貼り付ける、ファイルを画面にドラッグして落とす、フォルダの中の画像を「これ見て」と名前で呼ぶ、の3通りの渡し方が用意されている点です。
渡された画像はClaudeが内容を見て理解します。文字で説明文を別に書かなくても、画像そのものを材料にして返事をしてくれる。ただし「これを見て何をしてほしいか」は一言添えないと、Claudeが「これは何ですか？」と聞き返してきます。画像と質問はセットで送るのが基本です。
大事な前提：画像が貼られたか確認できる目印がある
画像を会話入力欄に貼り付けると、文字の代わりに [Image #1] みたいな小さなラベルが入力欄に挿入されます。公式ドキュメントではこのラベルを「チップ」と呼んでいます。画像そのものは表示されませんが、このラベルが「ここに画像が1枚貼られています」という目印です。
2枚目を貼ると [Image #2] が増えます。ラベルが出ていなければ画像として認識されていない、出ていれば成功、と判断できます。
「ブログのトップページ改善案を画像付きでお願いする」を例に、実際の手順を見る
ブログのトップページがイマイチで、Claudeに改善案を出してもらう想定で進めます。スクショは撮るけど、ファイル保存して名前を考えて、みたいな手間は省きたい。そのまま貼って終わらせる手順です。
ステップ1: ブログを開いてスクショを撮る（クリップボードに直接コピーするキーを使う）
ここで使うキーが大事です。撮ったスクショをそのままClaude Codeに貼り付けたいので、ファイル保存ではなくクリップボードに入るほうのキーを使います。
- Mac:
Shift+Cmd+Ctrl+4で範囲選択。Ctrlを足すと、デスクトップにファイルを作らずクリップボードに直接コピーされます - Windows:
Win+Shift+Sで範囲選択。撮った画像は自動でクリップボードに入ります
Macで Ctrl抜きの Shift+Cmd+4 を使うとデスクトップにPNGファイルが保存されるだけで、クリップボードには入りません。そのまま会話入力欄で貼り付けようとしても何も起きないので、Ctrlを足すのを忘れないこと。私もここでよく詰まります。
ステップ2: Claude Codeを起動する
ターミナルでブログのフォルダに入って claude を打って起動。会話入力欄が出てきます。
$ cd ~/projects/my-blog
$ claudeステップ3: 画像を貼り付ける
会話入力欄にカーソルを置いた状態で貼り付けます。公式ドキュメントの仕様は次の順序です。
Ctrl+V＝ Mac・Windows共通のデフォルト。まずこれを試すCmd+V＝ iTerm2を使っているMacのみ。標準ターミナルでは効かないことが多いAlt+V＝ WindowsでCtrl+Vが効かないときの代替
Mac標準のターミナルアプリでも Ctrl+V で貼れます。Cmd+Vは普段のコピー＆ペーストの感覚で押してしまいがちですが、Claude Codeの会話入力欄では「iTerm2のみ」と覚えておくと事故が減ります。うまく貼れると入力欄に [Image #1] というラベルが現れます。
ステップ4: 質問文を続けて書く
ラベルの後ろに、見てほしいことを文章で書き足します。
[Image #1] このトップページのデザインを見て、ファーストビューの改善案を3つ出してください。配色とレイアウトの観点でお願いします。ここで初心者がやりがちな勘違いがあります。画像を貼っただけでEnterを押すと、Claudeは「これは何の画像ですか？何をしてほしいですか？」と聞き返してくるので、必ず質問文をセットで書く。画像は質問の材料、文字は依頼内容、と役割を分けるイメージです。
ステップ5: 送信して回答を待つ
Enterで送信。ClaudeはCSSをいじる前にデザインの所感を文字で返してきます。「ヘッダーが大きすぎてファーストビューを圧迫している」「色数が多くて視線が散る」みたいな具体的な指摘が画像を見たうえで返ってきます。
ステップ6: 別の渡し方も試す（ドラッグ＆ドロップと@参照）
クリップボード経由が苦手なターミナル環境もあります。その場合は2通り代わりがあります。1つはFinder/エクスプローラーから画像ファイルを会話入力欄に直接ドラッグして落とす方法。もう1つは画像をプロジェクトに保存しておいて、@design.png のようにアットマーク＋ファイル名で呼ぶ方法です。@で呼ぶときの場所は、Claude Codeを起動したフォルダから見た位置で書きます。
つまり Image / Screenshot Input は何をしてくれるのか
- やってくれる: 貼り付け／ドラッグ／@参照のどれでも画像をClaudeに見せて、画像の中身を踏まえて返事を返す。対応はPNG・JPG・GIF・WebPの4種
- やってくれない: 貼った画像を勝手に解釈して何かをすること。質問文を添えないと「これは何ですか？」と聞き返される
- 意味が薄い場面: 文字で十分伝わる依頼。たとえば「Reactのuseステートの書き方教えて」みたいな質問に画像は要らない
使いどころ3シナリオ（具体題材で再現）
シナリオ1: 自分の料理ブログのトップを直したいとき
料理ブログのトップページのスクショを Shift+Cmd+Ctrl+4（Mac）または Win+Shift+S（Windows）で撮って、Claude Codeにそのまま貼り付けて「ファーストビューの第一印象を3行で書いて、改善案も3つ」と頼む。文字でレイアウトを説明する手間が消えるし、Claudeも実物を見てから判断するので返事の精度が上がります。CSSを直す前段の壁打ち相手として、ふだん2〜3往復必要な会話が1往復で済みます。
シナリオ2: 家計簿アプリのエラー画面の意味が分からないとき
家計簿アプリのビルド中に赤い文字でエラーが出たけど、ターミナルの表示が長くて要点が読めない。画面のスクショを撮ってClaude Codeに貼って「このエラーの意味と直し方を教えて」と送ると、画像内のスタックトレースまで読み取って具体的な原因候補を返してきます。コピペで貼り付けるより画面ごと見せるほうが早い場面です。
シナリオ3: 参考にしたい競合サイトのデザインをそのまま渡したいとき
「このサイトみたいなヒーローエリアにしたい」と思ったら、競合のスクショをClaude Codeに貼って「これに寄せたデザイン案をHTMLとCSSで書いて」と頼む。文字で「中央に大きい見出し、左右に余白、背景は薄いベージュ」と説明するより、画像1枚渡したほうが情報量が10倍多い。Claude側もブランド資産の単純コピーは断ってくるので、参考としての使い方になります。
初心者が踏みやすい落とし穴
- Macで
Shift+Cmd+4だけで撮ってしまう。これだとデスクトップにPNGファイルが保存されるだけで、クリップボードには入りません。会話入力欄で貼り付けようとしても無反応。Ctrlを足したShift+Cmd+Ctrl+4を使う - Macで
Cmd+Vを使ってしまう。デフォルトの貼り付けはCtrl+Vです。Cmd+VはiTerm2のみ。Mac標準のターミナルでは効かないことが多いので、迷ったらCtrl+V - 画像のつもりがファイルの場所が文字で貼られる。ターミナルアプリによっては画像コピーがファイル位置の文字列として扱われる。
[Image #1]ラベルが出なかったら認識されていないので、ドラッグ＆ドロップか@ファイル名で渡し直す - 画像だけ貼ってEnterを押す。Claudeは「これは何の画像ですか？」と返してくるだけ。画像と質問文はワンセットで送る
- 10枚20枚まとめて貼る。1メッセージに何枚でも入るが、画像は文字より大量にコンテキスト（会話の記憶領域）を食う。3〜5枚を目安に、関係ないものは送らない
- サポート外の形式を貼る。対応はPNG・JPG・GIF・WebPの4種だけ。HEIC（iPhone標準形式）やSVG、PDFは渡しても画像として読めない。事前にPNGに書き出してから貼る
@design.pngの場所指定が間違っている。@で呼ぶときの場所はClaude Codeを起動したフォルダから見た位置。違うフォルダの画像を呼びたいときは@assets/design.pngのように相対位置で書く- 機密情報が映ったスクショをそのまま貼る。本番のAPIキー・顧客名・社内情報がスクショに写り込んでないか確認してから送る。一度送るとAnthropicの会話ログには残ります
書き方
# 1. クリップボードにコピーされるキーでスクショを撮る
Mac: Shift+Cmd+Ctrl+4 で範囲選択（Ctrl抜きの Shift+Cmd+4 はデスクトップに保存されるだけでクリップボードには入らない）
Windows: Win+Shift+S で範囲選択（自動でクリップボードにコピー）
# 2. 会話入力欄で貼り付ける
Ctrl+V （Mac・Windows共通のデフォルト）
Cmd+V （iTerm2のみ）
Alt+V （Windowsで Ctrl+V が効かないときの代替）
# 3. ラベルの後に質問文を書く
[Image #1] このトップページのデザインを見て、ファーストビューの改善案を3つ出してください。
# またはドラッグ＆ドロップ
画像ファイルを会話入力欄にドラッグして落とす → 質問文を書く
# またはファイル参照
@design.png ファーストビューの改善案を3つ出してくださいやってみるとこうなる
入力
[Image #1] このトップページのデザインを見て、ファーストビューの改善案を3つ出してください。配色とレイアウトの観点でお願いします。出力例
画像を確認しました。ファーストビューの第一印象は「情報量が多くて視線が散る」です。改善案を3つ出します。
1. ヘッダーの高さを現在の160pxから80pxに縮める。ファーストビューの上部4割をヘッダーが占めていて、メインの記事一覧が画面外に押し出されています
2. 背景色を白とアクセント色の2色構成に絞る。現状4色使われていて視線の優先順位が分からなくなっています
3. メインビジュアルの上に1行のキャッチコピーを置く。今は何を扱うブログか開いた瞬間に伝わりません
具体的なCSSの書き換え案を出しましょうか？このページに出てきた言葉
- クリップボード
- コピーした内容を一時的に置いておくメモリ。コピー操作で内容が入り、貼り付け操作で取り出せる
- チップ（[Image #N]）
- 入力欄で画像1枚を表す小さなラベル。画像本体の代わりに置かれて「ここに画像が貼られている」目印になる
- ターミナル
- 黒い画面で文字のコマンドを打ち込む画面。Macだと「ターミナル」アプリ、Windowsだと「コマンドプロンプト」「PowerShell」
- iTerm2
- Macでよく使われる、純正ターミナルより高機能なターミナルアプリ。無料
- ファーストビュー
- ページを開いたとき最初に画面に映る範囲のこと。スクロールせずに見える部分
- @参照
- 入力欄でアットマーク（@）に続けてファイル名を書くと、そのファイルをClaudeに渡せる仕組み。画像にも文書にも使える
- スタックトレース
- プログラムがエラーで止まったとき、どの関数のどこまで処理が進んでいたかの履歴一覧
- コンテキスト
- Claudeが今の会話で覚えている内容の量。画像はテキストよりここを大きく食う
- WebP
- Googleが作った画像形式。PNGより軽いがHEIC（iPhone標準）のように対応していないアプリもある
関連項目
公式ドキュメント
https://docs.claude.com/en/docs/claude-code/interactive-mode