比較表:形式と例
セマンティックマークアップ、完全なディメンション、明確なセル、新鮮なデータを通じて、読者の意思決定とエンジンの事実抽出を可能にする比較表を作成します。
比較表は、すべての選択肢を同じ判断基準で評価するため、読者は別々の段落から情報を再構築することなく、意味のある違いを確認できます。これは、コンバージョンと回答エンジン抽出の両方において最も価値の高いページ要素のひとつですが、それはデータの画像ではなく、データとして公開された場合に限ります。
| 判断基準 | Northstar | Relay | Postbox |
|---|---|---|---|
| 月額料金、10ユーザー | $90 | $120 | 利用不可 |
| 承認ワークフロー | 含む | 含む | 利用不可 |
| 最低契約期間 | 月額 | 年間 | 不明 |
凡例:「含む」とは、その機能がアドオンなしで記載のプランに含まれていることを意味します。「利用不可」とは、ベンダーがそのプランで提供していないことを意味します。「不明」とは、記載された情報源から主張を検証できなかったことを意味します。上記の名称と数字は説明用です。構造が本番モデルです。
この要素が重要な理由
比較は認知的な作業を生み出します。3つの製品が3つの別々のセクションで説明されている場合、読者は各価格を記憶し、異なる表現を正規化し、省略された機能が存在しないのか単に言及されていないのかを判断しなければなりません。表はその記憶作業を取り除きます。行は判断基準を宣言し、列は選択肢を保持し、各交差点が答えを提供します。読者は関係性を失うことなく、1つの選択肢を縦に見たり、1つの基準を横に見たりできます。
その構造は機械抽出可能性も向上させます。つまり、検索システムや回答エンジンがコンテンツを再利用する際に、ラベルとその値の関係性を保持できる能力です。明確なヘッダー行、明示的な行ヘッダー、セルごとに1つの事実、完全なディメンションにより、コンパクトな主語–述語–値のステートメントセットが作成されます。「Relay — 最低契約期間 — 年間」は分離して引用するのが容易です。同じ単語を含む色付きのカードレイアウトは、目の見える訪問者には表のように見えても、信頼できる行と列の関係を公開しません。
表の画像は比較表ではありません。テキストを含むスクリーンショットです。スクリーンリーダーを使用する人はヘッダーやセルを操作できません。読者は価格をきれいにコピーできず、その中を検索できず、画像全体を拡大せずにテキストを拡大できず、狭い画面に適応できません。クローラーや回答エンジンは光学文字認識を試みる場合がありますが、文字認識が成功しても、正しい値が正しい行と列に結びついたままであることは保証されません。同様に、スタイル付きのdiv要素の山は、テーブルセマンティクスを捨てながらグリッドを模倣する場合があります。その代償は明快です:ページは調査努力を費やして事実を生成し、その後、多くの人や機械からその関係を隠してしまいます。
使用すべき時
少なくとも2つの選択肢を、少なくとも3つの共有ディメンションに対して評価する必要がある場合に比較表を使用します。適切な対象には、製品、プラン、方法、サービス階層、技術仕様、資格ルール、および短いランキングリストが含まれます。ディメンションは比較可能でなければなりません:価格と価格、サポートチャネルとサポートチャネル、契約期間と契約期間です。
単に複数の事実を行に収められるという理由だけで使用してはいけません。1つのオブジェクトに関する2列のラベルと値のリストは仕様表であり、比較ではありません。スケジュールは時刻表です。生の測定値のマトリックスは、選択ではなく分析を目的としたデータ表である場合があります。長いナラティブな議論は散文に属します。セルにミニエッセイを含めるべきではないからです。
類似しているが異なるケースには特に注意が必要です:
- 選択肢ごとに異なる基準: 最初に個別のプロファイルを使用し、その後共有の基準のみを比較します。ディメンションが一致しないグリッドは、同等性の錯覚を生み出します。
- 裏付けとなるディメンションのない1つの評価: 直接的な推奨事項を使用し、その理由を説明します。1行の表は儀式を追加するだけで、明確さを追加しません。
- 5つ以上の選択肢列: オーディエンス別に分割するか、フィルタリング可能でアクセシブルなテーブルを使用します。すべてを収めるためにテキストを縮小すると、要素は技術的に存在しても実質的には使用できなくなります。
- ビジュアル機能チェックリスト: すべての記号に定義された意味があり、すべての選択肢がすべての行に対して回答を受け取る場合にのみ表を使用します。
- 頻繁に変更されるライブデータ: 維持されたデータソースと可視の検証日を使用します。最新に保つことができる所有者がいない場合、表を公開しないでください。
配置する場所
プライマリ比較表は、ページがオーディエンス、選択方法、ディメンションを定義した後、しかし長い選択肢ごとのレビューの前に配置します。読者は行を解釈するのに十分なコンテキストを必要とします。比較を受け取る前にページ全体を読む必要があってはいけません。
A vs Bページでは、メインの表は通常、直接回答と短い「比較方法」の注記の後に続きます。候補リストページでは、包含基準の後、詳細なエントリーの前に配置します。小さな仕様表が製品セクション内に表示されることもありますが、プライマリ表と矛盾したり、同じラベルに異なる意味を導入したりしてはいけません。
表を別の密集した比較表、無関係なコールトゥアクション、または全幅のスクリーンショットのすぐ隣に配置しないでください。競合するグリッドは読み取り経路を不明確にします。キャプションと表の間にプロモーションバナーを挿入したり、行とその修飾情報の間にソースノートを挿入したりしないでください。キャプション、検証日、凡例、表、ソースノートを1つの境界のある単位として保持します。コールトゥアクションは説明の評価の後に続けることができ、エビデンスを中断してはいけません。
構成要素
ラベル付き画像は、説明をアセットに焼き付けることなく、以下の領域を特定する必要があります:
- キャプション: 何を、誰のために、どのプランまたはシナリオで比較しているかを示します。
- 検証日: 価格と利用可能性が確認された正確な日付を示します。
- 列ヘッダー: 選択肢の名前を示します。最初のヘッダーは判断基準列の名前を示します。
- 行ヘッダー: それぞれ判断に関連する1つのディメンションを示します。
- ボディセル: 1つの事実、1つの数値とその単位、または1つの定義された記号を含みます。
- ハイライト列: 編集上の推奨がある場合にそれを示します。基礎となる事実を変更したり隠したりすることはありません。
- 凡例: すべての記号とステータスラベルを可視テキストで定義します。
- ソースノート: 主張の検証に使用された一次ソースまたは方法を示します。
レンダリングされた凡例: ✓ = 指定されたプランで利用可能; — = そのプランでは利用不可; N/A = そのディメンションは該当なし; Unknown = チームが事実を検証できなかった。公開されたコンポーネントは、これらの意味を支援技術にも公開する必要があります(たとえば、各セル内の可視または視覚的に隠されたテキストなど)。文字だけに依存してはいけません。
デザイン例
すべてのバリアントは同じセマンティックコアを使用します。視覚的な処理は強調と密度を変更できますが、セルを画像に変えたり、ヘッダーを削除したり、セルを結合したり、色だけで意味をエンコードしたりしてはいけません。
標準: 2〜4つの選択肢、3〜8つの判断行、編集上のハイライトなし。これは、ページが1つの勝者を宣言するのではなくトレードオフを説明する場合のデフォルトです。
ハイライト推奨: 1つの選択肢列に「小規模チームに最適」などのテキストラベルを付けることができます。色は補足的なものです。ハイライトは行の順序を変更したり、不利な点を隠したり、他の選択肢のテキストのコントラストを低下させたりすることはできません。
記号ベース: 繰り返されるバイナリ可用性の事実に適しています。凡例が可視であり、各セルがアクセシブルなテキスト相当物を保持している場合にのみ使用します。価格、制限、資格情報はテキストのままです。
最初の列がスティッキーなモバイル: テーブルはラベル付きコンテナ内で水平スクロールします。ページ自体に水平スクロールが発生してはいけません。最初の列をスティッキーに保ち、読者が選択肢を横断する際にディメンションを維持できるようにします。スクロール領域のキーボードアクセスと可視フォーカス状態を維持します。
パラメータ
以下のパラメータはポータブルコンテンツ契約を形成します。「ソース」とは、作成者またはレンダラーが値を取得する場所を意味し、商業的主張のために引用されるエビデンスではありません。
| 名前 | 型 | 必須 | 最小/最大 | デフォルト | ソース |
|---|---|---|---|---|---|
| caption | プレーン文字列 | はい | 8〜24語 | なし | 属性 |
| verification-date | ISO日付 | はい | 正確な日付1つ | なし | 属性 |
| columns | 順序付きリスト | はい | 合計3〜6(ディメンション列を含む) | なし | 本文のヘッダー行 |
| rows | 等長リストの順序付きリスト | はい | 3〜10推奨 | なし | 本文 |
| symbol-legend | 記号からテキストへのマップ | 条件付き | 記号またはステータスごとに1定義 | なし | 表の後の本文 |
| highlight-column | 列識別子 | いいえ | 0〜1の選択肢列 | ハイライトなし | 属性 |
| source | オプションURL付きプレーンテキスト | 外部主張にははい | 1〜3の一次ソース | なし | 凡例の後の本文 |
3つの選択肢列に行ヘッダー列を加えたものは、一般的で読みやすいデフォルトです。合計6列が編集用表の通常の上限です。より大きなデータセットには、段階的に小さくなるタイポグラフィではなく、意図的なフィルタリングまたはセグメンテーションが必要です。
構文とコード例
3つの形式すべてが同じキャプション、確認日、列順序、行、凡例、ハイライトにマッピングされる必要があります。Markdownパイプテーブルは型指定されたディレクティブ内のソースデータであり、外側の要素がメタデータと動作を提供します。
ポータブルMarkdownディレクティブ
:::comparison-table{caption="10人チーム向けメールプラットフォーム" verification-date="2026-08-27" highlight-column="relay"}
| 判断基準 | Northstar | Relay | Postbox |
|---|---:|---:|---:|
| 月額料金、10ユーザー | $90 | $120 | 利用不可 |
| 承認ワークフロー | 含む | 含む | 利用不可 |
| 最低契約期間 | 月額 | 年間 | 不明 |
凡例:含む = 指定プランの一部;利用不可 = プランに含まれていない;不明 = 未検証。
ソース:ベンダーのプランおよび価格ページ。
:::
Hugoショートコード
現在の汎用テーブルヘルパーは、キャプション、検証日、行ヘッダースコープ、凡例、ソース、またはハイライトを第一級のフィールドとして保持していません。そのレンダラーがこの契約を満たすまでは、視覚的に類似していても構造的に不完全なグリッドを受け入れるのではなく、ライブ比較にはセマンティックHTMLを使用します。意図されたHugoマッピングは以下の通りです:
{{< comparison-table caption="10人チーム向けメールプラットフォーム" verification-date="2026-08-27" highlight-column="relay" >}}
| 判断基準 | Northstar | Relay | Postbox |
|---|---:|---:|---:|
| 月額料金、10ユーザー | $90 | $120 | 利用不可 |
| 承認ワークフロー | 含む | 含む | 利用不可 |
| 最低契約期間 | 月額 | 年間 | 不明 |
凡例:含む = 指定プランの一部;利用不可 = プランに含まれていない;不明 = 未検証。
ソース:ベンダーのプランおよび価格ページ。
{{< /comparison-table >}}
レンダラーは、ネイティブの<table class="art-table">、<caption>、<thead>、<tbody>を出力し、列ヘッダーにはscope="col"、行ヘッダーにはscope="row"を設定し、コンテナ化された水平スクロール領域を提供する必要があります。この表記は、カードや画像で代用する許可ではありません。
WordPressブロックまたはショートコード
[comparison_table caption="10人チーム向けメールプラットフォーム" verification_date="2026-08-27" highlight_column="relay"]
判断基準 | Northstar | Relay | Postbox
月額料金、10ユーザー | $90 | $120 | 利用不可
承認ワークフロー | 含む | 含む | 利用不可
最低契約期間 | 月額 | 年間 | 不明
[legend]凡例:含む = 指定プランの一部;利用不可 = プランに含まれていない;不明 = 未検証。[/legend]
[source]ベンダーのプランおよび価格ページ。[/source]
[/comparison_table]
カスタムWordPressブロックは、フォームコントロールで同じフィールドを公開できます。ネイティブテーブルマークアップを保存またはレンダリングし、スタイルやスクリプトが失敗した場合でも関係性を維持する必要があります。
例
良い例:判断可能な比較
| 判断基準 | Starter | Team | Studio |
|---|---|---|---|
| 月額料金、8シート | $64 | $96 | $160 |
| クライアントゲストアクセス | 利用不可 | 10ゲスト | 無制限 |
| 承認履歴 | 30日間 | 1年間 | 無制限 |
| シングルサインオン | 利用不可 | 利用不可 | 含む |
これが機能する理由は、すべてのプランがすべての判断基準に回答し、数値に単位とシート数の前提が含まれ、不在が明示的であり、確認日が主張の有効期間を区切っているからです。最も判断に関連する行(実際のチームの総価格)が最初に来ます。各セルには、販売の主張ではなく1つの事実が含まれています。
悪い例:説得力に見えるグリッド
| 機能 | Starter | Team | Studio |
|---|---|---|---|
| 価値 | 優れた価値 | 最も人気! | 究極の体験 |
| コラボレーション | ✓ | ✓ | ✓ |
| 高度なツール | パワフル | 必要なすべて |
悪いバージョンはスタイリングを考慮する前から失敗しています。「優れた価値」や「パワフル」は検証可能な意味のないマーケティングフレーズです。チェックマークに凡例がありません。「高度なツール」は未定義です。空白のStarterセルは、不在、該当なし、不明、または忘れられたことを意味する可能性があります。「必要なすべて」は無制限のクレームセットを1つのセルにまとめています。行は購入者の決定ではなくプロモーションテーマに従っており、確認日がなく、ソースもありません。
修復するには、ゲスト制限、承認履歴期間、シングルサインオンの可用性などの正確なディメンションを指定し、3つのプランすべてを各行に対して検証し、空白を明示的なステータスに置き換え、記号を定義し、レビューに日付を付けます。それらの事実が入手できない場合は、好意的な推論ではなく、正直な「不明」を公開します。
スキーママークアップとアクセシビリティ
比較表のための一般的なSchema.orgタイプやプロパティはありません。この要素は包含するArticle、Product、またはコレクションページの一部として残ります。事実は、ページがその構造化データの資格とエビデンスルールを独立して満たしている場合にのみ、有効な製品、オファー、または評価プロパティに供給できます。ハイライトされた列を、基礎となるコンテンツが実際にそれらの値を提供しない限り、aggregateRating、review、またはoffersマークアップに変換しないでください。
アクセシビリティは外観ではなく関係性から生まれます。各選択肢ヘッダーには<th scope="col">、各判断基準には<th scope="row">を使用します。表を識別する簡潔な<caption>を追加します。rowspanやcolspanはナビゲーションと抽出を困難にするため、セルの結合は避けます。代わりにラベルを繰り返すか、表を分割します。ソース順序を論理的に保ち、アクセシビリティツリーから表を削除しないでください。
小さな画面では、オーバーフローをページではなくテーブル周辺のコンテナに配置します。キーボードフォーカス可能なスクロール領域にアクセシブルな名前と可視フォーカス状態を付与します。スティッキーな最初の列はコンテキスト維持に役立つ場合がありますが、フォーカスされたコンテンツを覆ったり、データの公開をスクリプトに依存したりしてはいけません。記号には可視テキスト定義とセルレベルのテキスト相当物が必要です。色で推奨列を強調表示できますが、ヘッダーにもテキストラベルが必要です。
記述ルール
行は利便性ではなく判断価値によって選択します。読者の選択を最も変える可能性の高い基準を最初に置き、次に前提条件となる機能、総コスト、制約、サポート、二次的な詳細を続けます。アルファベット順は、読者がディメンション名を知って到着する場合にのみ有用であり、購入判断には通常は誤りです。ベンダーのナビゲーション順序はプロモーションの分類法であり、読者の優先順位ではありません。
ディメンションのパリティは絶対です:すべての選択肢がすべての行で評価されなければなりません。空白も答えですが、曖昧な答えであるため、公開された表では空白は禁止されています。以下のステータスを正確に使用します:
- 利用不可(Not available): その選択肢は、記載されたプランまたは条件下でその機能を提供していません。
- 該当なし(Not applicable): そのディメンションは論理的にその選択肢に該当しません。
- 不明(Unknown): チームが適切なソースから回答を検証できませんでした。
1つのセルには1つの事実、数値、または定義された記号を含めます。単位と条件を含めます:「$49/月 5シート」は使用可能ですが、「手頃な価格」は使用不可です。「10GB/ワークスペース」は使用可能ですが、「充実したストレージ」は使用不可です。値に修飾が必要な場合は短く保ち、ソースノートを表に付属させます。段落が必要な場合は、表の下で説明し、「条件付き」などの簡潔なセルラベルを使用します。
要約には3〜8行を使用し、強い理由がない限り10行を超えないようにします。選択肢列は2〜5列(行ヘッダー列を除く)を使用します。ヘッダーは具体的かつ並列的であることを保ちます。ボタン、フォーム、自動再生メディア、段落長の販売コピー、推薦文、方法論のない星評価、またはセル内のネストされた表を配置しないでください。編集用比較ではセルの結合を絶対に使用しないでください。
確認日は、価格、在庫、プラン名、機能の可用性が変化するため必須です。「最近」や「現時点」ではなく正確な日付を記述します。公開前に所有者とレビュー頻度を割り当てます。古い表は表がないより悪いです:そのきれいな構造が、時代遅れの主張を異常に権威があり繰り返しやすいものに見せます。
これを使用する投稿タイプ
| 投稿タイプ | 使用 | 推奨位置 |
|---|---|---|
| A vs B比較 | 必須の主要エビデンス要素 | 評価と比較方法の後。詳細分析の前 |
| ベストX for Yガイド | 選択肢がディメンションを共有する場合の必須候補リスト要約 | 選択基準の後。個別推奨の前 |
| Xの代替案ページ | 代替案を一貫して評価できる場合に必須 | 切り替え理由と包含基準の後 |
| カテゴリページ | 限定された範囲の意思決定支援としてオプション | カテゴリ概要の後。完全な製品グリッドの前 |
| 製品ページ | プランまたはモデル比較としてオプション | コアバリュープロポジションの後。購入アクションの前 |
| リスト記事ガイド | リストエントリーが基準を共有する場合に推奨要約 | 方法論の後。番号付きリストの前 |
フロントマターのpostTypesは、これら6つのドキュメントへの機械可読な結合です。可視の表は、識別子だけでは伝えられない編集上の配置を説明します。
QAチェックリスト
- 出力はネイティブHTMLテーブルであり、画像、キャンバス、CSSグリッド、または
div要素の山ではない。 - テーブルには有用なキャプション、明確なヘッダー行、列ヘッダースコープ、行ヘッダースコープがある。
- すべての選択肢がすべてのディメンションで評価されている。公開されたセルに空白はない。
- 「利用不可(Not available)」、「該当なし(Not applicable)」、「不明(Unknown)」がそれぞれの明確な意味に従って使用されている。
- 各セルには1つの事実、単位付きの数値、または定義された記号のみが含まれ、マーケティングフレーズは含まれていない。
- すべての記号に可視テキスト凡例と、そのセル内のアクセシブルなテキスト相当物がある。
- 行はアルファベット順やベンダーページ順ではなく、判断の関連性によって並べられている。
- テーブルは列制限内に収まっているか、コンテンツが意図的にセグメント化されている。
- モバイルでは、水平スクロールはラベル付きテーブル領域内に含まれ、ページは横方向にスクロールしない。
- スティッキーな最初の列を使用する場合、読み取り可能で、キーボードセーフであり、高コントラストを維持している。
- セルは結合されておらず、セル内にネストされたテーブルや複雑なインタラクティブコントロールは含まれていない。
- 正確な確認日と適切な一次ソースノートが存在する。
- ハイライトされた列がある場合、テキストラベルがあり、不利な事実を抑制していない。
- カスタムスタイルやスクリプトが利用できない場合でも、テーブルはその関係性を伝えている。
FAQ
比較表にはいくつの選択肢を含めるべきですか?
メインの表には2〜5つの選択肢列を使用します。それ以上の選択肢が必要な場合は、オーディエンス別の表に分割するか、ネイティブテーブルセマンティクスを保持するフィルタリング可能なインターフェースを提供します。
比較表でチェックマークとバツ印を使用できますか?
はい、ただし各記号には可視テキスト凡例とアクセシブルなテキスト相当物が必要です。形状や色だけでは、それが「含む」「推奨」「テスト済み」「単に存在する」のどれを意味するのか読者が確実に推測できないため、答えにはなりません。
空白のセルは何を意味するべきですか?
何も意味しません。空白のセルはその意味が不明であるため禁止されています。「利用不可」「該当なし」「不明」と記述し、各用語を定義された意味に従って使用します。
比較表には構造化データが必要ですか?
通常は不要です。一般的な比較表スキーマは存在しません。ページの有効なスキーマ内に保持し、製品、オファー、または評価プロパティをマッピングするのは、ページがそれらのプロパティに必要なエビデンスを持っている場合のみです。
どのくらいの頻度で表を確認すべきですか?
変動性に合わせて頻度を調整します。価格やプランの権利は毎月または四半期ごとのレビューが必要な場合があります。安定した仕様は変更頻度が低い場合があります。いずれの場合も、正確な最終確認日を表示し、読者が自ら鮮度を判断できるようにします。
このセクションの他のチュートリアル
実践する準備はできましたか?
無料チェック · 7日間お試し · クレジットカード不要