はじめに
インフォグラフィックは、複雑なデータや業務の流れを短時間で理解できる優れた表現手段である。一方、画像ファイルとしてWebページに掲載するだけでは、検索エンジンや生成AIが、画像内の数値、項目間の関係、結論まで正確に読み取れるとは限らない。
近年は、画像を直接解析できる視覚言語モデルも発達している。しかし、Web上のすべての画像が常に高精度な画像解析へ回されるわけではない。画像の内容を説明する周辺テキスト、HTML構造、構造化データなども、コンテンツの意味を判断する重要な情報となる。
そこで必要になるのが、インフォグラフィックの「機械理解度」を高める設計である。
ここでいう機械理解度とは、特定の公式指標ではない。検索クローラーや生成AIが、画像の主題、数値、構成要素、出典、ページ本文との関係をどれだけ誤解なく処理できるかを示す実務上の考え方である。
本記事では、インフォグラフィックを人に見やすくするだけでなく、検索エンジンや生成AIにも伝わりやすくするための構造化手法と技術仕様を解説する。
インフォグラフィックが機械に理解されにくい理由
画像内の文字はHTML本文とは異なる
人間は、グラフの高さ、矢印の方向、色分け、項目の配置を同時に見て意味を理解できる。ところが検索クローラーにとって、画像内の文字や数値は、HTML本文に記載されたテキストと同じように扱えるとは限らない。
OCRによって文字を抽出できても、次のような関係性まで正確に復元できるとは限らない。
- どの数値がどの項目に対応しているか
- 色分けが何を意味しているか
- 矢印が原因、結果、順序のどれを示しているか
- 注釈と主要データの違い
- 画像全体として何を結論づけているか
そのため、「画像解析に任せる」という考え方だけでは不十分である。
視覚情報と意味情報を分離する
インフォグラフィックの機械理解度を高める基本は、同じ情報を異なる方法で補完することである。
画像は、人間に対して直感的な理解を提供する。HTML本文や構造化データは、機械に対して主題、数値、関係性を明示する。この二つを組み合わせることで、画像だけ、テキストだけの弱点を補える。
重要なのは、見た目を画像に任せ、意味を機械可読なデータとして別途提供する設計である。
機械理解度を高める5層構造
インフォグラフィックの構造化は、単一のSEO施策ではなく、次の5層で設計すると整理しやすい。
| 構造化レイヤー | 主な実装 | 役割 |
|---|---|---|
| HTML構造 | figure、figcaption | 画像と説明の関係を示す |
| アクセシビリティ | alt、必要に応じた詳細説明 | 画像を見られない利用者へ情報を伝える |
| 内容の言語化 | 要約、データ一覧、表 | 数値や関係を機械可読化する |
| 意味情報 | Schema.org、JSON-LD | 画像と記事の意味的な関係を示す |
| 発見・配信 | ファイル名、画像URL、サイトマップ | クロールとインデックスを支援する |
これらは代替関係ではない。可能な範囲で重ねて実装することが重要である。
セマンティックHTMLで画像と説明を結び付ける
figureとfigcaptionを使用する
インフォグラフィックは、本文から独立した意味を持つ図版である。そのため、単純なdiv要素の中に画像を配置するよりも、figureとfigcaptionを使用する方が構造を明確にできる。
<figure><imgsrc="/images/infographic-structure.webp"alt="インフォグラフィックの機械理解度を高める5層構造"width="1200"height="675"><figcaption> 図1：HTML構造、代替テキスト、データ説明、 構造化データ、画像配信による5層の設計</figcaption></figure>
figcaptionは、図が本文の中でどのような役割を持つかを示す。画像の見た目だけを説明するのではなく、「この図から何を読み取るべきか」が分かる文にすることが望ましい。
MDNも、HTMLではfigureとfigcaptionを使用し、図版に説明を関連付ける方法を案内している。MDN「ARIA: figure role」
alt属性は短さより目的を優先する
alt属性には、画像の中心的な意味を記載する。
「インフォグラフィック画像」「AIの図」といった抽象的な表現では、内容が伝わらない。反対に、画像内の全文をalt属性へ詰め込むと、読み上げ時の負担が大きくなる。
適切な記述例は次のとおりである。
インフォグラフィックの機械理解度を高める5層構造。HTML、代替テキスト、データ説明、JSON-LD、画像サイトマップの順に示している。
alt属性に一律の文字数を当てはめるのではなく、画像の目的を簡潔に伝え、詳細は本文やデータ説明へ分離することが重要である。Googleも、画像の近くに関連するテキストを置き、説明的なalt属性を設定することを推奨している。Google画像SEOのベストプラクティス
データトランスクリプトで画像内の事実を言語化する
画像の要約だけで終わらせない
数値、比較、手順を含むインフォグラフィックでは、短いキャプションだけでは情報が不足する。その場合は、画像の直後にデータトランスクリプトを設置する。
データトランスクリプトとは、画像内の主要な事実、数値、比較結果、結論をHTMLテキストとして記載する領域である。
例えば、円グラフなら各項目の割合、フロー図なら工程の順序、比較図なら各選択肢の違いを文章または表で提示する。
<details><summary>図の内容をテキストで確認する</summary><p> インフォグラフィックは5層で構成される。 第1層はHTML構造、第2層は代替テキスト、 第3層はデータ説明、第4層はJSON-LD、 第5層は画像サイトマップである。</p></details>
details要素で折りたたんだ内容もHTML上には存在するため、画面を過度に長くせず、利用者と機械の双方に情報を提供できる。
表形式は比較情報と相性がよい
インフォグラフィックが複数項目の比較を示している場合は、対応するHTML表を用意する方法が有効である。
画像内の配置や色だけに意味を持たせず、項目名、値、単位、対象期間、出典をテキストとして提示する。これにより、生成AIが数値を引用する際の誤認を減らしやすくなる。
ただし、構造化したからといって、生成AIによる引用や検索順位の向上が保証されるわけではない。目的は、機械が参照できる明確な根拠を用意することである。
JSON-LDで画像と記事の関係を明示する
ImageObjectを記事に関連付ける
Schema.orgのImageObjectを使用すると、画像のURL、名称、説明、サイズ、形式などを機械可読な形で示せる。
重要なのは、画像情報を単独で置くのではなく、ArticleやWebPageなど、ページの中心的なコンテンツと関連付けることである。
{ "@context": "https://schema.org", "@type": "Article", "@id": "https://example.com/infographic-machine-readable/#article", "headline": "AI検索に伝わるインフォグラフィック設計", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://example.com/infographic-machine-readable/" }, "image": { "@type": "ImageObject", "@id": "https://example.com/infographic-machine-readable/#image", "contentUrl": "https://example.com/images/infographic-structure.webp", "name": "インフォグラフィックの機械理解度を高める5層構造", "caption": "HTML、代替テキスト、データ説明、JSON-LD、画像サイトマップの5層構造", "description": "検索エンジンや生成AIに図解の意味を伝えるための実装構造", "width": 1200, "height": 675, "encodingFormat": "image/webp", "representativeOfPage": true }}
Schema.orgでは、contentUrlは画像の実体URL、captionは画像の説明、representativeOfPageはページを代表する画像かどうかを示すプロパティとして定義されている。Schema.org「ImageObject」
ただし、Schema.orgで定義できるプロパティと、Google検索がリッチリザルトとして利用するプロパティは同じではない。ImageObjectを記述しただけで、検索結果の表示や生成AIからの引用が保証されるわけではない。
画面にない情報を構造化データだけに追加しない
構造化データの内容は、ページ上で利用者が確認できる情報と一致させる必要がある。
画像内に存在しない数値や、本文に記載していない評価をJSON-LDへ追加すると、ページ内容とメタデータが不一致になる。Googleのガイドラインでも、構造化データに指定する画像はページとの関連性があり、画像URLがクロール可能であることを求めている。Google構造化データの一般ガイドライン
ファイル形式と表示性能を設計する
内容に応じてSVGとラスター画像を使い分ける
線、図形、単純なグラフが中心なら、拡大しても劣化しにくいSVGが適している。ただし、複雑な写真、質感、グラデーションを多用する場合は、WebPやAVIFなどのラスター形式が扱いやすい。
ファイル形式だけで機械理解度が決まるわけではない。SVGを使用しても、意味のある説明や周辺テキストがなければ、図全体の意図が明確になるとは限らない。
次の項目も確認する。
- 画像に適切な幅と高さを指定する
- モバイルでも文字を読める大きさにする
- 過度に巨大な画像ファイルを避ける
- 画像URLをrobots.txtなどで遮断しない
- ファイル名を内容が分かる英数字にする
- 画像の近くに関連する本文を配置する
画像サイトマップは発見を支援する
画像サイトマップは、検索エンジンがページ内の画像URLを発見する手掛かりになる。ただし、サイトマップへの登録は、クロールやインデックスを保証するものではない。
WordPressではSEOプラグインが画像情報を含むサイトマップを生成している場合もあるため、同じサイトマップを重複作成する前に現在の設定を確認する必要がある。Googleサイトマップの解説
公開前後に検証すべき項目
公開前の確認
公開前は、次の順に確認する。
- 画像と本文の主題が一致しているか
figureとfigcaptionが適切に使われているか- alt属性だけで画像の目的を把握できるか
- 数値、単位、対象期間、出典がHTMLにも存在するか
- JSON-LDと画面上の内容が一致しているか
- 画像URLが外部からアクセスできるか
- モバイルで文字が読めるか
JSON-LDはGoogleのリッチリザルトテストで検証できる。ただし、テストに合格しても検索結果への表示が保証されるわけではない。Google「構造化データの概要」
公開後の監視
公開後は、Search ConsoleのURL検査、ページのインデックス状況、画像検索からの流入、構造化データの警告を確認する。
また、生成AIで記事URLを指定し、次の質問を試す方法もある。
- この図の結論は何か
- 比較項目と数値を一覧にできるか
- 数値の対象期間と出典は何か
- 図と記事本文はどのような関係か
回答が不正確な場合は、画像を作り直す前に、キャプション、データトランスクリプト、表、見出し構造の不足を確認するとよい。
まとめ
インフォグラフィックの機械理解度を高めるには、画像解析技術だけに依存せず、画像の意味をHTMLと構造化データで明示する必要がある。
実務では、次の5層を一体として設計することが重要である。
figureとfigcaptionによる構文構造- alt属性による画像の目的説明
- データトランスクリプトによる事実の言語化
- ImageObjectを含むJSON-LDによる意味付け
- 画像URL、表示性能、サイトマップによる発見支援
これらは、検索順位や生成AIからの引用を直接保証する技術ではない。しかし、人にも機械にも確認できる情報構造を作ることで、インフォグラフィックが誤解される可能性を下げ、Web上の知識資産として再利用されやすい状態を整えられる。
インフォグラフィックは、単なる「説明用の画像」ではない。AI検索時代には、画像、本文、データ、メタデータを統合した情報コンテンツとして設計することが求められる。
コメント