画面理解のためのビジョンモデル
スクリーンショットをマルチモーダルモデルに送り、エージェントに人間と同じように画面を「見せ」ます。
「画面理解のためのビジョンモデル」はCoddyKit上の無料AI Agentsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAI Agents学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 AI Agentsコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
なぜビジョンか
セレクターでは表現しにくいWeb上の操作があります：
- CAPTCHA（正確には、その解決の試み）
- 視覚的な位置で配置された要素（チャットバブルや動的なUI）
- 安定したDOMがないアプリ（Canvas／WebGL）
マルチモーダルLLMを使うと、エージェントが画面を見られるようになります。
Take a Screenshot, Send to LLM
import base64
page.screenshot(path='screen.png')
with open('screen.png', 'rb') as f:
b64 = base64.b64encode(f.read()).decode()
response = client.chat.completions.create(
model='gpt-4o',
messages=[{
'role': 'user',
'content': [
{'type': 'text', 'text': 'What buttons are visible? Return JSON.'},
{'type': 'image_url', 'image_url': {'url': f'data:image/png;base64,{b64}'}}
]
}]
)Anthropic Vision
response = client.messages.create(
model='claude-sonnet-4-5',
max_tokens=1024,
messages=[{
'role': 'user',
'content': [
{'type': 'image', 'source': {'type': 'base64', 'media_type': 'image/png', 'data': b64}},
{'type': 'text', 'text': 'Describe what you see.'}
]
}]
)ビジョンの品質
GPT-4oとClaude Sonnet 4.5は、次のことができます：
- スクリーンショットを正確に説明する
- 画像内のテキストを読み取る（OCR）
- 位置からUI要素を特定する
- パターンや異常を見つける
一方で、非常に小さな文字、複雑な表、正確なピクセル座標の扱いは、依然として苦手です。
説明で要素を特定する
モデルに「送信ボタンはどこですか？」と尋ねると、おおよその座標や操作手順が返されます：
prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}座標の精度に関する注意
モデルの座標はピクセル単位で正確とは限りません。座標はヒントとして扱ってください。正確にクリックするには、可能な限りDOMセレクターと組み合わせます。
SoM（Set of Marks）
インタラクティブな要素の周囲に番号付きのボックスを描き、スクリーンショットに注釈を付けます。モデルに「どの番号をクリックしますか？」と尋ねます：
- DOMを使ってインタラクティブな要素を特定する
- 番号付きのオーバーレイを描く
- 注釈付きのスクリーンショットをLLMに送る
- LLMが番号を返し、その要素をクリックする
自由形式の座標を使うよりも、はるかに信頼性が高くなります。
Code for SoM
elements = page.query_selector_all('button, a, input, [role="button"]')
annotated = draw_numbered_overlays(screenshot, elements)
idx = ask_llm_for_choice(annotated, prompt='Click the Submit button')
elements[idx].click()複数フレームでの推論
動的なページでは、複数のタイミングでスクリーンショットを撮り、すべてをモデルに送ります。モデルは時間的な変化について推論できます。
遅延とコスト
フル解像度では、スクリーンショット1枚あたり約85kトークンです。コストは次のとおりです：
- gpt-4o：100枚あたり$0.85
- claude-sonnet-4-5：100枚あたり約$1.50
送信前にサイズを変更し、DOMベースの選択に失敗した場合だけビジョンを使用してください。
Resize for Cheaper Calls
from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')OCRフォールバック
テキストだけを抽出する場合は、OCR（Tesseract、PaddleOCR）のほうがはるかに安価で、ビジョンLLMより優れていることもよくあります。
SoMパターン
Set-of-Marks（SoM）プロンプティングパターンとは何でしょうか？
要点の振り返り
スクリーンショットをGPT-4oまたはClaudeに送り、画面を理解させます。信頼性の高い操作にはSoMの注釈を使用します。テキストだけならOCRを使用します。コストを抑えるためにサイズを変更します。
よくある質問
「画面理解のためのビジョンモデル」レッスンは無料ですか？
はい。「画面理解のためのビジョンモデル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、AI Agentsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 AI Agentsコースには全4レッスンが含まれています。
「画面理解のためのビジョンモデル」で何を学びますか？
スクリーンショットをマルチモーダルモデルに送り、エージェントに人間と同じように画面を「見せ」ます。 ブラウザで直接実行するハンズオンコードでAI Agentsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
AI Agentsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAI Agentsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「画面理解のためのビジョンモデル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAI Agentsレッスンでコードを書いて実行できますか？
はい。すべてのAI Agentsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。