料金表で失敗する店が多い理由
料金表は「売上に直結するページ」なのに、意外と後回しにされがちなパーツです。よくある失敗は次の3つです。
- プランがすべて同じ大きさ・同じ色で並んでいて、どれを選べばいいか分からない
- 料金の数字だけが目に入り、何が含まれているのかが読み取れない
- スマホで見ると表が折れてしまい、比較ができない
料金表の役目は「選んでもらうこと」です。情報を正確に並べるだけでは不十分で、視線の動きを設計し、迷う時間を減らす必要があります。
基本は「3プラン比較」
プラン数は多すぎても少なすぎても選びにくくなります。多くの業種で最適なのは3プランです。
- 一番安いプラン（お試し・入門）
- おすすめプラン（中間。ここに視線を集める）
- 一番上のプラン（本格・上限なし）
人は「真ん中」を選びやすい傾向があるため、おすすめプランを中央に置き、他の2プランより一段階目立たせるのが基本形です。極端に高いプランを右端に置くことで、中間プランの価格がお得に見える効果もあります。
おすすめプランを目立たせる5つの方法
1. カードの高さを少しだけ変える: おすすめプランのカードだけ上に数十px飛び出させる。左右対称に並べず、中央のカードにだけ重心を作ります。 2. 色数を絞ったアクセントで囲む: 店の雰囲気に合う1色をおすすめプランの枠線やバッジに使う。全プランを同じ色にすると差がつきません。 3. バッジを動かす: 「人気No.1」などのラベルを、ページ読み込み時に小さく跳ねさせたり、ゆっくり光らせたりすると自然と視線が止まります。 4. 数字を変化させる: 価格の数字を0から実際の金額までカウントアップさせる、あるいは年払い・月払いの切り替えで数字がパッと切り替わるようにすると、価格そのものに注目が集まります。 5. ホバーやタップで差分を見せる: カードにカーソルを乗せた（またはタップした）ときだけ、含まれる内容の詳細や他プランとの違いをスライドで見せると、情報量を保ったまま最初の見た目をシンプルにできます。
月払い・年払いの切り替えを作るときの注意点
年払いでお得になる料金表では、トグルスイッチで月払い・年払いを切り替える動きが定番です。ここで気をつけたいのは次の点です。
- 切り替えた瞬間に数字が「置き換わる」だけでは味気ないので、ふわっと短い時間でカウントが変わるようにする
- 年払いのほうが安いなら、「お得」といった一言を切り替え直後だけ強調表示する
- トグル自体も、スイッチの土台をなめらかに動かし、押した感触が伝わるようにする
下の部品は、まさにこのトグル切り替えを実装したサンプルです。実際の挙動を見てから自分の料金表に当てはめると、必要な動きの量がつかみやすくなります。
スマホでの見せ方
料金表が一番壊れやすいのはスマホ幅です。3列を横に並べたままだと文字が小さくなりすぎるため、次のいずれかにするのが安全です。
- 縦に1列ずつ並べ、おすすめプランを先頭に置く
- 横スクロールにして、おすすめプランだけ少し手前に飛び出して見せ、スクロールの手がかりにする
- カードを閉じた状態（料金とプラン名だけ）で並べ、タップで詳細が開く
いずれの場合も、横にスクロールしてしまう「意図しない横スワイプ」が起きないように、幅の指定は固定pxではなく%やclampを使うようにしましょう。
比較しやすい表組みにする
プラン数が増えたり、機能の有無を細かく比較してもらいたい場合は、カード型よりも表組み（グリッド）のほうが向いています。ガラスのような質感のカードを使いつつ、行ごとに機能名を揃え、対応・非対応をアイコンで示すと視認性が上がります。
表組みにする場合も、おすすめの列だけ背景を少し明るくしたり、枠線を太くしたりして、カード型と同じように「視線が止まる場所」を1つだけ作ることを忘れないでください。
よくある質問
Q. プランが2つしかない場合はどうすればいいですか？ 2プランでも「どちらかを基準にする」考え方は同じです。片方を基準プランとして控えめに、もう片方を推したいプランとしてやや大きく・濃い色で見せれば、3プランと同じ効果が得られます。無理に3プラン目を作ってラインアップを複雑にするより、2プランのままメリハリをつける方が伝わりやすいこともあります。
Q. 料金を全部見せたくない（要相談にしたい）場合は？ その場合は「価格」の代わりに「お問い合わせ」ボタンを置きますが、ボタンだけが寂しく見えないよう、そのプランで解決できる悩みや対象者の説明を厚めに書くと納得感が出ます。ボタンにもホバーで光が走る、または少し拡大するなどの動きを付けておくと、価格が無くてもクリックへの抵抗が減ります。
まとめ
料金表のデザインで一番大事なのは、情報を正確に出すことよりも「どのプランを選べばいいか」を数秒で伝えることです。3プランを基本形にし、おすすめプランに重心を作り、数字の動きやトグルの切り替えで注目を集める。そのうえでスマホでも崩れない設計にすれば、料金表は単なる価格一覧から「選んでもらうための装置」に変わります。自分の業種に合わせて、色やラベルの言葉を調整しながら取り入れてみてください。