Claude Codeスクリーンショット実装 — モックアップからUIを作る手順

Claude Codeは画像を会話に渡すだけで、デザインモックアップからCSSやHTMLを生成させたり、UIのスクリーンショットを見せてバグの原因を探らせたりできます。テキストで細部を説明するより、画像を1枚渡すほうが速く正確に意図が伝わる場面は多くあります。本記事では画像の渡し方から、モックアップを実装に落とす手順、実装結果を画像で検証するフィードバックループまでを扱います。

画像で何を頼めるか

画像を使ったUI実装とは、テキストの説明だけでなく視覚的な情報そのものを入力に使う作業です。Claude Codeは渡された画像を解析し、次の3つの用途に使えます。

• UIの分析: スクリーンショットに写ったUI要素や崩れを説明させる
• エラー診断: エラー画面のスクリーンショットから原因を推測させる
• コード生成: デザインモックアップからCSSやHTML構造を組み立てさせる

テキストの説明があいまいになりがちな見た目の情報ほど、画像を渡す効果が大きくなります。

画像をセッションに渡す3つの経路

Analyze this image: /path/to/mockup.png

貼り付けると、プロンプトの入力欄に [Image #1] のようなチップが挿入されます。番号で画像を指せるので、「[Image #1] と [Image #2] の余白を比べて」と位置を指定して頼めます。回答の中に [Image #1] のような参照が出てきたら、Macでは Cmd+クリック、WindowsとLinuxでは Ctrl+クリック で既定のビューアーで開けます。

1回の会話で扱える画像は1枚とは限りません。エラー画面と正常時の画面を2枚並べて渡し、違いを比較させる使い方もできます。

モックアップからCSS・HTMLを生成させる

デザインモックアップの画像を渡し、実装コードを生成させます。

Generate CSS to match this design mockup

What HTML structure would recreate this component?

生成の精度を上げるコツは、依頼を具体的にすることです。「このデザイン通りに作って」だけでは、余白や配色の解釈がClaude Code任せになります。「ヘッダーの高さは64px、背景色はモックアップの薄いグレーに合わせて」のように、数値化できる要素は言葉でも補うと再現度が安定します。

複数の画像を1つの依頼で渡すときは、それぞれに「1枚目はデスクトップ表示、2枚目はモバイル表示」のようなラベルを添えます。どの画像がどの意図かを取り違えにくくなります。

複雑な画面を一度にまるごと実装させようとすると、部分ごとの精度がばらつきやすくなります。ヘッダー、カード一覧、フッターのようにブロック単位で区切り、「まずヘッダー部分だけ実装して」と1ブロックずつ頼むと、再現度を確認しながら進められます。

既存のデザインシステムを使うプロジェクトでは、「既存のButtonコンポーネントを再利用して」のように、既存コードとの統合を明示します。ゼロから書かせるより、コードベースから浮いた実装になりにくくなります。

画像を使う場面・使わない場面の判断

画像を渡す方法が常に最速とは限りません。テキストによる指示のほうが速く正確に伝わる場面もあります。

手元にあるのがスクリーンショットだけか、デザインファイルのアクセス権もあるかで、選ぶ経路が変わります。

実装結果を画像で検証するフィードバックループ

モックアップから一度で完全に一致するコードが出ることは多くありません。実装したUIを実際にレンダリングし、その見た目を画像としてClaude Codeへ渡し直す一往復を挟むと、仕上がりの精度が上がります。

Chromeブラウザ拡張機能と連携させると、この検証工程を1つの会話の中で回せます。Chromeの公式ドキュメントには、Figmaのモックから作ったUIをブラウザで開いて一致を確認する「Design verification」が用途として載っています。

連携を有効にするには、起動時に --chrome を付けます。v2.1.287の claude --help には次の2行が出ます。

--chrome       Enable Claude in Chrome integration
--no-chrome    Disable Claude in Chrome integration

--chrome を付けても動かないときは、前提条件を確認します。ChromeやEdge、BraveなどChromium系のブラウザーと、バージョン1.0.36以降の拡張機能、Pro・Max・Team・Enterpriseのいずれかの直接契約プランが必要です。/login でのサインインも要ります。APIキーや claude setup-token の長期トークンで認証していると、--chrome を付けても連携はオフのままです。Bedrockなどのサードパーティプロバイダー経由でも使えません。

毎回 --chrome を付けたくないときは、/chrome で「Enabled by default」を選べます。ただしブラウザーツールが常に読み込まれるため、コンテキストの使用量は増えます。

ブラウザでスクリーンショットを撮って保存させる依頼もできます。

Take a screenshot of the checkout page and save it to disk

保存先のファイルパスはClaude Codeが報告します。v2.1.211より前は、スクリーンショットツールの save_to_disk がファイルを書き出さない不具合がありました。古いバージョンで保存されないときは、バージョンを疑ってください。

コードだけでは気づきにくい見た目のギャップを、この一往復で拾えます。コンソールエラーやDOMの状態も同じ会話で読ませられるため、ズレの原因になったエラーも一緒に見つかります。

レスポンシブ対応やダークモードのように状態が複数あるUIでは、状態ごとにループを分けて回します。デスクトップ表示を仕上げてからモバイル幅のスクリーンショットを撮らせ、続けてダークモードでも同じ手順を繰り返す進め方です。全パターンをまとめて検証させると指摘が混ざって見落としが増えるため、状態を1つずつ区切るほうが手戻りが少なくなります。

画像サイズの上限とエラーが出たときの対処

Claude Codeが扱える画像には上限があります。

32MBの上限は、画像だけでなく貼り付けた大きなテキストやツールの出力を含めたリクエスト本文全体にかかります。画像や添付ファイルが積み上がって超えると、Request too large (max 32MB) というメッセージが出ます。Claude APIに直接送っている場合、画像や文書が原因と計測されると、それらを外して再試行されます。プロキシやゲートウェイ、クラウド経由では一般的なメッセージだけが出ます。メッセージには「/compact を実行するか、Escを2回押して添付を外す」という対処も添えられます。

メッセージだけで上限を超えているときは compacting cannot make it fit と表示され、再試行されません。この場合はEscを2回押して大きな内容を足したターンより前まで戻るか、/clear で新しく始めます。それ以外なら、蓄積した画像や添付を落とす /compact が効きます。大きなファイルは内容を貼らずパスで指すと、Claude Codeが分割して読めます。v2.1.212より前は、画像が溜まった会話で毎ターン同じエラーになる不具合がありました。

大きすぎる画像を渡すと Image was too large というエラーになります。画面全体ではなく確認したい領域だけを撮り直すと、避けやすくなります。画像は処理できない状態のままではなく、テキストのプレースホルダーに置き換えられて再試行されるため、以降のメッセージは通ります。v2.1.142より前は、貼った画像が会話に残り、以降のメッセージで同じエラーを繰り返しました。古いバージョンではEscを2回押し、画像を貼ったターンより前まで戻ります。対処の詳細はImage was too largeエラーの対処法にまとめています。

縮小処理そのものが失敗すると Unable to resize image になります。公式のエラーページには、原因別に次のような文言が載っています。

• PNG・JPEG・GIF・WebPへの変換を求めるもの(画像処理が使えず、ファイルヘッダーから寸法を読めない場合)
• CMYKのJPEGを、RGBのPNGまたはJPEGで保存し直すよう求めるもの(v2.1.269より前)
• アニメーションWebPの最初のフレームを、PNGまたはJPEGで保存するよう求めるもの
• 寸法が2000x2000pxの上限を超え、処理にも失敗したとして、画素数を減らすよう求めるもの
• 寸法が上限内か確認できなかったと伝えるもの
• 画素を復号できず、ファイルの破損や読めない符号化を疑うもの

形式や破損が原因の文言なら、手元でRGBのPNGやJPEGに保存し直して添付し直すのが基本の対処です。寸法やサイズの上限を示す文言なら、上限を下回るまで縮小するか再圧縮してから添付します。CMYKのJPEGはv2.1.269で他のJPEGと同じく変換・縮小されるようになり、それより前の版では同じエラーになりました。詳しくはUnable to resize imageエラーの対処法を参照してください。

Claude Codeは通常、大きな画像を自動で縮小します。それでも事前に長辺を2,000ピクセル前後へ収めておけば、縮小の失敗に当たる機会そのものを減らせます。

よくあるつまずき

• 依頼が抽象的すぎる: 「いい感じに実装して」では余白やフォントの解釈がぶれます。数値や色コードを言葉でも添えます
• 画像を渡さずに口頭で説明する: 複雑なレイアウトほど、画像1枚のほうが正確に伝わります
• 検証を1回で終わらせる: 最初の生成結果をそのまま採用せず、実装結果を撮り直して見比べます
• 複数画像の意図を区別しない: どの画像が何を表すかラベルを付けないと、比較の意図が伝わらないことがあります
• Windowsで Ctrl+V が効かない: 画像の貼り付けは Alt+V です。WSLでは両方が割り当てられており、ターミナルが Ctrl+V を横取りするなら Alt+V を使います

よくある質問

生成されたCSSの配色がモックアップと微妙に違う場合はどうすればいいですか

「ヘッダーの背景色を#1a1a2eに合わせて」のように、色コードを言葉で補うと修正が的確になります。画像だけでは色の数値まで読み取れないことがあるため、重要な配色は数値で指定するのが確実です。

画像はどのファイル形式に対応していますか

エラーページでは、PNG・JPEG・GIF・WebPが変換先の形式として挙げられています。アニメーションWebPは、サイズによっては送れずに Unable to resize image になります。

Chrome拡張機能を接続していないと画像でのUI実装は使えませんか

画像を渡してコードを生成させるだけなら、拡張機能は不要です。拡張機能が必要になるのは、実装結果をブラウザで開いて自動でスクリーンショットを撮らせるときです。ブラウザでの確認を手動で行い、そのスクリーンショットを自分で貼り付ける分には、拡張機能なしでも同じ流れを再現できます。

手書きのワイヤーフレームでも読み取れますか

画像として渡せる形式であれば、手書きのワイヤーフレームを撮った写真も入力に使えます。色や細かい数値は手書きから読み取りきれないことがあるため、精度が必要な部分は言葉で補うと安定します。

まとめ

実装の精度は、最初の生成結果ではなく、撮り直して見比べる一往復で決まります。デザインファイルに触れるならFigma MCPサーバー、スクリーンショットしかないなら画像を直接渡す、と手元の材料で経路を選んでください。