Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/soukiinc/souki-inc.co.jp/public_html/wp/wp-content/themes/souki/header.php on line 50
AIに引用されない原因はこれ。画像で作った料金表・図解がもたらす機会損失と作り直し方 - 大阪のホームページ制作会社|創希
blog

AIに引用されない原因はこれ。画像で作った料金表・図解がもたらす機会損失と作り直し方

2026/06/23

結論からお伝えします。画像の中に書かれた文字は、AIにも検索エンジンにも「存在しない情報」として扱われます。料金表・サービスの流れ・比較表・キャンペーン情報を画像だけで掲載しているサイトは、どれだけ内容が充実していても、AIから見れば「料金もサービス内容も書いていないサイト」です。これが、検索順位は悪くないのにAIの回答に引用されないサイトの、最も多い原因のひとつです。

本コラムでは、なぜ画像内テキストが読み取られないのか、どのページが機会損失を起こしやすいのか、そして既存の画像コンテンツをHTML(テキスト・テーブル)に作り直す具体的な手順を解説します。

なぜ画像の中の文字はAIに読まれないのか

ChatGPTやPerplexityなどのAI、そしてGoogleのクローラーは、Webページを取得する際、基本的にHTMLとして書かれたテキストを読み取ります。画像(JPG・PNG等)はファイルとして認識されるものの、その中に描かれた文字を確実に読み取って理解する処理は、Webクロールの段階では基本的に行われません

つまり、デザインツールで美しく作り込んだ料金表の画像は、人間のユーザーには伝わっても、AI・検索エンジンには「pricing.png という画像がある」という事実しか伝わりません。alt属性(代替テキスト)で補足はできますが、表の中身すべてをaltに書くことは現実的でなく、構造化された情報としても伝わりません。

当社サイトでの実例

当社自身も、コラム内の比較表やターゲットキーワード表をHTMLテーブルで掲載する方針に統一しています。AIの回答引用を観測する中で、引用されるのは画像ではなく、テキストとして書かれた具体的な情報(料金・手順・FAQ)である、という傾向を自社サイトで確認してきたためです。

機会損失が起きやすいページ・コンテンツ

以下に当てはまるものがあれば、優先的に作り直しを検討してください。

  • 料金表:「〇〇市で△△の料金相場は?」というAIへの質問は定番。画像のみのサイトは引用候補から外れる
  • サービスの流れ・工程図:「依頼から完了までの流れ」を図だけで説明しているケース
  • 比較表:プラン比較・自社と他社方式の比較など、AIが最も引用しやすい形式の情報
  • キャンペーン・お知らせバナー:期間・条件・価格がバナー画像にしか書かれていない
  • メニュー表(飲食店・サロン等):PDFや写真のみで、メニュー名と価格がテキスト化されていない
  • アクセス情報:地図画像のみで、住所・最寄駅・道順がテキストで書かれていない

共通点は、いずれも「ユーザーがAIに質問しがちな、具体的で比較可能な情報」だということです。価値が高い情報ほど画像化されている。これが多くのサイトで起きている逆転現象です。

HTMLへの作り直し方:実践手順

手順① 棚卸し:画像化された情報をリストアップする

サイト内の全ページを見て、「文字情報が画像にしか存在しない箇所」を洗い出します。判定は簡単で、ページ上でその文字をマウスでドラッグして選択できなければ、画像内テキストです。スマホサイトしかない場合も同様に確認できます。

手順② 優先順位:問い合わせに近い情報から直す

  1. 料金・価格に関する情報(最優先)
  2. サービス内容・対応範囲・プラン比較
  3. 依頼・予約・来店の流れ
  4. 会社・店舗の基本情報(住所・営業時間・対応エリア)
  5. その他の図解・装飾的なコンテンツ

手順③ 置き換え:HTMLテーブルとテキストで再構築する

料金表・比較表はHTMLのtableタグで作り直します。例えば次のような形です。

表をスライドしてご確認いただけます。
掲載方法 人間のユーザー 検索エンジン AI(ChatGPT等)
画像の料金表 読める 読み取れない 読み取れない(引用不可)
HTMLテーブルの料金表 読める 内容を理解できる 引用・要約の対象になる
HTMLテーブル+構造化データ 読める 構造まで正確に理解 最も引用されやすい状態

工程図・フロー図は、図はそのまま残して構いません。重要なのは、図と同じ内容をテキスト(見出し+番号付きリスト)でも併記することです。「図解+テキスト」の二重化が、ユーザー体験とAI対応を両立する基本形です。

手順④ 仕上げ:構造化データとalt属性

  • FAQがあればFAQ構造化データ(JSON-LD)を実装する
  • 残した画像には、内容を端的に説明するalt属性を設定する(altは補助であり、テキスト併記の代わりにはなりません)
  • 更新したページのdateModifiedとサイトマップの更新日を実際の更新に合わせる

「デザイン性が落ちる」への答え

