料金プランカード（おすすめバッジ付き）
料金・機能リスト・申込ボタンを縦に積んだ 料金プランカード です。「おすすめ」バッジ付きで中央プランを目立たせる、SaaS やサブスクの価格ページで定番の構成部品です。 装飾は CSS のみ で、JavaScript は使いません。
解説
料金・機能リスト・申込ボタンを縦に積んだ料金プランカードです。「おすすめ」バッジ付きで中央プランを目立たせる、SaaS やサブスクの価格ページで定番の構成部品です。
装飾は CSS のみで、JavaScript は使いません。おすすめプランには pc-card--recommended という修飾クラスを足し、アクセントカラーの枠線と強めの色付き影で、他より一段浮き上がって見えるようにしています。上端中央の「おすすめ」バッジは position:absolute で top:-12px; left:50% に置き、translateX(-50%) でぴったり中央に合わせています。機能リストのチェックマークはインライン SVG なので、外部アイコンに依存せず確実に表示されます。
使う場面とカスタマイズ
- 3プラン横並びの価格表（無料・スタンダード・プロ等）
- サブスクの月額・年額切り替えや、コース別の料金提示
- 強調色
#f5576c、価格の文字サイズ、CTAボタンの文言を調整
複数プランを並べるときは grid でカードの高さと底辺をそろえると整います。価格は span で金額と単位を分けているので、文字サイズに差をつけて読みやすくできます。バッジは色だけでなく必ずテキストで「おすすめ」と明示し、CTA ボタンは button か a で押せる要素として実装してください。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
どのプランを目立たせるか変えられますか
強調したいカードにpc-card--recommendedクラスを付け替えるだけです。このクラスがアクセント枠線と色付きの影、上部のおすすめバッジを担っています。複数に付けると比較効果が薄れるので、目立たせるのは1枚に絞るのが効果的です。
3プランを高さそろえて並べるには
カードを囲む親要素にgridまたはflexを指定し、align-items:stretchで高さをそろえます。機能リストの行数が違っても底辺のCTAボタンが揃うよう、ボタンをmargin-top:autoで下に押し下げると見栄えが整います。