料金比較表の作り方｜HTMLの表とProductのJSON-LD例

料金比較の表を作ったのに、ChatGPTやGoogleのAIによる概要（AI Overviews）に自社の情報が拾われない。そんなお悩みではありませんか。この記事では、料金比較表の作り方を、表の設計・HTMLの組み方・構造化データの実装・公開前チェックまで、手を動かせる手順で解説します。

比較記事や料金ページを持つBtoB企業の広報・Web担当者に向けた内容です。読み終わる頃には、明日から自社の比較表を、単位と時点まで書いた文字の表に作り替える作業手順が決められる状態を目指します。なお、比較記事そのものの書き方はAIに推薦される比較記事の書き方｜客観比較の型と公開前チェックで詳しく扱っているので、記事全体の型から見直したい方は先にそちらを読んでください。

Contents / 目次

1. 結論。料金比較表は文字の表で作り、単位と時点まで書く
2. 料金比較表の作り方。5つのステップ
3. この作り方で何が変わるのか。期待できる成果イメージ
4. よくある失敗と回避法。比較表でつまずく3つのパターン
5. 使う側の本音。構造化だけでは引用されない現場の落とし穴
6. よくある質問

結論。料金比較表は文字の表で作り、単位と時点まで書く

結論から言うと、料金比較表で先に取り組むのは、見た目の装飾よりもプラン名・料金・条件を文字の表で正確に書くことです。Googleは「Google 検索の生成 AI 機能向けにウェブサイトを最適化する」で、AIによる概要やAIモードなどの生成AI機能にもSEOのベストプラクティスがそのまま有効だとし、生成AI検索向けの書き方をする必要はないと説明しています。

表は、どのセルが見出しで、どのセルが価格や機能なのかを、HTMLのth要素とtd要素で区別しておくと、スクリーンリーダーを使う読者にも行と列の関係が伝わります。Googleは、完璧なセマンティックHTMLは必要ないとしたうえで、スクリーンリーダーなどで読む読者のために、できる限りセマンティックHTMLを使うことを勧めています。

やるべきことは、大きく3つに整理できます。ここではまず全体像をつかんでください。

• 意味の分かるHTML構造：表をテキストのHTML（table要素）で作り、見出しセルと本文セルを役割どおりに区別する
• 構造化データ（Schema.org／JSON-LD）：サービスや価格を、検索エンジンが読み取れる共通の語彙で意味づけする。Googleのリッチリザルトの対象になるために使う
• 本文での言い換え：表の要点を、表の外の文章でも1〜2文で言い切っておく

構造化データとは、かんたんに言うと「このデータは価格です、これは会社名です」とページの裏側で検索エンジンに伝えるための共通の書き方のことです。Schema.org（スキーマ・オルグ）という語彙集を使います。書き方の形式は3つあり、Googleは構造化データの説明で、実装と管理が最も容易なJSON-LD（ジェイソン・エルディー）を推奨しています。

この3つは、AI向けの特別なテクニックではなく、読者に正しく伝わる表を作るための基本です。GoogleのAIによる概要やAIモードに自社のページが表示されないときに確かめる順番は生成AIの回答に自社の情報が引用されない原因｜Googleの要件と確認手順で紹介しています。

まず、3つの役割の違いを表で確認しておきましょう。

要素	役割	これが無いとどうなるか
HTMLの表構造	見出し・価格・機能のセルの関係を、HTMLの要素で示す	スクリーンリーダーで読む読者に、どの価格がどのプランのものか伝わりにくい
構造化データ	サービス名・価格・提供元を検索エンジンに伝え、リッチリザルトの対象にする	価格や提供元を、構造化データでGoogleに伝えられない。生成AI検索には必須ではない。使う場合は本文の表と同じ内容にする
本文の言い換え	表を読まなくても要点が1文で伝わる	表を読み飛ばした読者に結論が伝わらない

ポイント。構造化データは魔法ではありません。中身が薄い表を引用させる裏技ではなく、本文にある情報を正確に伝える補助だ、と理解しておいてください。特別なマークアップを足すより、まず表の中身を正確にし、テキストのHTMLで組むほうが先です。Googleも生成AI機能向けの最適化のガイドで「生成 AI 検索に構造化データは必要ありません」と説明しています。リッチリザルトの対象になるために、SEOの取り組みの一部として使うことは勧めています。

料金比較表の作り方。5つのステップ

ここからが本題です。料金比較表は、次の5ステップで作れます。順番に手を動かせば、今ある表を、読者にも検索エンジンにも内容が伝わる文字の表に作り替えられます。

ステップ1。比較する軸（列）を検索者の疑問から決める

最初にやるのは、表の列を決めることです。ここで多くの人が「載せられる情報を全部並べる」失敗をしますが、正解は逆で、検索者が実際に知りたい軸だけに絞るのがコツです。

