料金 月/年トグル
月額⇄年額をトグルすると価格が数値カウントアニメで切替わり、「2ヶ月分お得」の割引バッジがふわっと出現するプランカード。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 月額と年額の 2 択がある料金ページ
- 年払いの割引を数字で見せたい場面
- プランが 2〜3 個で並べて比較できる構成
- 避ける場面
- 課金周期が 3 種類以上ある料金体系
- プランごとに周期の選択肢が異なる場合
- 構成要素
- 月払い／年払いラベル
- スイッチ
- 割引バッジ
- プランカード
- 価格
- はじめるボタン
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でスイッチ→各「はじめる」へ。スイッチは Enter／Space で月／年を切替
- 支援技術
スイッチは role=switch＋aria-checked（名前は「年払い」で固定・状態は checked で伝える）。切替後の価格は視覚外の aria-live=polite で読み上げ。割引バッジ・年額はテキスト。reduced-motion でカウント・弾み・ノブの動きを省略
- 動き
ノブ 300ms バウンス、価格は 400ms ease-out のカウント＋1.12 倍の弾み、バッジは 300〜350ms で浮き上がる。切替で何が変わったかを示す
デザインの要点
- 年払いも「/月」換算で並べる。年額をそのまま出すと桁が違って比較できず、割引の実感が消える
- 価格は 400ms のカウントで動かす。差し替えだと変わったことに気づかず、長いと待たされる
- 割引バッジは年払いのときだけ出す。常設すると「今は損をしている」の意味が薄れる
- スイッチの名前は「年払い」で固定し、状態は aria-checked で伝える。ラベルまで変えると読み上げが矛盾する
コード（コピーして使えます）
<div class="pt-wrap">
<span class="pt-sr" id="ptStatus" aria-live="polite"></span>
<div class="pt-switch-row">
<span class="pt-sw-label" id="ptLblMonthly">月払い</span>
<button class="pt-switch" id="ptSwitch" role="switch" aria-checked="false" aria-label="年払い">
<span class="pt-sw-knob"></span>
</button>
<span class="pt-sw-label" id="ptLblYearly">年払い</span>
</div>
<div class="pt-badge-wrap">
<span class="pt-badge" id="ptBadge">2ヶ月分お得</span>
</div>
<div class="pt-cards">
<div class="pt-card">
<p class="pt-plan">スタンダード</p>
<div class="pt-price-row">
<span class="pt-currency">¥</span>
<span class="pt-amount" id="ptAmt1">980</span>
<span class="pt-per" id="ptPer1">/月</span>
</div>
<p class="pt-note" id="ptNote1"> </p>
<ul class="pt-features">
<li>基本機能すべて</li>
<li>5プロジェクトまで</li>
<li>メールサポート</li>
</ul>
<button class="pt-btn">はじめる</button>
</div>
<div class="pt-card pt-card--pro">
<p class="pt-plan">プロ</p>
<div class="pt-price-row">
<span class="pt-currency">¥</span>
<span class="pt-amount" id="ptAmt2">2480</span>
<span class="pt-per" id="ptPer2">/月</span>
</div>
<p class="pt-note" id="ptNote2"> </p>
<ul class="pt-features">
<li>無制限プロジェクト</li>
<li>優先サポート</li>
<li>API アクセス</li>
</ul>
<button class="pt-btn pt-btn--pro">はじめる</button>
</div>
</div>
</div>