3 プラン比較料金表

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

このパーツは、Lite・Standard・Premium の 3 プランを横並びにし、各プランで使える機能をチェックマークで比較する料金表です。3 枚のカードを display:grid の repeat(3,1fr) で等幅に並べ、中央の Standard だけ transform:scale(1.04) でわずかに拡大し、青い枠線と RECOMMEND バッジで「おすすめプラン」を視覚的に強調しています。機能リストは ul で組み、対応機能にはインライン SVG のチェックを、非対応行には is-no クラスで薄いグレーのダッシュを表示する作りです。

向いている場面

月額制のサービスやサブスク、Web 制作プランの料金提示など、3 段階で価格と機能差を見せたい場面に向きます。SaaS のプラン比較、コンサルの松竹梅、ジムやスクールの会員プランなどが典型例です。真ん中を主力に誘導したいビジネスと相性が良いレイアウトです。

カスタマイズの勘所

• 金額やプラン名はテキストを書き換えるだけです。推す位置を変えるなら pfm__c--reco クラスを別のカードに移します。
• 機能の数が多い場合は、各プランの li の順序をそろえ、同じ機能が同じ行に来るように並べると比較しやすくなります。
• スマートフォンでは 760px 以下で 1 列縦積みになり、拡大表示も解除されます。プラン数が増えても縦に並ぶため破綻しにくい設計です。

注意点として、チェックの有無だけでは色覚特性のある利用者に伝わりにくいことがあるため、対応・非対応をテキストでも補うとより親切です。