月額/年額トグル付き3カラム料金表
月額と年額を トグルスイッチで切り替えられる3プランの料金表 です。切替ボタンは role="switch" と aria-checked を持ち、各プランの金額は data-mo （月額）と data-yr （年額）の2つの値を要素に保持しておき、JavaScriptで表示を入れ替える仕組みです。
このパーツの使いどころと実装ポイント
月額と年額をトグルスイッチで切り替えられる3プランの料金表です。切替ボタンは role="switch" と aria-checked を持ち、各プランの金額は data-mo（月額）と data-yr（年額）の2つの値を要素に保持しておき、JavaScriptで表示を入れ替える仕組みです。中央のおすすめプランをハイライト表示し、年額側には「2ヶ月分お得」のような割引バッジを添えて選択を後押しします。レイアウトは grid による3カラムです。
向いている場面
- SaaSやサブスク型サービスの料金ページ
- 松竹梅の3プランで比較・誘導したい制作・コンサル業
- 月払い・年払いの両方を提示したいオンラインサービス
カスタマイズの勘所
金額を変えるときは表示文字ではなく data-mo / data-yr の値を書き換えるのが要点で、これを忘れると切替時に古い数字へ戻ってしまいます。機能一覧は ul の li なので、プランごとに項目を増減して差を見せます。おすすめプランの強調は色や枠線で行えます。アクセシビリティ面では、スイッチの状態が aria-checked に正しく反映されること、年額・月額のラベルがスイッチと関連付いていることを確認してください。スマホでは3カラムが縦積みになるよう grid-template-columns を切り替えると見やすくなります。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
料金を変更するときはどこを編集しますか？
表示されている数字だけでなく、その要素のdata-mo（月額）とdata-yr（年額）の値を両方書き換える必要があります。data属性を更新しないと、トグル切替時に元の金額に戻ってしまうため注意してください。
プランを2つや4つに増減できますか？
pricing__card のブロックを増減すれば対応できます。列数はgridの列指定で調整し、4プランにするなら横幅が窮屈になりやすいので、スマホでは縦積みに切り替える指定を併用すると読みやすさを保てます。