Claude CodeでImageを使う方法をお探しですね。

広告

Claude Codeに画像を見せる方法｜デザイン確認やエラー画面の解析がラクになる

プログラミングをしていると、「このボタン、もうちょっと右に寄せたいんだけど」とか「画面がこんな感じで崩れちゃってるんだよね」みたいなこと、よくありますよね。

こういうのって、言葉で説明するより画像を見せた方が100倍早いし、伝わりやすいです。

実は、ターミナルで動くClaude Codeって、画像も読み取れるんです。

しかも結構かんたんに。

この記事では、Claude Codeに画像を見せる具体的なやり方から、デザインの再現、エラー画面を使ったバグ修正まで、実際に使えるテクニックを紹介していきます。

1. ターミナルのClaude Codeに画像を送る方法

Claude Codeはコマンドラインのツールなので、「文字しか使えないんじゃないの？」って思うかもしれません。

でも実は、画像もちゃんと処理できるんです。

**一番かんたんなのは、コピペです。

**普通にチャットアプリに画像を貼り付ける感覚で、「Ctrl + V（MacならCommand + V）」を使えばOK。

最近のターミナル（VS Codeの統合ターミナルとかiTerm2とか）なら、コピーした画像をClaude Codeが理解できる形に自動で変換してくれます。

Macを使ってる人なら、「Command + Control + Shift + 4」で画面の一部をスクショして、そのままターミナルにペーストするのが最速です。

めちゃくちゃ便利ですよ。

**すでに保存してある画像を使いたいときは、ファイルのパスを指定します。

**たとえば「/Users/yourname/Desktop/screenshot.png を見て」みたいに書くか、ターミナルにファイルをドラッグ&ドロップすればパスが入力されます。

Claude Codeがそのパスを読み取って、画像をAIに送ってくれるという仕組みです。

画像が正しく認識されると、Claudeが「画像を確認しました」みたいな反応を返してくれて、その内容をもとにコードを書いたり答えたりしてくれます。

**ちょっと注意が必要なのは、WSL（WindowsでLinuxを使う環境）とかの特殊な環境です。

**WindowsとLinux側でコピペがうまく繋がらないことがあるので、その場合はVS Codeの拡張機能を使うか、一度ファイルをWSL内に保存してからパスを指定する必要があります。

でも、最初に環境を整えちゃえば、文字と画像を組み合わせた開発がめちゃくちゃスムーズになります。

まずは自分のターミナルでスクショのペーストが動くか試してみてください。

2. デザイン画像からコードを自動で作ってもらう

フロントエンド開発で時間がかかるのが、デザインのスクショや参考サイトを見ながらHTML/CSSを書く作業ですよね。

Claude Codeの画像認識を使えば、この作業がめちゃくちゃ楽になります。

**やり方はシンプル。

**作りたいUIのスクショをClaude Codeに送って、「このデザインをTailwind CSSとReactで作って」って頼むだけ。

すると、Claudeが画像の中のレイアウト、色、フォント、余白なんかを解析して、コードに起こしてくれます。

**何がすごいって、細かい数値を測らなくていいこと。

**今までならFigmaとかで「このpaddingは何ピクセル？」って確認したり、カラーコードをコピペしたりする必要がありました。

でもClaude Codeに画像を渡せば、「だいたいこれくらいの余白」「この青色っぽい感じ」みたいな情報を自動で読み取ってコードにしてくれます。

もちろん完璧じゃないこともありますが、ゼロから書くよりずっと早く完成形に近づけます。

あとは微調整するだけでOK。

特に複雑なレイアウトの最初の骨組みを作るときに、めちゃくちゃ役立ちます。

**既存のコンポーネントライブラリと組み合わせるのもアリです。

**「この手書きのラフ画をもとに、Shadcn UIを使って入力フォームを作って」みたいな頼み方もできます。

手書きのメモからでも、ちゃんと動くコードを生成してくれるんです。

**ポイントは、画像だけじゃなくて言葉でも補足すること。

**「ヘッダーは固定表示にして」とか「スマホ表示では縦並びにして」みたいな、画像からは分からない動きや仕様を言葉で伝えると、もっと実用的なコードができあがります。

3. エラー画面のスクショでバグ修正が早くなる

画像認識が本当に便利なのが、エラーの解析です。

バックエンドのエラーならログをコピペすればいいんですが、フロントエンドの表示崩れとか「このボタンを押したら変なことになる」みたいなのって、言葉で説明するの難しいですよね。

**そういうときは、問題が起きてる画面をスクショしてClaude Codeに見せましょう。

**「画面右上のメニューが崩れてるんだけど、CSSのどこが悪そう？」って聞けば、AIが見た目から原因を推測してくれます。

**もっと効果的なのは、ブラウザの開発者ツール（DevTools）のエラー画面と、実際の画面を両方見せること。

**コンソールに出てるエラーメッセージのスクショと、崩れてるUIのスクショを同時に送ると、Claudeが「このエラーが原因でCSSが読み込めなくて、だから画面が崩れてる」みたいな複合的な分析をしてくれます。

**「今はこうなってるけど、こうしたい」っていうBefore/Afterの画像を見せるのも便利です。

**「マージンをもっと広げて」って言葉で説明するより、理想の画像を一枚見せた方が、AIもゴールが明確になって、修正の試行錯誤が減ります。

バグ修正って、「今の状態」と「理想の状態」のギャップを埋める作業ですよね。

その両方を画像で見せることで、解決までのスピードがぐっと上がります。

4. うまく認識してもらうためのコツ

Claude Codeの画像認識はかなり優秀ですが、画像の撮り方や指示の出し方で、結果の良し悪しが変わってきます。

**まず基本として、画像は「見てほしいところがハッキリ写ってること」が大事です。

**解像度が低くて文字が潰れてたり、関係ないウィンドウがいっぱい写ってたりすると、AIが混乱して、肝心なところを見逃しちゃいます。

スクショを撮るときは、必要な部分だけをキレイに切り取りましょう。

OSの機能を使ってウィンドウ単位でキャプチャするか、必要な範囲だけトリミングするのがおすすめです。

**次に大事なのが、「どこを見てほしいか」を言葉で説明すること。

**画像を貼って「これ見て」だけだと、AIは全体をぼんやり眺めるだけになっちゃいます。

「画像の赤枠で囲った部分のボタン配置を直して」とか「画像の青いグラフが表示されない原因を探して」みたいに、注目してほしいポイントを具体的に伝えましょう。

**複雑な画面の場合は、一気に全部やろうとせず、段階的に進めるのもコツです。

**たとえばECサイトの商品ページを作るなら、まず「ヘッダー部分だけ作って」、次に「商品画像のギャラリー部分を作って」みたいに分けた方が、最終的な品質が安定します。

**まとめると、こんな感じです：**

– **画像の範囲：** 不要な部分はカットして、見てほしいところを大きくハッキリと
– **どこを見るか指示：** 「ここを見て」を言葉で具体的に伝える
– **足りない情報を補足：** 画像からは分からない動きや仕様は言葉で説明

AIの得意な「画像を見る力」と、人間の得意な「意図を伝える力」をうまく組み合わせれば、Claude Codeは最強の開発パートナーになります。

言葉で説明しづらいことがあったら、迷わず画像をターミナルに放り込んでみてください。

その手軽さと精度に、きっとびっくりすると思いますよ。

広告