価格比較で”選ばせる”─ 中央の列をハイライト

こんにちは、株式会社ファストコーディングのBigViです。

今回は私が担当したECサイトのプロジェクトで実装した、価格表のお話です。お客様から「価格表が見づらい」「どのプランを選べばいいか分からない」という声がありました。特にスマホで見ると、横スクロールが動きもなくてシンプルで、違いがわかりづらいようでした。

価格表の問題点

価格表を作るとき、3つとか4つのプランを並べることが多いです。でも、スマホだと画面が小さいので、全部のプランを一度に見ることができません。横にスクロールして比較しないといけないです。

実際、私が担当したプロジェクトでも、お客様がこう言いました：

「価格表を見ているユーザーの離脱率が高いんです。もっと分かりやすくできませんか？」

データを見たら、価格表のページで平均滞在時間が30秒くらいでした。そして、プラン選択率も低かったです。これは問題だなと思いました。

解決策：中央のプランだけハイライト

いろいろ考えて、こういう方法を試しました：

横スクロールする価格表を作る
スクロールしたとき、中央に来たプランだけハイライトする
ハイライトは微妙なグラデーションで、派手すぎないようにする
切り替えはスムーズに200msで

この方法なら、ユーザーは「今どのプランを見ているか」が分かりやすくなります。視線誘導にもなりますし、選びやすくなると思いました。

実装方法

HTML構造

まず、HTMLはこんな感じで書きます。シンプルな構造です：

<!-- モバイル表示をシミュレートするラッパー -->
<div class="mobile-simulator">
  <div class="price-table-container">
    <div class="price-table">
      <div class="plan-card" data-plan="basic">
        <h3>ベーシック</h3>
        <p class="price">¥1,000<span>/月</span></p>
        <ul class="features">
          <li>機能A</li>
          <li>機能B</li>
          <li>サポート: メール</li>
        </ul>
        <button class="select-btn">このプランを選ぶ</button>
      </div>
      
      <div class="plan-card" data-plan="standard">
        <h3>スタンダード</h3>
        <p class="price">¥2,000<span>/月</span></p>
        <ul class="features">
          <li>機能A</li>
          <li>機能B</li>
          <li>機能C</li>
          <li>サポート: メール + チャット</li>
        </ul>
        <button class="select-btn">このプランを選ぶ</button>
      </div>
      
      <div class="plan-card" data-plan="premium">
        <h3>プレミアム</h3>
        <p class="price">¥3,500<span>/月</span></p>
        <ul class="features">
          <li>機能A</li>
          <li>機能B</li>
          <li>機能C</li>
          <li>機能D（独占）</li>
          <li>サポート: 24時間対応</li>
        </ul>
        <button class="select-btn">このプランを選ぶ</button>
      </div>
    </div>
  </div>
</div>

CSSスタイル

次はCSSです。ここがポイントです。CSS変数を使って、グラデーションの色を管理します：

:root {
  --highlight-gradient: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(99, 102, 241, 0.12) 100%
  );
  --transition-speed: 200ms;
}

/* モバイル表示をシミュレート */
.mobile-simulator {
  max-width: 375px;
  margin: 0 auto;
  border: 8px solid #1f2937;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.price-table-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
  background: #f9fafb;
}

/* スクロールバーをカスタマイズ（見やすく） */
.price-table-container::-webkit-scrollbar {
  height: 8px;
}

.price-table-container::-webkit-scrollbar-track {
  background: #e5e7eb;
}

.price-table-container::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

.price-table {
  display: flex;
  gap: 12px;
  padding: 0 16px;
}

.plan-card {
  min-width: 280px;
  flex-shrink: 0;
  scroll-snap-align: center;
  
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  
  transition: all var(--transition-speed) ease-out;
}

/* ハイライト状態 */
.plan-card.is-centered {
  background: var(--highlight-gradient);
  border-color: rgba(99, 102, 241, 0.3);
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.plan-card h3 {
  font-size: 1.25rem;
  margin: 0 0 12px 0;
  color: #1f2937;
}

.price {
  font-size: 2rem;
  font-weight: bold;
  color: #4f46e5;
  margin: 0 0 16px 0;
}

.price span {
  font-size: 0.875rem;
  color: #6b7280;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.features li {
  padding: 6px 0;
  font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6;
}

.select-btn {
  width: 100%;
  padding: 10px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--transition-speed);
}

.select-btn:hover {
  background: #4338ca;
}

/* 中央のボタンだけ目立たせる */
.plan-card.is-centered .select-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

このCSSで、中央に来たプランカードだけ、微妙なグラデーション背景と少し拡大する効果が出ます。派手すぎないので、心地いい感じになります。

JavaScriptで中央判定

最後はJavaScriptです。スクロールしたとき、どのカードが中央にあるかを判定します。CSSのscroll-snapだけで実装できます。スクロールも自動で中央に止まってくれます：

const container = document.querySelector('.price-table-container');
const cards = document.querySelectorAll('.plan-card');

container.addEventListener('scroll', () => {
  const containerRect = container.getBoundingClientRect();
  const centerX = containerRect.left + containerRect.width / 2;

  cards.forEach(card => {
    const cardRect = card.getBoundingClientRect();
    const cardCenterX = cardRect.left + cardRect.width / 2;
    
    // 中央から30px以内なら中央とみなす（モバイル用に調整）
    if (Math.abs(centerX - cardCenterX) < 30) {
      card.classList.add('is-centered');
    } else {
      card.classList.remove('is-centered');
    }
  });
});

実際の結果

この実装をしたあと、A/Bテストをしました。結果はこんな感じでした：

指標	実装前	実装後	変化
プラン選択率	12.3%	18.7%	+52%
平均滞在時間	28秒	47秒	+68%
離脱率	67%	48%	-28%

プラン選択率が50%以上も上がりました。お客様もとても喜んでくれました。

ユーザーからのコメントもいくつかもらいました：

「どのプランを見ているか分かりやすい」
「比較しやすくなった」
「スクロールするのが楽しい」

特に3つ目のコメントは意外でした。ちょっとしたアニメーションで、体験が良くなったみたいです。

実装のポイント

今回の実装で大事だったポイントは3つです：

1. グラデーションは微妙に

最初、もっと派手なグラデーションを試しました。でも、お客様から「うるさい」と言われました。なので、rgba()で透明度を低くして、微妙なグラデーションにしました。これがちょうどいい感じになりました。

2. トランジションは200ms

切り替えのスピードも大事です。最初は300msにしていましたが、少し遅く感じました。200msにしたら、ちょうどいいスムーズさになりました。速すぎても遅すぎてもだめです。

3. CSS変数で管理

グラデーションの色やトランジションのスピードは、CSS変数（カスタムプロパティ）で管理しました。これで、あとから調整するのが簡単になりました。お客様が「もう少し青を強くして」と言ったとき、変数を変えるだけで全部変わるので便利でした。

まとめ

価格表の中央ハイライトは、小さい実装ですが効果が大きかったです。この方法で、ユーザーが「どのプランを見ているか」が分かりやすくなります。視線誘導にもなるので、CVR（コンバージョン率）も上がります。

株式会社ファストコーディングでは、こうした細かいUI実装のサポートも行っています。価格表だけじゃなくて、いろいろな場面でユーザー体験を良くする実装ができます。もし興味があれば、こちらのお問い合わせフォームから相談してください。

※本記事は弊社外国人スタッフによる投稿です。言い回しや表現が不十分な個所がありますことご容赦いただきますようお願いいたします。