GitHub Copilot Visionの使い方｜画像・スクショをChatに添付

公開: 2026年8月3日・読了目安6分

GitHub Copilot Visionは、Copilot Chatに画像やスクリーンショットを添付し、その内容を踏まえて回答してもらえる機能です。UIモックアップからのコード生成、エラー画面の解析、図からの実装など、言葉で説明しにくい情報をそのまま渡せるのが最大の利点です。対応フォーマットや使い方のコツを押さえれば、テキストだけのやり取りより早く目的の実装にたどり着けます。

この記事の要点

Free・Pro・Pro+・Business・Enterpriseの全プランで追加料金・追加設定なしに利用でき、2026年8月時点で正式機能(GA)として提供されている。

対応画像形式はJPEG/JPG・PNG・GIF・WEBPで、アニメーションGIFは最初の1フレームのみが解析対象になる。

VS Codeでは「Attach Context」ボタンやドラッグ&ドロップ、クリップボードからの貼り付けで画像を添付できる。

画像だけでなく依頼文を添えることで意図と違う提案を減らせ、複数枚を一度に渡すより対象を絞る方が精度が安定する。

Business/Enterpriseプランでは添付した画像・PDFのデータが約24時間保持されるため、機密情報の写り込みに注意が必要。

前提・動作環境

対応環境: VS Codeのチャットパネル(Ask/Edit/Agentモードいずれでも利用可)、github.com上のCopilot Chat、GitHub Copilot CLIなど複数の環境で利用できます。VS Codeでの基本セットアップは「VS CodeでGitHub Copilotを使う方法」で解説しています。
対応プラン: Free・Pro・Pro+・Business・Enterpriseの全プランで追加設定なしに利用可能です。2026年8月時点でCopilot Visionは正式機能(GA)として提供されており、個人アカウントでも特別なポリシー有効化は不要です。
対応フォーマット: 画像はJPEG/JPG・PNG・GIF・WEBPに対応します。アニメーションGIFは最初の1フレームのみが解析対象になる点に注意してください。github.com上のChatではPDFの添付にも対応しています。

Copilot Visionとは

Copilot Visionは、Copilot Chatのプロンプトに画像を添付し、その内容を踏まえてCopilotに回答・提案してもらう機能です。画面のスクリーンショットやデザインモックアップ、手描きの図などをそのまま渡せるため、状況をテキストだけで説明する手間を省けます。基本的なChatの使い方は「Copilot Chatの使い方」も参考にしてください。画像は単体で送るのではなく、テキストのプロンプトと組み合わせて渡すのが基本です。「このエラーの原因を教えて」のように依頼文を添えることで、意図が伝わりやすくなります。

画像の添付方法(VS Codeの場合)

VS CodeのCopilot Chatで画像を渡す方法は主に3通りあります。

スクリーンショットやモックアップ画像をクリップボードにコピーし、チャット欄の「Attach Context」ボタンから「Image from Clipboard」を選択して貼り付ける
添付したい画像ファイルをチャットパネルにドラッグ&ドロップする
「Attach Context」ボタンからワークスペース内の画像ファイルやスクリーンショットウィンドウを選んで添付する

1メッセージに複数枚まとめて添付できますが、枚数が多すぎると意図した箇所に注目してもらえないことがあります。伝えたい内容ごとに画像を絞って送るのがおすすめです。

実践ユースケース

UIモックアップからのコード生成: デザインツールで作成したモックアップ画像を添付し、「このデザインをReactコンポーネントとして実装して」と依頼すると、レイアウトや配色を踏まえたコードのたたき台を提案してくれます。細部の調整は必要ですが、ゼロから組み上げるより着手が早くなります。

エラー画面スクショの解析: ブラウザやターミナルに表示されたエラーメッセージのスクリーンショットを添付し、「このエラーの原因と直し方を教えて」と質問すると、表示内容を読み取ったうえで原因の推測と修正案を返してくれます。文字化けしたログをコピーし直す手間が省けます。

図からの実装: 手描きのフローチャートやER図の画像を渡し、「この図の通りに処理を実装して」と依頼すると、図の構造を解釈してコードに落とし込んでくれます。矢印や分岐が多い図は、要点を言葉でも添えると精度が上がります。

うまく解析させるコツ

画像は鮮明でシンプルなものを使う: 文字がつぶれた低解像度の画像や、余計な要素が写り込んだスクリーンショットは誤読の原因になります。必要な範囲だけをトリミングして渡しましょう。
画像とテキストを組み合わせる: 画像だけでなく何をしてほしいかを文章で明確に添えることで、意図と違う提案を減らせます。
1回の依頼で見てほしい箇所を絞る: 複数の画面を一度に渡すより、対象を1つずつ渡して確認しながら進めた方が精度が安定します。

つまずきポイント/よくあるエラー

画像を添付してもボタンが表示されない: 拡張機能やCopilot Chatのバージョンが古い可能性があります。最新版に更新してから再度確認してください。
アニメーションGIFの内容が正しく認識されない: アニメーションGIFは最初の1フレームのみが解析対象になるため、伝えたい場面は静止画として書き出してから添付してください。
意図と違う解析結果が返る: 画像だけを渡して依頼文を省略すると起こりやすい現象です。目的や注目してほしい箇所を文章で補ってください。選択中のモデルが画像の読み取りを苦手としている可能性もあるため、GitHub公式のモデル比較で「視覚的推論」に対応するとされているモデル(2026年8月時点でGPT-5 mini、Claude Sonnet 4.6、Gemini 3.1 Proなど)にモデルピッカーから切り替えて試すのも有効です。モデルの切り替え方法は「GitHub Copilotのモデル切り替え方法」で解説しています。
機密情報が写り込んだ画像を送ってしまう: Business/Enterpriseプランでは画像やPDFの添付データが約24時間保持されます。スクリーンショットに機密情報が写っていないか送信前に確認しましょう。

よくある質問

Copilot Visionを使うのに追加料金はかかりますか?

いいえ。Free・Pro・Pro+・Business・Enterpriseの全プランで追加料金なしに利用でき、特別なポリシーを有効にする必要もありません。

一度に何枚まで画像を添付できますか?

チャット欄からまとめて添付できますが、枚数が多いほど意図した箇所を読み取ってもらいにくくなります。伝えたい内容ごとに画像を絞り、必要なら複数回に分けて依頼するのがおすすめです。

PDFファイルも添付できますか?

github.com上のCopilot ChatではPDFの添付にも対応しています。VS CodeのChatでは主に画像形式(JPEG/PNG/GIF/WEBP)が対象です。

まとめ

GitHub Copilot Visionを使えば、UIモックアップやエラー画面のスクリーンショット、手描きの図をそのままCopilot Chatに渡し、コード生成や原因調査を効率化できます。画像はクリップボードからの貼り付けやドラッグ&ドロップなどで簡単に添付でき、Free〜Enterpriseまで全プランで追加設定なしに利用可能です。鮮明な画像を使い、依頼文を添えて対象を絞ることが精度を上げるコツです。基本のChat操作は「Copilot Chatの使い方」、VS Codeでの導入は「VS CodeでGitHub Copilotを使う方法」、Copilot全体の使い方は「使い方完全ガイド」もあわせてご覧ください。