◉CLAUDE LABEN
●2.1.301 — vim の % モーション、VS Code パネルでの LaTeX 数式表示、使用量上限待ちのリトライ監視の上限が入りました(10/15)●2.1.299 — 200K トークン超で約54分放置した会話はアイドル圧縮。MCP の許可ルールは名指ししたサーバーだけに一致します●SONNET 4.5 — Claude API での提供終了は 11/30、残り45日。移行先は Sonnet 5.5●WINDOWS — 日本語の環境でだけフックが黙って壊れる報告があり、文字コードの確認が呼びかけられています●FAST MODE — Opus 5.5 の Fast mode がリサーチプレビューを終え、ベータヘッダーが不要になりました(10/15)●NEW — Cowork に渡したフォルダの先頭に、十行の約束ファイルを置いてみました●2.1.301 — vim の % モーション、VS Code パネルでの LaTeX 数式表示、使用量上限待ちのリトライ監視の上限が入りました(10/15)●2.1.299 — 200K トークン超で約54分放置した会話はアイドル圧縮。MCP の許可ルールは名指ししたサーバーだけに一致します●SONNET 4.5 — Claude API での提供終了は 11/30、残り45日。移行先は Sonnet 5.5●WINDOWS — 日本語の環境でだけフックが黙って壊れる報告があり、文字コードの確認が呼びかけられています●FAST MODE — Opus 5.5 の Fast mode がリサーチプレビューを終え、ベータヘッダーが不要になりました(10/15)●NEW — Cowork に渡したフォルダの先頭に、十行の約束ファイルを置いてみました
記事一覧/API & SDK
⬡ API & SDK/2026-03-10中級

マルチモーダル入力ガイド — Claude API で画像・PDF を活用する

Claude APIで画像やPDFを扱うマルチモーダル入力の基本を整理します。画像のサイズ制限と複数送信、PDF入力、Files APIの使い分け、プロンプトキャッシングとの併用まで、運用して初めて分かるコストと速度の勘所を実測を交えて解説します。

multimodal3vision8pdf4files-api3image

✦ プレミアム記事

マルチモーダル入力とは

Claude は テキストだけでなく、画像や PDF といった視覚的なコンテンツも理解できます。これが「マルチモーダル入力」です。写真の内容を説明させたり、グラフを分析させたり、PDF レポートから情報を抽出したりと、テキストだけでは不可能だったタスクを API 経由で実行できます。

ℹ️
マルチモーダル入力で可能になること: - 画像の内容認識・分析・説明 - PDF 文書のテキスト&視覚要素の解析 - グラフ・チャート・表の読み取り - 複数画像の比較・対照 - ドキュメントからの構造化データ抽出

画像入力の基本

Claude は JPEG、PNG、GIF、WebP の 4 つの画像フォーマットをサポートしています。画像を API に送信するには 3 つの方法があります。

方法 1: Base64 エンコード

画像をローカルファイルから読み込み、Base64 に変換して送信する最も基本的な方法です。

import anthropic
import base64
 
# ローカル画像を読み込んで Base64 エンコード
with open("photo.jpg", "rb") as f:
    image_data = base64.standard_b64encode(f.read()).decode("utf-8")
 
client = anthropic.Anthropic()
message = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/jpeg",
                        "data": image_data,
                    },
                },
                {"type": "text", "text": "この画像に何が写っていますか?"},
            ],
        }
    ],
)
print(message.content[0].text)

TypeScript での実装:

import Anthropic from "@anthropic-ai/sdk";
import fs from "fs";
 
const client = new Anthropic();
 
const imageData = fs.readFileSync("photo.jpg").toString("base64");
 
const message = await client.messages.create({
  model: "claude-sonnet-4-6",
  max_tokens: 1024,
  messages: [
    {
      role: "user",
      content: [
        {
          type: "image",
          source: {
            type: "base64",
            media_type: "image/jpeg",
            data: imageData,
          },
        },
        { type: "text", text: "この画像に何が写っていますか?" },
      ],
    },
  ],
});

方法 2: URL 指定

オンラインでホストされている画像を URL で直接指定できます。Base64 変換が不要なため、最もシンプルです。

import anthropic
 
client = anthropic.Anthropic()
message = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "url",
                        "url": "https://example.com/chart.png",
                    },
                },
                {"type": "text", "text": "このグラフのトレンドを分析してください。"},
            ],
        }
    ],
)

方法 3: Files API

何度も使う画像は Files API で一度アップロードし、file_id で参照する方法が効率的です。マルチターン会話では特に有効で、毎回 Base64 データを再送信する必要がなくなります。

import anthropic
 
client = anthropic.Anthropic()
 
# 画像をアップロード
with open("photo.jpg", "rb") as f:
    file = client.beta.files.upload(
        file=("photo.jpg", f, "image/jpeg")
    )
 
# file_id で参照
message = client.beta.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=1024,
    betas=["files-api-2025-04-14"],
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {"type": "file", "file_id": file.id},
                },
                {"type": "text", "text": "この画像を説明してください。"},
            ],
        }
    ],
)
💡
Files API はベータ版です。リクエストヘッダーに `anthropic-beta: files-api-2025-04-14` を含める必要があります。
✦

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること
✦リサイズが精度ではなく初回応答速度に効く理由と、手元での実測(初応答 2.3 秒→0.9 秒)
✦スキャン PDF が文字ベース PDF の約 2 倍のトークンを消費する実測と、予算の組み方
✦media_type 取り違えによる 400 の回避と、Files API がマルチターンで初めて元が取れる判断軸
Stripe による安全な決済 · いつでもキャンセル可能
✦

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または
メンバーシップなら全記事が読み放題 →
シェア

お読みいただきありがとうございます

Claude Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • ✦コピー&ペーストで使える実装コード付き
  • ✦毎日新しい上級ガイドを追加
  • ✦¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

関連記事

⬡ API & SDK2026-09-22
PDF の入力トークンは文字数では読めません — 送る前にページ数から上限で挟む
Claude API に PDF を送る前の入力トークンを、文字数ではなくページ数から上限で挟んで見積もる手順です。A4 9 ページの日本語文書で文字数見積もりの 6.6 倍になった実測と、解像度ティアとトークナイザの二重の増分、count_tokens が file_id を数えられない制約までをまとめます。
⬡ API & SDK2026-06-13
Claude Vision API 実装パターン — 画像解析・PDF 処理・OCR を本番品質で動かすまで
Claude API のビジョン機能を本番投入するための実装パターンをまとめました。Base64・URL・Files API の使い分け、ネイティブ PDF 処理、Tool Use による壊れない構造化抽出、Batch API でのコスト削減、エラー対処まで動くコードで解説します。
⬡ API & SDK2026-06-12
Claude API の Code Execution ツールに月次の売上CSV集計を任せる — Files API 連携から課金の落とし穴まで
月末に形式の違う売上CSVを突き合わせる作業を、Claude API の Code Execution ツールに任せた実装をまとめます。Files API 連携、コンテナ再利用、5分最小課金やファイルプリロード課金などの注意点を実例ベースで扱います。