「ボタンの右マージンが2pxだけずれている」を文章で正確に伝えるのって、けっこう面倒ですよね。私は先日、Tailwind で組んだダッシュボードのレイアウトが本番環境だけ崩れる現象を追っていたのですが、Antigravity に状況を文字で説明していたら5分以上かかっていました。試しにブラウザのスクリーンショットを1枚貼って「この赤丸の部分のずれを直したい」と書き添えたら、修正パッチが30秒で返ってきました。
Antigravity は Gemini を頭脳に持つ IDE なので、画像を「読む」のがとても得意です。にもかかわらず、スクリーンショット入力を活用している人は意外と少ない印象です。ここではUI バグの修正・デザインレビュー・ダイアログ仕様の伝達といった日常的な場面で、画像入力をどう使うと精度が一気に上がるのかを、実例とともにご紹介します。
なぜ UI 系のタスクではスクリーンショット入力が強いのか
UI バグ修正に画像が効くのは、テキストでは「位置・色・余白・線の太さ・配置の関係性」を正確に表現するコストが高いためです。「下のメニューが少し被っている」と書いても、AI 側は「具体的に何ピクセル？」「上下どちら？」「画面幅は？」という前提を逆推論しないといけません。スクリーンショットがあれば、これらの曖昧さが一瞬で解消されます。
加えて、Antigravity に組み込まれている Gemini 系モデルは、画像内のテキスト・ボタン・余白・整列をかなり正確に認識します。レイアウトの不整合・色のコントラスト不足・ボタンが画面外にはみ出すといった現象は、「視覚的な異常」として AI に直接見せた方が、再現手順や DOM 構造を文章で説明するよりも数倍速く伝わります。
私の経験では、以下のような場面で特に威力を発揮します。
- レスポンシブレイアウトの崩れ（特定画面幅でだけ起きるもの）
- ダークモードでだけ視認性が落ちるテキスト
- アイコンや余白の微妙なズレ
- スクロール時に固定要素が他要素と被る現象
- デザインカンプ（Figma など）と実装の差分指摘
Antigravity にスクリーンショットを渡す3つの方法
方法1: クリップボードから直接ペースト（最速）
私が一番よく使うのがこれです。macOS なら ⌘ + Shift + 4 で範囲スクリーンショットを撮ると、デフォルトではデスクトップに PNG が保存されますが、⌘ + Ctrl + Shift + 4 にすればクリップボードに直接コピーされます。Windows なら Win + Shift + S（Snipping Tool）で同じことができます。
そのまま Antigravity のチャット欄で ⌘ + V（Windows は Ctrl + V）すると、画像がインラインで添付されます。文章を打つ前に画像、その下に依頼内容を書く流れが最もテンポよく進みます。
[添付された画像のサムネイル]
このダッシュボードの右上にある通知ベルアイコンと
ユーザーアバターが2pxほど重なっています。
gap か margin の調整で直してください。
src/components/Header.tsx の該当箇所をお願いします。
このワンセットで、AI 側は「視覚的な現象 + 修正対象ファイル + 期待する手段」を同時に把握できます。
方法2: ファイルをドラッグ＆ドロップ
すでにスクリーンショットや Figma エクスポート画像が手元にある場合は、ファイルを Antigravity のチャット欄にドラッグ＆ドロップするだけで添付できます。複数枚の画像（Before/After を並べる場合など）を一度に渡したいときに便利です。
ドロップ後は同様に、各画像が何を示しているのかを必ず添えてください。「左がデザイン、右が実装」のように対応関係を明示するだけで、AI の出力精度が大きく変わります。
方法3: @ リファレンスで既存画像を参照
プロジェクト内に保存済みの画像（例: docs/screenshots/before.png）がある場合は、@ リファレンスで参照する方法もあります。
@docs/screenshots/before.png と
@docs/screenshots/after.png を比較し、
After の状態に近づける CSS パッチを Header.tsx に提案してください。
@ リファレンスについては Antigravity に的確なコンテキストを渡す — @ リファレンスで AI 出力の精度を上げる実践ガイド で詳しく扱っていますので、未読の方はこちらも参考になさってください。チームで共有した画像をスクリプト的に使い回す場合は、この方式が最も再現性があります。
AI に「何を見てほしいか」を伝えるコツ
スクリーンショットを貼るだけでは、AI に「画像のどこに注目してほしいか」が伝わらないことがあります。私が実践している3つの工夫をご紹介します。
1. 注目ポイントを画像内にマーキングする
macOS のプレビューや Skitch、Windows の標準ペイントなどで、問題箇所を赤丸や赤矢印で囲んでから貼る。これだけで「赤丸の中の余白が広すぎます」「矢印先のボタンが見切れています」のようにシンプルな指示で済みます。
2. 画像と一緒にビューポート情報を伝える
「この画像はブラウザ幅 1280px / Chrome 124 / ダークモード」のように、再現環境を1行添えると、AI が「メディアクエリ・ブラウザ依存スタイル・テーマ変数」のどこを疑うかを絞り込めます。
3. 期待する出力形式を明示する
「Tailwind のクラス名で修正案を提示してください」「diff 形式で返してください」のように出力形式を指定すると、後続の作業（差分の確認・適用）がスムーズになります。差分の確認は Antigravity の Diff View 完全活用ガイド で扱った Diff View が便利です。
私が踏み抜いた失敗パターンと回避策
スクリーンショット入力は強力ですが、雑に使うと逆に AI を混乱させることがあります。以下は私自身がやらかして学んだパターンです。
失敗1: 画像が大きすぎる・情報が多すぎる
ブラウザのフルスクリーンショット（ヘッダーからフッターまで）を1枚貼って「ここを直して」と言うと、AI は注目箇所を特定できません。問題のあるエリアだけをトリミングするか、赤丸でマーキングして範囲を限定してください。
失敗2: 複数のバグを1枚で同時依頼する
「このページに5つバグがあります、全部直して」のような依頼は、AI が優先順位を勝手に付け、修正同士が競合することがあります。1枚 = 1バグを基本とし、複雑な場合は順番に依頼した方が確実です。
失敗3: スクリーンショットだけで修正対象ファイルを伝えない
画像から DOM 構造を完全に逆推論できるわけではありません。「このカードコンポーネントは src/components/Card.tsx です」のように、修正対象ファイルを必ず添えてください。これを省くと、AI が新しいファイルを作ろうとしたり、見当違いの場所を編集することがあります。
失敗4: 機密情報が映ったまま貼る
開発中の管理画面には、メールアドレス・氏名・売上数値などが映り込みがちです。スクリーンショットを撮った後、ペースト前に必ず一呼吸置いて、社外秘・個人情報がないかを確認してください。私は習慣として、まずプレビューで開いて余分な部分をモザイクで隠してから貼るようにしています。
実例: Tailwind のレイアウトずれを4分で直したワークフロー
先日実際に踏んだケースをご紹介します。Next.js + Tailwind で組んだダッシュボードの「サイドバー」と「メインコンテンツ」が、画面幅1024px のときだけ重なる現象が出ていました。
最初、私は文章で「md: ブレークポイントでサイドバーが200px に縮むはずなのに被る」と説明していました。AI からの返答は、いくつかの仮説（grid template の問題、padding の不足、z-index の干渉）を提示してきましたが、どれも当たっていませんでした。
そこで、ブラウザを1024px に縮めた状態のスクリーンショットを撮り、被っている箇所を赤丸で囲み、こう書き添えました。
添付の画像のように、サイドバーがメイン領域に被っています。
ブラウザ幅 1024px、Chrome、ライトモード。
src/components/Layout.tsx の Tailwind クラスを直してください。
理想は、サイドバー幅は 200px 固定、メインは残り全幅です。
返ってきた修正提案は的確で、原因は grid-cols-[200px_1fr] を使うべきところを flex で組んでいたために、flex-shrink が効いて縮んでいたというものでした。提案された差分はそのまま適用でき、4分で本番環境にも反映できました。
文章だけで進めていたら、この原因にたどり着くまでに何往復も必要だったでしょう。「画像を見せれば数秒で伝わる」現象は、画像を貼ることで本当に数秒で解決します。
スクリーンショット入力を日常に組み込む小さな工夫
最後に、私自身が日々のワークフローに組み込んでいる小ネタをご紹介します。
- ブラウザの DevTools のレスポンシブモードでスクリーンショットを撮る: 特定画面幅の問題を伝えるとき、URL バーの三点メニューから「ノードのスクリーンショットをキャプチャ」が便利です
- エラー画面は必ずスクリーンショットを残す: 開発サーバーの起動エラーやランタイムエラーが出たら、画面とコンソールの両方を撮っておくと、後で AI に状況を伝えるときに明確に楽です。関連して、ポート競合エラーの根本対処は Antigravity の AI エージェントが開発サーバーを再起動するたびに EADDRINUSE エラーになる問題の根治ガイド でまとめています
- Figma カンプとブラウザの並べ撮り: デザイナーから差分修正の依頼が来たときは、左右に並べた1枚の画像にして渡すと、AI が「どこが違うか」を抽出してくれます
- Cmd+K インラインエディットと併用しない: 画像入力はチャット欄で行います。インラインエディット（Cmd+K）からは画像が貼れない仕様なので、混在させないでください。Cmd+K が反応しない件で困っているなら AntigravityでCmd+Kインラインエディットが反応しないときに見るべき7つのチェックポイント も合わせてご覧ください
スクリーンショット入力は、AI 開発における「言語化のコスト」を一段引き下げてくれる地味ながら強力な手段です。今日この記事を読み終えたあと、まずは目の前にある UI の小さな違和感を1枚撮って Antigravity に貼ってみてください。「これ、こんなに早く伝わるんだ」という体験が、明日からの開発スピードを変えてくれるはずです。
技術書で深く