コンテンツ・LP部品
料金テーブル
3つのプランを横並びで比較する料金表。中央の「おすすめ」プランを藍のふちとバッジで強調し、各プランに機能リストとCTAを添えます。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<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>