料金表初級

3プラン料金表（おすすめ強調）

Free・Pro・Team の3枚を横並びにし、中央のおすすめプランを一段持ち上げて強調する定番の料金表。各プランの価格・機能・CTAを揃え、比較しやすく見せます。SaaSやサービスサイトの王道です。

#pricing#plans#cards#saas

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：ファンクラブ3プラン料金表 -->
<section class="p3">
  <div class="p3-grid">
    <article class="p3-card">
      <p class="p3-name">Free</p>
      <p class="p3-price"><b>¥0</b><span>/月</span></p>
      <ul class="p3-feat">
        <li>最新ニュース</li>
        <li>無料動画</li>
        <li>メルマガ</li>
      </ul>
      <button class="p3-btn p3-btn--ghost" type="button">登録する</button>
    </article>

    <article class="p3-card p3-card--pop">
      <span class="p3-badge">おすすめ</span>
      <p class="p3-name">Standard</p>
      <p class="p3-price"><b>¥550</b><span>/月</span></p>
      <ul class="p3-feat">
        <li>チケット先行抽選</li>
        <li>限定コンテンツ</li>
        <li>会員証アプリ</li>
        <li>バースデーメール</li>
      </ul>
      <button class="p3-btn p3-btn--solid" type="button">入会する</button>
    </article>

    <article class="p3-card">
      <p class="p3-name">Premium</p>
      <p class="p3-price"><b>¥1,650</b><span>/月</span></p>
      <ul class="p3-feat">
        <li>Standardの全特典</li>
        <li>最速先行・最前列枠</li>
        <li>限定グッズ優先</li>
      </ul>
      <button class="p3-btn p3-btn--ghost" type="button">入会する</button>
    </article>
  </div>
</section>

CSS

/* Sakura（アイドル）：3プラン料金表の再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.p3 { width: 100%; min-height: 380px; display: grid; place-content: center; padding: 26px; background: #fff0f6; }
.p3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; width: min(820px, 94vw); }
.p3-card { position: relative; background: #fff; border: 1px solid #ffd9e8; border-radius: 16px; padding: 24px 20px; text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.p3-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(214,51,108,.12); }
.p3-card--pop { border: 1.5px solid #f06595; box-shadow: 0 22px 50px rgba(214,51,108,.22); transform: scale(1.06); z-index: 2; }
.p3-card--pop:hover { transform: scale(1.06) translateY(-4px); }
.p3-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f06595, #d6336c); padding: 5px 14px; border-radius: 999px; }
.p3-name { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b06b86; }
.p3-price { margin: 0 0 16px; color: #5a2440; }
.p3-price b { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.p3-price span { font-size: 13px; color: #c08aa0; margin-left: 2px; }
.p3-feat { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
.p3-feat li { font-size: 13px; color: #6a3e54; padding: 7px 0 7px 24px; position: relative; }
.p3-feat li::before { content: "✓"; position: absolute; left: 0; color: #f06595; font-weight: 800; }
.p3-btn { width: 100%; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 11px 0; border-radius: 10px; transition: filter .15s ease, transform .15s ease, background .2s ease; }
.p3-btn--solid { border: none; color: #fff; background: linear-gradient(135deg, #f06595, #d6336c); }
.p3-btn--solid:hover { filter: brightness(1.08); transform: translateY(-1px); }
.p3-btn--ghost { background: #ffe3ee; border: 1px solid #ffd0e2; color: #d6336c; }
.p3-btn--ghost:hover { background: #ffd6e6; }

@media (max-width: 620px) { .p3-grid { grid-template-columns: 1fr; } .p3-card--pop { transform: none; } .p3-card--pop:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .p3-card, .p3-btn { transition: none; } }

実装ガイド

使いどころ

SaaS・サービス・会員制サイトなど、複数プランを比較させたい料金セクションに。Free・Pro・Team の3枚を横並びにし、中央のおすすめを一段持ち上げて選択を誘導します。

実装時の注意点

中央カードを transform:scale で持ち上げ＋アクセント枠＋「おすすめ」バッジで視線を集めます。各カードは価格・機能チェックリスト・CTAの構成を揃え、比較しやすく。狭幅では1カラムに畳みます。

対応ブラウザ

CSS grid・transform は全モダンブラウザ対応。JS 不要です。

よくある失敗

プランは3つ前後が選びやすさの上限。中央を持ち上げる分、上に余白を確保しないとバッジが切れます。機能リストの行数をプラン間で揃えると比較しやすく、CTAの文言はプランごとに最適化します。

応用例

月額/年額トグルの追加、為替・税の切替、エンタープライズの『お問い合わせ』化、人気プランのリボン装飾などに展開できます。

コード