料金表の色で選びやすさは変わる?見た目と説明内容を一緒に確認する
料金表で一つのプランだけ背景色を変えると、顧客の目に留まりやすくなる可能性があります。ただし、目立つプランが、顧客にとって選びやすいプランや、必要な条件を満たすプランとは限りません。色を変えただけで契約が増えると考えるのも早計です。
料金表を作るときは、色が「何を伝えるための目印か」を明確にし、価格・機能・利用上限などを同じ条件で読めるようにします。そのうえで、顧客が目的に合うプランを見つけ、理由を説明できるかを確かめます。
色で目立つプランが、選択に影響する場合があるのはなぜか
例えば、架空の業務用サービスに「ライト・スタンダード・プレミアム」の3つの料金プランがあるとします。スタンダードだけ背景が青く、「おすすめ」と書かれた目印が付いていたら、比較を始める前にそこへ目が向くかもしれません。これは仕組みを説明するための仮の例で、実在するサービスの調査結果ではありません。
色や明るさなどで周囲と違って見えるものは、先に注意を向けるきっかけになり得ます。ただし、先に見たことと、そのプランの中身を理解し、納得して選んだことは別です。
急いで選ぶ場面では、目立ち方が選択に関わった
Milosavljevicら(2012)は、菓子などの食品を選ぶ3つの実験で、候補の好ましさと見た目の目立ち方が選択にどう影響するかを調べました。最初の実験では食品の周囲を暗くして一方の明るさを際立たせ、短時間だけ表示しました。表示時間が特に短いときは、もともとの好みよりも見た目の目立ち方が選択に強く影響しました。別の実験では、ほかの課題を同時にこなす条件でその影響が強まり、候補間の好みの差が小さいときにも目立つ方が選ばれやすくなりました。
この研究で操作した中心的な違いは明るさであり、特定の青色や赤色が優れていると比べたものではありません。食品を短時間で選ぶ条件の結果なので、じっくり内容を読む料金表で同じ大きさの影響が起きるとは言えません。
料金表を使った調査でも、色と並び方で違いが見られた
実務向けの調査として、Labay(2016)が公開したユーザーテストがあります。調査ツールの料金表を用いて、プランを安い順・高い順に並べ、特定プランの背景を緑色にして、視線の動きと「どのプランを選ぶか」という回答を比較しました。
安い順に並べたときには、色を付けたプランに最初の視線が向くまでの時間が短くなる結果が見られました。一方、注視時間には条件間で統計的に明確な違いが確認されませんでした。プランの選択回答でも、並び方と色による強調に応じて違いが報告されています。
ただし参加者は、実際にその調査ツールを購入する人ではなく、設定された用途を想像して回答しました。またプランの並び順も検討しているため、すべての違いを「色だけの効果」とは言えません。学術誌で査読された実験ではなく、実務者が公開したユーザーテストです。これだけで色を変えれば契約や売上が増えるとは判断できません。
料金表で色を使う前に、何を確かめるか
色は「おすすめ」の根拠を伝えているか
「おすすめ」と書かれたプランが目立っても、誰にとっておすすめなのかが分からなければ、選ぶ根拠になりません。例えば「5〜10人で使うチーム向け」「データ出力が必要な人向け」など、想定する利用条件があれば、その条件を文字でも伝えます。該当しない顧客にまで最適だと思わせないためです。
色が「最も人気がある」「必要な機能を満たす」「現在選択されている」のどれを示しているかによって意味は違います。事実を確かめていないのに「一番人気」と付けたり、選択中の表示をおすすめ表示と混同させたりしないようにします。
色を外しても、価格と条件を比べられるか
料金の単位、月払い・年払い、利用人数、機能の範囲、追加料金、契約や解約の条件を比べられるようにします。青いプランだけ説明が詳しく、ほかのプランの制約が隠れていると、色の影響と説明内容の不足が重なり、何が選択に関係したか分からなくなります。
同じ意味の項目は、見出しや表示形式をそろえると関係を読み取りやすくなる場合があります。色や形が似たものを同じまとまりとして受け取りやすい心理は、類同の法則の解説でも紹介されています。ただし、色をそろえるだけで必要な情報が伝わるという意味ではありません。
色を区別しにくい人にも情報が届くか
Webのアクセシビリティ指針であるW3CのWCAG 2.2「色の使用」では、情報の伝達や操作の区別を色だけに頼らないことが求められています。「選択中」「この機能は利用可能」といった意味を、背景色だけでなく文字や記号でも示します。
また、同指針の文字のコントラストに関する基準では、通常の文字と背景の明暗差を4.5対1以上、大きな文字は3対1以上とすることが原則です(一部の例外があります)。背景色だけ濃くしてプラン名や料金が読みにくくなるなら、強調の仕方を見直します。これは情報を読み取れるようにするための基準で、特定の色による売上増加を示すものではありません。
色と説明内容を一緒に点検する具体例
次は、料金表の直し方を考えるための架空の例です。月額料金も機能も説明用に設定したもので、実際の販売価格や研究で使われた料金表ではありません。以下の3プランはすべて同じ月払い・同じ税の表示方法という前提です。
| プラン | 月額(仮) | 主な利用条件(仮) | 表示を点検する点 |
|---|---|---|---|
| ライト | 2,000円 | 3人まで・データ出力なし | 色が控えめでも制約が読めるか |
| スタンダード | 4,000円 | 10人まで・データ出力あり | 青い背景の「おすすめ」に理由があるか |
| プレミアム | 8,000円 | 30人まで・データ出力あり・追加連携あり | 上位機能と料金が同じ大きさで読めるか |
例えば6人でデータを毎月書き出す顧客なら、表の範囲ではスタンダードが条件に合います。2人でデータ出力が不要ならライトで足りる可能性があります。同じ青色のスタンダードでも、顧客の利用条件が違えば適切な判断は変わります。なお、表にない容量制限や初期費用などがある場合には、別途確認が必要です。
直す前は「青いカードだけ『おすすめ』」だったとしても、直した後は「スタンダード|5〜10人でデータ出力を使う場合の候補」といった説明を添えられます。この文言も、実際の仕様と顧客の利用状況を確かめてから使います。色は違いに気づく目印として残し、選ぶ理由は文字と条件で判断できる状態にします。
また、スマートフォンではプランが縦に並ぶなど、画面の大きさによって表示順や見える項目が変わります。パソコンで並べて比べられることと、スマートフォンで一つずつ読んでも差が分かることは別なので、両方で点検します。
色の変更で「選びやすくなったか」をどう確かめるか
色を変えた直後に注目された回数や、特定プランのボタンが押された回数だけを見ると、目立つようになった効果と、必要な条件を理解した効果を区別できません。改善を考えるなら、次のように段階を分けて確かめます。これは研究を参考にした実務上の提案で、次の手順の成果が直接実証されたわけではありません。
- 色を変える目的を先に決める。 「標準プランの存在を見落としている人に気づいてもらいたい」のか、「各プランの違いを理解しやすくしたい」のかを区別します。売りたいプランへ誘導することを、顧客の選びやすさと同一視しません。
- 想定顧客に条件を渡して確かめる。 例えば「6人で利用し、データの書き出しが必要」という仮の仕事条件で、どのプランが使えるか、その理由を説明してもらいます。「どれが目立ちましたか」とは別に、料金、必要な機能、制約を正しく読めたかを確認します。
- 色の影響を調べるときは、他の条件をできるだけそろえる。 元の料金表と背景色だけを変更した料金表を、比較可能な人たちに提示します。色と同時に価格、表示順、説明文まで変えると、どこが違いを生んだか分かりにくくなります。説明文も変えたい場合は、別の変更として記録します。
- 結果は段階別に見る。 どこに目が向いたか、必要な情報が見つかったか、正しく比較できたか、申し込みや契約につながったかを分けて確認します。申込件数だけでは、選んだプランが実際の条件に合っていたかまでは分かりません。契約後の勘違いや変更依頼も確認材料になります。
- 確認できた問題に応じて直す。 色付きプランばかり見られて他の候補の条件が読まれないなら強調を弱めます。どの候補にも目が向くのに違いが理解されないなら、色よりも比較項目や説明文を直します。十分なデータが集まらなければ、色の変更が成果を上げたと断定せず、追加の確認を考えます。
料金表の色は、比較を始めるときの助けになることがあります。しかし、顧客が選びやすかったかを決めるのは「目立つプランが選ばれたか」だけではありません。すべての候補の価格と条件を読み、自分の用途に合うプランを理由とともに選べたかを確かめて、見た目と説明を一緒に見直します。
参考文献・出典
- Milosavljevic, M., Navalpakkam, V., Koch, C., & Rangel, A.(2012)「Relative visual saliency differences induce sizable bias in consumer choice」Journal of Consumer Psychology, 22(1), 67–74。食品を選ぶ3実験での明るさによる目立ち方、判断速度、同時課題、好みの強さと選択の関係。研究機関が公開した原著本文を確認。
- Labay, B.(2016)「The Effects of Highlighting a “Recommended” Pricing Plan [Original Research]」Speero(旧CXL)の独自ユーザーテスト。調査ツールの料金表で、色による強調と並び順、視線、仮の選択回答を比較。実際の契約を検証した学術研究ではないことを含め、公開レポート本文を確認。
- World Wide Web Consortium(W3C)(2025年更新)「Understanding WCAG 2.2 Success Criterion 1.4.1: Use of Color」。色を唯一の情報手段にしないという公式指針。公式ページを確認。
- World Wide Web Consortium(W3C)「Understanding WCAG 2.2 Success Criterion 1.4.3: Contrast (Minimum)」。文字と背景のコントラスト比の基準。公式ページを確認。