← レッスンに戻る
第4章 · Claude API応用

Vision (画像入力)

Vision · 約 10 分

重要キーワード

English日本語説明
Vision 視覚理解 Claude が画像を入力として理解する機能
OCR 光学文字認識 画像中のテキストを抽出する処理
Base64 Base64エンコード バイナリをテキスト化する方式 (画像埋め込みに使用)

Vision (画像入力)

Claude は 画像 を入力として受け取れます。 スクショ解析・図表理解・OCR・UI 確認など幅広く使えます。

URL 指定

client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=512,
    messages=[{
        "role": "user",
        "content": [
            {"type": "image", "source": {
                "type": "url",
                "url": "https://example.com/diagram.png",
            }},
            {"type": "text", "text": "この図を説明して"},
        ],
    }],
)

Base64 で埋め込み

import base64
img_b64 = base64.b64encode(open("local.png", "rb").read()).decode()

content = [
    {"type": "image", "source": {
        "type": "base64",
        "media_type": "image/png",
        "data": img_b64,
    }},
    {"type": "text", "text": "テキストを抽出して"},
]

制約

Use Case

Tip 1: 解像度を上げすぎない

高解像度ほどトークン消費が増えます。 テキスト読み取り目的なら 1024〜1568px に縮小すれば十分なことが多いです。

Tip 2: 複数画像

1 メッセージに複数画像を含められます。比較タスクに有用。

content=[
    {"type": "image", "source": {...}},
    {"type": "image", "source": {...}},
    {"type": "text", "text": "2 枚を比較して違いを箇条書きで"},
]

Tip 3: 画像は最初に置く

性能向上のため、画像 → テキスト の順で並べることが推奨されます。

Tip 4: PDF も Vision で読める

第3章で扱った Files API + PDF は内部で Vision + テキスト解析 が走ります。

試す (URL 画像)

公開されている図表で試してみましょう。

▶ 図表理解 (URL)
次の URL の図を 3 文で説明してください: https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png

演習問題

演習 1: スクショから ToDo を起こす

ホワイトボードや付箋メモのスクショを Claude に見せて、JSON 形式の ToDo リスト に変換してください。

プロンプト例:

この画像のタスクを抽出して JSON 配列で返して。各要素は {title, priority, owner?} 形式で。

観察ポイント: 文字認識精度・優先度推定・owner の不確実な扱い。

スタータープロンプト:
この画像のタスクを抽出して JSON 配列で返してください。各要素は {title (必須), priority (high/med/low, 推定可), owner (読み取れる場合のみ)} 形式。読み取れない情報は null。日本語のまま抽出。
ヒントを見る

Playground は画像入力の UI を持たないので、この演習はスクリプトで試してください。base64.b64encode(open(...).read()).decode() で埋め込み、type: image ブロックで渡します。

理解度チェック

  1. Claude が直接受け取れない入力形式は?
    1. JPEG
    2. PNG
    3. MP3
    4. WEBP
  2. ローカル画像を渡す方法として一般的なのは?
    1. ファイルパスを文字列で指定
    2. Base64 エンコードして source に埋め込む
    3. FTP で送信
    4. Pickle で送る
  3. OCR 目的で画像を渡すときの推奨サイズは?
    1. 8K 以上
    2. 可能な限り高解像度
    3. 1024〜1568px 前後
    4. 256px
  4. 画像とテキストを 1 リクエストに混ぜる場合の推奨順序は?
    1. テキスト → 画像
    2. 画像 → テキスト
    3. ランダム
    4. 順序は関係ない
解答と解説を見る
  1. C — 音声 (MP3) は直接の入力形式ではありません。文字起こしを別途行います。
  2. B — URL 指定が使えない場合は Base64 で埋め込みます。
  3. C — コスト効率と精度のバランスから 1568px 前後が推奨されます。
  4. B — Anthropic の推奨は画像を先に置く順序です。