料金表のUIデザイン

料金表のUIデザインを、設計パターンとして整理したページです。
プランの比べ方や価格の見せ方によって、向いている型が変わります。
3プラン比較型、機能比較表型、下限価格型など、商材や価格の決まり方に合わせて選べるようにまとめています。

22 patterns

型の選び方を見る ↓

料金表の型の一覧

料金表の型の選び方

料金表の型は、「価格が何で決まるか」と「検討者にどう選んでもらうか」で変わります。料金表の型を、2つの問いと、料金体系の条件によって加える型に分けて整理しました。型を選んだら、各Patternのページでワイヤーフレームとプロンプトを確認できます。

問い1:価格は何で決まりますか?

価格の決まり方向く型
あらかじめ決めたプランの価格で決まる→ 問い2へ
2つの区分の組み合わせから料金を引ける早見表型
複数の条件を入力・選択して料金を計算するシミュレーション型
見積もりで決まるが、最低価格と含まれる範囲は示せる下限価格型
件数・容量・時間などの利用量で決まる従量課金型
利用する人数で決まる人数課金型
利用する人の区分(大人・子ども・シニアなど)で決まる区分別料金型
売上や成約などの成果に対する手数料・報酬で決まる(固定費は0円か、ごく小さい)手数料・成果報酬型
決済手段やカードのブランドごとの料率で決まる(入金の条件も比べられる)決済手数料型
案件ごとに見積もるが、よくある構成の見積もりを明細で示せる見積もり明細型
1つの決まった価格だけを提示する単一料金型
個別見積もりで、最低価格も示せない見積もり案内型

問い2:プランをどう選んでもらいますか?

プランの価格が決まっている場合は、検討者に何をしてもらうかで型が分かれます。

選んでもらい方向く型
少数のプランを横に並べて、差を見比べてもらう3プラン比較型
多数の機能の有無を、細かく見比べてもらう機能比較表型
いくつかの質問に答えて、合うプランを1つ知ってもらうプラン診断型
他社のサービスや、人を雇う・外注するなどの別の方法と比べてもらう他社・他手段比較型

料金体系の条件によって加える型

次の条件がある場合は、上で選んだ型に組み合わせます。

料金体系の条件加える型
同じプランを月払いと年払いから選べる月額/年額切り替え型
初期費用と月額の両方がかかる初期費用+月額型
期間や対象を区切った割引があるキャンペーン価格型
無料で試したあとに有料の契約へ切り替わる無料トライアル型
商品を定期的に届け、初回と2回目以降の代金が違う定期購入型
決まった基本料金に、追加項目を足すオプション追加型
期限のない無料プランがあり、上限を超えた人だけが有料に切り替えるフリーミアム型

料金表の型の比較

