料金ページのデザイン：プランの違いと支払い条件を分かりやすく伝える

料金ページで伝えるべきことは、どのプランが仕事に合うのか、何に対して料金がかかるのか、選択後に何が起こるのかの3点です。カードの見た目を整えても、課金の単位が不明だったり、比較表の各列で項目の意味が違ったりすれば、利用者は判断できません。おすすめプランを目立たせる前に、選択に必要な情報をそろえましょう。

Pixsoで料金ページをデザインするときは、プランのカード、補足説明、選択後の画面をひと続きで確認します。ボタンを押した後で、利用者が条件を読み直さなければならない構成は避けたいところです。

購入時に判断したいことから考える

設計例として、スケジュール管理サービスのNorthstarを考えてみます。Alexが選ぶのは、予定を編集する4人と、閲覧だけを行う2人で使うプランです。機能の数が最も多い列を探しているわけではありません。チームで予定を調整できるか、誰に有料の編集権限が必要か、組織の管理要件が選択に影響するかを知る必要があります。

NorthstarにはSolo、Team、Businessがあります。Soloは1人の編集者向け、Teamは共有スケジュールと閲覧のみの参加者に対応するプラン、Businessは組織全体の管理や営業担当者を介した契約に対応するプランです。この違いを軸にすれば、個人の作業、チームの共同作業、組織としての要件という分かりやすい構成にできます。

各プラン名の下に、誰に向いているかを短く記載します。「可能性を解き放つ」よりも「チームで共有スケジュールを管理する方向け」の方が判断に役立ちます。装飾的なバッジは補助にとどめましょう。「おすすめ」とするなら、共同編集ができるなどの理由を示し、強調した高額プランが誰にでも最適であるかのように見せないことが大切です。

料金の単位を金額のそばに示す

単位のない金額では、利用者が課金条件を推測しなければなりません。1人あたりなのか、編集者あたりなのか、ワークスペース単位なのか、アカウント全体の月額なのか。単位はツールチップや離れた注記ではなく、金額の隣に置きます。最低契約数によって実際の負担が変わる場合は、その条件も同じ場所で説明します。

このNorthstarの例では、Teamの課金単位は編集者です。Alexに必要なのは編集者4人分で、閲覧のみの2人は編集者数に含めません。選択内容を確認する画面でも、この違いを繰り返し示します。全員をまとめて「ユーザー」と呼ぶと、料金の意味がかえって曖昧になります。

契約数を変更できる場合は、対応する合計金額も更新し、単位を表示し続けます。閲覧者を含むチームで「チーム人数」とだけ書くのは不明確です。「編集者数」なら、何を購入するのかが伝わります。閲覧者を後から編集者に変更した場合の扱いも別途説明し、料金への影響を権限名の中に隠さないようにします。

表示上の月額と支払いの条件を分ける

月額換算と毎月の支払いは同じではありません。年払いの料金を月額換算で表示するなら、そのそばに「年払い」と記載し、契約時に支払う年間の金額も示します。小さな「／月」という表示だけで条件を説明しようとしないでください。

月払い・年払いの切り替えはプラン比較の近くに置き、どちらを選んでいるか分かる状態にします。月払いから年払いに切り替えたら、影響する料金と請求の説明をまとめて更新します。編集者数やプランまで無断で変わってはいけません。次の画面で別途適用される料金がある場合は、支払い前に示し、料金ページの概算が最終請求額であるかのように扱わないようにします。

割引率を示す場合は、比較の基準を明らかにします。どの月払いと年払いを比較しているのかを示し、人数などの条件もそろえます。説明のないパーセンテージより、「どの期間の利用に対して、いくら支払うのか」が先に理解できることが重要です。

各プランを同じ項目で比較する

比較表は、カードだけでは簡潔に答えられない疑問を解消するために使います。まずはプランの選択を左右する機能から並べ、1つの行には1つの意味を持たせます。各列で使う用語も統一します。

Alexのチームはスケジュールを共有するため、Soloは候補から外れます。必要な編集と閲覧はTeamで満たせます。Businessを検討するのは、組織向けの管理機能や契約手続きが必要な場合です。チェックマークの数ではなく、要件に沿って選べる比較になっています。

