月額 / 年額 切替トグル付き料金プラン
月額と年額をボタンで切り替え、表示価格をその場で書き換える料金表です。各プランの価格に data-m （月額）と data-y （年額）の両方を持たせ、トグルを押すとJavaScriptが対応する数値へ差し替えます。中央のプランには「人気」ラベルを付けて視線を誘導する、SaaSでおなじみの構成です。
このパーツの使いどころと実装ポイント
月額と年額をボタンで切り替え、表示価格をその場で書き換える料金表です。各プランの価格にdata-m（月額）とdata-y（年額）の両方を持たせ、トグルを押すとJavaScriptが対応する数値へ差し替えます。中央のプランには「人気」ラベルを付けて視線を誘導する、SaaSでおなじみの構成です。
向いている場面
- サブスクリプション型のWebサービスやアプリの料金ページ
- 年契約での割引を訴求したいツールやメンバーシップ
- 3プラン前後を横並びで比較させたい商品紹介
カスタマイズと注意点
プランを増減するときはカードを足し引きし、価格はdata-mとdata-yの両方を必ず更新します。片方だけだと切り替え時に表示がずれます。年額は「実質ひと月あたり」か「年間総額」のどちらを見せるかを決め、表記を統一すると誤解を防げます。トグルボタンには現在どちらが選ばれているかが一目で分かる状態色を付け、画面が狭いスマートフォンではカードを縦積みにして横スクロールを避けます。「17% OFF」などの割引率は実際の価格と一致しているか必ず確認してください。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
切り替えても価格が変わりません
各価格のbタグにdata-mとdata-yの両方が設定されているか、トグルのクリックでそれを読み替えるJavaScriptが動いているかを確認してください。属性名のタイプミスがあると差し替えが止まります。
年額は総額と月割りのどちらで見せるべきですか
どちらでも構いませんが、表記をプラン全体で統一することが重要です。月割りで見せるなら小さく年間総額も添えると、利用者が支払額を誤解しません。