料金表（Pricing Table）

SaaSプラットフォームやサブスクリプションサービスにおいて、ユーザーに分かりやすくプランを提示するための料金表（Pricing Table）セクションです。3つの異なるプランを並べ、推奨プラン（Proなど）を強調するデザインになっています。

プレビューとコード

Pricing

あなたのビジネスに最適なプランを

すべてのプランで14日間の無料トライアルが可能です。いつでもキャンセルできます。

Basic

¥1,980/月

個人プロジェクトや小さなチームに最適です。

1プロジェクト
基本サポート
ストレージ 10GB

一番人気

Pro

¥4,980/月

成長中のチームとビジネスに最適なプランです。

無制限のプロジェクト
優先サポート
ストレージ 100GB
高度な分析機能

Enterprise

¥14,800/月

大規模な組織と高度な要件向けにカスタマイズ。

すべて無制限
24時間365日の専任サポート
カスタムストレージ
SLA保証

<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
      <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
        あなたのビジネスに最適なプランを
      </p>
      <p class="mt-4 text-xl text-gray-500">
        すべてのプランで14日間の無料トライアルが可能です。いつでもキャンセルできます。
      </p>
    </div>

    <!-- Pricing Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
      
      <!-- Basic Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
          <span class="text-gray-500 ml-2">/月</span>
        </div>
        <p class="text-gray-500 mb-8">個人プロジェクトや小さなチームに最適です。</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            1プロジェクト
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            基本サポート
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            ストレージ 10GB
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
          はじめる
        </button>
      </div>

      <!-- Pro Plan (Highlighted) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
        <div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
          一番人気
        </div>
        <h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-white">¥4,980</span>
          <span class="text-blue-200 ml-2">/月</span>
        </div>
        <p class="text-blue-100 mb-8">成長中のチームとビジネスに最適なプランです。</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            無制限のプロジェクト
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            優先サポート
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            ストレージ 100GB
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            高度な分析機能
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
          無料トライアルを開始
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
          <span class="text-gray-500 ml-2">/月</span>
        </div>
        <p class="text-gray-500 mb-8">大規模な組織と高度な要件向けにカスタマイズ。</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            すべて無制限
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            24時間365日の専任サポート
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            カスタムストレージ
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            SLA保証
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
          お問い合わせ
        </button>
      </div>

    </div>
  </div>
</div>

実装のポイント

視覚的な強調: Pro プラン（一番人気）のカードには、背景色と少し飛び出したような効果 (transform md:-translate-y-4) を用いて、ユーザーの目を引きつけるようにしています。
レスポンシブ対応: grid-cols-1 md:grid-cols-3 を指定することで、モバイル端末では1列に、タブレット以上の画面サイズでは3列にきれいに並ぶように設計されています。
Hover エフェクト: 各カードに hover:shadow-lg transition-shadow duration-300 などのクラスを付与し、ホバー時のインタラクションを追加してリッチな操作感を演出しています。
アクセシビリティ: コントラスト比に配慮した配色を行い、アイコンとテキストの組み合わせで視覚的に情報が伝わりやすくなっています。