料金テーブル
3つのプランを横並びで比較する料金表。中央の「おすすめ」プランを藍のふちとバッジで強調し、各プランに機能リストとCTAを添えます。
プレビュー
操作動きのない質感・レイアウトの見本です。
使いどころ
料金ページやLPの最後で、複数プランを横並びに比較して申し込みへ誘導する場面の定番になる。3プラン程度までなら横並びの比較が有効だが、機能項目が10行を超えるような複雑な比較になると横スクロールする表組みや、機能ごとに絞り込めるトグルUIの方が向く。中央のProプランに「おすすめ」バッジと太い枠を付けて視線を誘導する設計は、選択肢が並列だと人は決められず離脱しやすいという傾向に対応するためのもので、事業側が最も売りたいプラン、または多くのユーザーに適したプランを意図的に強調する。プランが2つしかない場合はこの強調構造自体が不要になるので、単純な2カラム比較に変える。無料トライアルだけの単一プランのサイトにも不向きだ。
仕組み
デスクトップはgrid-template-columns: repeat(3,1fr)の単純な3カラムグリッドだが、幅359px以下のスマホでは@media (max-width: 359px)でdisplayをflexに切り替え、overflow-x: autoとscroll-snap-type: x mandatoryで横スワイプに変える。各カードはflex: 0 0 74%で画面幅の74%を占めるようにし、隣のカードの端が少し見える状態にすることで「まだ右にプランがある」ことを示唆している。中央プランのバッジ(plan-badge)はposition: absoluteでカードの上端からはみ出す配置になっており、スマホ表示ではこのはみ出し分をpadding-top: 14pxで確保している。価格表示は通貨記号(price-cur)と数字(price-num)を別spanに分けてfont-sizeを変え、font-variant-numeric: tabular-numsで桁の揃った等幅数字にしている。
実装の注意
このデモの3つのCTA(「はじめる」「Proにする」「問い合わせ」)はすべてhref="#"のダミーリンクで、実装時は決済フローや問い合わせフォームへの実リンクに差し替える必要がある。また月額/年額の切り替えトグルは実装されておらず、price-num部分をJSで書き換えるような機能を追加する場合は、価格変更時にaria-live等で変化を伝える配慮が別途必要になる。横スクロールに切り替わる359px以下という閾値は決め打ちの値なので、実際のカードの内容量(機能リストの行数など)によっては数値の見直しが必要になる場合がある。scroll-snap-type: mandatoryは指を離した位置によってはスナップ先が意図と異なる挙動になる端末があるため、実機での動作確認は必須だ。
アクセシビリティ
チェックマークのSVGアイコンはcurrentColorを継承する装飾要素として実装されているが、aria-hidden属性が付いていないため、実装時にはaria-hidden="true"を明示して支援技術の読み上げから除外した方がよい(現状のままだとスクリーンリーダーがSVGの中身を読もうとして冗長になる可能性がある)。「おすすめ」バッジはテキストとして視覚的に見えているだけで、Proプランがどのプランよりおすすめなのかを伝える構造的な関連付け(例えばプラン名の前に視覚的に隠したテキストで「おすすめ:」と補うなど)は無い。横スクロールへ切り替わるスマホ幅では、スクロール可能であることが視覚的なヒント(隣のカードが少し見える)だけで示されており、スクリーンリーダーやキーボード操作のユーザーにも伝わるよう、スクロールコンテナにtabindex="0"とaria-label(例:「プラン一覧、横にスクロールできます」)を付けておくと親切になる。
調整して使う
調整しやすいのは3点。まずプラン数で、2プランならシンプルな2カラム、4プラン以上なら横スクロールを前提にした設計に変える必要がある。次に強調の仕方で、既定は枠線とバッジだが、カード自体を少し拡大する(transform: scale)、背景色を変える、影を強くするなど強調の強度を選べる。最後に価格の見せ方で、月額/年額の切り替えトグルを追加する、割引時に旧価格に取り消し線を引く、無料トライアル日数をバッジで添えるなど、訴求したい条件に応じて価格表示の周辺情報を足せる。機能リストの項目数がプランごとに大きく異なる場合は、カードの高さがガタつくので行数を意図的に揃えるか、区切り線を活かして視線誘導を補うとよい。
コード（コピーして使えます）
<div class="stage">
<div class="plans">
<div class="plan">
<p class="plan-name">Free</p>
<p class="plan-price"><span class="price-cur">¥</span><span class="price-num">0</span></p>
<p class="plan-cycle">/ 月</p>
<ul class="plan-feats">
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>3プロジェクト</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>1GB 保存</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>コミュニティ</li>
</ul>
<a href="#" class="plan-cta">はじめる</a>
</div>
<div class="plan plan--featured">
<span class="plan-badge">おすすめ</span>
<p class="plan-name">Pro</p>
<p class="plan-price"><span class="price-cur">¥</span><span class="price-num">1,280</span></p>
<p class="plan-cycle">/ 月</p>
<ul class="plan-feats">
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>無制限プロジェクト</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>100GB 保存</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>優先サポート</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>分析ダッシュボード</li>
</ul>
<a href="#" class="plan-cta plan-cta--primary">Proにする</a>
</div>
<div class="plan">
<p class="plan-name">Team</p>
<p class="plan-price"><span class="price-cur">¥</span><span class="price-num">3,800</span></p>
<p class="plan-cycle">/ 月</p>
<ul class="plan-feats">
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Proの全機能</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>権限管理</li>
<li><svg class="chk" width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2l2.2 2.3 4.8-5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>SSO / 監査ログ</li>
</ul>
<a href="#" class="plan-cta">問い合わせ</a>
</div>
</div>
</div>