月額/年額切替プライシング
「月額/年額切替プライシング」は、トグルスイッチで 月払いと年払いの金額を切り替えられる料金表 です。各金額には月額用と年額用の2つの値が data-m data-y として持たされており、チェックボックスの状態に応じて JavaScript が表示金額を差し替えます。
このパーツの使いどころと実装ポイント
「月額/年額切替プライシング」は、トグルスイッチで月払いと年払いの金額を切り替えられる料金表です。各金額には月額用と年額用の2つの値が data-mdata-y として持たされており、チェックボックスの状態に応じて JavaScript が表示金額を差し替えます。年払い側には割引のバッジを付けて、お得感を示せる作りです。
向いている場面
- SaaSやサブスクサービスの料金ページ
- 制作・保守プランなど月額・年額がある事業
- 会員制サービスやオンラインスクールの料金案内
金額を変えるときはHTMLの data-m と data-y の数値を書き換えるだけで、表示も切替も連動します。プラン数を増やす場合はカードを複製し、おすすめプランには強調用のクラスを付けて目立たせると選びやすくなります。
実装上の注意
切り替えはチェックボックスで行うため、キーボードやスクリーンリーダーでも操作できるのが利点です。スイッチには何を切り替えるかが伝わるラベルを添えると親切です。金額は toLocaleString() で3桁区切りに整形されるので、桁数が多い金額でも読みやすく表示されます。年払い表記が「月あたり」か「年総額」かは誤解を招きやすいので、単位を明記しましょう。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
金額や割引率を変更するには
各プランの金額に持たせている data-m（月払い）と data-y（年払い）の数値を書き換えてください。トグルを切り替えるとこの値が表示に反映されます。割引率はバッジの文言を、実際の年払い金額に合った内容へ直してください。
プランは3つ以外にもできますか
できます。プランのカードを複製または削除して数を調整してください。グリッドの列数も合わせて見直すと整います。一番おすすめのプランには強調用のクラスを付けると、人気プランとして目立たせられます。