3プラン（中央強調）
これは、3 つの料金プランを横並びにし、中央の「Standard」だけを目立たせた料金表です。3 列の grid で均等に並べ、強調プランには transform:scale(1.06) でひと回り大きく見せる演出と濃いシャドウを当て、上部に「人気」バッジを position:absolute で浮かせています。
このパーツの使いどころと実装ポイント
これは、3 つの料金プランを横並びにし、中央の「Standard」だけを目立たせた料金表です。3 列の grid で均等に並べ、強調プランには transform:scale(1.06) でひと回り大きく見せる演出と濃いシャドウを当て、上部に「人気」バッジを position:absolute で浮かせています。視線を中央のおすすめプランへ自然に誘導する定番の型です。
向いている場面
月額制の SaaS、サブスク型サービス、制作・コンサルのプラン提示など、3 段階で価格を見せたい場面に向きます。真ん中を選ばせたい「松竹梅」の見せ方を、デザインで後押しできます。
カスタマイズと注意
- 各プランに機能リスト（
ul）を足すと比較しやすくなります。行頭を揃えると視線が流れやすいです - バッジの文言は「人気」「おすすめ」「最安」など目的に応じて変えられます
scale(1.06)で拡大したカードは周囲と重なることがあるため、gapに余裕を持たせます- 3 列固定はスマホで読みづらいので、
@mediaで縦積みに切り替え、強調プランを先頭に並べ替えると効果的です
価格は b ではなく意味のある見出し・段落構造にすると、読み上げや検索エンジンにも伝わりやすくなります。
よくある質問
なぜ中央のプランだけ大きくするのですか
人は選択肢が並ぶと中央や目立つものに視線が向きやすいため、最も選んでほしいプランを拡大やバッジで強調し、自然に誘導する狙いです。いわゆる松竹梅の見せ方で、中位プランの成約を後押しする定番の手法です。
スマートフォンでも 3 列のまま表示すべきですか
おすすめしません。横幅が狭いと文字や価格が小さくなり読みづらくなります。メディアクエリで縦 1 列に切り替え、おすすめプランを先頭に並べ替えると、スマホでも比較しやすくなります。