スクリーンショット×AI デバッグ — 画面を見せるだけでバグ修正

UIの崩れ、エラー画面、想定外の表示。言葉で説明するより、スクリーンショットを見せた方が速い。AIのビジョン機能を使ったビジュアルデバッグの実践手法を解説する。

なぜスクリーンショットデバッグが有効か

• テキストでは伝わりにくいレイアウト崩れを正確に伝えられる
• エラーダイアログの文言を手打ちする手間がなくなる
• 期待値と実際の差分を一目で共有できる

Claude Codeでのスクリーンショット活用

Claude Codeはファイルパスを渡すだけで画像を読み取れる。

screenshot-tool capture --output /tmp/bug.png
claude -p "この画面のバグを特定して修正コードを出力せよ" --file /tmp/bug.png

効果的なプロンプト設計

スクリーンショットを渡す際のプロンプトには、以下の3要素を含めると精度が上がる。

1. 期待する動作の明示

「このボタンをクリックするとモーダルが開くはずだが、何も起きない。スクリーンショットはボタンクリック後の状態。原因と修正を提示せよ。」

2. 技術スタックの指定

「React + Tailwind CSSで構築したダッシュボード。サイドバーがメインコンテンツに重なっている。修正すべきCSSクラスを特定せよ。」

3. 対象コンポーネントの絞り込み

「src/components/Header.tsx のレンダリング結果。ナビゲーションメニューが画面外にはみ出している。レスポンシブ対応の修正コードを出力せよ。」

ビジュアルデバッグの活用パターン

パターン	入力	AIが行うこと
レイアウト崩れ	崩れた画面のスクショ	CSS/HTMLの修正提案
エラーダイアログ	エラー表示のスクショ	エラーメッセージ読み取り→原因分析
期待値との差分	期待画面 + 実際画面の2枚	差分を列挙し修正コード生成
コンソールエラー	DevToolsのスクショ	スタックトレース解析→修正案

2枚比較デバッグ

最も効果的なパターンは「期待する画面」と「実際の画面」の2枚を同時に渡すことだ。差異をすべて列挙させ、実際の画面を期待画面に近づける修正コードを出力させる。

注意点

• 個人情報のマスキング — スクリーンショットに個人情報が写り込んでいないか確認する
• 解像度 — 文字が潰れていると読み取り精度が低下する。Retinaスケールの原寸が理想
• 全体より部分 — 画面全体より、問題箇所をトリミングした方が精度が高い

まとめ

スクリーンショットデバッグは「見れば分かる問題」を最速で解決する手法だ。テキスト説明では3分かかる問題も、画像1枚で10秒で伝わる。

関連記事

• Brain Approximation Score