Claude Codeにスクショを渡して作らせるコツ【2026】

「このサイトみたいな見た目にして」と口で説明するより、スクリーンショット（画面のキャプチャ画像。以下スクショ）を1枚渡すほうが早い。Claude Code は画像を読めるので、これは実際に使える手だ。

ただし、スクショを貼っただけでは思った通りにならない。画像は「どこを見てほしいか」を語ってくれないからだ。渡し方と、添える言葉と、直し方。この3つで結果がまるで変わる。

まず、画像はどうやって渡すのか（アプリとCLIで違う）

あなたが使っているのが「Claudeのアプリ」なら添付ボタン、「黒い画面（CLI）」なら貼り付けかドラッグ&ドロップ。

自分がどちらか分からない人向けの見分け方：入力欄の近くに ＋ボタンやモード選択メニューが見えるならデスクトップアプリ。黒い背景に文字だけならCLI（ターミナルで動かすコマンド版）だ。

使っている画面	画像の渡し方
デスクトップアプリ（Code タブ）	入力欄の横の ＋ボタン → ファイル添付。または画像を入力欄に直接ドラッグ&ドロップ。画像とPDFに対応
CLI（ターミナル）	①ウィンドウにドラッグ&ドロップ ②コピーして Ctrl+V で貼り付け（macOSでは iTerm2 なら Cmd+V も可） ③ファイルのパスを書く（例:「この画像を見て: /Users/me/Desktop/design.png」）

公式ドキュメントの機能比較表では、CLI は「ファイル添付＝なし」と書かれている。これは添付ボタンのUIがないという意味で、上の3つの方法で画像自体は渡せる。

スクショの撮り方だけで精度が変わる

「画面全体を1枚」より「見せたい部分をトリミングした1枚」のほうが、AIは正しく読む。

• macOS は Cmd+Shift+4 で範囲を選んで撮影、Windows は Win+Shift+S。どちらもクリップボードに入るので、そのまま貼り付けられる。
• ブラウザのタブやブックマークバーまで写っていると、AIがそれをUIの一部と誤解することがある。作りたい部分だけを切り取る。
• 文字がぼやけた縮小画像は読み取り精度が落ちる。等倍以上で撮る。
• 1枚に詰め込まず、「一覧画面」「詳細画面」で分けて2枚渡すほうが伝わる。複数枚を1つの会話で扱える。

スクショに必ず添える3行

画像＋「何を・どこまで・何は無視するか」の3行。これがないとAIは全部を再現しようとして的を外す。

貼るだけの人と、この3行を添える人とで、初回の完成度がいちばん変わる。

【何を】この画面の「上の検索バーとカード一覧」の見た目を再現して
【どこまで】レイアウトと色だけ。中身のデータは適当なダミーでいい
【無視】左のサイドバーと広告は不要。ロゴもプレースホルダーでいい

なぜ効くのか。AIから見ると、1枚のスクショには「レイアウト」「配色」「文字」「余白」「そこに写り込んだ無関係なもの」が全部同じ重みで写っている。優先順位を決めるのは人間の仕事だ。指示の組み立て方そのものはAIへの指示の出し方でも扱っているが、画像を渡す時はこの「無視していい範囲」の一行が特に効く。

用途別・言葉の添え方

同じスクショでも「デザインの見本」なのか「不具合の証拠」なのかで、書くべきことが違う。

スクショの用途	添える言葉
デザインの見本にしたい	「レイアウトと配色を真似て。フォントや素材は近いもので代用可」＋再現しない範囲
エラー画面を見せたい	「この画面が出た。その直前にやった操作は〇〇」＋期待した結果
手描きのラフを渡したい	「手書きのラフ。四角は画像、線は入力欄のつもり」と記号の意味を通訳する
既存アプリのここだけ直したい	「赤で囲った部分だけ変えて。他は触らないで」＋どのファイルの画面か

「似てない」時に効く直し方

やり直させるのではなく、AI自身に自分の結果を見比べさせる。ここがvibe codingらしい使い方の中心。

デスクトップアプリの Code タブにはブラウザペインがあり、Claude が自分でdevサーバーを立ち上げて画面を表示できる。しかもこの時、Claude 自身がスクリーンショットを撮り、DOMを調べ、要素をクリックし、フォームを埋めて、見つけた問題を直す——公式ドキュメントが挙げている挙動だ。既定では編集のたびに自動で確認する（auto-verify）設定になっている。

つまり、こう頼める。

今の画面をプレビューで開いて、最初に渡したスクショと見比べて。
違うところを箇条書きにしてから、上から順に直して。

これが「もう1回作り直して」より圧倒的に強い。差分を言語化させてから直させるので、直す理由がAI自身の中に残る。

