料金表の特典行を一瞬だけ光らせる ─ 「お得」の納得点を作るワンショット演出

こんにちは、WebディレクターのBigViです。最近、夫とスマホの料金プランを見直しました。比較表を見ていたのですが、どのプランにどの特典がついているかわかりにくかったです。。全部同じに見えて、結局「一番安いのでいいか」ってなりました。特典があるのに、気づかなかったらもったいないです。

先日、お客さまから「料金ページで上位プランが選ばれない」と相談がありました。上位プランには特典がたくさんついているのに、ユーザーが気づいていないみたいです。料金表を見ても、数字ばかりで「何がお得なのか」がわからない。

私もよくあります。料金表って数字の羅列で、特典の行も同じ見た目だから見逃してしまう。。

今回は「料金表の特典行が画面に入った瞬間、背景を薄緑にして300msで白に戻す」という演出を実装しました。「ここがお得ですよ」と一瞬だけ教える感じです。

なぜ「一瞬だけ」なのか

特典を目立たせる方法はいろいろあります。背景色を常につける、アイコンを大きくする、太字にする。でも常に目立たせると「全部が目立っている」状態になって、逆に埋もれます。

ポイントは「変化」です。人の目は、変化するものに自然と注意が向きます。ずっと緑だと「そういうデザインなんだ」と思うだけ。でも白から緑に変わって、また白に戻ると「あ、ここ何か違う」って気づきます。

ある案件で最初、特典行を常にピンク背景にしていました。クライアントに見せたら「表がごちゃごちゃして見える」と言われました。。一瞬だけ色を変えるようにしたら「これはスマートでいい」と言ってくれました。

実装方法

HTML構造

普通の料金表です。特典の行にdata-perk="true"をつけるだけです。

<figure class="pricing-table-wrap">
  <table class="pricing-table" id="js-pricing-table">
    <thead>
      <tr>
        <th></th>
        <th>ライト</th>
        <th>スタンダード</th>
        <th>プレミアム</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>月額料金</td>
        <td>980円</td>
        <td>2,480円</td>
        <td>4,980円</td>
      </tr>
      <tr>
        <td>ストレージ</td>
        <td>10GB</td>
        <td>50GB</td>
        <td>200GB</td>
      </tr>
      <tr data-perk="true">
        <td>優先サポート</td>
        <td>-</td>
        <td>○</td>
        <td>○</td>
      </tr>
      <tr data-perk="true">
        <td>専任担当者</td>
        <td>-</td>
        <td>-</td>
        <td>○</td>
      </tr>
      <tr data-perk="true">
        <td>初月無料</td>
        <td>-</td>
        <td>○</td>
        <td>○</td>
      </tr>
    </tbody>
  </table>
</figure>

data-perk="true"は、特典の行だけにつけます。料金やストレージのような基本情報の行にはつけません。「お得感」がある行だけを光らせます。

CSSスタイル

アニメーションはシンプルです。薄緑から白への退色だけです。

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.pricing-table th,
.pricing-table td {
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.pricing-table thead th {
  background: #f5f5f5;
  font-weight: 600;
}

.pricing-table td:first-child {
  text-align: left;
  font-weight: 500;
}

[data-perk="true"] td {
  transition: background-color 0.3s ease-out;
}

[data-perk="true"].is-highlighted td {
  background-color: rgba(34, 197, 94, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  [data-perk="true"] td {
    transition: none;
  }
  [data-perk="true"].is-highlighted td {
    border-left: 3px solid rgba(34, 197, 94, 0.5);
    background-color: transparent;
  }
}

緑はとても薄い色（rgba(34, 197, 94, 0.12)）にしています。濃いと「セール感」が出て安っぽくなるからです。300msかけて白に戻ります。

prefers-reduced-motionでは、色の変化をやめて、左に緑の線を入れる方法にしています。動きがなくても「ここが特典行ですよ」とわかります。

JavaScriptの実装

IntersectionObserverで料金表全体が画面に入ったかを検知します。入ったら、特典行を順番に光らせます。

document.addEventListener('DOMContentLoaded', () => {
  const table = document.getElementById('js-pricing-table');
  if (!table) return;

  const perkRows = table.querySelectorAll('[data-perk="true"]');
  if (!perkRows.length) return;

  let hasPlayed = false;

  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting || hasPlayed) return;
      hasPlayed = true;

      perkRows.forEach((row, i) => {
        // 各行を100msずつずらして光らせる
        setTimeout(() => {
          row.classList.add('is-highlighted');

          // 300ms後に退色開始
          setTimeout(() => {
            row.classList.remove('is-highlighted');
          }, 300);
        }, i * 100);
      });

      io.disconnect();
    });
  }, { threshold: 0.4 });

  io.observe(table);
});

ポイントは2つあります。

1つ目はhasPlayedフラグです。一度だけ再生して、2回目は光らないようにしています。スクロールで行ったり来たりしても、最初の1回だけです。

2つ目はstaggered（ずらし）演出です。特典行を同時に光らせるのではなく、100msずつずらして順番に光らせます。「1行目→2行目→3行目」と波のように流れると、目が自然に追いかけます。全部同時だと「あ、光った」で終わりですが、ずらすと「あ、まだ光ってる、ここも、ここも」となります。

注意点

実装するときに考えたことです。

色は緑にしました。緑は「お得」「ポジティブ」の印象があります。赤は「エラー」「警告」の印象が強いので避けました。ただし、企業のブランドカラーがある場合は、そちらに合わせたほうがいいです。

退色の時間は300msです。最初は500msにしていましたが、ちょっと長くて「まだ光ってる」って思いました。200msだと短すぎて気づかない人がいました。300msがちょうどよかったです。

テーブルが横スクロールするときも対応しています。tr全体にクラスをつけているので、セルが見えていなくても行全体が光ります。スクロールして見たときに「あ、この行だけ違う」とわかります。

実際の結果

このお客さまのプロジェクトで、A/Bテストを3週間やりました。

上位プラン選択率が6.4ポイント上がりました。特典行のクリック率（特典の詳細ページへのリンク）は5.8ポイント上がっています。特典に気づいてもらえるようになったからだと思います。滞在時間も9秒増えて、料金表をちゃんと読んでくれるようになりました。ただし、これは1つのプロジェクトでの結果です。効果はプランの内容やユーザー層によって変わります。

お客さまからは「特典がちゃんと伝わるようになった」と喜んでくれました。。

まとめ

料金表で「お得」を伝えるのは難しいです。常に目立たせると全部が目立って逆効果。「見えた瞬間だけ光る」ことで、自然にユーザーの目を引けます。

今回のポイントは以下の3つです：

• 特典行だけにdata-perk="true"をつけて、光る対象を限定する
• staggered演出で100msずつずらして順番に光らせる。同時より目が追いやすい
• 300msで退色。prefers-reduced-motionでは色変化の代わりに左線で表現

料金表は「数字の比較」だけでなく「お得感の伝達」も大事です。小さな演出で、ユーザーに特典を気づいてもらえるようになります。

株式会社ファストコーディングでは、こうした料金ページの改善やフロントエンドの実装サポートをしています。「上位プランの選択率を上げたい」「料金ページのCVRを改善したい」という方は、お問い合わせフォームから気軽にご連絡ください。

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