機能比較マトリックス表
このパーツは、複数の料金プランを横の列に、機能名を縦の行に並べた比較表です。 table 要素を border-collapse:collapse で組み、対応の有無は丸印やダッシュ（—）で示します。
このパーツの使いどころと実装ポイント
このパーツは、複数の料金プランを横の列に、機能名を縦の行に並べた比較表です。table 要素を border-collapse:collapse で組み、対応の有無は丸印やダッシュ（—）で示します。Pro 列だけ pm-fm--high クラスで薄い黄色の背景を敷き、おすすめプランへ視線を誘導しているのが構造上のポイントです。表組みなので、行と列がそのまま「機能 × プラン」の関係になり、読み手が直感的に違いを追えます。
向いている場面
- SaaS や Web サービスの料金ページで、Free / Pro / Enterprise の差を見せたいとき
- 会員プランやサブスク型の店舗・ジムで等級ごとの特典を整理したいとき
- BtoB ツールの提案資料で導入後にできることを一覧化したいとき
カスタマイズと注意点
列数はプラン数に合わせて th と各行の td を増減させます。強調列を変えるときは pm-fm--high を別の列へ付け替えるだけで済みます。機能数が多い場合は横スクロールになるので、表全体を overflow-x:auto の親要素で包むと狭い画面でも崩れません。丸印だけだと音声読み上げで意味が伝わらないため、画像アイコンには alt="対応" を、または「対応」「非対応」のテキストを併記するとアクセシビリティが上がります。
よくある質問
プランの数や機能の数が変わったらどう直せばいいですか
プラン数は thead の th と、各行の td を同じ数だけ増減させます。機能数は tbody の tr を追加・削除するだけです。1行目が機能名、それ以降の列が各プランの値という対応関係を崩さないように揃えてください。
おすすめプランを強調する色を変えたいです
強調は pm-fm--high というクラスで薄い黄色の背景を付けています。色を変えるなら CSS の background 値を、強調する列を変えるならそのクラスを別の列の th と td へ付け替えてください。