プラン特徴強調カード（推し型）
これは一つのプランだけを大きく見せる、推し型の料金カードです。濃紺のグラデーション背景に「OFFICIAL」バッジ、プラン名、価格、説明、機能リスト、申込ボタンを縦に積み、単独でバナーのように使えます。
解説
これは一つのプランだけを大きく見せる、推し型の料金カードです。濃紺のグラデーション背景に「OFFICIAL」バッジ、プラン名、価格、説明、機能リスト、申込ボタンを縦に積み、単独でバナーのように使えます。linear-gradient の背景と overflow:hidden で囲まれた、CSS のみで完結する静的なカードです。中央寄せの構成なので、ランディングページの一点突破の訴求に向きます。
こんなときに使えます
- おすすめプランを1つだけ強調したいランディングページ
- キャンペーン中の特別プランの告知
- サイドバーやセクション内に置く単独の料金訴求
価格は .pp-card__price、機能は ul の li を増減して調整します。背景のグラデーション色を変えればブランドの雰囲気に合わせられます。複数プランを横並びで比較させたい場合は、このカードを並べて中央のものだけ強調する作りに発展させられます。リンクのCTAには、クリックで何が起きるかが分かる具体的な文言を入れると、コンバージョンにつながりやすくなります。
よくある質問
価格や機能リストは簡単に変えられますか？
はい。価格は .pp-card__price 内の数字を、機能はリストの li 要素を追加・削除するだけで変更できます。HTML を直接編集するだけで対応できます。
複数プランを並べて比較表示できますか？
このカードは単一プラン推し向けですが、同じカードを横に並べ、中央だけ色を強調すれば3プラン比較のような構成にも応用できます。