画像・マルチモーダル基礎

PR-227 図解・インフォグラフィック画像の中の情報が、AIにテキストとして認識されていない——図解・インフォグラフィックの内容をテキスト化しAIに伝える方法

Claude

こんな悩みはありませんか?

サービスの仕組みや手順をまとめた図解・インフォグラフィックを画像1枚で公開しているが、その中に書かれている文字情報は記事本文のどこにも書き起こしていない——という状態です。

この記事でできるようになること

図解・インフォグラフィック画像をAIに読み取らせ、中身を本文用のテキスト(説明文+箇条書き)として書き起こせるようになります。

使うプロンプト

使用AI: Claude(画像を認識できるAIであればChatGPT・Geminiでも代用可)

画像をAIに渡す前の準備: 図解画像は文字が小さいことが多いため、渡す前に解像度の高い元データ(作成時のPNG・PDF出力等)を使うことを優先する。SNSに再アップロードされた圧縮済み画像は文字がつぶれて読み取り精度が落ちる。個人名・社外秘の数値が図解内に含まれる場合は、送信前にモザイク処理をする。

入力に必要な素材:

  • 図解・インフォグラフィック画像(元データに近い高解像度のもの)
  • その図解が使われているページのテーマ
【役割】
あなたは図解・インフォグラフィックの内容を、AIに理解される可視テキストへ変換するアシスタントです。サービスの仕組みや手順をまとめた図解を画像1枚で公開しているだけで、中身をテキスト化していない担当者を支援してください。

【画像を受け取ったら最初に確認すること】
- 添付された図解が何枚か、前提情報の想定枚数と一致しているか
- 文字が小さくつぶれて読めない箇所がないか(ある場合は先に「解像度が低く判読困難な箇所があります」と一言添える)
- 図解内に個人名・社外秘の数値など、公開前提でない情報が写り込んでいないか(写り込んでいる場合は書き起こしに含めず「要マスキング確認」と明記する)

# 前提
- 図解が使われているページのテーマ: 【ページテーマ】
- 添付する図解の枚数: 【枚数】

【作業手順】
1. 図解に書かれている文字・数値をすべて書き起こす(読み取れない箇所は「(判読不能)」と明記する)
2. 図解の構造(フロー図・比較表・階層図など)を推測し、その構造に沿った見出し付きの説明文に変換する
3. 図解内の各要素の関係性(例: A→B→Cの流れ、AとBの比較軸など)を1〜2文で言葉にして補足する
4. 元の図解には無いが、あった方が理解を助ける情報を追加した場合は、追加した箇所に【AIによる補足】と明記する
5. 出力前に、書き起こした数値・固有名詞が元図解と一致していそうか自己点検する

【出力形式】
以下の2ブロックに分けて出力してください。
A. 書き起こし全文
B. 構造化した説明文(見出し付き)

【品質ガード】
- 図解に実際に書かれていない数値・固有名詞を創作しないでください。
- 書き起こし結果は誤読が起きやすいため、公開前に必ず元図解と1文字ずつ照合が必要である旨を出力の末尾に明記してください。

実行手順

  1. 図解の元データ(可能な限り高解像度)を用意し、個人情報・社外秘情報が写り込んでいないか確認する
  2. ページテーマとあわせて画像をAIに渡し、実行する
  3. 「書き起こし全文」を元の図解と照合し、数値・固有名詞の読み取り誤りがないか確認する
  4. 「構造化した説明文」を、図解画像のすぐ下に可視テキストとして掲載する
  5. 図解自体にもalt属性(PR-223参照)を設定する

結果の読み解き方

  • 書き起こしの数値・固有名詞が元図解と一致しているか、1文字ずつ照合する。図解のテキスト読み取りは誤読が起きやすい作業です
  • 「構造化した説明文」が図解の流れ(矢印の向き・階層の上下関係)を正しく反映しているかを確認する
  • 【AIによる補足】マークが付いた部分は、事実として書かれていないか、あくまで補足である旨が伝わる書き方になっているかを確認する

注意点

  • 少なくとも本講座で扱う主要なAIクローラーは、画像そのものを解析する仕組みを公式には明言していません。図解内の情報を伝える手段は、alt属性とページ本文のテキストが基本になると考えておくのが安全です(出典: 編III-D7の整理に基づく)
  • 図解画像の文字認識は、解像度が低い・フォントが特殊・背景と文字の色が近い場合に誤読が増えます。書き起こし結果を鵜呑みにせず、必ず元図解と照合してください
  • 同じ図解を渡しても、実行のたびに書き起こしの粒度・言い回しが変わることがあります。重要な図解は複数回試して内容の一致を確認してください

関連レッスン・関連パターン

  • III-D7 アクセシビリティとAIOの関係
  • 関連パターン: PR-223(画像alt属性をAIに認識されやすく生成する方法)/PR-234(図表データをAIが読める形で併記する方法)

確認テスト

選択肢をクリックすると、その場で正誤と解説が表示されます。

Q1. 少なくとも本講座で扱う主要なAIクローラーは、画像そのものを解析する仕組みを公式には明言していない。

Q2. 図解画像をAIに渡す際、優先して使うべきものはどれか。

Q3. AIが元の図解にない情報を追加した場合、どう明記するよう指示されているか。

よくある質問

Q. 書き起こしの精度を確認する際、何を1文字ずつ照合すべきか。

数値・固有名詞が元図解と一致しているか。

Q. 図解内に個人名・社外秘の数値が含まれる場合の対応は何か。

送信前にモザイク処理をする。

Q. 図解自体にも設定すべきものは何か。

alt属性(PR-223参照)。

AIエージェント開発・AI検索最適化(AIO)の実装支援

AIエージェント開発・AI検索最適化(AIO)・LLMの内製化まで、学んだ内容を自社実装につなげたい方にWEBMARKSが伴走します。

無料相談してみる