料金プラン比較テーブル

このパーツの使いどころと実装ポイント

このパーツは、ライト・スタンダード・プロの3プランを縦並びのカードで比較する料金セクションです。各カードは article 要素で、プラン名・価格・機能リスト・申し込みボタンで構成されています。おすすめの中央プランには pricing__card--featured が付いており、枠線と影で強調し、上部に「人気」バッジを position:absolute で重ねています。利用できない機能は取り消し表現のクラスで薄く見せ、プラン間の差が一目で分かります。

向いている場面

サブスク型サービスの料金ページ、Web制作やコンサルのプラン提示、SaaSの価格表などに向きます。3段階で選択肢を見せると、訪問者は真ん中のプランを基準に検討しやすくなります。中央を「おすすめ」として強調する構成は、迷ったときの後押しになります。

カスタマイズと注意点

• プラン数は article の増減で変えられます。グリッドは auto-fit なので2プランでも4プランでも自動で整います。
• 強調するプランを変えるときは --featured とバッジの位置を移すだけで切り替えられます。
• 含まれない機能を消すのではなく薄く残すと、上位プランとの差が伝わりやすくなります。価格は税込・税抜を明記すると誤解を防げます。