AI検索へ図表の内容を伝える｜画像だけにしない本文設計
AI検索で図表の意味を画像だけに閉じ込めないために、図の役割ごとにalt、キャプション、HTML表、周辺本文へ情報を割り振り、画像なしでも主要な判断をたどれる本文設計を解説します。
この記事の目次を開く
AI検索へ図表の内容を伝えるには、重要な意味を画像の中だけに置かず、alt、キャプション、HTML表、周辺本文へ役割に応じて分けます。とくに比較の軸と値の関係はHTML表、読者が選ぶための結論・条件・例外は本文にも残すのが基本です。
一枚の画像に項目名、数値、矢印、注釈を収めると、人には一覧しやすくても、ページ上のテキストとして利用できる情報は乏しくなります。画像内の全文をaltへ写す方法でも解決しません。図の識別、題名、構造化された関係、判断に必要な説明は、それぞれ適した置き場所が異なるからです。
迷うのは、どこまでを画像の外に出すかでしょう。装飾、単純な説明図、比較表、複雑な工程図を同じ方法で処理せず、「画像を見られなくても主要な判断材料を追えるか」を基準に割り振ると、過不足を見つけやすくなります。
AI検索で図表を扱う前に、対象範囲を分ける
2026年10月1日時点で、GoogleはGoogle SearchのAI OverviewsとAI Modeについて、従来のSEOベストプラクティスが引き続き有効であり、AI向けの特別な最適化、機械可読ファイル、AI向けテキストファイル、特別なschema.org構造化データは不要と説明しています。Google「Optimizing your website for generative AI features on Google Search」 同時に、有効な実務の例として、重要なコンテンツをテキスト形式で利用可能にし、必要に応じて高品質な画像や動画で補うことを挙げています。Google「AI Features and Your Website」 これはGoogle SearchのAI機能を対象とした説明であり、他社のAIサービスへそのまま一般化はできません。
また、Google Searchの生成AI機能に表示されるには、ページがインデックス登録され、スニペット付きでGoogle検索に表示できる状態である必要があります。しかし、要件や推奨事項を満たしても、クロール、インデックス登録、表示は保証されません。Google「Optimizing your website for generative AI features on Google Search」 図表のテキスト化は、ページにある重要情報を利用可能な形で明示するために行います。
検索での引用を意識したページ全体の組み立ては、AIに引用されやすいコンテンツ設計もあわせて確認できます。図表だけを直しても、結論と根拠の対応が本文全体で曖昧なら、情報の読み取りやすさは整いません。
図の役割別に置き場所を決める判断表
次の表は、前述のGoogleの推奨とW3C WAIのデータ表ガイダンスから導いた運用上の提案です。GoogleやW3Cが定めた一律の要件ではありません。まず図の役割を判定し、情報をどの要素が担うかを決めます。
| 図の役割 | alt | キャプション | HTML表 | 周辺本文 | 公開前の判断 |
|---|---|---|---|---|---|
| 装飾 | 原則として意味を持たせない | 原則不要 | 不要 | 画像に依存させない | 画像を外しても内容と判断が変わらないか |
| 単純な説明図 | 何を示す図かと要点を簡潔に記す | 図の題名や対象範囲を示す | 関係が表形式でなければ不要 | 結論、成立条件、注意点を記す | altだけで細部まで説明しようとしていないか |
| 比較表の画像 | 比較表であることと主題を記す | 比較対象と表の目的を示す | 比較軸を見出しセル、内容をデータセルとして再現する | 選択基準、重要な差、例外を記す | 画像を見ずに項目同士の関係を追えるか |
| 複雑な工程図 | 工程全体の主題と要点を記す | 工程名と扱う範囲を示す | 工程と条件を行・列で表せる場合だけ使う | 分岐条件、順序、例外、到達点を記す | 見た目の配置に頼らず手順をたどれるか |
表の右から埋めると判断が安定します。最初に「画像なしで読者が何を決められる必要があるか」を周辺本文へ書き、その関係が行と列で表せるならHTML表へ移します。次に図の題名をキャプションへ、画像自体の識別と短い要点をaltへ置きます。この順序なら、altが画像内テキストの保管庫になるのを避けられます。
装飾は意味の運搬役にしない
区切りや雰囲気づくりの画像に、本文にはない主張を入れると、その画像はもはや装飾ではありません。意味を持たせないと判断した画像は、削除・非表示になっても説明が欠けない状態にします。キャプションやHTML表を追加する必要はなく、判断材料は初めから本文に置きます。
装飾かどうかは、公開後にその画像が担う役割から判定します。背景画像へ短い訴求文を焼き込んだ場合、その文が選択に影響するなら、同じ内容を見出しや本文でも読めるようにする必要があります。
単純な説明図は要点と条件を分ける
一つの概念や関係を示す図では、altに「何の図か」と視覚情報から得られる要点を簡潔に記します。図の題名や対象範囲はキャプションへ、主張が成り立つ条件や注意点は周辺本文へ置きます。altへ結論、例外、補足をすべて連結すると、画像の説明と本文の主張が混ざり、更新時の整合も取りにくくなります。
たとえば入力から出力までを矢印で示す概念図なら、本文には「何を入力とし、どの条件で、何が出力されるか」を文章として残します。矢印の色や配置だけで順序や因果を表さないことが重要です。ただし、関係が行列ではない図を、形式を整えるためだけに表へ変換する必要はありません。
比較表の画像はHTMLデータ表を主にする
料金プラン、機能差、対応可否など、論理的な関係を行と列で示すものは、HTMLデータ表に情報を持たせ、画像版を補助として扱います。2026年10月1日時点のW3C WAIの実装ガイダンスでは、データ表について見出しセルをth、データセルをtdで示し、その関係をHTMLで定義します。複雑な表ではscope、id、headersによる明示的な関連付けが必要になる場合があり、captionは表全体の主題を示す用途で多くの状況に有用とされています。これはデータ表向けであり、レイアウトのための表には適用されません。W3C WAI「Tables Tutorial」
HTML表を置いても、判断まで表のセルだけに閉じ込めないようにします。どの条件ならどの選択肢が合うのか、比較対象外の条件は何か、注記がどの結論を変えるのかを表の近くに文章で記します。セル内の記号だけで可否を示す場合も、その記号が何を意味するかを見出しや注記で明らかにします。
画像版をSNS共有や保存用として併設するなら、HTML表と周辺本文をページ上の主要情報として扱います。更新時には画像、HTML表、結論文の三つを同じ変更単位で確認し、古い画像だけが残る状態を防ぎます。
複雑な工程図は分岐と例外を本文へ出す
複数の矢印、分岐、戻り先を含む工程図は、短いaltだけで完全に代替しようとしません。altには工程図の主題と中心的な流れを置き、周辺本文には開始条件、手順の順序、分岐条件、例外、到達点を記します。工程の一部が行と列で整理できる場合に限り、条件表を補助として使います。
たとえば「条件に合えば次工程へ、合わなければ確認へ戻る」という分岐があるなら、本文でも条件と遷移先を対にします。図中の線を追わなければ戻り先が分からない状態を残さないためです。工程図の美しさを保ったまま、判断の再現に必要な情報は文章側で独立させます。
alt、キャプション、周辺本文を重複させない
2026年10月1日時点で、Googleは画像の主題に関する情報を、キャプションや画像タイトルを含むページ内容から抽出すると説明し、可能な限り画像を関連テキストの近くに置くことを推奨しています。また、画像の主題を理解する際にはaltテキストをコンピュータビジョンやページ内容と併用し、ページ文脈に沿った有用で情報量のあるaltを書き、キーワードの詰め込みを避けるよう推奨しています。対象はGoogle画像検索です。Google「Google image SEO best practices」
この推奨を踏まえ、同じ文章を三か所へ複製せず、情報の役割を分けます。
- alt：画像の識別に必要な内容と、その画像が伝える短い要点
- キャプション：図の題名、対象、期間や範囲など、図全体を位置づける情報
- 周辺本文：読者の判断に必要な結論、条件、例外、次の行動
- HTML表：比較軸、見出し、各値という構造的な関係
役割を分けた結果として一部の語が重なることはあります。しかし、四か所に同じ説明を貼り付ける必要はありません。altだけを読んだときに画像の役割が分かり、本文だけを読んだときに判断を再現できる状態を目指します。
実装後は情報の残り方を確認する
関連する実装ガイドとして、AI検索を意識したJavaScriptレンダリング設計も参照できます。
公開前には、次の順序で一枚ずつ確認します。
- 画像を一時的に見ない状態で、読者が結論と選択条件を追えるか確認する
- 行と列の関係がある情報は、見出しセルを備えたHTMLデータ表になっているか確認する
- altがページ文脈に沿って画像を識別し、検索語の列挙になっていないか確認する
- キャプションが図の対象を示し、本文が条件と例外を引き受けているか確認する
- 画像、表、本文の内容が食い違っていないか確認する
要素の有無を数えただけでは、この確認は完了しません。比較表にaltとキャプションがあっても、比較軸と各値が画像にしかなければ、主要な関係はテキストとして残っていません。単純な装飾へ長い説明を加えても、読者の判断材料は増えません。
図表ごとに役割を先に決め、比較できる関係はHTML表へ、結論・条件・例外は近接する本文へ、画像の識別と要点はaltへ、題名と範囲はキャプションへ割り振ります。そうすれば、画像を活かしながら、画像なしでも主要な判断をたどれるページになります。重要な内容をテキストでも利用可能にするための実装基準であり、Googleによる表示の保証とは切り分けます。