料金テーブル Pricing Table
サービスの料金プランを比較表示するレイアウト。SaaSサイトで定番。
ライブデモ
Free
¥0/月
個人利用に最適
- プロジェクト3件
- 1GBストレージ
- メールサポート
- カスタムドメイン
- API利用
人気
Pro
¥1,980/月
チームでの利用に
- プロジェクト無制限
- 50GBストレージ
- 優先サポート
- カスタムドメイン
- API利用
Enterprise
¥4,980/月
大規模組織向け
- プロジェクト無制限
- 無制限ストレージ
- 24/7サポート
- カスタムドメイン
- API利用
ソースコード
<div class="demo-pricing">
<div class="demo-pricing-card">
<div class="demo-pricing-header">
<h4 class="demo-pricing-name">Free</h4>
<div class="demo-pricing-price"><span class="demo-pricing-amount">¥0</span><span class="demo-pricing-period">/月</span></div>
<p class="demo-pricing-desc">個人利用に最適</p>
</div>
<ul class="demo-pricing-features">
<li class="demo-pricing-feature included">プロジェクト3件</li>
<li class="demo-pricing-feature included">1GBストレージ</li>
<li class="demo-pricing-feature included">メールサポート</li>
<li class="demo-pricing-feature excluded">カスタムドメイン</li>
<li class="demo-pricing-feature excluded">API利用</li>
</ul>
<button class="demo-pricing-btn outline">始める</button>
</div>
<div class="demo-pricing-card featured">
<div class="demo-pricing-badge">人気</div>
<div class="demo-pricing-header">
<h4 class="demo-pricing-name">Pro</h4>
<div class="demo-pricing-price"><span class="demo-pricing-amount">¥1,980</span><span class="demo-pricing-period">/月</span></div>
<p class="demo-pricing-desc">チームでの利用に</p>
</div>
<ul class="demo-pricing-features">
<li class="demo-pricing-feature included">プロジェクト無制限</li>
<li class="demo-pricing-feature included">50GBストレージ</li>
<li class="demo-pricing-feature included">優先サポート</li>
<li class="demo-pricing-feature included">カスタムドメイン</li>
<li class="demo-pricing-feature excluded">API利用</li>
</ul>
<button class="demo-pricing-btn primary">始める</button>
</div>
<div class="demo-pricing-card">
<div class="demo-pricing-header">
<h4 class="demo-pricing-name">Enterprise</h4>
<div class="demo-pricing-price"><span class="demo-pricing-amount">¥4,980</span><span class="demo-pricing-period">/月</span></div>
<p class="demo-pricing-desc">大規模組織向け</p>
</div>
<ul class="demo-pricing-features">
<li class="demo-pricing-feature included">プロジェクト無制限</li>
<li class="demo-pricing-feature included">無制限ストレージ</li>
<li class="demo-pricing-feature included">24/7サポート</li>
<li class="demo-pricing-feature included">カスタムドメイン</li>
<li class="demo-pricing-feature included">API利用</li>
</ul>
<button class="demo-pricing-btn outline">お問い合わせ</button>
</div>
</div>.demo-pricing { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.demo-pricing-card {
width: 220px; border: 1px solid #e5e7eb; border-radius: 14px;
padding: 24px 20px; text-align: center; position: relative;
background: #fff; transition: box-shadow 0.2s;
}
.demo-pricing-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.demo-pricing-card.featured {
border: 2px solid var(--ui-primary);
background: color-mix(in srgb, var(--ui-primary) 3%, #fff);
transform: scale(1.03);
}
.demo-pricing-badge {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: var(--ui-primary); color: #fff; padding: 2px 14px;
border-radius: 20px; font-size: 11px; font-weight: 700;
}
.demo-pricing-name { margin: 0 0 8px; font-size: 16px; color: #333; }
.demo-pricing-amount { font-size: 28px; font-weight: 800; color: var(--ui-primary); }
.demo-pricing-period { font-size: 13px; color: #999; }
.demo-pricing-desc { font-size: 12px; color: #999; margin: 6px 0 0; }
.demo-pricing-features { list-style: none; padding: 0; margin: 20px 0; text-align: left; }
.demo-pricing-feature {
padding: 6px 0; font-size: 13px; color: #555;
display: flex; align-items: center; gap: 8px;
}
.demo-pricing-feature.included::before {
content: "✓"; color: var(--ui-primary); font-weight: 700; font-size: 14px;
}
.demo-pricing-feature.excluded::before {
content: "—"; color: #ccc; font-weight: 700; font-size: 14px;
}
.demo-pricing-feature.excluded { color: #bbb; }
.demo-pricing-btn {
width: 100%; padding: 10px; border-radius: 8px; font-size: 14px;
font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.demo-pricing-btn.primary {
background: var(--ui-primary); color: #fff; border: none;
}
.demo-pricing-btn.outline {
background: transparent; color: var(--ui-primary); border: 2px solid var(--ui-primary);
}
.demo-pricing-btn:hover { opacity: 0.85; }AIプロンプト
Basic
料金テーブルをHTML/CSSで作ってください。3つのプラン（Free, Pro, Enterprise）を横並びで比較表示します。
Custom
以下の仕様で料金テーブルを実装してください。 - 3プラン横並び - プライマリカラー: #2563eb - おすすめプランを強調（ボーダー + バッジ + スケールアップ） - 機能リストにチェック/ダッシュアイコン - CTAボタン（Primary/Outline） - 月額/年額の切り替えスイッチ - ホバー時のシャドウ効果
Advanced
高機能料金テーブルを実装してください。 - 月額/年額のトグル切り替え（年額は割引表示） - アニメーション付きの価格変更 - レスポンシブ（モバイルではタブ切替またはカード縦並び） - 機能比較の折りたたみ詳細セクション - aria-label で料金とプランをスクリーンリーダーに通知 - 通貨切り替え（JPY/USD） - 人数による動的料金計算 - スクロール時に固定ヘッダー（大量の機能比較時） - ABテスト対応（異なるプラン表示をランダム化）