月額/年額トグル付き料金プラン
月払いと年払いをトグルで切り替えられる3カラムの料金表です。切り替えボタンには data-cycle 属性、各金額には data-mo （月額）と data-yr （年額）のデータ属性が仕込まれており、トグル操作で表示金額を差し替えます。年払いを選ぶと割引バッジが効くため、長期契約への誘導に向きます。
このパーツの使いどころと実装ポイント
月払いと年払いをトグルで切り替えられる3カラムの料金表です。切り替えボタンにはdata-cycle属性、各金額にはdata-mo（月額）とdata-yr（年額）のデータ属性が仕込まれており、トグル操作で表示金額を差し替えます。年払いを選ぶと割引バッジが効くため、長期契約への誘導に向きます。真ん中のカードはpma__card--featuredで枠色と影を強め、おすすめプランを視線の中心に置きます。
向いている場面
- 月額・年額の両方を提示したいSaaSやサブスクリプション
- 年契約の割引でLTVを伸ばしたいサービスの料金ページ
- 3段階の価格帯で松竹梅を見せたい受託・ツール系
カスタマイズと注意
金額を変えるときは表示テキストではなくdata-moとdata-yrの両方を更新します。初期表示と切り替え後で数字の桁がずれて見えないかを確認し、割引率はバッジの文言と実際の年額が一致するようにします。トグルはrole="group"でまとめられているので、ボタンには現在の選択状態が分かる表現を残します。モバイルでは1カラムに積み上がるため、おすすめプランを上に置くと比較しやすくなります。金額は実数を確約せず、要相談プランは無理に数字を入れず「要相談」のままにしておきます。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
金額を変更したいのですが、どこを直せばいいですか？
各プランの数値は表示テキストだけでなく、data-mo（月額）とdata-yr（年額）のデータ属性に持たせています。両方を書き換えないと、トグル切り替え時に古い金額が出てしまいます。割引バッジの率も実際の年額と合っているか確認してください。
トグルで切り替えても金額が変わりません。
切り替えはJavaScriptがdata属性を読んで金額を差し替える仕組みです。ボタンのdata-cycleと金額側のdata-mo・data-yrの対応が取れているか、スクリプトが正しく読み込まれているかを確認してください。スクリプトがない環境では月額固定表示にフォールバックさせると安全です。