アニメーション料金プランカード

ホバー時に強調され、価格部分がアニメーションするモダンな料金表（Pricing）カード単体です。価格プランの選択画面などで、特定のプランをアピールしたい場合に最適です。

プレビュー (Preview)

Pro Plan

本格的なプロジェクトやビジネス用途に最適。

¥4,980/ 月

無制限のプロジェクト作成
高度なアナリティクス機能
24時間365日の優先サポート
カスタムドメイン接続

ユースケースと特徴 (Use Cases & Features)

SaaSやサービスの料金表: 複数のプランを並べる際、最もおすすめしたいプランやユーザーがホバーしたプランを際立たせるのに適しています。
視覚的なフィードバック: ホバー時にカード全体が浮き上がり、上部にカラフルなアクセントラインが表示されます。また、価格部分がスケールアップし、ユーザーの視線を価格へと誘導します。

デザインとUXのポイント (Design & UX)

スムーズなアニメーション: transition-all duration-300 を使用し、ホバー時のシャドウや位置の変更を滑らかに行います。
価格の強調: group-hover:scale-110 origin-left クラスを使用することで、カード全体にホバーした際に価格部分のみが左を起点に少し拡大され、目を引くように工夫しています。
クリーンなレイアウト: 余白（Padding）と文字色（Slate系）を適切に設定し、情報が読みやすいモダンなデザインに仕上げています。

カスタマイズ方法 (Customization Guide)

カラーテーマの変更: bg-gradient-to-r from-blue-500 to-indigo-500 や、ボタンのホバー色 hover:bg-blue-600 をブランドカラー（例：緑系なら from-emerald-500 to-teal-500 と hover:bg-emerald-600）に変更することで、簡単にテーマカラーを適用できます。
アニメーションの調整: hover:-translate-y-2 の数値を変更して浮き上がる高さを変えたり、group-hover:scale-110 を 105 などにして価格の拡大幅を微調整できます。

実装コード (Implementation)

<div class="pricing-card relative w-full max-w-sm rounded-2xl bg-white border border-slate-200 p-8 shadow-sm transition-all duration-300 hover:shadow-xl hover:-translate-y-2 hover:border-blue-500 overflow-hidden group">
<!-- Background Accent Line -->
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>

<!-- Header -->
<div class="mb-6">
  <h3 class="text-xl font-bold text-slate-800 mb-2">Pro Plan</h3>
  <p class="text-sm text-slate-500">本格的なプロジェクトやビジネス用途に最適。</p>
</div>

<!-- Price -->
<div class="mb-6 flex items-baseline">
  <span class="text-4xl font-extrabold text-slate-900 transition-transform duration-300 group-hover:scale-110 origin-left inline-block">¥4,980</span>
  <span class="text-slate-500 ml-2">/ 月</span>
</div>

<!-- Features -->
<ul class="space-y-4 mb-8">
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">無制限のプロジェクト作成</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">高度なアナリティクス機能</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">24時間365日の優先サポート</span>
  </li>
  <li class="flex items-start">
    <svg class="w-5 h-5 text-blue-500 mt-0.5 mr-3 flex-shrink-0" 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>
    <span class="text-slate-600">カスタムドメイン接続</span>
  </li>
</ul>

<!-- CTA Button -->
<button class="w-full py-3 px-4 bg-slate-900 hover:bg-blue-600 text-white font-medium rounded-xl transition-colors duration-300 focus:ring-4 focus:ring-blue-100 focus:outline-none">
  プランを選択する
</button>
</div>

ブラウザ対応状況 (Browser Support)

モダンブラウザ（Chrome, Firefox, Safari, Edge）の最新バージョンで正常に動作します。
Tailwind CSSの group-hover 機能を活用しているため、特別なJavaScriptを必要としません。