PRC-016 公開  更新

オプション追加型 料金表

決まった基本料金に、必要なオプションを一覧から選んで足していく料金表の設計です。
基本料金に何が含まれるか、各オプションの単価と数量の単位、選んだ結果の合計と内訳を、同じ画面で確認できます。
撮影や清掃、制作、レンタルなど、基本の内容に追加の項目を足す形で料金が決まるサービスに向いています。

ワイヤーフレーム(PC)

オプション追加型 料金表 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

オプション追加型 料金表 SP版ワイヤーフレーム

SP版の特徴

  1. 基本料金を先頭に:何が含まれた料金にオプションを足すのかを、先に確かめられるようにしています。
  2. オプションは1項目1行:横幅が狭くても、項目名と単価を見比べながら選べるようにしています。選んだ項目はチェックで示し、枠と背景でも補助しています。
  3. 選択中は合計を画面下に固定:オプションを選ぶたびに合計がどう変わるのかを、スクロールせずに確かめられるようにしています。選択エリアを離れたら解除してもかまいません。
  4. 内訳は折りたたむ:画面の高さを抑えつつ、必要なときに単価×数量の内訳を開いて確認できるようにしています。

採用前の判断ポイント

向いているケース

  • 基本料金が1つに決まっていて、追加できる項目と単価が決まっている
  • オプションの数が比較的少なく、一覧で見比べられる
  • 合計が足し算だけで決まり、条件の組み合わせで基本料金は変わらない
  • 撮影、ハウスクリーニング、制作、レンタル、講座・研修など

向かないケース

  • 条件の組み合わせで基本料金そのものが変わる(条件を選んで計算するシミュレーション型が向きます)
  • 基本料金が案件ごとの見積もりで決まる(下限価格型で最低価格と範囲を示す方が合います)
  • 追加できる項目がなく、価格が1つに決まっている(単一料金型が向きます)

このワイヤーの特徴

基本料金の中身が先に分かり、オプションとの境目で迷わない

オプションの一覧だけが並んでいると、何が基本料金に含まれ、何を足す必要があるのかが分かりません。
基本料金に含まれる内容を先に示すことで、追加が必要なものと、すでに含まれているものを取り違えずに選べます。

オプションを一覧で見せ、単価と数量の単位をそろえる

オプションが本文のあちこちに散らばっていると、比べて選ぶことができません。
項目名・単価・数量の単位をそろえて一覧にすることで、どの項目にいくらかかるのかを見比べながら、必要なものだけを選べます。

選ぶたびに合計と内訳が更新され、支払う金額を見失わない

オプションの単価だけでは、選び終えたときの合計が分かりません。
選ぶたびに合計と内訳を更新することで、今の選択でいくらになるのかを、確かめながら選べます。

選んだ内容を予約・申し込みへ引き継ぎ、取り違えを防ぐ

料金表で選んだオプションを申し込みの画面で入力し直すと、選び忘れや取り違えが起きやすくなります。
選んだ項目と数量をそのまま引き継ぐことで、料金表で確かめた内容のまま、申し込みに進めます。

SPでは合計を画面下に固定し、選びながら確かめられる

SPではオプションの一覧が縦に長くなり、合計が画面の外に出やすくなります。
合計とCTAを画面下に固定することで、スクロールしながら選んでも、合計がいくらになったのかをいつでも確かめられます。

制作時のよくある失敗

オプションの単価だけを並べ、合計が分からない

単価の一覧だけでは、検討者が自分で足し算をすることになり、計算違いや選び忘れが起きます。
選んだ結果の合計と内訳を、料金表の中で示します。

基本料金に含まれるものが書かれていない

基本料金の中身が分からないと、すでに含まれているものをオプションとして足してしまったり、必要なものが足りなかったりします。
基本料金の内容を、オプションの一覧の前に書きます。

数量の単位が書かれていない

「+2,200円」だけでは、1枚あたりなのか、1回あたりなのか、全体で1回なのかが分かりません。
単価には数量の単位を添え、数量を選べる項目は単価×数量が分かるようにします。

オプションの数が多すぎて、一覧で見比べられない

追加項目が20も30も並ぶと、一覧で見比べる型の利点がなくなります。
項目を絞るか、種類ごとにまとめるか、条件を選んで計算する型に切り替えることを検討します。

別途見積もりになる条件が、オプションの中に混ざっている

「出張撮影(都内以外)」のように、金額が決まっていない項目を同じ一覧に並べると、合計が確定しない項目とそうでない項目が区別できません。
金額が決まっていない項目は、一覧の外で「別途お見積もり」と示します。

よくある質問

オプションはいくつまで一覧に並べられますか?

見比べながら選べる数として、10個程度をひとつの目安にしています。
それ以上になる場合は、種類ごとに見出しで分けるか、よく選ばれる項目を先に並べ、残りを「その他のオプション」として開く形にします。
条件の組み合わせで基本料金まで変わる場合は、シミュレーション型の方が向いています。

数量を選べるオプションは、どう見せればいいですか?

単価に数量の単位を添えたうえで、行の中に数量の入力を置き、内訳では単価×数量の形で金額を示します。
数量に上限がある場合は、その上限も入力の近くに書きます。

オプションの追加や取り消しは、いつまでできますか?

料金表の設計とは別の運用ですが、期限があるなら料金表の近くに書いておくと、申し込み後の行き違いを減らせます。
当日の追加を受ける場合は、その場での支払い方法も添えます。

シミュレーション型とは何が違いますか?

シミュレーション型は、条件の組み合わせによって基本料金そのものが変わる場合に、条件を選んで概算を計算する型です。
この型は、基本料金が1つに決まっていて、オプションを足し算するだけで合計が決まる場合に、選べる項目を一覧で見せて合計を確かめてもらいます。

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開