料金ページのデザイン：プラン比較と購入判断を明確にする

PixsoのUIデザインメーカーで料金カード、補足説明、次の確認画面を横に並べ、選択後に条件が変わらないかレビューします。料金ページは、どのプランが合うか、何に課金されるか、選ぶと何が起きるかを答える必要があります。

購入判断から始める

架空の予定管理サービスNorthstarで、編集者4人と閲覧者2人を持つAlexを考えます。Solo、Team、Businessの対象を、機能数ではなく仕事で説明します。

プラン名の下に「共有予定を調整するチーム向け」のような短い対象説明を置き、「可能性を解放」のような抽象語を避けます。Recommendedの理由も明記します。

価格単位を見えるようにする

1人、編集者、ワークスペース、アカウント全体のどれに対する価格かを金額の隣に置き、ツールチップや脚注に隠しません。

NorthstarのTeamが編集者単位なら、Alexは4席を購入し、閲覧者2人は追加席になりません。選択プランの要約にも単位を繰り返します。

座席数を変えられる場合は合計を更新し、「Team size」ではなく「編集者席」のように購入数量を表すラベルを使います。

表示レートと請求コミットメントを分ける

年払いの月額換算と毎月支払う料金は違います。「年払い」と契約する年額を金額の近くに示し、月額・年額を切り替えたら価格と説明を同時に更新します。

節約率は同じ数量・同じ期間の比較を定義できる場合だけ表示します。

全プランで同じ能力を比較する

カードで説明しきれない質問を比較表で解決します。共有予定のようにプランを分ける能力を選び、各行の意味と用語を統一します。

ダッシュは「含まれない」と「該当なし」を同じ意味にしません。Advanced supportも、何が変わるかを説明できる値にします。

各アクションに結果を付ける

Teamカードは座席と請求確認へ進むなら「Teamを選ぶ」、Businessが問い合わせなら「営業に相談」と書きます。試用は支払い情報、終了時の扱いを実際の条件で説明します。

選択プラン、期間、座席数を次画面へ渡し、確定前に修正可能にします。料金ページへ戻っても年払いを月払いへ戻したり選択を捨てたりしません。

モバイル比較を使えるようにする

カードを縦に積むと個別には読みやすい一方、比較しにくくなります。価格単位とプラン名を各判断部分に近づけます。長い名称、翻訳、拡大文字、キーボードで試します。

選択状態とフォーカスを分ける

月払い・年払いの選択状態とキーボードフォーカスを明確にします。座席変更で合計が変わるなら、更新方法と読み上げ内容を開発と合意します。

Pixsoで購入全体をレビューする

PixsoワークスペースでNorthstarの比較画面とTeam選択後の要約を並べます。4編集者・2閲覧者のケースを説明なしで選んでもらい、購入数量と期間を回答できるか確認します。個人利用者と集中管理が必要な組織でも試し、強調カードへ誘導することを目的にしません。

結論

料金ページはカードの見た目ではなく、対象、単位、請求期間、機能差、モバイル操作、次画面の条件を一つの購入判断として設計します。