おすすめプラン強調カード
おすすめプラン強調カードは、料金プラン比較の中で主役にしたい 1 枚を目立たせる部品です。上部に「人気」バッジを position:absolute で飛び出させ、 --hi 修飾クラスで色付きの枠線と transform:scale(1.04) による拡大を加えて、隣のカードより一段強く見せています。
解説
おすすめプラン強調カードは、料金プラン比較の中で主役にしたい 1 枚を目立たせる部品です。上部に「人気」バッジを position:absolute で飛び出させ、--hi 修飾クラスで色付きの枠線と transform:scale(1.04) による拡大を加えて、隣のカードより一段強く見せています。価格・特典リスト・CTA ボタンという縦の流れで、検討から行動までを一直線に導く構成です。
使う場面
- 料金プランの 3 列比較で「おすすめ」を強調する中央カード
- サブスクの推奨プラン提示
- キャンペーンの目玉プランの訴求
強調の枠線色やバッジ色は --hi と .pp-card__bd の色指定で、拡大率は scale() の値で調整できます。隣のカードと並べる前提なので、強調していない通常版（--hi なし）と組み合わせて使います。scale で拡大したぶん隣と重なりやすいため、親側の gap に余裕を持たせると安全です。特典の li は文章で持たせ、画像化しないことで読み上げ・検索の両面に有利になります。CTA ボタンのラベルは行動が伝わる具体的な言葉にしましょう。
よくある質問
強調していない通常のプランカードも作れますか
作れます。--hi修飾クラスを外せば枠線の色付けと拡大が無効になり、標準のカードになります。中央だけ--hiを付けて両側に通常版を並べる構成が定番です。
拡大したカードが隣と重なります
scaleで拡大しているぶん、隣との間隔が狭いと重なって見えます。カードを並べる親要素のgapを広めにとるか、拡大率を控えめにすると重なりを避けられます。