直し指示のテンプレ

「もっといい感じに」は通じない。比較の言葉（何と比べて・どちら方向に）を入れる。

❌ 通じない	✅ 通じる
もっといい感じにして	スクショと比べてカードの間隔が広い。半分に詰めて
色が違う	見本の背景は薄いグレー。今の白から寄せて
ボタンが変	ボタンが左寄せ。見本と同じく右下に固定して
スマホで崩れる	幅375pxで見ると横スクロールが出る。1列に折り返して

数字（px・何倍・何列）を1つ入れるだけで再現性が跳ね上がる。もっと汎用的な言い回しの型はプロンプトの型にまとめてある。

ここは真似できない、と割り切る線引き

スクショから再現できるのは「見た目の構造」まで。中身の仕組みと素材は別途こちらが決める。

• ✅ 再現できる: レイアウト（何がどこに並ぶか）、配色の系統、余白のリズム、要素の大小関係、画面の全体構成。
• ⚠️ 近いものになるだけ: フォント（有料書体は当然使えない）、アイコン、影やグラデーションの微妙な質感、アニメーション。
• ❌ スクショからは分からない: ボタンを押した後にどうなるか、データの保存先、ログインの仕組み、レスポンシブの切り替え位置。これは言葉で伝えるしかない。

つまずいた時の切り分け

「AIが画像を読めていない」のか「読めたが指示が曖昧」のか、まずそこを分ける。

症状	原因の見当	対処
画像の話が返答に一切出てこない	そもそも渡せていない	「今どんな画像が見えている？1枚ずつ説明して」と聞く。答えられなければ未添付
見当違いのものが出てくる	画像は見えたが優先順位が不明	「何を・どこまで・何は無視」の3行を足して投げ直す
全体は合うが細部だけズレる	正常。ここからが調整フェーズ	1回1テーマで詰める（上のテンプレ参照）
直すたびに別の所が壊れる	一度に頼みすぎ	変更前の状態に戻してから、1つずつ頼み直す
画面が真っ白・エラー	見た目以前の不具合	エラー画面のスクショを撮って渡す。エラーが出たときの直し方へ

FAQ

スクショは何枚まで渡せますか？

1つの会話で複数の画像を扱える。ただし枚数を増やすほど「どれの話か」が曖昧になるので、1回の指示につき1〜2枚、画面ごとに分けて渡すのが実用的。3枚以上渡す時は「1枚目が一覧、2枚目が詳細、3枚目はスマホ表示」と番号で説明を添える。

手描きのラフでも通じますか？

通じる。ただし記号の意味を必ず通訳すること。「四角に×は画像」「二重線は見出し」といった自分ルールはAIには伝わらない。写真で撮る場合は、影が入らないよう真上から、傾かないように撮ると読み取りやすい。

貼り付け（Ctrl+V）が効きません。

環境差が大きい部分だ。macOSのCLIは Ctrl+V（Cmd+V ではない。ただし iTerm2 なら Cmd+V も可）、WSLやWindowsは Alt+V という報告が多い。1〜2回試して駄目なら、ドラッグ&ドロップかファイルパス指定に切り替えるのが早い。デスクトップアプリを使っているなら＋ボタンからの添付が一番確実。

画像を渡すと料金は上がりますか？

画像もテキスト同様にトークン（AIが処理する文字量の単位）を消費するため、枚数と解像度に応じて消費は増える。無駄に大きい画面全体を何枚も貼るより、必要な部分をトリミングした1枚のほうが、精度もコストも有利になる。プランごとの具体的な上限や課金額は変動するため、公式の料金ページで最新を確認してほしい。

完成した見た目が本当に合っているか、自分で判断できません。

見た目は「見比べれば分かる」領域なので、非エンジニアでも判断できる数少ない部分だ。判断が難しいのはむしろ中身のほうで、そこはAIが書いたコードを信用していい所・確認すべき所の観点で見るとよい。見た目だけなら、スマホ幅・PC幅の2つで見て崩れなければ合格でいい。

毎回同じデザインルールを説明するのが面倒です。

プロジェクトごとの共通ルール（配色・余白の基準・使うフォント）は、CLAUDE.mdに書いておくと毎回の指示が短くなる。「うちのサービスの基本色は#1E88E5」と一度書けば、以後のスクショ指示は差分だけで済む。

スクショ起点で作ったものを公開まで持っていけますか？

持っていける。見た目が固まったら公開までの手順へ進む。ただし公開前に、他社の素材（ロゴ・写真・アイコン）が残っていないかだけは必ず確認すること。

---

次に読む: 指示そのものの精度を上げたいならAIへの指示の出し方、作る前に設計させたいならプランモードの使い方へ。