商品比較テーブル

3商品を仕様ごとに ○/× で比較し、おすすめ列をハイライト。狭い画面では横スワイプでき、行ホバーで横一列が強調される。

ENGLISH

Product Comparison Table

CSSのみ

約43行領域別 / EC・商品の一覧 →

プレビュー

ホバー

操作カーソルを乗せると動きます（スマホはタップ）。

実装メモ

3商品×仕様行の比較表で、おすすめ列を藍でハイライトし列上にバッジを載せています。1列目（仕様名）は position:sticky で固定し、狭い画面では横スクロール（スワイプ）で残りの列を見せる構成です。プレビュー枠のような小さい高さでも縦スクロールを避けられます。○/× は色で可否がひと目で伝わります。

使いどころ

料金プランや商品ラインナップを仕様軸で横並び比較させ、購買の意思決定を後押しする場面に向く。デモは3商品×5行の仕様比較だが、価格ページのプラン比較（Free/Pro/Enterprise）のような使い方が典型で、「どれか一つを推したい」場合はctl-recoのようにハイライト列を1つ用意して視線を誘導する。逆に、比較対象が5列を超えると横スクロールが常態化し、左端の仕様名列だけが固定されて残りは常に見切れる状態になるため、実務では列数を3〜4に絞るか、スマホ幅ではアコーディオン式の縦並びに組み替える設計を検討した方がよい。行数が多い（10行超）仕様表では、機能カテゴリごとに行をグループ化する見出し行を挟むと、横比較の途中で「今どの分類を見ているか」を見失いにくくなる。

仕組み

1列目(ctl-rowhead)にposition: sticky; left: 0を指定し、横スクロール中も仕様名だけが画面左端に固定され続ける実装。overflow-x: autoを持つラッパー(ctl-scroll)がoverflow-yも同時にautoへ昇格させてしまう挙動を逆手に取らないよう、padding-top: 12pxを確保してctl-badge（おすすめラベル）のtop: -9pxがラッパーの上端で切れないようコメント付きで対策してある。おすすめ列(ctl-reco)は該当する全セルに個別クラスを付ける手作業式で、ヘッダー・価格・重量など各行のtd/thに一つずつctl-recoを付与しており、nth-childのような自動選択には頼っていない。○/×の可否表示はテキスト文字そのもの(○/×)を使い、ctl-yes(緑)とctl-no(朱)の色を重ねているため、文字の形自体でも判別できる設計になっている。

実装の注意

最大の抜けは、比較表としては必須のcaption要素が無く、視覚的に「商品比較テーブル」という表題は部品の外側（デモページの見出し）に依存していること。単体で埋め込むと、このテーブルが何を比較しているのかテーブル単体の文脈からは読み取れない。次に、th要素にscope属性が一切付いていない。ヘッダー行の<th>ベーシック</th>などにはscope="col"、各行の<th class="ctl-rowhead">価格</th>にはscope="row"を付けるのが表の基本だが、現状はどちらも無いため、セルを移動したときに「どの行・どの列の値か」が自動的には結びつかない。またホバーによる行強調(.ctl tbody tr:hover td)はマウス操作者だけの体験で、キーボードのみで操作する場合や指でのタッチ操作では同じ強調が得られず、視線の追いやすさに差が生じる。

アクセシビリティ

上記のpitfallsで挙げたscope属性とcaptionの欠落が、このテーブルの改善点の中心になる。実務で使うときは<caption>3商品の仕様比較</caption>をtableの先頭に足し、列見出しのthにscope="col"、行見出しのthにscope="row"を付けるだけで、読み上げが「ベーシックの価格、6,980円」のように行列を結びつけた形になる。○/×の可否は文字そのもので判別できる設計だが、読み上げ環境によっては「まる」「ばつ」ではなく機種依存の記号名で読まれる場合があるため、可能なら視覚的に隠したテキストで「あり」「なし」を併記すると誤解の余地が減る。おすすめ列はctl-badgeの「おすすめ」という文言がテキストとして存在するため、色によるハイライト(ctl-reco)が読み上げに反映されなくても意味そのものは伝わる設計になっている。

調整して使う

調整しやすいのは3点。おすすめ列のハイライト色（既定#eef2fdの薄藍とバッジの#2b50c7）は、比較対象が偶数個で中央でなく右端を推したい場合など、クラスを付ける列を変えるだけで対応できる。次に○/×の表現を、テキスト文字ではなくチェックマーク・バツのSVGアイコンに差し替えると、フォントによる字形の違い（○の太さが機種でばらつく）を避けられる。最後に固定列の挙動で、現状は仕様名列(1列目)だけをstickyにしているが、価格の高い商品を常に見せたい場合は最終列や特定の商品列もposition: stickyでright側に固定する応用ができる。行数が多い表では、tbody tr:nth-child(even)のようなゼブラストライプを足すと横に長い行でも視線が迷いにくくなる。

コード（コピーして使えます）

<div class="ctl-scroll">
  <table class="ctl">
    <thead>
      <tr>
        <th class="ctl-rowhead"></th>
        <th>ベーシック</th>
        <th class="ctl-reco"><span class="ctl-badge">おすすめ</span>プロ</th>
        <th>ライト</th>
      </tr>
    </thead>
    <tbody>
      <tr><th class="ctl-rowhead">価格</th><td>¥6,980</td><td class="ctl-reco">¥9,980</td><td>¥3,980</td></tr>
      <tr><th class="ctl-rowhead">重量</th><td>320g</td><td class="ctl-reco">248g</td><td>410g</td></tr>
      <tr><th class="ctl-rowhead">防水</th><td class="ctl-yes">○</td><td class="ctl-reco ctl-yes">○</td><td class="ctl-no">×</td></tr>
      <tr><th class="ctl-rowhead">急速充電</th><td class="ctl-no">×</td><td class="ctl-reco ctl-yes">○</td><td class="ctl-no">×</td></tr>
      <tr><th class="ctl-rowhead">保証</th><td>1年</td><td class="ctl-reco">2年</td><td>1年</td></tr>
    </tbody>
  </table>
</div>