技術SEO

料金表が画像だけになっていませんか？HTMLで伝える料金ページの作り方

料金・契約条件が画像にしかないページを、読みやすいHTMLへ整える方法。プラン比較表のコード、altとの役割分担、公開後の点検手順を具体例で紹介します。

公開 2026年9月19日

READABLE PRICING

金額と条件を、比較できる本文にする

画像を使う場合も、購入判断に必要な情報を本文へ。架空サービスの例で作り方を説明します。

01
条件をそろえる

金額、課金単位、初期費用、含まれる作業、契約条件を確認します。
02
HTMLで伝える

文章や見出し付きの表で、項目と価格の関係を示します。
03
実際に読む

スマートフォンと読み上げを確認し、申込画面との内容も照合します。

料金表を画像で掲載する場合も、プラン名・金額・課金単位・契約条件はHTMLの本文に残しましょう。 読者が拡大、コピー、読み上げなどで内容を確認しやすくなり、更新時の照合もしやすくなります。

この記事では、架空のサイト保守サービスを例に、画像中心のページへ追加する説明とHTML表を作ります。AI検索での引用を約束する施策ではなく、購入前の判断材料を読める形で提供するための改善です。

画像だけの料金表で、何が不足するか

料金は金額だけではありません。「月額か年額か」「税込か」「初期費用はあるか」「どこまで含まれるか」が分からなければ、読者は比較できません。

画像内に書かれていても、スマートフォンで文字が小さくなる、テキストを選択できない、読み上げで条件が伝わらない、といった問題が起きる場合があります。実際に自分のページで確認してから、修正範囲を決めます。

W3Cは、複雑な画像の情報を伝える方法として、短い代替テキストに加えて本文などで詳しい説明を提供する例を示しています。料金のように比較が必要な情報も、画像だけに依存しない構成を検討できます。W3Cの複雑な画像に関する解説

作業1：必要な情報を先に書き出す

画像をHTMLに置き換える前に、現在の申込条件を確認します。画像から写すだけでは、古い情報をそのまま残す可能性があります。

プラン名と対象者
金額、税の扱い、課金単位
初期費用、追加費用が発生する条件
含まれる作業と含まれない作業
最低契約期間、更新・解約の条件
条件の確認日と、詳細な利用条件へのリンク

この6項目が、料金ページ、FAQ、申込画面で矛盾していないかを確認します。サービスごとに必要な条件は異なるので、例の項目だけで十分と決めつけないでください。

作業2：比較が不要なら、まず文章で説明する

プランが1つなら、無理に表へ変える必要はありません。次は架空の保守サービスの例であり、AIVISの料金ではありません。

ライト保守プランは、小規模サイトの更新担当者向けです。月額9,800円（税込）、初期費用22,000円（税込）で、月2回のテキスト更新を含みます。ページの新設は含みません。最低契約期間は3か月です。

この説明に、実際の更新・解約条件と申込先を添えます。「詳しくはお問い合わせ」の一文だけで済ませず、事前に示せる条件を記載してください。

作業3：複数プランは同じ比較軸で表にする

次の表も説明用の架空例です。

架空のサイト保守サービス：料金表示の例
項目	ライト	スタンダード
月額（税込）	9,800円	19,800円
初期費用（税込）	22,000円	22,000円
テキスト更新	月2回	月5回
ページ新設	含まない・別途見積もり	含まない・別途見積もり
最低契約期間	3か月	3か月

表の題名はcaption、見出しセルはthで表します。列見出しにはscope="col"、行見出しにはscope="row"を付け、金額と項目の対応を示します。W3Cの表の見出しに関する解説

実装例：横幅が足りない場合は表だけをスクロールさせる

以下は最小構成の例です。料金と条件は実際の提供内容に置き換え、既存サイトのCSSやCMS上で動作を確認してください。

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">保守プランの料金</h2>
  <p>金額は税込です。初期費用は22,000円、最低契約期間は3か月です。</p>
  <div class="pricing-scroll" role="region"
       aria-label="保守プランの比較表" tabindex="0">
    <table class="pricing-table">
      <caption>月額と含まれる作業（架空の例）</caption>
      <thead>
        <tr>
          <th scope="col">項目</th>
          <th scope="col">ライト</th>
          <th scope="col">スタンダード</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">月額</th>
          <td>9,800円</td>
          <td>19,800円</td>
        </tr>
        <tr>
          <th scope="row">テキスト更新</th>
          <td>月2回</td>
          <td>月5回</td>
        </tr>
        <tr>
          <th scope="row">ページ新設</th>
          <td>別途見積もり</td>
          <td>別途見積もり</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

.pricing-scroll { overflow-x: auto; }
.pricing-scroll:focus-visible {
  outline: 2px solid #8a5d1d;
  outline-offset: 4px;
}
.pricing-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
}
.pricing-table th, .pricing-table td {
  border: 1px solid #cfc8be;
  padding: 1rem;
  text-align: left;
  vertical-align: top;
}
.pricing-table thead { background: #f3f0ea; }