3カラム料金プランセクション

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

このパーツは、ライト・スタンダード・プロの3プランを横並びで比べられる3カラムの料金表です。display:flex でカードを等間隔に並べ、中央の「人気」プランだけ transform:scale で少し大きくし、グラデーション背景の --feat 修飾で目立たせています。各カードはプラン名・金額・含まれる項目のリスト・申込みボタンで構成され、利用者が違いを一目で把握できます。

向いている場面

月額プランを提示するSaaS・サブスク・制作会社、コースを比較させたいスクール・ジム・サロン、見積りの目安を見せたいサービス業に向きます。3段階に絞ることで、利用者が中央の標準プランを選びやすくなります。

カスタマイズと注意点

• おすすめさせたいプランに --feat を付け替えるだけで強調先を変えられます
• 含まれる項目はリストの増減で調整でき、プランごとの差を明確にします

金額は税込み・税抜きや「/月」の単位を明記し、誤解を招かないようにしてください。3枚が横に収まらないスマホではカードが縦に折り返すため、各カードの高さが揃うよう項目数の差を意識すると見栄えが整います。