CSS料金表ジェネレーター

骨格の構造

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

レスポンシブな3列グリッド

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit＋minmax(240px, 1fr)は、デスクトップで3列のレイアウト、モバイルで1列の積み重ねを、他に何も設定せずに実現します。

強調されたプラン

注目を集める視覚的な手がかり：

• ブランドのアクセントに合わせた色付きのボーダー。
• 負のmargin-topまたはtranslateY(-4px)でわずかに持ち上げる。
• 他のプランがアウトラインなのに対し、しばしばブランドカラーの大きなCTAボタン。
• 上部に絶対配置されたバッジ（「最も人気」「最もお得」）。
• 目を引くためやや背を高くすることもありますが、比較しにくくなる場合があります。

上記すべてを行わないでください。2つか3つを選びます。手がかりが多すぎると階層が平坦になります。

月額／年額の切り替え

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

切り替えは通常、少しのJavaScriptで価格の値を入れ替えるか、ラジオボタンの:checked状態を使います。割引率や年間の節約額（例：「年払いで2か月分お得」）を切り替えのラベルに表示してください。多くの料金表で最も説得力のある要素です。

機能の行のスタイリング

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

「含まれる」にはチェックマークを、「含まれない」には灰色のテキストや薄いバツを使ってください。コントラストを下げずにテキスト自体を打ち消すと、強調として読まれてしまいます。

CTAを目立たせ続ける

プランごとに1つのCTA、プラン全体で視覚的に一貫させます。プランごとに異なる文言（「無料で開始」「Proへ」「営業に相談」）は問題なく、むしろ適切なフローへユーザーを導くのに役立ちます。

ざっと読めるようにする

ユーザーは料金表を左から右へ読むことはまれで、まず価格、次にCTA、それから機能の差をざっと見ます。それに最適化してください。

1. プラン名＋価格を大きく、カードの上部に。
2. カードをスクロールせずに見えるCTA。
3. その下に機能リスト。同一の機能をどこでも繰り返すのではなく、プラン間の違いを強調します。

アクセシビリティのチェックリスト

• 各プランは独自の<h3>を持つ<article>である。
• 「最も人気」のバッジは色だけでなく見えるテキストのバッジである（色覚障害のあるユーザーのため）。
• CTAボタンは「ここをクリック」ではなく説明的なテキスト（「Pro体験を開始」）を持つ。
• 課金の切り替えはaria-pressedまたはラジオのセマンティクスを持つ。
• JavaScriptで実装する場合、切り替え時の価格変更はaria-live="polite"で読み上げる。