料金比較で検索する人が知りたいのは、だいたい次の4〜5項目に収まります。載せる列の候補を挙げます。

• プラン名・サービス名：各行の見出しになる項目
• 料金（税込・課金単位つき）：月額か年額か、1人あたりか組織あたりかを必ず明記
• 主な機能・できること：そのプランで何が使えるか
• 向いている会社・使いどころ：読者が自分に当てはめられる判断軸
• 無料枠・試用の有無：導入の入り口になる情報

列は最大でも5〜6個までにしてください。列が10個もある表は、読者が「どこを見ればいいか」を見失います。

ステップ2。表をテキストのHTML（table要素）で組む

次に、表をHTMLのtable要素で作ります。ここが最重要です。表を画像やスクリーンショットで貼るのは絶対に避けてください。画像の中の文字は、検索エンジンやAIが正しく読み取れるとは限りません。読者が文字をコピーすることもできず、代替テキストに書かない限りスクリーンリーダーでも読み上げられません。テキストで組んでおくほうが確実です。

ポイントは、見出しのセルにth要素、中身のセルにtd要素を使い、さらにscope属性で「これは列の見出し」「これは行の見出し」と役割を示すことです。W3CのWeb Accessibility Initiative（WAI）の表の解説も、行と列の両方に見出しがある表では、th要素で見出しセルを示し、scope属性で見出しの向きを示すよう勧めています。これで、スクリーンリーダーでも「Freeプランの月額は0円」のように、行と列を結びつけて読めます。

<table>
  <thead>
    <tr>
      <th scope="col">プラン</th>
      <th scope="col">月額（税込）</th>
      <th scope="col">主な機能</th>
      <th scope="col">向いている会社</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Free</th>
      <td>0円</td>
      <td>基本機能のみ</td>
      <td>まず試したい会社</td>
    </tr>
    <tr>
      <th scope="row">Standard</th>
      <td>2,980円</td>
      <td>基本機能＋レポート出力</td>
      <td>1〜3拠点で運用したい会社</td>
    </tr>
  </tbody>
</table>

WordPressのブロックエディタの表ブロックでも、テキストの表を作れます。表ブロックの設定で「ヘッダーセクション」をオンにすると、1行目が見出しセル（th）になります。WordPress公式の表ブロックの説明にある設定は「ヘッダーセクション」「フッターセクション」と、セルの幅を固定する設定の3つで、1列目を見出しセルにする設定はありません。1列目もthにしたい場合は、ブロックのメニューの「HTML として編集」で書き換え、1行目や1列目がthになっているかを確認してください。

ステップ3。構造化データ（Product・Offer）で価格を意味づけする

表を組んだら、そのサービスと価格を構造化データで意味づけします。料金を表すには、Schema.orgのProduct（商品）とOffer（提供条件）という型を使うのが基本です。Offerの中に価格（price）と通貨（priceCurrency）を書くと、その価格が日本円であることを明示できます。人が読む本文とは別に、機械が照合しやすい形で価格と通貨をそろえておく、という位置づけです。Googleの商品スニペットの説明では、Productのname（商品名）と、offers・review・aggregateRatingのいずれか1つが必須で、Offerではprice（価格）が必須、priceCurrency（通貨）は推奨です。offersだけを書いた場合は、リッチリザルトテストの商品スニペットの欄に警告が表示されます。また、商品のリッチリザルトは1つの商品（または同じ商品の複数のバリエーション）に焦点を当てたページだけが対象で、複数の商品や商品カテゴリを並べたページは対象外です。

自社サービスの料金ページに置く場合の、コピーして使えるJSON-LDの型を載せます。head内やbody内に置いて、角カッコの箇所を自社の値に差し替えてください。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "［自社サービス名を入力］",
  "description": "［サービスの一言説明を入力］",
  "brand": {
    "@type": "Brand",
    "name": "［ブランド名を入力］"
  },
  "offers": {
    "@type": "Offer",
    "price": "2980",
    "priceCurrency": "JPY",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/pricing"
  }
}
</script>

ここで大事な注意点があります。構造化データに書いてよいのは、自社が提供元として責任を持てる情報だけです。他社サービスの価格を自社ページのProduct構造化データとして書くのは、提供元の取り違えを生むので避けてください。Googleの商品のリッチリザルトも、複数の商品を並べたページは対象外です。他社を含む比較表は、HTMLの表構造と本文の言い換え（ステップ4）で正確に伝えるのが安全です。

価格を構造化データに固定で書くと、料金改定のときに古い数字が残りやすくなります。価格を変えたら、表の本文とJSON-LDの両方を必ず同時に直してください。片方だけ直すと、表とAIに渡すデータが食い違い、かえって信頼を落とします。

