機能比較表テーブル
プランごとに含まれる機能を 表形式で並べた比較表 です。 table 要素を使い、機能名を左端の行見出し、Free・Pro・Business を列見出しに置いて、対応する機能はチェックの SVG、非対応はハイフンで表します。中央の Pro 列だけ濃い背景でハイライトし、推したいプランへ視線を誘導しています。
このパーツの使いどころと実装ポイント
プランごとに含まれる機能を表形式で並べた比較表です。table 要素を使い、機能名を左端の行見出し、Free・Pro・Business を列見出しに置いて、対応する機能はチェックの SVG、非対応はハイフンで表します。中央の Pro 列だけ濃い背景でハイライトし、推したいプランへ視線を誘導しています。
向いている場面
機能の数が多く、プラン間の差を一目で見せたい SaaS や会員サービス、有料プラン付きツールに向きます。数値（プロジェクト数・ストレージ容量）と有無（カスタムドメイン・優先サポート）を同じ表で扱えるため、検討中のユーザーが違いを正確に把握できます。
カスタマイズと注意点
- 行（機能）は増やせます。多い場合はカテゴリごとに区切り行を入れると読みやすくなります
- ハイライト列はおすすめプラン1つに絞り、効果を弱めないようにします
- チェックの SVG には意味が伝わる代替テキストや
aria-labelを添えると親切です
列数が多いと横幅が足りなくなるため、スマートフォンでは横スクロールを許可するか、プランごとにカードを縦積みする別レイアウトへ切り替える設計が現実的です。
よくある質問
機能が多くて表が縦に長くなります。読みやすくするには？
関連する機能をグループにまとめ、区切りの見出し行を挿入すると一覧性が上がります。基本機能・サポート・連携といったカテゴリ単位で並べ替えると、ユーザーが目的の項目を探しやすくなります。重要な差が出る行は強調しても良いでしょう。
スマートフォンで横にはみ出すときの対処は？
表を囲む要素に横スクロールを許可するのが手軽な方法です。より丁寧にするなら、各プランを縦積みのカードに組み替え、プランごとに機能の有無を並べるレイアウトへ切り替えます。比較重視ならスクロール、単独閲覧重視ならカードが向きます。