型価格の決まり方検討者がすること向く商材
3プラン比較型決まったプラン3〜4枚のカードを見比べる月額サービス、SaaS、スクール
機能比較表型決まったプラン機能の有無を表で確かめるSaaS、業務システム
下限価格型見積もり(最低価格あり)最低価格と含まれる範囲で予算感をつかむ制作、工事、士業
シミュレーション型条件の組み合わせ条件を選んで概算を出す制作、工事、印刷、撮影
プラン診断型決まったプラン質問に答えて推奨を受け取るSaaS、会員サービス、スクール
月額/年額切り替え型決まったプラン+契約・請求方法月払いと年払いを切り替えて比べるSaaS、会員サービス、オンラインスクール
従量課金型利用量利用量を入れて月額の目安を出すAPI、配信、クラウド、決済
初期費用+月額型初期費用+月額導入時と毎月の費用、1年目の総額を確かめる制作と保守、導入支援つきSaaS、レンタル
キャンペーン価格型決まったプラン+期間限定の割引通常価格との差と条件を確かめるSaaS、スクール、会員サービス
早見表型2つの条件の組み合わせ行と列の交点から料金を引くハウスクリーニング、印刷、クリーニング
人数課金型人数×単価人数を入れて月額を出す業務ツール、SaaS、研修
無料トライアル型無料期間のあとに有料いつから、いくら請求されるかを確かめて試すSaaS、配信サービス、アプリ
単一料金型1つに決まった価格価格・含まれるもの・条件を1枚で確かめる講座・セミナー、パッケージ型サービス、単品の商品
見積もり案内型個別見積もり(最低価格も出さない)価格が決まる条件と見積もりの流れを確かめて依頼する受託開発、工事・設備、コンサルティング
定期購入型商品の各回の代金(初回と2回目以降)1回購入と定期購入を比べ、支払総額と解約の期限を確かめる食品・飲料、日用品などの消耗品の通信販売
オプション追加型基本料金+選んだオプション必要な項目を選び、合計と内訳を確かめる撮影、ハウスクリーニング、制作、レンタル
区分別料金型利用する人の区分自分の区分の行を見つけ、境界と証明を確かめる施設の入場料、イベント、交通、体験教室
手数料・成果報酬型売上や成果に対する率・報酬何に対する何%かと成果の数え方を確かめ、売上を入れて負担を試算するECモール、決済代行、人材紹介、集客代行、仲介
決済手数料型決済手段ごとの料率・固定額自社のお客様が使う決済手段の料率と入金の条件を確かめ、月の決済額から手数料を試算する決済代行、キャッシュレス決済、ECカート、予約システム
他社・他手段比較型決まったプラン(相手との比較)別の方法と費用・対応範囲を同じ表で比べ、期間の合計で確かめる業務ツール、代行サービス、クラウドサービス
フリーミアム型決まったプラン(無料に上限)無料プランの上限を自分の使う量と比べ、超えるときだけ有料に切り替えるクラウドツール、ストレージ、ノート・タスク管理、学習サービス
見積もり明細型案件ごとの見積もり(実例の明細)近い実例の明細を読み、項目ごとの作業と金額が変わる条件を確かめるWeb制作、システム開発、リフォーム、印刷

すべての型に共通する設計の原則

料金表の型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。

  • 金額は条件とセットで示す。「◯円」だけを大きく見せず、含まれる範囲、前提、変わる条件を同じ場所に置く
  • 単価や割引だけでなく、検討者が実際に支払う金額(合計・総額・一定期間の合計)を示す
  • 税の表記と端数の扱いを、ページ内のすべての金額でそろえる。消費者に対してあらかじめ価格を表示する場合は、総額表示のルールに従って税込価格を表示する
  • いつ請求されるか、いつまで契約が続くか、どうすれば料金をかけずにやめられるかを、料金の近くに書く
  • 選んだプランや条件を、申し込みや問い合わせの画面へ引き継ぎ、確定前に再確認できるようにする
  • 入力や切り替えがある型は、キーボードでも操作でき、選択状態と金額の変化が支援技術にも伝わるようにする
  • ワイヤーやサンプルの金額は「表示例」と明記し、実際の価格として表現しない
  • 二重価格表示や総額表示、通信販売の最終確認画面など、法令に関わる表示は所管官庁の説明を確認する

組み合わせの例

よくある質問

型は1つに絞らないといけませんか?

いいえ。問い1・問い2で選んだ型を土台にして、料金体系の条件に合わせて「加える型」を組み合わせます。まず、料金表の主役になる型を1つ決めると整理しやすくなります。複数の型を使う場合は、それぞれの役割を分けます。たとえば、3プラン比較型で大まかな違いを見せ、機能比較表型で詳細を確認してもらう、といった組み合わせです。価格の決まり方が異なる型を並べる場合は、どちらを見ればよいのかが分かるようにします。

型を選んだあとは、何をすればいいですか?

各Patternのページで、PC・SPのワイヤーフレーム、その型が効く理由、制作時のよくある失敗を確かめてから、プロンプトをコピーしてAIや制作会社に渡します。判断ポイントの「向かないケース」に当てはまる場合は、そこで案内している別の型に切り替えます。

料金表の見せ方で、法律に関わる点はありますか?

あります。通常価格と割引価格を並べる二重価格表示、一般消費者向けの税込表示(総額表示)、インターネットの通信販売で申し込みを受けるときの最終確認画面の表示などです。それぞれの型のページで、所管官庁の説明を確認できる範囲で触れています。実際の表示は、原文の確認と必要に応じた専門家への相談をおすすめします。