商品比較テーブル
3商品を仕様ごとに ○/× で比較し、おすすめ列をハイライト。狭い画面では横スワイプでき、行ホバーで横一列が強調される。
プレビュー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 3〜4 商品・プランを仕様軸で比べる購入検討
- おすすめを 1 列ハイライトして誘導したい場合
- 狭い画面でも仕様名を固定して見せたい表
- 避ける場面
- 5 列を超える比較（横スクロールが常態化）
- 行が 10 を超え見出し行の分類が要る仕様表
- 構成要素
- 固定の仕様名列
- 商品名ヘッダー
- おすすめバッジ
- ○／× セル
- 横スクロール領域
- 持っている状態
- 通常
- ホバー
- キーボード
Tab で横スクロール領域（tabindex=0・aria-label 付き）へ、←→ で送る。表の中に操作要素は無い
- 支援技術
table に視覚外の caption、列見出し th に scope=col・行見出しに scope=row。○／× は文字と色の両方で示し、隠しテキストで「あり／なし」を併記。おすすめは文言バッジ。行強調は hover のみ
- 動き
なし
デザインの要点
- 仕様名の列だけ position:sticky で左に固定する。横に送っても「何の行か」を見失わない
- おすすめは 1 列だけ。列全体に薄藍を敷き、上に文言バッジを載せる。色だけだと理由が伝わらない
- ○／× は文字そのもので出し、色は重ねるだけにする。アイコンだけだと印刷やモノクロで消える
- overflow-x:auto は overflow-y も auto にするので、上へ出るバッジぶん padding-top を確保する
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"を付けるのが表の基本で、無いとセルを移動したときに「どの行・どの列の値か」が自動的には結びつかない（この見本は視覚外のcaptionとscopeを両方持たせてある）。またホバーによる行強調(.ctl tbody tr:hover td)はマウス操作者だけの体験で、キーボードのみで操作する場合や指でのタッチ操作では同じ強調が得られず、視線の追いやすさに差が生じる。横スクロール領域にはtabindex="0"とaria-labelを付けてあり、キーボードでも←→で送れる。
アクセシビリティ
この見本は<caption class="ctl-sr">3商品の仕様比較</caption>をtableの先頭に置き、列見出しのthにscope="col"、行見出しのthにscope="row"を付けてあるので、読み上げは「ベーシックの価格、6,980円」のように行列を結びつけた形になる。○/×の可否は文字そのもので判別できる設計だが、読み上げ環境によっては「まる」「ばつ」ではなく機種依存の記号名で読まれる場合があるため、記号をaria-hiddenにして視覚的に隠したテキストで「あり」「なし」を併記してある。おすすめ列はctl-badgeの「おすすめ」という文言がテキストとして存在するため、色によるハイライト(ctl-reco)が読み上げに反映されなくても意味そのものは伝わる設計になっている。複製して列を増やすときも、caption・scope・隠しテキストの3点を落とさないこと。
調整して使う
調整しやすいのは3点。おすすめ列のハイライト色（既定#eef2fdの薄藍とバッジの#2b50c7）は、比較対象が偶数個で中央でなく右端を推したい場合など、クラスを付ける列を変えるだけで対応できる。次に○/×の表現を、テキスト文字ではなくチェックマーク・バツのSVGアイコンに差し替えると、フォントによる字形の違い（○の太さが機種でばらつく）を避けられる。最後に固定列の挙動で、現状は仕様名列(1列目)だけをstickyにしているが、価格の高い商品を常に見せたい場合は最終列や特定の商品列もposition: stickyでright側に固定する応用ができる。行数が多い表では、tbody tr:nth-child(even)のようなゼブラストライプを足すと横に長い行でも視線が迷いにくくなる。
コード（コピーして使えます）
<div class="ctl-scroll" tabindex="0" role="region" aria-label="3商品の仕様比較（横にスクロールできます）">
<table class="ctl">
<caption class="ctl-sr">3商品の仕様比較</caption>
<thead>
<tr>
<th class="ctl-rowhead" scope="col"><span class="ctl-sr">仕様</span></th>
<th scope="col">ベーシック</th>
<th class="ctl-reco" scope="col"><span class="ctl-badge">おすすめ</span>プロ</th>
<th scope="col">ライト</th>
</tr>
</thead>
<tbody>
<tr><th class="ctl-rowhead" scope="row">価格</th><td>¥6,980</td><td class="ctl-reco">¥9,980</td><td>¥3,980</td></tr>
<tr><th class="ctl-rowhead" scope="row">重量</th><td>320g</td><td class="ctl-reco">248g</td><td>410g</td></tr>
<tr><th class="ctl-rowhead" scope="row">防水</th><td class="ctl-yes"><span aria-hidden="true">○</span><span class="ctl-sr">あり</span></td><td class="ctl-reco ctl-yes"><span aria-hidden="true">○</span><span class="ctl-sr">あり</span></td><td class="ctl-no"><span aria-hidden="true">×</span><span class="ctl-sr">なし</span></td></tr>
<tr><th class="ctl-rowhead" scope="row">急速充電</th><td class="ctl-no"><span aria-hidden="true">×</span><span class="ctl-sr">なし</span></td><td class="ctl-reco ctl-yes"><span aria-hidden="true">○</span><span class="ctl-sr">あり</span></td><td class="ctl-no"><span aria-hidden="true">×</span><span class="ctl-sr">なし</span></td></tr>
<tr><th class="ctl-rowhead" scope="row">保証</th><td>1年</td><td class="ctl-reco">2年</td><td>1年</td></tr>
</tbody>
</table>
</div>