比較テーブル Comparison Table

複数の製品やプランの機能を一覧で比較するテーブル。購入判断の支援に最適。

使用場面: プランの機能比較、製品スペック比較、競合との差別化を示す場面 採用例: AWS, Notion

ライブデモ

機能ベーシック
¥0/月
プロ
¥1,980/月
人気		エンタープライズ
お問い合わせ
ストレージ5 GB100 GB無制限
チームメンバー1人10人無制限
API アクセス✕✓✓
カスタムドメイン✕✓✓
優先サポート✕✕✓
SLA保証✕✕✓

ソースコード

<div class="demo-comparison">
  <table class="demo-comparison-table">
    <thead>
      <tr>
        <th class="demo-comparison-feature-header">機能</th>
        <th class="demo-comparison-plan">ベーシック<div class="demo-comparison-price">&#165;0/月</div></th>
        <th class="demo-comparison-plan highlight">プロ<div class="demo-comparison-price">&#165;1,980/月</div><span class="demo-comparison-badge">人気</span></th>
        <th class="demo-comparison-plan">エンタープライズ<div class="demo-comparison-price">お問い合わせ</div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="demo-comparison-feature">ストレージ</td>
        <td>5 GB</td>
        <td class="highlight">100 GB</td>
        <td>無制限</td>
      </tr>
      <tr>
        <td class="demo-comparison-feature">チームメンバー</td>
        <td>1人</td>
        <td class="highlight">10人</td>
        <td>無制限</td>
      </tr>
      <tr>
        <td class="demo-comparison-feature">API アクセス</td>
        <td><span class="demo-comparison-no">&#10005;</span></td>
        <td class="highlight"><span class="demo-comparison-yes">&#10003;</span></td>
        <td><span class="demo-comparison-yes">&#10003;</span></td>
      </tr>
      <tr>
        <td class="demo-comparison-feature">カスタムドメイン</td>
        <td><span class="demo-comparison-no">&#10005;</span></td>
        <td class="highlight"><span class="demo-comparison-yes">&#10003;</span></td>
        <td><span class="demo-comparison-yes">&#10003;</span></td>
      </tr>
      <tr>
        <td class="demo-comparison-feature">優先サポート</td>
        <td><span class="demo-comparison-no">&#10005;</span></td>
        <td class="highlight"><span class="demo-comparison-no">&#10005;</span></td>
        <td><span class="demo-comparison-yes">&#10003;</span></td>
      </tr>
      <tr>
        <td class="demo-comparison-feature">SLA保証</td>
        <td><span class="demo-comparison-no">&#10005;</span></td>
        <td class="highlight"><span class="demo-comparison-no">&#10005;</span></td>
        <td><span class="demo-comparison-yes">&#10003;</span></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td></td>
        <td><button class="demo-comparison-btn outline">選択</button></td>
        <td class="highlight"><button class="demo-comparison-btn primary">選択</button></td>
        <td><button class="demo-comparison-btn outline">お問い合わせ</button></td>
      </tr>
    </tfoot>
  </table>
</div>
.demo-comparison { overflow-x: auto; max-width: 100%; overflow-x: auto; }
.demo-comparison-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.demo-comparison-table th,
.demo-comparison-table td {
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid #f0f0f0;
}
.demo-comparison-feature-header {
  text-align: left !important; font-size: 12px; color: #999;
  font-weight: 500;
}
.demo-comparison-plan {
  font-size: 14px; font-weight: 700; color: #333;
  position: relative;
}
.demo-comparison-plan.highlight {
  background: color-mix(in srgb, var(--ui-primary) 4%, transparent);
  color: var(--ui-primary);
}
td.highlight {
  background: color-mix(in srgb, var(--ui-primary) 4%, transparent);
}
.demo-comparison-price {
  font-size: 12px; font-weight: 500; color: #888;
  margin-top: 2px;
}
.demo-comparison-plan.highlight .demo-comparison-price {
  color: var(--ui-primary); opacity: 0.7;
}
.demo-comparison-badge {
  position: absolute; top: -8px; right: 8px;
  font-size: 10px; font-weight: 600; padding: 2px 10px;
  background: var(--ui-primary); color: #fff;
  border-radius: 10px;
}
.demo-comparison-feature {
  text-align: left !important; font-weight: 500; color: #555;
}
.demo-comparison-yes { color: var(--ui-primary); font-weight: 700; }
.demo-comparison-no { color: #ddd; }
.demo-comparison-btn {
  padding: 8px 20px; border-radius: 6px; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.demo-comparison-btn.primary {
  background: var(--ui-primary); color: #fff; border: none;
}
.demo-comparison-btn.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.demo-comparison-btn.outline {
  background: none; color: #666;
  border: 1px solid #ddd;
}
.demo-comparison-btn.outline:hover {
  border-color: var(--ui-primary); color: var(--ui-primary);
}
.demo-comparison table { min-width: 500px; }

AIプロンプト

Basic 
比較テーブルをHTML/CSSで作ってください。3つのプランの機能をチェックマークで比較表示します。
Custom 
以下の仕様で比較テーブルを実装してください。
- 3カラム（Basic/Pro/Enterprise）
- 各機能に対してチェック・バツ・数値で比較
- おすすめプランをハイライト（背景色＋「人気」バッジ）
- プライマリカラー: #2563eb
- 各カラム下部に選択ボタン
- レスポンシブ対応（横スクロール or カード表示切替）
Advanced 
インタラクティブな比較テーブルを実装してください。
- 機能フィルタリング（カテゴリ別に絞り込み）
- 月額/年額の切替（価格表示の動的変更）
- ツールチップで各機能の詳細説明
- 固定ヘッダー（スクロール時にプラン名が追従）
- 差分ハイライト（プランで異なる部分を強調）
- モバイル時はカード型レイアウトに切替
- 印刷用スタイル最適化
- Schema.org Product マークアップ
← カタログに戻る