料金比較テーブル
3つのプラン（スタンダード・プロ・エンタープライズ）を縦の列、機能項目を横の行に並べた料金比較テーブルです。中央の「プロ」列を --highlight 修飾で強調し、見出しには「人気」バッジを付けて視線を誘導します。
このパーツの使いどころと実装ポイント
3つのプラン（スタンダード・プロ・エンタープライズ）を縦の列、機能項目を横の行に並べた料金比較テーブルです。中央の「プロ」列を --highlight 修飾で強調し、見出しには「人気」バッジを付けて視線を誘導します。対応・非対応は文字でなくインライン svg のチェック／×アイコンで表現しているため、ひと目で差分が伝わります。
向いている場面
SaaSの料金ページ、制作会社やコンサルのプラン提示、サブスク型サービスの比較など、複数プランの違いを並べて検討してもらいたい場面に適します。「どれが一番人気か」を視覚的に示せるので、意思決定を後押ししたいときに効果的です。
カスタマイズと実装の注意
- 価格や機能行は
tr単位で増減でき、推したいプランの列に--highlightクラスを付け替えるだけで強調対象を変えられます。 - テーブルは
overflow-x:autoのラッパーで囲まれており、列が多くて画面に収まらない場合は横スクロールで閲覧できます。 - チェックや×は装飾目的のため
aria-hiddenを付けています。意味が必要な場合は「対応」「非対応」のテキストを併記すると、読み上げ環境でも誤解がありません。
よくある質問
強調するおすすめプランを変えられますか？
はい。中央列に付いている--highlightクラスを、強調したい別の列のセルに付け替えるだけで、おすすめプランの背景強調と人気バッジの位置を変更できます。
プランを4つ以上に増やしても大丈夫ですか？
増やせます。theadとtbodyの各行に列を追加してください。列が増えて画面に収まらない場合も、ラッパーのoverflow-x:autoによって横スクロールで全プランを確認できます。