ChatGPT Vision APIで画像をアップロードする方法｜コード例付き完全ガイド【2026年版】
ChatGPT Vision APIで何が解決するか
ChatGPT Vision APIを使うと、テキストだけでなく画像をアップロードして、その画像の内容を文脈として活用できます。これまでは「文字で説明する」しかなかった情報を、実際の画像を見せながらAIに分析・回答させることが可能になります。
従来の方法（Before）
- 画像の内容を言葉で詳しく説明する必要がある
- 説明漏れが生じやすく、AIの理解が不正確になる
- スクリーンショット分析やデザインレビューの場合、何度も説明を繰り返す
- ドキュメント自動作成の際、対象物を写真で見せることができない
Vision API導入後（After）
- 画像をそのままアップロードしてAIに見せられる
- 「このスクリーンショットのエラーメッセージを解読してほしい」と一言で済む
- 複数の画像を同時に分析させて比較できる
- ブログ記事制作時に製品写真から仕様を自動抽出できる
Vision APIの基本的な仕組み
ChatGPT Vision APIで画像をアップロードするには、画像をBase64形式にエンコードしてAPIリクエストに含める方法が一般的です。OpenAI APIドキュメントでは、ローカルファイルまたはURL指定の両方に対応しており、複数の画像を1つのリクエストに含めることもできます。
対応するモデル
Vision機能は主にGPT-4系のモデルで利用可能です。2026年現在、最新のGPT-4モデルでは画像入力が標準でサポートされています。
対応する画像形式
- JPEG
- PNG
- GIF
- WebP
画像をBase64エンコードしてアップロード
最もシンプルな方法は、ローカルの画像ファイルをBase64形式に変換してAPIリクエストに埋め込む方法です。
import base64
import requests
import json
# 画像ファイルをBase64エンコード
def encode_image(image_path):
with open(image_path, "rb") as image_file:
return base64.b64encode(image_file.read()).decode('utf-8')
# APIリクエストを作成
api_key = "your-api-key-here"
image_path = "screenshot.png"
base64_image = encode_image(image_path)
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "この画像に写っているテキストをすべて抽出してください"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/png;base64,{base64_image}"
}
}
]
}
],
"max_tokens": 1024
}
response = requests.post(
"https://api.openai.com/v1/chat/completions",
headers=headers,
json=payload
)
print(response.json())
この方法のメリットは、ローカルファイルをそのままアップロードでき、画像URLの生成や管理が不要な点です。デメリットとしては、ファイルサイズが大きいとリクエスト本文が肥大化することが挙げられます。
URLで画像を直接参照する方法
画像がWebサーバーに置いてある場合、URLを直接指定することも可能です。この方法はBase64エンコードより処理が軽く、大容量ファイルでも問題ありません。
import requests
import json
api_key = "your-api-key-here"
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "このWebページのレイアウトについて詳しく説明してください"
},
{
"type": "image_url",
"image_url": {
"url": "https://example.com/website-screenshot.jpg"
}
}
]
}
],
"max_tokens": 1024
}
response = requests.post(
"https://api.openai.com/v1/chat/completions",
headers=headers,
json=payload
)
print(response.json())
URL指定の場合、OpenAI APIが外部URLにアクセスできる環境であることが前提となります。一般的には、公開されているWebサイトのスクリーンショットやクラウドストレージ上の画像について、権限があれば利用可能です。
複数の画像を同時にアップロード
複数の画像を1つのAPIリクエストに含めることで、複数の写真やスクリーンショットを比較分析させることができます。
import base64
import requests
import json
def encode_image(image_path):
with open(image_path, "rb") as image_file:
return base64.b64encode(image_file.read()).decode('utf-8')
api_key = "your-api-key-here"
# 複数の画像をエンコード
image1_base64 = encode_image("design_v1.png")
image2_base64 = encode_image("design_v2.png")
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "この2つのデザイン案を比較して、それぞれの特徴と改善提案をしてください"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/png;base64,{image1_base64}"
}
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/png;base64,{image2_base64}"
}
}
]
}
],
"max_tokens": 1024
}
response = requests.post(
"https://api.openai.com/v1/chat/completions",
headers=headers,
json=payload
)
print(response.json())
複数の画像を送信する際は、content配列に複数のimage_urlオブジェクトを含めるだけです。テキスト説明も同じ配列内に入れるので、「この2つの比較をして」という指示も同時に伝えられます。
JSONモードで構造化された回答を得る
Vision APIで画像を分析した結果をJSON形式で取得したい場合、JSONモード（JSON mode）を有効にすることで、AIの回答を常にJSON形式で返すようにできます。
import base64
import requests
import json
def encode_image(image_path):
with open(image_path, "rb") as image_file:
return base64.b64encode(image_file.read()).decode('utf-8')
api_key = "your-api-key-here"
base64_image = encode_image("product_photo.jpg")
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "この製品写真から以下の情報をJSON形式で抽出してください: 製品名、色、推定サイズ、材質（見た目から）、用途"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/jpeg;base64,{base64_image}"
}
}
]
}
],
"max_tokens": 1024,
"response_format": {"type": "json_object"}
}
response = requests.post(
"https://api.openai.com/v1/chat/completions",
headers=headers,
json=payload
)
result = response.json()
print(json.dumps(result, ensure_ascii=False, indent=2))
response_formatパラメータに{"type": "json_object"}を指定することで、APIはJSON形式の回答を保証します。これにより、プログラムから回答を構造化されたデータとして処理しやすくなります。
実用的な使用シーン
1. スクリーンショットのエラー分析
アプリケーションやWebサイトのエラー画面をアップロードして、エラーメッセージの解釈や対処法を提案させることができます。
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "このエラーメッセージが表示されました。原因と解決方法を教えてください"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/png;base64,{error_screenshot_base64}"
}
}
]
}
],
"max_tokens": 1024
}
2. デザインレビューと改善提案
Webデザインやグラフィックデザインのスクリーンショットをアップロードして、UI/UXの改善点をAIに指摘させます。
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "このランディングページのデザインをレビューしてください。色選び、テキスト配置、CTAボタンの目立ちやすさなど、改善できる点を教えてください"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/png;base64,{landing_page_base64}"
}
}
]
}
],
"max_tokens": 1024
}
3. 製品写真からの情報抽出
商品写真やパッケージをアップロードして、製品情報を自動抽出できます。ECサイトのカタログ作成などに活用できます。
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "この製品写真から、商品説明文を150文字程度で作成してください。見た目から推測される特徴、用途、対象者を含めてください"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/jpeg;base64,{product_photo_base64}"
}
}
]
}
],
"max_tokens": 512
}
4. ドキュメントやポスターのテキスト抽出
手書きメモ、ホワイトボード写真、ポスターなどをアップロードして、書かれているテキストを自動認識・抽出できます。
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "ホワイトボードに書かれたテキストをすべて抽出して、整形してください"
},
{
"type": "image_url",
"image_url": {
"url": f"data:image/png;base64,{whiteboard_base64}"
}
}
]
}
],
"max_tokens": 1024
}
Vision API使用時のよくある失敗と対処法
問題1: 画像サイズが大きすぎる
APIリクエスト本文に埋め込む画像がBase64エンコード後に数MB以上になると、リクエストがタイムアウトするか、エラーが返される可能性があります。
対処法:
- 大きな画像はPythonのPILライブラリで圧縮してからエンコードする
- URLで参照する方法に変更する
- 複数の小さい画像に分割する
from PIL import Image
import io
def compress_image(image_path, max_width=1280, quality=85):
img = Image.open(image_path)
img.thumbnail((max_width, max_width), Image.Resampling.LANCZOS)
output = io.BytesIO()
img.save(output, format="JPEG", quality=quality)
output.seek(0)
return output
問題2: エンコード形式が間違っている
Base64エンコード時に、プレフィックス（data:image/jpeg;base64,）を忘れると、APIがその形式を認識できません。
対処法:
- 必ず
data:image/{形式};base64,の形式で画像データの前に付ける - 形式は実際のファイル形式（jpeg、png、gif、webpなど）と一致させる
問題3: JSONモードがエラーになる
JSONモードを有効にした場合、AIがJSON形式以外の回答をしようとするとエラーが発生することがあります。
対処法:
- プロンプトで明確に「JSON形式で答えてください」と指示する
- 期待するJSON構造をプロンプトで例示する
max_tokensを十分に設定して、AIが完全な回答をできるようにする
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": """この画像から以下の情報をJSON形式で抽出してください。
期待される形式: {"product_name": "...", "color": "...", "estimated_price": "..."}"""
},
{
"type": "image_url",
"image_url": {"url": f"data:image/jpeg;base64,{base64_image}"}
}
]
}
],
"max_tokens": 1024,
"response_format": {"type": "json_object"}
}
問題4: APIキーがリクエストに含まれていない
Authorizationヘッダーを忘れると、401 Unauthorizedエラーが返されます。
対処法:
- ヘッダーに必ず
"Authorization": f"Bearer {api_key}"を含める - APIキーを環境変数から読み込む（ファイルに直書きしない）
import os
api_key = os.getenv("OPENAI_API_KEY")
if not api_key:
raise ValueError("OPENAI_API_KEYが設定されていません")
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {api_key}"
}
問題5: 外部URLにアクセスできない
URLで画像を指定した場合、OpenAI APIのサーバーがそのURLにアクセスできなければエラーになります。
対処法:
- プライベートネットワーク内のURLは使わない
- 認証が必要なURLは使わない
- 公開されているURLだけを使う
- URLが有効であることを確認してからAPIに送信する
出力結果を改善するコツ
1. より詳細な分析を得るための指示
単に「分析してください」という指示より、具体的に何を分析してほしいかを示すと、より有用な回答が得られます。
ビフォア:
"text": "この画像について分析してください"
アフター:
"text": "この画像のUIデザインについて、ユーザビリティの観点から分析してください。特に色コントラスト、ボタンの配置、テキストサイズについて指摘してください"
2. 言語や形式を明確に指定
出力の形式を明確に指定すると、回答がより構造化されます。
"text": """この製品写真から以下をマークダウン形式で出力してください:
- 製品名（推測）
- 主な特徴
- 対象ユーザー
- 類似製品との違い（見た目から）
- 販売価格帯（推測）"""
3. 段階的な指示
複雑な分析が必要な場合、複数ステップに分けて指示すると精度が上がる傾向があります。
payload = {
"model": "gpt-4-vision-preview",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "まず、この画像に何が写っているか説明してください"
},
{
"type": "image_url",
"image_url": {"url": f"data:image/jpeg;base64,{base64_image}"}
}
]
},
{
"role": "assistant",
"content": "[AIの回答がここに入る]"
},
{
"role": "user",
"content": [
{
"type": "text",
"text": "その説明に基づいて、この商品の販売ページ向けキャッチコピーを3つ作成してください"
}
]
}
],
"max_tokens": 1024
}
ChatGPT Vision API vs Claude vs Geminiの比較
Vision機能を提供するAIサービスは複数あります。用途に応じて使い分けることをお勧めします。
ChatGPT Vision API（OpenAI）
- 対応モデル: gpt-4-vision系
- 対応形式: JPEG、PNG、GIF、WebP
- JSONモード: 対応
- API料金: 画像サイズに応じた従量課金
- 特徴: 画像認識の精度が高く、複雑な分析に強い
Claude（Anthropic）
- 対応モデル: Claude 3系
- 対応形式: JPEG、PNG、GIF、WebP
- JSONモード: 独自の出力制御機能あり
- 特徴: テキスト理解と画像理解のバランスが良く、安全性を重視した設計
Gemini（Google）
- 対応モデル: Gemini Pro Vision
- 対応形式: JPEG、PNG、GIF、WebP
- 特徴: Google検索との統合が可能、複数言語対応
どのサービスを選ぶかは、精度、料金、API制限、用途による使い分けなどを総合的に判断する必要があります。本記事ではChatGPT Vision APIを軸に解説しましたが、基本的なコンセプト（画像のBase64エンコード、メッセージ形式）は他のサービスでも同様です。
あわせて読みたい
- ChatGPTプロンプトキャッシュ機能を使うと｜入力コスト90%削減で業務効率化する方法
- プロンプトの書き方完全ガイド｜ChatGPT・Claudeで思い通りの回答を引き出すコツ
- ChatGPTでSEO用スキーママークアップを自動生成｜FAQ・HowTo・レビュー対応プロンプト集【2026年版】
