第4章 · Advanced Claude API

Vision (画像入力)

Vision
→ で次のスライド · F でフルスクリーン · N で講師ノート · Esc で終了

重要キーワード

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": "テキストを抽出して"},
]

制約

  • 対応フォーマット: JPEG / PNG / GIF / WEBP
  • 最大解像度: ~8000px (推奨は 1568px 程度)
  • ファイルサイズ: 5MB / 画像

Use Case

  • OCR: スクショから文字抽出。
  • UI レビュー: アプリのスクショを見せてアクセシビリティ評価。
  • 図表理解: グラフから数値を読み取り要約。
  • ホワイトボード起こし: 写真からタスクリスト化。
  • 品質検査: 工場の検品画像から欠陥検出 (簡易タスク向け)。
  • 数式読解: 手書き数式を LaTeX に変換。

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
Hands-on Exercise

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

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

プロンプト例:

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

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

▶ Playground を開いて実行

理解度チェック

4 問のクイズで理解度を確認しましょう。

クイズを開く
🎉

まとめ

お疲れ様でした!