モダン 3 プラン料金カード

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

このパーツは、中央のプランを強調した SaaS 定番の3プラン料金カードです。display:grid の3列で Starter・Pro・Enterprise を並べ、中央の Pro には --high で枠線を金色に変え、人気 バッジを重ねて視線を誘導します。各カードはプラン名・価格（/月 の単位付き）・機能リスト ul・申込ボタンを縦に積む統一フォーマットで、価格と内容を素早く見比べられる構造になっています。

向いている場面

• 月額制で松竹梅を提示したい SaaS・Web サービス
• 個人・チーム・法人で段階を分けるツールの料金ページ
• 無料トライアルから上位プランへ誘導したいプロダクト

カスタマイズと注意点

差し替えどころは、各プランの価格・機能リスト・ボタン文言、そして「どれを推すか」です。中央を強調する設計なので、最も契約してほしいプランを真ん中に置くのが定石です。機能リストは各プランで行数を揃えると比較しやすく、上位だけにある機能が一目で分かります。実装上の注意は、強調カードを transform で少し持ち上げる場合に隣カードと重ならないよう余白を確保すること。狭い画面では3列を縦1列にし、推しプランを先頭または分かりやすい位置に置きます。要相談 のように価格が数値でないプランも、フォーマットを崩さず同じ枠で見せると整います。