L-007 Layout medium

How to create a pricing card grid 料金表グリッドの作り方

Grid of pricing cards for plan comparison, with highlighted recommended plan. プラン比較のための料金カードグリッド。推奨プランの強調表示付き。

pricing card grid comparison

ライブデモ Live Demo

Free
$0 /mo
  • 1 User
  • 5 Projects
  • Community Support
Most Popular
Pro
$29 /mo
  • 5 Users
  • Unlimited Projects
  • Priority Support
  • Analytics
Enterprise
$99 /mo
  • Unlimited Users
  • Unlimited Projects
  • 24/7 Support
  • Custom Domain

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Grid of pricing cards for plan comparison, with highlighted recommended plan.

プラン比較のための料金カードグリッド。推奨プランの強調表示付き。

どこで使うかWhere to use

landing page, marketing site, portfolio, product page

SaaS料金ページ、サブスクリプションサービス、フリーミアムアプリ、会員サービス

特徴Key features

Three-tier pricing card grid with highlighted recommended plan. CSS Grid auto-fit for responsive layout. Feature checklist with ✓/✗ icons. CTA button per plan. Hover elevation effect. Easy to extend with additional plans.

ハイライトされた推奨プランを持つ3段階料金カードグリッド。レスポンシブレイアウトのCSS Grid auto-fit。✓/✗アイコン付き機能チェックリスト。プランごとのCTAボタン。ホバー時の浮き上がりエフェクト。追加プランを簡単に拡張可能。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--primary-color—Primary color (badge, buttons)
--card-gap—Gap between cards

実装コード Implementation Code 

// react/L-007.jsx
import './L-007.css';

export default function PricingGrid() {
  return (
    <div className="pricing-grid">
      <div className="pricing-card">
        <div className="plan-name">Free</div>
        <div className="plan-price">$0 <span>/mo</span></div>
        <ul className="plan-features">
          <li>1 User</li>
          <li>5 Projects</li>
        </ul>
        <button className="plan-button">Get Started</button>
      </div>
      <div className="pricing-card popular">
        <div className="popular-badge">Popular</div>
        <div className="plan-name">Pro</div>
        <div className="plan-price">$29 <span>/mo</span></div>
        <ul className="plan-features">
          <li>5 Users</li>
          <li>Unlimited Projects</li>
          <li>Analytics</li>
        </ul>
        <button className="plan-button">Get Started</button>
      </div>
    </div>
  );
}
/* react/L-007.css */
/* L-007: React styles */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px;
}

.pricing-card {
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pricing-card.popular {
  border-color: #5c6ac4;
  box-shadow: 0 4px 20px rgba(92, 106, 196, 0.15);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #5c6ac4;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.plan-name {
  font-size: 18px;
  font-weight: 600;
  color: #5c6184;
}

.plan-price {
  font-size: 42px;
  font-weight: 700;
  color: #1d2242;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price span {
  font-size: 16px;
  font-weight: 400;
  color: #5c6184;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d2242;
}

.plan-features li::before {
  content: '✓';
  color: #5c6ac4;
  font-weight: bold;
}

.plan-button {
  wudth: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e0e4f0;
  background: transparent;
  color: #1d2242;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pricing-card.popular .plan-button {
  background: #5c6ac4;
  border-color: #5c6ac4;
  color: #fff;
}

.plan-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}
import './L-007.css';

export default function PricingGrid() {
  return (
    <div className="pricing-grid">
      <div className="pricing-card">
        <div className="plan-name">Free</div>
        <div className="plan-price">$0 <span>/mo</span></div>
        <ul className="plan-features">
          <li>1 User</li>
          <li>5 Projects</li>
        </ul>
        <button className="plan-button">Get Started</button>
      </div>
      <div className="pricing-card popular">
        <div className="popular-badge">Popular</div>
        <div className="plan-name">Pro</div>
        <div className="plan-price">$29 <span>/mo</span></div>
        <ul className="plan-features">
          <li>5 Users</li>
          <li>Unlimited Projects</li>
          <li>Analytics</li>
        </ul>
        <button className="plan-button">Get Started</button>
      </div>
    </div>
  );
}
/* L-007: React styles */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px;
}

.pricing-card {
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pricing-card.popular {
  border-color: #5c6ac4;
  box-shadow: 0 4px 20px rgba(92, 106, 196, 0.15);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #5c6ac4;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.plan-name {
  font-size: 18px;
  font-weight: 600;
  color: #5c6184;
}

.plan-price {
  font-size: 42px;
  font-weight: 700;
  color: #1d2242;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price span {
  font-size: 16px;
  font-weight: 400;
  color: #5c6184;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d2242;
}

.plan-features li::before {
  content: '✓';
  color: #5c6ac4;
  font-weight: bold;
}

.plan-button {
  wudth: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e0e4f0;
  background: transparent;
  color: #1d2242;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pricing-card.popular .plan-button {
  background: #5c6ac4;
  border-color: #5c6ac4;
  color: #fff;
}

.plan-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Three <article> cards sit in a CSS Grid container. The featured card uses transform: scale(1.05) or a different border/background to visually stand out. Feature rows use a <ul> with custom list markers (✓ included, ✗ excluded). The CTA button is always at the bottom using flexbox column with margin-top: auto.

3つの<article>カードがCSS Gridコンテナに配置。特集カードはtransform:scale(1.05)または異なるボーダー/背景で視覚的に目立ちます。機能行はカスタムリストマーカー（✓含む、✗除く）の<ul>を使用。CTAボタンはflexboxコラム+margin-top:autoで常にボトムに配置。

カスタマイズ方法Customization

Add a "Most Popular" badge to the featured plan using ::before. Use a toggle switch to switch between monthly/annual pricing and update displayed prices via JavaScript. Add a comparison table below the cards for enterprise buyers who need granular feature detail.

::beforeを使用して特集プランに「最も人気」バッジを追加。月額/年額の切り替えスイッチを追加しJavaScriptで表示価格を更新。詳細な機能比較が必要なエンタープライズバイヤー向けにカード下部に比較テーブルを追加。

注意点Caveats

Ensure pricing amounts have sufficient font size and contrast. Mark the recommended plan with aria-label or a visually hidden text so screen readers announce it as the recommended option. Test that the CTA buttons are distinguishable from each other with unique accessible labels.

価格金額に十分なフォントサイズとコントラストを確保してください。スクリーンリーダーが推奨オプションとしてアナウンスするよう、推奨プランにaria-labelまたは視覚的に非表示のテキストでマークしてください。CTAボタンが一意のアクセシブルラベルでお互いから区別できることをテストしてください。

よくある質問 Frequently Asked Questions

How to customize the pricing card grid? Pricing Card Gridをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the pricing card grid in React? ReactでPricing Card Gridを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of pricing card grid? Pricing Card Gridのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.