料金表初級

機能比較テーブル

プランごとの機能対応を ✓／− で一覧する比較テーブル。項目数が多いサービスで、どのプランに何が含まれるかを明確に示せます。行ホバーで視線を案内し、上部にプラン名を固定して見やすく。

#pricing#comparison#table#features

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：機能比較テーブル -->
<section class="pcm">
  <table class="pcm-table">
    <thead>
      <tr>
        <th class="pcm-corner">機能</th>
        <th>Starter</th>
        <th class="pcm-pop">Pro <span class="pcm-pop__tag">人気</span></th>
        <th>Business</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>プロジェクト</td><td>5</td><td class="pcm-pop">無制限</td><td>無制限</td></tr>
      <tr><td>メンバー</td><td>3</td><td class="pcm-pop">15</td><td>無制限</td></tr>
      <tr><td>自動レポート</td><td class="pcm-no">−</td><td class="pcm-pop pcm-yes">✓</td><td class="pcm-yes">✓</td></tr>
      <tr><td>外部連携 100種</td><td class="pcm-no">−</td><td class="pcm-pop pcm-yes">✓</td><td class="pcm-yes">✓</td></tr>
      <tr><td>SSO・監査ログ</td><td class="pcm-no">−</td><td class="pcm-pop pcm-no">−</td><td class="pcm-yes">✓</td></tr>
      <tr class="pcm-cta-row">
        <td></td>
        <td><button class="pcm-btn pcm-btn--ghost" type="button">選ぶ</button></td>
        <td class="pcm-pop"><button class="pcm-btn pcm-btn--solid" type="button">選ぶ</button></td>
        <td><button class="pcm-btn pcm-btn--ghost" type="button">選ぶ</button></td>
      </tr>
    </tbody>
  </table>
</section>

CSS

/* FlowDesk（SaaS）：機能比較テーブルの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.pcm { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 26px; background: #eef1fa; }
.pcm-table { width: min(760px, 94vw); border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(20,30,80,.08); font-size: 13.5px; }
.pcm-table th, .pcm-table td { padding: 13px 16px; text-align: center; border-bottom: 1px solid #eef0f7; }
.pcm-table thead th { background: #0b1020; color: #fff; font-weight: 700; font-size: 13px; }
.pcm-corner { text-align: left !important; color: #aeb4cc !important; font-weight: 600 !important; }
.pcm-table tbody td:first-child { text-align: left; font-weight: 600; color: #3a4060; background: #fafbfe; }
.pcm-table tbody tr:hover td { background: #f2f4fc; }
.pcm-table tbody tr:hover td:first-child { background: #eef1fc; }
.pcm-pop { background: rgba(79,107,255,.06); }
thead .pcm-pop { background: linear-gradient(135deg, #4f6bff, #6d28d9); position: relative; }
.pcm-pop__tag { display: inline-block; font-size: 9.5px; font-weight: 800; background: rgba(255,255,255,.25); padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.pcm-yes { color: #10b981; font-weight: 800; }
.pcm-no { color: #c8ccda; }
.pcm-cta-row td { border-bottom: none; padding-top: 16px; padding-bottom: 18px; }
.pcm-btn { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 9px 18px; border-radius: 9px; transition: filter .15s ease, background .2s ease; }
.pcm-btn--solid { border: none; color: #fff; background: linear-gradient(135deg, #4f6bff, #6d28d9); }
.pcm-btn--solid:hover { filter: brightness(1.08); }
.pcm-btn--ghost { background: #eef1fc; border: 1px solid #dfe4f6; color: #4f46e5; }
.pcm-btn--ghost:hover { background: #e6ebfa; }

@media (prefers-reduced-motion: reduce) { .pcm-btn { transition: none; } }

実装ガイド

使いどころ

機能数が多いサービスで、どのプランに何が含まれるかを明確に示したいときに。プランごとの対応を ✓／− で一覧する比較テーブルです。

実装時の注意点

ヘッダー行にプラン名、各行に機能を置き、おすすめ列を淡い背景でハイライト。行ホバーで視線を案内します。最下部にCTA行を設けています。

対応ブラウザ

table・擬似クラス hover は全モダンブラウザ対応。

よくある失敗

項目が多い場合はモバイルで横スクロールにするか、プラン列を切替式に。✓/− だけでなく数値や注記も混在させると情報量を保てます。ヘッダーを固定（position:sticky）すると長い表でも見やすくなります。

応用例

プラン列の固定、カテゴリ別の折りたたみ、ツールチップで機能説明、モバイルでのカード化などに展開できます。

コード