「含まれない」と「適用対象外」を同じダッシュで表すと、違いが伝わりません。判断に影響するなら、言葉で区別します。「高度なサポート」も、何が変わるのか説明がなければ比較しにくい項目です。全プラン共通の基本機能は、長い表の各列に繰り返すより、共通機能としてまとめて示せます。

ボタンを押した後の結果を明確にする

ボタンの文言は、次に行うことを表します。NorthstarのTeamカードなら、編集者数と請求条件の確認へ進む「Teamを選ぶ」、Businessカードなら、問い合わせへ進む「営業に問い合わせ」とできます。両方を「始める」にすると、利用者が知っておきたい手順の違いが隠れてしまいます。

トライアルでは、支払い情報の登録が必要か、終了後にどうなるかなど、判断に関わる条件を実際の提供条件に沿って説明します。他社のトライアル条件をそのまま使ってはいけません。無料プランがある場合は、そのプランの利用開始と、有料機能を一定期間試すトライアルの開始を区別します。

選んだプラン、請求周期、編集者数は次の画面へ引き継ぎ、確定前に修正できるようにします。料金ページに戻ったときに、年払いが月払いへ変わったり、入力した人数が失われたりしないようにします。

スマートフォンでも比較しやすくする

カードを縦に並べると、1つずつは読みやすくても、プラン同士を比べにくくなります。選択に関わる説明には、プラン名と料金単位が近くにあることが重要です。共有スケジュールの行まで読んだときにも、どのプランについて見ているのか分かる構成にします。

狭い画面での構成は、何を比較するかに合わせて選びます。違いが少数の短い項目に収まるなら、コンパクトな比較表が使えます。項目が多ければ、比較するプランを選べる形も考えられますが、選択中のプラン名を見失わないようにします。デスクトップの3列を、そのまま文字が読めなくなるまで縮める方法は避けましょう。

詳細を折りたたむ場合も、重要な条件は表示したままにします。機能の補足説明は開閉できても、請求周期や最低契約数まで隠すべきではありません。カードの高さを固定する前に、長いプラン名や翻訳後の文言で確かめます。カードの高さをそろえることより、条件を欠かさず読めることが優先です。

選択状態とフォーカスを区別する

請求周期の切り替えでは、選択中の項目が分かり、どちらの項目にもキーボードフォーカスが見える必要があります。「年払いを選択している」と「この操作を実行すると月払いに切り替わる」は別の状態です。色の違いだけに頼らず区別できるようにします。

プランの見出し、表の見出し、リンクにも、実装上の適切な構造が必要です。同じ文言のボタンが並ぶ場合は、どのプランの操作か分かる名前にします。人数変更によって合計額が変わるなら、入力のたびにフォーカスを移動させずに結果をどう伝えるか、開発担当者と決めておきます。

文字を拡大し、画面幅を狭くして確認します。固定された操作バーが料金の説明を覆わないこと、比較表がキーボード操作の妨げにならないことも必要です。デザインファイルでの確認に加えて、実装したページでも動作を検証します。

Pixsoで選択から確認までをつなげる

PixsoでNorthstarのプラン比較と、選択したTeamの確認画面を並べます。プラン名、編集者単位の課金、請求周期を各画面でそろえます。狭い画面の版も用意し、デスクトップのカードを縮めるだけでなく、Alexが判断するための情報を残します。

レビューでは、プランを先に説明せず、Alexの編集者4人と閲覧者2人に合うものを選んでもらいます。何を理由に選んだかを聞いたうえで、購入する人数、適用される請求周期、ボタンを押した後の手順を確認します。Teamを選べても、6人全員に有料の編集権限が必要だと思っているなら、まだ説明を改善する余地があります。

個人で予定を管理する人と、組織全体の管理が必要な人でも試します。目的は、全員を強調したカードへ誘導することではありません。それぞれに合う経路を理解でき、その理解が実際の登録や契約の画面にもつながるようにすることです。

Pixsoで分かりやすいプラン比較をデザインする