画像を見せてUIを直してもらう：スクリーンショット指示のコツ

なぜ画像で指示すると精度が上がるのか

AIへのテキスト指示でUIの問題を伝えようとすると、「左から3番目のボタンの上の余白」「タイトルの文字色が薄い」など、位置・要素・見た目の状態を言語化する手間が発生します。言語化の精度がそのまま指示の精度になるため、複数の問題を同時に伝えようとすると説明が長くなり、AIが優先順位を誤りやすくなります。

画像を渡すと、AIはレイアウトの構造・要素の位置関係・色のコントラストを直接参照できます。「この画面で何が起きているか」を説明しなくてよい分、「どう直してほしいか」だけを書けばよくなります。情報の非対称が減るため、的外れな修正提案が出にくくなります。

ただし、AIが画像から読み取れるのはあくまで「見た目の状態」です。「なぜそのデザインにしたか」「どのユーザー向けか」「他の画面との整合性」はコードやテキストで補わなければ伝わりません。画像は指示の一部であり、全部ではありません。

スクリーンショット指示に必要な3つの要素

効果的なスクリーンショット指示は、次の3つで構成されます。

1. 問題箇所の特定

画像だけ貼って「直してください」と書いても、AIはどの要素に注目すべきかを自分で判断します。その判断があなたの意図と一致するとは限りません。赤丸・矢印・枠などの注釈を画像に加えるか、テキストで「右上のスコア表示」「中央のスタートボタン」と明示してください。

複数箇所を一度に指摘するときは、番号を振って画像とテキストを対応させると整理しやすくなります。「①タイトル文字、②残機アイコン、③BGMボタン」のように番号で紐づけると、AIも番号ごとに回答を整理して返しやすくなります。

2. 現状と目標の差分

「おかしい」「見づらい」だけでは方向性が決まりません。「現状：ボタンラベルが背景と同系色で読みにくい」「目標：白抜き文字にして視認性を上げる」のように、現状と目標をセットで書きます。

目標は数値で書けると精度が上がります。「もう少し大きく」より「font-sizeを16pxから20pxに」、「左に寄せて」より「左マージンを0にしてleft-alignを指定」のほうが修正ブレが減ります。数値がわからないときは「適切な値を提案してください」と一言添えると、AIが根拠つきで複数案を出してくれます。

3. 修正してほしいコードの範囲

AIにはゲーム全体のコードが見えていません。スクリーンショットと一緒に、対象のHTML・CSS・JavaScriptの該当部分を貼り付けてください。「この画像のUIはこのコードで描画されています」と前置きするだけで、AIが推測に使う情報量が増えます。

コード全体が長い場合は、問題の要素を含むセクションだけを切り出すと十分です。たとえばスコア表示の問題であれば、スコアを描画する関数とそこで参照しているCSSクラスだけを渡せばやり取りがコンパクトになります。

失敗しやすいパターンと対処

「なんか変なので直して」パターン画像だけ、あるいは「変なので直してください」とだけ書いた場合、AIは自分が「変」と感じた箇所を修正します。あなたが気にしていない余白や色まで変更されることがあります。問題箇所をゼロから探させる指示は避け、必ず「どこが問題か」を示してください。

コードなし・画像だけパターン画像だけ渡してコードの修正を求めると、AIはコードを推測または新規生成します。生成されたコードがあなたのゲームの構造と合わないケースがほとんどです。必ずコードを添えてください。

複数の異なる問題を一度に渡すパターン「レイアウト・色・アニメーション・フォント」を一枚の画像で一度に指摘すると、AIが対処の優先順位を誤ったり、ひとつの修正が別の修正を上書きしたりします。一回のやり取りで扱う問題は2〜3箇所までに絞り、修正が確認できたら次の問題に進む段階的な進め方が安定します。

開発中画面と最終想定画面を混同するパターンデバッグ用の表示・仮テキスト・未実装要素が画面に残ったままスクリーンショットを撮ると、AIがそれを「修正すべき問題」として拾うことがあります。撮影前に画面を本番に近い状態に整えるか、「〇〇は仮置きなので無視してください」と明示してください。

言葉だけの指示と使い分ける基準

スクリーンショットが特に有効なのは、位置・サイズ・色・重なりなど見た目の状態を問題にしている場面です。「ボタンが画面外にはみ出している」「テキストが別の要素に重なっている」はコードを読むより画像のほうが一瞬で伝わります。

一方、動作・タイミング・ロジックの問題には画像が役立ちません。「クリックしてから0.5秒後に効果音が鳴らない」「スコアが正しく加算されない」はコードとエラーログをテキストで渡すほうが適しています。見た目の問題なのかロジックの問題なのかを最初に切り分けると、必要な情報を過不足なく用意できます。

また、同じ問題を繰り返し修正してもらうときは、前回の修正済みコードを次のやり取りの出発点にしてください。最初の画像を毎回貼り直すより、「前回の修正後のコードで改めて試したところ、新たにこの問題が発生しました」とコードと画像を更新するほうが会話の一貫性が保たれます。

スクリーンショット指示のテンプレート

実際のプロンプトに組み込みやすいよう、最低限の構造を示します。

【画像】（スクリーンショットを添付）

【問題箇所】
赤枠で示した右上のHPバーが背景と同じ赤色になっており、残量が見えません。

【現状と目標】
現状：HPバーの色がbackground-colorと同一（#cc0000）
目標：HPバーを白（#ffffff）または明度の高い色に変更して残量を視認可能にする

【関連コード】
（HPバーを描画しているHTMLとCSSを貼り付ける）

この構造を守るだけで、AIが「何を・どう・どのコードで」修正すればよいかを迷わず判断できます。慣れれば1分以内に用意できます。

次の行動

今手元にあるゲームのUIを開き、気になっている一箇所だけをスクリーンショットに撮ってみてください。問題箇所・現状と目標・該当コードの3点をセットにして、お使いのAIツールに投げると違いがわかります。複数の問題がある場合は一番気になる一箇所から始め、修正コードを確認してから次の問題に進む習慣をつけると、やり取りの精度が安定してきます。修正が済んだゲームはアソバースからZIPまたはHTMLファイルで投稿し、実際のブラウザ環境で見た目を確認してみてください。