月額／年額 切り替え料金表
月額／年額 切り替え料金表は、 トグルスイッチで月払いと年払いの金額を切り替える 料金カードです。このサンプルでは金額を data-monthly と data-annual の二つのデータ属性に持たせ、JavaScriptが切り替え時に表示を書き換えます。
このパーツの使いどころと実装ポイント
月額／年額 切り替え料金表は、トグルスイッチで月払いと年払いの金額を切り替える料金カードです。このサンプルでは金額をdata-monthlyとdata-annualの二つのデータ属性に持たせ、JavaScriptが切り替え時に表示を書き換えます。年払いには「20% OFF」バッジを添え、割安感を可視化しています。中央のプランには「人気No.1」を付けて選択を後押ししています。
向いている場面
SaaSやサブスク、月額制の制作・保守プランなど、課金サイクルが二種類あるサービスに向きます。年契約の割引メリットを見せて、長期契約へ誘導したい場面に効果的です。
カスタマイズと注意点
金額はHTMLのデータ属性を直すだけで変更でき、JS側のロジックはそのまま使えます。トグルはrole="switch"とaria-checkedを持つため、状態が支援技術にも伝わります。プラン数を増やす場合はカードのarticleを追加します。実装上は、JS無効時にどちらかの金額が必ず表示されるよう初期値を入れておくと安全です。割引率の表示は実際のプランと矛盾しないよう必ず合わせてください。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
月額と年額の金額はどこで管理していますか
各金額カードのamount要素に付いたdata-monthlyとdata-annualという属性で持っています。表示の切り替えはJavaScriptが担うため、金額を変えたいときはこの属性の値だけ書き換えれば済みます。
トグルはアクセシビリティに対応していますか
対応しています。トグルボタンにrole=switchとaria-checkedを付け、現在が月払いか年払いかを支援技術へ伝えています。状態が切り替わるとaria-checkedも更新されます。