VS CodeのGitHub Copilot Chatで、スクリーンショットやUIモック、構成図、PDF仕様書をそのまま会話へ添付できる「Copilot Vision」が一般提供されました。画像の内容を文章で説明し直さなくても、Copilotに「このエラーの原因を調べて」「この画面をReactで実装して」と依頼できます。
2026年7月30日に公開されたGitHubの更新情報は、同年7月にリリースされたVS Code 1.127～1.131をまとめたものです。Copilot VisionのGAは、7月8日公開のVS Code 1.128で明記されています。したがって、実際に利用する場合はVS Code 1.128以降、できれば最新版へ更新するのが確実です。(The GitHub Blog)
VS CodeのCopilot VisionがGAで何が変わったのか
Copilot Visionは、GitHub Copilotがテキストやコードだけでなく、画像やPDFの内容も入力情報として扱えるマルチモーダル機能です。
従来は、エラー画面に表示された内容を手入力したり、デザイン資料を文章で説明したりする必要がありました。Copilot Visionでは、対象のファイルをCopilot Chatへ添付し、そのまま質問できます。
たとえば、次のような使い方が可能です。
- エラーダイアログのスクリーンショットから原因を整理する
- UIモックをもとにHTMLやReactコンポーネントを作成する
- システム構成図を読み取り、処理の流れを説明させる
- PDF仕様書から実装要件や確認事項を抽出する
- 複数の画面キャプチャを比較し、差分をまとめる
GitHubは2026年7月1日にCopilot VisionのGAを発表し、VS CodeではAsk、Plan、Agentの各モードで利用できると案内しています。その後、VS Code 1.128のリリースノートでも、画像とPDFをChatへ添付できるマルチモーダル機能が一般提供になったことが明記されました。(The GitHub Blog)
プレビュー版とGA版の違い
GAは「General Availability」の略で、限定的なプレビュー機能ではなく、一般利用できる正式機能として提供される段階を指します。
| 項目 | プレビュー時 | GA後 |
|---|---|---|
| 利用対象 | 一部ユーザーや設定を有効にした組織 | Copilotの各プラン |
| 組織向け設定 | Business／Enterpriseではプレビュー機能の許可が必要だった | Vision専用の有効化作業は不要 |
| 利用位置づけ | 仕様変更の可能性が高い試験機能 | 通常業務でも利用を検討できる一般提供機能 |
| 添付方法 | 対象環境によって制限あり | 貼り付け、ドラッグ＆ドロップ、コンテキストメニュー |
Copilot Visionは、Copilot Free、Pro、Pro+、Business、Enterpriseで利用でき、Visionを有効化するための個別ポリシー変更や管理者操作は不要とされています。(The GitHub Blog)
ただし、組織の管理者がCopilot Chat自体を無効化している場合は利用できません。「Visionに専用の許可が不要」という意味であり、組織全体のCopilot利用方針を回避できるわけではありません。(GitHub Docs)
Copilot Visionを利用するための条件
VS Codeで画像やPDFを添付する前に、次の条件を確認します。
| 確認項目 | 内容 |
|---|---|
| VS Code | 1.128以降を使用する。最新版への更新を推奨 |
| GitHubアカウント | Copilotを利用できるアカウントでサインインする |
| Copilot Chat | VS Code内でCopilot Chatを利用できる状態にする |
| AIモデル | 画像入力に対応したモデルを選択する |
| 組織アカウント | Copilot Chatの利用が組織ポリシーで許可されていることを確認する |
GitHubは、Copilot Chatの更新がVS Codeのリリースと密接に連動しているため、古いVS Codeでは最新のCopilot Chatが正常に動作しない場合があると説明しています。添付欄が表示されないときは、まずVS CodeとCopilot関連機能を最新版へ更新してください。(GitHub Docs)
対応する画像・文書形式
Copilot VisionのGA発表時点で案内された主な形式は次のとおりです。
| 種類 | 対応形式 |
|---|---|
| 画像 | JPEG、PNG、GIF、WebP |
| 文書 |
GitHubの現行ドキュメントでは、これらに加えてHEICとHEIFも対応形式として掲載されています。ただし、OSや利用環境による差を避けるなら、画像はPNGまたはJPEG、文書はPDFを使用するのが無難です。(The GitHub Blog)
VS Code Copilot Chatへ画像やPDFを添付する方法
Copilot Visionでは、主に3つの方法でファイルを添付できます。
コピーした画像をCopilot Chatへ貼り付ける
画面キャプチャやクリップボードへコピーした画像は、Copilot Chatの入力欄へ直接貼り付けられます。
- WindowsのSnipping Toolなどで対象画面をキャプチャする
- VS CodeでCopilot Chatを開く
- Chatの入力欄を選択する
Ctrl + V、macOSではCommand + Vで貼り付ける- 画像と一緒に質問を入力して送信する
エラー画面を調べる場合は、次のように依頼します。
添付したエラー画面を確認してください。
次の順序で回答してください。
1. 画面から読み取れるエラー内容
2. 想定される原因
3. 確認すべき設定やログ
4. 修正手順
5. 修正後の確認方法
環境はWindows 11、Node.js 24、VS Codeです。スクリーンショットをそのまま送るだけでなく、OS、言語、フレームワーク、直前に行った操作も添えると、原因を絞り込みやすくなります。
ファイルをドラッグ＆ドロップする
画像やPDFファイルは、エクスプローラーやFinderからCopilot Chatへドラッグ＆ドロップできます。VS Code内のExplorerに表示されている画像ファイルをChatへドラッグする方法も利用できます。(GitHub Docs)
PDF仕様書を扱う場合は、ファイルだけを添付するのではなく、確認する範囲と目的を明示してください。
添付したPDF仕様書を確認し、認証機能に関係する要件だけを整理してください。
出力内容：
- 必須要件
- 任意要件
- 不明確な記述
- 実装前に確認すべき質問
- 想定されるAPIとデータ項目
既存システムはReact、TypeScript、ASP.NET Coreで構成されています。長いPDFに対して「要約して」とだけ指示すると、実装に必要な細部が抜けることがあります。対象ページ、章、機能名、求める出力形式まで指定するのがポイントです。
Explorerのコンテキストメニューから追加する
VS CodeのExplorerに画像やPDFが保存されている場合は、対象ファイルのコンテキストメニューからChatへ追加できます。
- VS CodeのExplorerで対象ファイルを右クリックする
- Copilot関連のメニューを開く
Add File to Chatに相当する項目を選択する- Copilot Chatへ質問を入力する
メニュー名はVS Codeの表示言語や更新状況によって異なる場合があります。公式ドキュメントでは、画像ファイルを右クリックして「Copilot」から「Add File to Chat」を選ぶ手順が案内されています。(GitHub Docs)
画像はコピー＆ペースト、PDFはドラッグ＆ドロップまたはコンテキストメニューを使うと、操作に迷いにくいでしょう。
Ask・Plan・Agentモードの使い分け
Copilot VisionはAsk、Plan、Agentの各モードで利用できます。添付するファイルが同じでも、モードによってCopilotに任せる範囲が変わります。(The GitHub Blog)
| モード | 適した用途 | 依頼例 |
|---|---|---|
| Ask | 内容の説明、原因調査、比較 | 「このエラー画面から原因候補を挙げて」 |
| Plan | 実装方針や作業手順の作成 | 「このUIモックを実装する計画を作って」 |
| Agent | コード作成や既存ファイルの修正 | 「この画面に合わせて既存のReactコンポーネントを修正して」 |
初めて扱う画像やPDFは、最初からAgentモードで変更させるより、AskまたはPlanモードで解釈内容を確認してから実装へ進むほうが安全です。
たとえば、UIモックを実装するときは次の順序が適しています。
- Askモードで画面構成を説明させる
- 認識された要素、余白、状態、操作を確認する
- Planモードで実装対象ファイルと手順を整理する
- Agentモードでコードを変更する
- 実際の表示と添付画像を見比べる
この流れにすると、Copilotが画像を誤って解釈したまま大規模な変更を進めるリスクを抑えられます。
Copilot Visionが役立つ実務シーン
エラー画面からトラブルシューティングする
ログをコピーできないアプリや、ダイアログにしか表示されないエラーの調査に向いています。
このエラー画面を分析してください。
画面に書かれていない内容を推測で断定せず、確認できる事実と原因候補を分けてください。
あわせて、PowerShellで実行できる確認コマンドを提示してください。
設定を変更するコマンドは、確認コマンドと分けてください。「事実」と「推測」を分けるよう指示すると、画面に存在しない情報を確定事項として扱う可能性を下げられます。
UIモックからフロントエンドを実装する
画像を見せるだけでは、利用する技術やレスポンシブ要件まで自動的に決まりません。実装条件を具体的に指定します。
添付したUIモックをもとに、ReactとTypeScriptで画面を実装してください。
条件：
- 既存のCSS Modulesを使用する
- 新しいUIライブラリは追加しない
- 画面幅768px未満では1カラムにする
- ボタンと入力欄に適切なlabel、aria属性を設定する
- ダミーデータは別ファイルへ分離する
- 変更後に型チェックを実行する画像だけでなく、対象の既存コンポーネントやスタイルファイルもChatのコンテキストへ加えると、プロジェクト固有の書き方を維持しやすくなります。
構成図やフローチャートをレビューする
構成図を添付して、コンポーネント、通信経路、障害点を整理させる使い方もできます。
このシステム構成図を読み取り、次の内容を表で整理してください。
- コンポーネント名
- 役割
- 入力元
- 出力先
- 通信プロトコル
- 認証方式
- 単一障害点になり得る箇所
- 図だけでは判断できない項目
図中の文字が不鮮明な場合は推測せず、不明と記載してください。構成図のレビューでは、「読み取れない部分を推測しない」と明示することが重要です。
PDF仕様書から実装タスクを作る
PDFを添付し、仕様をそのままコード化させるのではなく、最初に要件と不明点を抽出させます。
添付したPDFのうち、ユーザー登録機能に関係する内容を確認してください。
次の形式で整理してください。
- 機能要件
- 入力項目と制約
- バリデーション
- エラー処理
- 権限要件
- テストケース
- 仕様上の矛盾
- 発注者へ確認すべき事項
文書に記載がない内容は補完せず、「記載なし」としてください。この段階で仕様の抜けや矛盾を整理してから、実装用のプロンプトへ進むと手戻りを減らせます。
画像・PDFの認識精度を上げるコツ
Copilot Visionへ資料を渡すときは、ファイルの情報量を増やすより、必要な情報を明確にすることが重要です。
画像は必要な範囲だけ切り抜く
デスクトップ全体のスクリーンショットより、エラー、設定値、対象UIが読める範囲に絞った画像のほうが質問の意図が明確になります。
ただし、エラー発生時刻、アプリ名、ステータスバーなどが原因調査に必要な場合は、切り取りすぎないようにします。
小さい文字は拡大して添付する
表、ログ、設定画面の文字が小さい場合は、対象部分を拡大した画像も追加します。全体図と拡大図を2枚添付し、「1枚目が全体、2枚目が詳細」と説明すると関係性を伝えやすくなります。
PDFは対象ページを明示する
長いPDFでは、次のように範囲を指定します。
12～18ページのAPI仕様を中心に確認してください。
付録と変更履歴は対象外です。必要なページだけのPDFを別途作成できる場合は、資料を分割したほうが目的に沿った回答を得やすくなります。
求める成果物を指定する
「見てください」だけでは、説明、要約、コード生成のどれを求めているのか分かりません。
次の情報をセットで伝えます。
- 何を確認してほしいか
- どの技術で実装するか
- どのファイルを変更してよいか
- 変更してはいけない箇所
- 出力形式
- 完了条件
- 実行してほしいテスト
画像は要件そのものではなく、要件を伝えるためのコンテキストと考えると、プロンプトを組み立てやすくなります。
GA後も注意したいポイント
画像の解釈結果は必ず確認する
Copilot VisionがGAになっても、画像内の文字、数値、配置、部品の役割を常に正確に認識できるとは限りません。
特に次の情報は原本と照合してください。
- 小さく表示されたエラーコード
- 表内の数値や単位
- 似た形のアイコン
- 矢印が交差する複雑な構成図
- UIの細かな余白や色
- PDFの脚注や注記
- 複数ページにまたがる条件
画像から生成されたコードも、そのまま本番へ反映せず、差分、テスト結果、アクセシビリティ、セキュリティを人が確認する必要があります。
機密情報をそのまま添付しない
スクリーンショットには、APIキー、ユーザー名、メールアドレス、顧客情報、内部URLなどが意図せず含まれることがあります。
添付前に次の情報を削除またはマスキングしてください。
- パスワードやアクセストークン
- 接続文字列
- 顧客や職員の個人情報
- 未公開製品の名称や画面
- 社外秘の構成情報
- 本番環境のホスト名やIPアドレス
GitHubは、Copilot BusinessおよびEnterpriseユーザーが送信した画像・PDF添付ファイルを、サービス提供のため約24時間保持すると説明しています。組織で利用する場合は、GitHubの公開情報だけでなく、自社の情報セキュリティ規程や生成AI利用ルールにも従ってください。(The GitHub Blog)
Vision対応モデルを選ぶ
画像やPDFを添付できても、選択中のモデルが画像入力に対応していなければ、内容を処理できないことがあります。GitHub Docsでも、画像入力をサポートするモデルを利用することが条件として案内されています。(GitHub Docs)
モデル選択欄が表示されている場合は、画像入力に対応したモデルを選択してください。モデルの提供状況はプランや組織設定によって変わる可能性があるため、固定のモデル名を前提に運用しないほうが安全です。
PDFを添付しただけで仕様が確定するわけではない
PDFには古い改訂内容、参考情報、付録、矛盾した記述が含まれる場合があります。
Copilotに実装させる前に、次のように段階を分けます。
- 文書の対象範囲を指定する
- 要件と参考情報を分離する
- 矛盾や記載不足を抽出する
- 人が確認して仕様を確定する
- 確定した内容をもとに実装させる
PDFを「正しい仕様の確定版」と決めつけず、確認対象の資料として扱うことが重要です。
画像やPDFを添付できないときの確認方法
| 症状 | 主な確認点 | 対処 |
|---|---|---|
| 貼り付けても画像が追加されない | VS Codeのバージョン | 1.128以降、できれば最新版へ更新する |
| 添付メニューが表示されない | Copilot Chatの更新状態 | VS Codeを更新し、ウィンドウを再読み込みする |
| ファイル形式エラーになる | 拡張子や形式 | PNG、JPEG、WebP、GIF、PDFへ変換する |
| 添付後に内容を読めない | 選択中のAIモデル | 画像入力に対応したモデルへ切り替える |
| 組織アカウントだけ使えない | Copilot Chatのポリシー | 管理者にChatの利用可否を確認する |
| PDFの一部しか回答に反映されない | 文書の範囲や複雑さ | ページを指定するか、PDFを分割する |
| 画像内の文字を誤認識する | 解像度や文字サイズ | 対象部分を拡大して再添付する |
最新版のCopilot Chatは最新版のVS Codeを前提とすることがあるため、不具合調査では拡張機能だけでなく、VS Code本体の更新状況も確認してください。(GitHub Docs)
VS Code Copilot Visionを実務で使い始める手順
Copilot Visionを試す場合は、次の順序で進めると安全です。
- VS Codeを1.128以降の最新版へ更新する
- GitHub Copilotへサインインする
- Copilot Chatを開く
- 画像入力に対応したモデルを選ぶ
- 機密情報を画像やPDFから削除する
- 画像は貼り付け、PDFはドラッグ＆ドロップで添付する
- 目的、対象範囲、出力形式、制約をプロンプトへ書く
- 最初はAskまたはPlanモードで認識内容を確認する
- 必要に応じてAgentモードでコードを変更する
- 生成結果を原本、仕様書、テスト結果と照合する
Copilot VisionのGAによって、VS CodeのCopilot Chatは、コードだけでなく画面、図、文書も含めて相談できる開発支援環境になりました。まずは機密情報を含まないエラー画面やUIモックを添付し、Askモードで内容を正しく読み取れるか確認するところから始めるのが適切です。
コメント