ステップ4。表の要点を本文で1〜2文に言い換える

表を作ったら、その要点を表の外の文章でも言い切っておきます。表を読み飛ばす読者にも、結論が伝わります。

たとえば「無料で始めたいならFreeプラン、レポート出力まで使うならStandardプランが目安です」のように、表を見なくても結論が伝わる1文を添えます。この1文があると、表を読まなくても要点が伝わります。

このとき、その段落だけを読んでも意味が通るように書くのがコツです。「上の表のとおり」「前述の理由から」といった、前の文に依存する書き出しは避けてください。拾い読みする読者は、その段落だけを読んで判断するためです。なお、Googleは、生成AI検索のためにコンテンツを細かく分割（チャンク化）する必要はなく、ページ上の複数のトピックを理解して関連性の高い部分を表示できると説明しています。

ステップ5。公開前に読み取りをチェックする

最後に、公開前のチェックをします。作った表と構造化データが、読者と検索エンジンに正しく読み取れる状態か、次のリストで確認してください。

• 表は画像でなくテキスト：表を選択してコピーでき、文字として取り出せるか
• 見出しセルがth：1行目・1列目の見出しがth要素になっているか
• 価格に単位と時点：「月額」「税込」「（2026年07月21日時点）」まで書いてあるか
• 構造化データの検証：GoogleのリッチリザルトテストやSchema.orgの検証ツールでエラーが出ないか
• 本文に要点の言い換え：表を見なくても結論が分かる1文があるか

構造化データの記述に自信がない場合は、AIに下書きさせる手もあります。Claudeのデスクトップアプリ（Mac／Windows）などに、自社の表の内容を貼り付けて「この料金表をSchema.orgのProductとOfferでJSON-LDにして」と頼めば、たたき台が出てきます。

ただし、出てきたコードはそのまま使わず、価格・通貨・提供元が自社の実態と合っているかを、ご自身で必ず確認してください。最終チェックは自社で行います。

この作り方で何が変わるのか。期待できる成果イメージ

結論として、この作り方で表を作り替えると、料金の単位や条件の書き漏れが減り、読者にも検索エンジンにも正確な情報が伝わります。AI検索での引用が増えるかどうかは保証できません。ここでは、成果として何が変わるのかを具体的に説明します。

まず、料金比較表は、数値と条件をまとめた情報のかたまりです。出典や時点を添えておけば、読者が内容を確かめやすくなります。

具体的に期待できる変化を、3つの角度で挙げます。

• 価格の読み違いが減る：単位・条件・時点をセルごとに書いておけば、そのセルだけを読んだ読者にも条件が伝わる
• 比較検討層に届く：「AとBの料金の違い」を調べる人はすでに導入意欲が高く、正確な比較表は問い合わせにつながりやすい
• 更新の手間が減る：表と構造化データの置き場所が決まっていれば、料金改定時の修正箇所が明確になる

ここで正直にお伝えしておくと、「この表にすれば引用率が何倍になる」といった断定的な数字は出せません。AIの引用は、ページの信頼性・被リンク・情報の鮮度など多くの要因が絡むため、表の構造だけで成果を保証することはできないからです。

ただし、はっきり言えることが1つあります。料金のような大事な情報を、画像の中だけに書くのは避けてください。画像の中の文字は、検索エンジンやAIが正しく読み取れるとは限りません。派手な施策より、料金・条件・時点を文字の表で正確に書くことが先です。

なお、実際にAIに引用されているかを確かめる測定の方法はAI検索の効果測定指標｜月次レポートで迷わない3階層の選び方で解説しています。作ったら測る、までをセットにすると改善が回ります。

よくある失敗と回避法。比較表でつまずく3つのパターン

ここでは、料金比較表を作るときに起きやすい失敗を3つ紹介します。どれも「良かれと思ってやったこと」が逆効果になるパターンなので、当てはまっていないか確認してください。

失敗1。きれいに見せたくて表を画像化してしまう

1つ目は、デザインにこだわって表を画像やスクリーンショットで貼ってしまうケースです。デザインツールで作った見栄えの良い比較表を、そのままPNGで載せる。こうすると、検索エンジンやAIが中の文字を正しく読み取れるとは限らず、読者も文字をコピーできません。

回避法はシンプルで、表は必ずHTMLのテキストで組むことです。装飾はCSSで付ければよく、見た目のきれいさとAIの読み取りやすさは両立できます。どうしても図版で見せたい場合も、画像とは別にテキストの表を必ず併記してください。

失敗2。料金の「単位」と「時点」を書き忘れる

