Claude Codeにデザイン画像を渡してコーディングするコツ｜再現しやすい渡し方と指示の出し方

2026年8月23日2026年9月12日

Claude Codeは、デザイン案やスクリーンショットを渡して「この見た目をコーディングして」と頼めるのが便利なところです。

ただし、画像を渡せば毎回そのまま再現できるわけではありません。「作って」とだけ頼むと、余白や文字サイズ、画像の位置などが、元のデザインと違って仕上がることがあります。

画像から正確に読み取れない部分は、Claude Codeが推測して補うためです。フォントの種類や要素の正確な幅、スマートフォンでの並び方、ボタンを押したときの動きなどは、1枚の画像だけでは判断できません。

そのため、画像だけに任せるのではなく、画像で見た目を伝え、言葉で作り方を補うことが大切です。

この記事では、Web制作でClaude Codeを使ってきた経験から、デザイン画像を渡すときの方法と、できるだけ元のデザインへ近づけるための指示の出し方をまとめます。

これらを実践しても、一度で完成するとは限りません。最初の出力をたたき台として、実際の画面を見ながら調整していくことを前提にしています。

※ AI の画像入力まわりは仕様変更が速い分野です。対応形式や貼り付け方法、UI は変わることがあるので、最新は公式情報とご自身の画面で確認してください（本記事は 2026年5月時点）。

こんな方に読んでほしい

Claude Code に画像を渡す方法は主に2つです。

スクショを撮ってそのまま貼り付け：⌘ + Shift + 4 で範囲を撮り、Claude Code の入力欄で ⌘ + V（範囲スクショの撮り方は Macのスクリーンショットの撮り方も参考に）
画像ファイルをドラッグ&ドロップ：デスクトップ等にある画像を、入力欄に直接ドロップ

デザインカンプ（Figma の書き出しなど）でも、画像として渡せば OKです。複数枚を渡して「全体はこの画像、ヘッダーはこの画像」と分けて示すこともできます。

ここがいちばん大事なところです。画像と一緒に、最初のメッセージで前提を言葉にして渡すと、画像だけで依頼するよりも、意図に近いコードが出やすくなります。

おすすめは、次の4点を最初の段落にまとめること。

画像は「見た目」を伝えますが、「どう作ってほしいか」までは画像から読み取れません。そこを言葉で補うイメージです。

💡 ポイント：「画像のとおりに作って」だけでは、色やフォント、余白など、画像から判断しきれない部分をClaude Codeが推測します。譲れない部分を具体的に伝えることで、認識のずれや手戻りを減らせます。ただし、細かく指定しても毎回正確に再現されるとは限らないため、完成後の確認は必要です。

最初の出力だけで完成することもありますが、細かな余白や文字サイズまで元の画像に近づけるには、修正が必要になることが多くあります。最初から調整する前提で進めるのがコツです。

修正を頼むときは、次の2つを意識すると精度が安定します。

どの画像・どこを直すかを明示する：「最初に渡した画像の、ヘッダーのロゴが入っていないので追加して」のように、参照と箇所をセットで伝える
複数の修正を一度に詰め込まない：「あれもこれも」と一気に頼むと、優先順位の判断がブレて中途半端になりがち。1回1テーマで出した方が、結果的に速いことが多いです

「全体の余白を詰めて」→ 確認 →「次にボタンの色を〇〇に」→ 確認、と小さく回すのがおすすめです。