HTMLテーブルにするとデザインが崩れる、という懸念をよくいただきますが、CSSで装飾すれば画像に近い見た目のテーブルは十分実現できます。スマホでは横スクロール対応のテーブルにすることで、視認性も担保できます。デザイン性と機械可読性は二者択一ではなく、両立できる時代の実装方法に切り替えるだけの問題です。

作り直し後の効果を確認する方法

画像からHTMLへの作り直しは、実施して終わりではなく効果確認までがセットです。確認方法は3つあります。第一に、Google Search Consoleで該当ページの表示キーワードを見ること。料金表をテキスト化すると、「業種+料金」「サービス名+費用」系のクエリでの表示が増えるのが典型的な変化です。第二に、ChatGPTやPerplexityに「〇〇(自社サービス)の料金」を質問し、自社ページが引用されるかを月次で観測すること。第三に、問合せの質の変化です。料金がAIや検索結果で事前に伝わるようになると、「いくらかかりますか」という一次質問が減り、具体的な相談から商談が始まる比率が上がります。

当社の経験では、テキスト化の効果は構造化データの実装やdateModifiedの更新と組み合わせることで安定します。作り直したページは「更新した」というシグナルをサイトマップにも正しく反映させ、クローラーの再訪を促してください。

  • Search Consoleで「料金・費用」系クエリの表示変化を確認する
  • AIへの料金質問で自社ページが引用されるかを月次で観測する
  • 問合せ時の一次質問(料金確認)の減少という商談の質の変化を見る

よくある質問(FAQ)

Q.alt属性を書けば、画像の料金表でも問題ありませんか?

A. altだけでは不十分です。altは画像の説明のための属性であり、表の行・列の関係といった構造は伝えられません。料金のように引用されたい情報は、HTMLテーブルとして本文に記載することが原則で、altはあくまで補助と考えてください。

Q.最近のAIは画像も認識できると聞きました。それでも作り直しが必要ですか?

A. 必要です。AIに画像を直接添付すれば文字を読み取れますが、Web上のサイトをクロール・参照して回答を作る場面では、基本的にHTMLテキストが情報源になります。「AIがサイトを見に来たとき」に読めるかどうかが論点であり、現状その答えはテキスト化です。

Q.PDFで掲載している料金表やパンフレットはどう扱われますか?

A. PDFはテキストが埋め込まれていれば読み取られる場合もありますが、画像として書き出されたPDFは読み取れず、いずれにせよHTMLページに比べて引用されにくい形式です。重要な情報はHTMLページとして掲載し、PDFは補助資料と位置づけてください。

Q.Instagramの投稿画像で情報発信しています。これも読まれていないのですか?

A. 投稿画像内の文字は、Web検索・AI引用の文脈では基本的に情報として扱われません。SNSは認知獲得の手段として有効ですが、料金・メニュー・営業情報などの「答え」になる情報は、必ず自社サイトにテキストで持つようにしてください。

Q.作り直しはどのページから始めるべきですか?

A. 料金ページが最優先です。費用に関する質問はAIへの質問でも検索でも最多クラスであり、テキスト化の効果が最も出やすい箇所です。次にサービス内容・流れ、その後に会社情報・その他の図解という順をおすすめします。

Q.自社サイトのどこが画像化されているか、簡単に確認する方法はありますか?

A. ページ上の文字をドラッグして選択できるかを確認するのが最も簡単です。選択できない文字は画像です。網羅的に確認したい場合は、当社の無料Web診断でもAI可読性の観点を含めたチェックを行っています。

Q.テーブルに作り直すと、スマホで見づらくなりませんか?

A. 横スクロール対応のテーブル実装にすれば、スマホでも崩れず閲覧できます。当社のコラムでも、表の直前に「スライドで確認できる」旨の案内を置いた横スクロールテーブルを採用しており、可読性と機械可読性を両立しています。

Q.作り直しを依頼した場合、費用と期間はどのくらいですか?

A. 対象ページ数と表の複雑さによりますが、料金表・主要図解のHTML化のみであれば数万円〜、サイト全体の棚卸しと構造化データ実装まで含めると数十万円規模が目安です。まず診断で対象箇所を特定し、優先順位をつけて段階的に進める方法をおすすめしています。

まとめ

画像で作られた料金表・図解は、人間には親切でも、AI・検索エンジンには存在しない情報です。AI経由の集客が現実になった今、「価値ある情報ほどテキストで書く」への転換は、最も費用対効果の高いAI対策(AIO/LLMO)のひとつです。まずは自社サイトの料金ページの文字がドラッグで選択できるか、今すぐ確認してみてください。

「どこから直せばよいか優先順位をつけてほしい」という方は、当社の無料Web診断をご活用ください。AI可読性の観点を含めた現状チェックと改善のご提案を行っています。

お問合せ

 

このブログを書いた人

WEB関連に携わって20年越え。
ECサイトの運営からスタート。
ホームページ制作に携わって、15年以上になります。
pagetop

まずは無料相談で、
あなたのビジネスに最適な
WEB戦略を提案します。

WEBに関する知識がなくてもOK!/相談だけでもOK!/しつこい営業はいたしません×WEBに関する知識がなくてもOK!/相談だけでもOK!/しつこい営業はいたしません×