「ボタンの位置が 2px ずれている」のスクリーンショットを Slack で共有してもらい、それを言葉で Claude Code に伝えようとして、結局自分で直した方が早かった——そんな経験はないでしょうか。
Claude Code には画像をそのまま読み込んで指示できる機能が以前から備わっていますが、実際に開発フローへ組み込めている人は意外と少ない印象です。私自身、最初は「テキストで詳しく説明した方が確実だろう」と思い込んでいました。けれど一度スクリーンショット貼り付けに切り替えてからは、UI まわりの修正速度が体感で 3〜4 倍になっています。
ここではClaude Code に画像を渡す具体的な方法と、私が実際のプロジェクトで詰まったポイントを共有します。Vision モデルの汎用解説ではなく、ターミナルで Claude Code を使っている開発者がそのまま明日から取り入れられる手順に絞ります。
なぜテキスト説明より画像が速いのか
UI バグの再現には「どこに何があって、どうあるべきか」という空間情報が必要です。これを言葉で伝えようとすると、
- 「右上のメニューボタンの直下にある検索フィールド」
- 「フォーカス時に枠線が青くなるが、左右の余白だけ消える」
のように、座標と状態の組み合わせを冗長に書くことになります。スクリーンショット 1 枚を貼れば、Claude は要素の配置・色・余白・タイポグラフィを一度に把握してくれます。視覚的な不具合に関しては、画像の方が情報密度が高いのです。
私の体感では、レイアウトずれ・色のコントラスト不足・フォント崩れ・モバイル表示の違和感など「目で見れば一瞬だが言葉では伝えにくい問題」で特に効果が大きく、修正コミットまでの時間が大幅に短縮されました。
画像を Claude Code に渡す 3 つの方法
ターミナルで動く Claude Code に画像をどう渡すか、実用的な選択肢は次の 3 つです。
方法 1: クリップボードから貼り付ける
macOS の場合、スクリーンショットを Shift + Command + Control + 4 でクリップボードにコピーし、Claude Code のプロンプト入力欄で Control + V を押します。Linux の多くのターミナルでも同様にペーストが効きます。Windows + WSL の組み合わせは挙動がターミナル依存なので、後述するファイルパス渡しが安定します。
貼り付けが成功すると、入力欄に [Image #1] のようなプレースホルダーが表示されます。この状態でメッセージを書いて送信すると、Claude が画像と文章をセットで処理してくれます。
[Image #1]
このスクリーンショットの右上カードで、タイトルとアイコンの縦位置がずれています。
src/components/StatCard.tsx を見て、flex の align-items を整えてください。短い指示でも、画像を添えることで「どのカード」「どんなずれ」が瞬時に伝わるのが分かると思います。
方法 2: ファイルパスで参照する
スクリーンショットを screenshots/header-misalign.png のようにプロジェクト内に保存しておけば、相対パスで指定するだけで読み込んでくれます。
@screenshots/header-misalign.png のヘッダーを参考に、
src/components/Header.tsx の余白とロゴサイズを修正してください。
期待値はこの画像の通り、ロゴ高さ 32px、左右パディング 24px です。CI で生成された E2E テストの失敗スクリーンショットや、Figma からエクスポートしたカンプと組み合わせると強力です。Figma のカンプを実装に落とし込む詳しい流れは Claude Code でデザインカンプから LP を実装する手順 も参考にしてください。
方法 3: IDE 拡張から渡す
VS Code や JetBrains の Claude Code 拡張を使っている場合、エディタ上で画像ファイルを右クリック → Claude Code に送信、という導線が用意されています。エディタとターミナルを行き来しないで済むので、私は IDE での開発時はもっぱらこの方法を使っています。拡張のセットアップは Claude Code VS Code 拡張で開発生産性を底上げする を参照してください。
実プロジェクトで効くプロンプトの型
画像を貼った直後にどう書くかで、修正の質がはっきり変わります。私が現場で繰り返し使っているテンプレートを 2 つ紹介します。
型 1: 「現状」と「期待」を 1 枚ずつ渡す
[Image #1] ← 現在のスクリーンショット
[Image #2] ← Figma の期待カンプ
#1 が実装、#2 が期待する見た目です。
差分は次の 3 点だと認識しています:
- カード間の縦余白（実装 8px / 期待 16px）
- ボタンの角丸（実装 4px / 期待 8px）
- アイコンのストロークの太さ
src/components/PricingCard.tsx を修正してください。
Tailwind を使っているので、ユーティリティクラスのみで対応してください。差分を箇条書きにする一手間が、Claude の修正精度を大きく上げてくれます。「画像を見れば分かるでしょ？」で投げると、関係ない部分まで触られて余計な diff が出やすいというのが実感です。
型 2: エラー画面を貼ってログとセットで渡す
[Image #1] ← 本番の Sentry エラー画面のスクショ
このエラーが本番でだけ発生しています。
スタックトレースを読むと src/lib/payment.ts の signWebhook 内で
crypto.subtle が undefined になっているように見えます。
ローカルでは Node ランタイムなので発火しないが、
Cloudflare Workers ランタイムでは API が異なるはずです。
原因の特定と、Workers でも動く実装への修正をお願いします。エラーモーダルやスタックトレースは、テキスト整形して貼るより画像の方が早い場面が多いです。Sentry や DataDog のキャプチャをそのまま流し込めるのは大きな利点です。
詰まりやすいポイント 3 つ
実際に使い始めてから私が引っかかった、地味だけど効くハマりどころです。
1 つ目は、機微なアセットを誤って投入してしまう問題です。本番ユーザーの個人情報が映ったスクリーンショットを、思考停止で Control + V してしまうのは典型的な事故パターンです。私はプロジェクト直下に _screenshots/ ディレクトリを作り、.gitignore と Claude Code の permissions 設定でそのフォルダだけを画像投入用に許可する運用にしました。Claude Code の権限設定の詳細は Claude Code フック完全ガイド 2026 でも触れています。
2 つ目は、画像サイズと解像度のトレードオフです。Retina ディスプレイで撮影した 5K スクリーンショットをそのまま渡すと、トークン消費が無視できないサイズになります。レイアウト確認程度なら 1280px 幅にリサイズしてから渡すと、コストを抑えつつ十分な精度が出ます。私は sips -Z 1280 input.png --out resized.png を ~/.zshrc のエイリアスに登録しています。
3 つ目は、「画像を貼ったら指示が省ける」と思い込んで失敗するケースです。Claude は画像から多くを読み取りますが、ファイル名の指定がなければどのコンポーネントを直すべきか推測することになります。「src/components/Header.tsx」のように対象ファイルを明示するだけで、修正の的中率が上がり、無関係なファイルへの編集も防げます。Vision 機能そのものの仕様は Claude Vision（画像認識）機能ガイド もあわせてご覧ください。
明日からの一歩
まずは進行中のプロジェクトで、UI バグの修正依頼を 1 件だけスクリーンショット貼り付けで試してみてください。「テキストで状況を説明する」工程を丸ごと省ける感覚が掴めれば、その後は自然と画像中心のフローに移行していくはずです。