「2,980円」とだけ書いて、月額なのか年額なのか、税込なのか税別なのか、1人あたりなのかを書き忘れるのもよくある失敗です。読者が月額と年額を取り違えるおそれがあり、AIの回答で紹介された場合も、条件が抜けたまま伝わるおそれがあります。

回避法は、価格のセルに単位と条件をセットで書くことです。「月額2,980円（税込・1拠点あたり）」のように、そのセルだけ読んでも意味が完結する形にします。

さらに「（2026年07月21日時点）」と時点を添えると、いつの料金かが読者に伝わります。料金は改定されることがあるので、この一手間が役立ちます。

失敗3。自社を過剰に持ち上げた「不公平な比較表」にする

自社が有利に見えるように、他社に不利な項目ばかり並べたり、都合の悪い列を隠したりする表もあります。短期的には良く見えても、偏った比較は読者の信頼を損ないます。他社の情報と食い違えば、かえって「都合よく作られた表」と受け取られかねません。

他社と比べる表は、景品表示法の比較広告の考え方にも関わります。消費者庁の比較広告の説明では、比較広告が不当表示にならないための要件として、主張する内容が客観的に実証されていること、実証されている数値や事実を正確かつ適正に引用すること、比較の方法が公正であることの3つを挙げています。問題となる例として、料金比較で自社が最も安いように表示しながら、自社に不利な割引サービスを除いて比較していた携帯電話通信業者のケースも紹介されています。他社の料金は各社の公式の料金ページで確かめ、調べた日付を表に添えてください。自社の料金を「通常価格」と割引後の価格で並べる場合は、消費者庁の二重価格表示の考え方も確かめてください。

回避法は、他社にも当てはまる公平な軸で比較し、自社が弱い部分は正直に「向いていない会社」として書くことです。「小規模なら他社の方が安い場合もある」と率直に書ける表の方が、結果的に読者に信頼されます。客観比較の型は前述の比較記事の書き方の記事で詳しく扱っています。

ポイント。3つの失敗は「画像化」「単位・時点の欠落」「不公平さ」に集約されます。逆に言えば、この3点を避ければ、読者が条件を取り違えにくく、公平に比べられる表になります。

使う側の本音。構造化だけでは引用されない現場の落とし穴

最後に、取り組む前に知っておきたい妥協点をお伝えします。ここまで手順を説明しておいて何ですが、表の作り方を見直しても、それだけでAIに引用されるわけではありません。

構造化データを実装しても、AIに引用されるとは限りません。原因は、表の作り方ではなく、その手前にあることがあります。よくある落とし穴を挙げます。

• 提供元の情報が足りない：会社の情報や実績がサイトに書かれておらず、読者が提供元を判断できない
• 一次情報になっていない：他社記事の受け売りで、そのサイト独自の情報や数値が無い
• 情報が古い：料金や仕様が改定前のまま残っている。Googleは、生成AI機能が関連性の高い最新のウェブページを検索インデックスから取り出して回答に使うと説明している

つまり、比較表の見直しは、ページの情報を正確にする作業の1つです。会社とサービスの説明や実績がサイトに書かれていないままでは、表だけを見直しても効果は出にくくなります。この土台についてはAIに引用される記事に直す手順｜更新日と一次情報の書き方が参考になります。

もう1つの妥協点は、内製と外注の線引きです。表をHTMLで組み直し、単位や時点をそろえるところまでは、社内で十分にできます。ここはぜひ自分たちで手を動かしてください。一方で、構造化データをサイト全体で正しく実装し、会社としての信頼設計まで含めて作り込むとなると、Schema.orgの正確な使い分けやサイト構造の見直しが必要になり、専門知識が要る領域に入ります。

「表だけ直す」なら内製、「AIに引用される会社の土台ごと作る」なら専門家と組む、という切り分けが現実的です。ここを見誤って全部を独学でやろうとすると、時間ばかりかかって成果が出ない、という失敗になりがちです。無理のない範囲を見極めることが、遠回りしないコツです。

よくある質問

まずは、今ある自社の料金比較表を1つ開いて、それが画像なのかテキストなのかだけ確認してみてください。画像だった場合は、そこがいちばん優先度の高い直しどころです。さらに一歩進めたい方は、比較記事全体の型を解説したAIに推薦される比較記事の書き方もあわせて読むと、表と記事の両輪で改善できます。

ここまで読んで、自社だけで構造化データの実装まで進めるのは大変そうだと感じた方は、気軽にご相談ください。コレットラボのGEO（生成AI検索最適化）では、既存ページの診断から、会社とサービスの説明、実績、料金の考え方の原稿制作・修正、構造化データの実装、公開後の毎月の確認まで行います。AI回答での引用と検索順位は保証していません。今の料金ページを見ながら、どこから修正するかを一緒に確認するところからお気軽にお問い合わせください。