PRC-004 公開  更新

シミュレーション型 料金表

条件を選ぶと、その場で概算費用が表示される料金表の設計です。
選ぶたびに金額と内訳が変わり、何によって価格が動くのかを検討者が自分で確かめられる構造にしています。
条件によって価格が大きく変わる制作・工事・印刷・撮影などのサービスに向いています。

ワイヤーフレーム(PC)

シミュレーション型 料金表 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

シミュレーション型 料金表 SP版ワイヤーフレーム

SP版の特徴

  1. 入力中は概算を画面下に固定:縦に並べると入力と結果が離れるため、画面下のバーで金額を追いながら条件を選べるようにしています。
  2. サイトの種類は2列×2段:4つのボタンを横に並べると文字が小さくなるため、押しやすい大きさを保てる配置にしています。
  3. 内訳は折りたたみ、前提は常に表示:結果カードの高さを抑えつつ、概算の前提になる「含まれないもの」は開かなくても読めるようにしています。
  4. 相談ボタンは結果カードの中に置く:結果を確かめた位置からそのまま相談に進めるよう、ボタンと引き継ぎの補足を結果のすぐ下に置いています。

採用前の判断ポイント

向いているケース

  • 価格を左右する主要な条件を3〜6項目程度に整理できる
  • 条件ごとの金額や計算ルール(基本料金、加算額、割増率など)をあらかじめ決められる
  • 検討者が予算に合わせて、条件を変えながら検討したい
  • Web制作、印刷、リフォーム・工事、撮影、研修

向かないケース

  • 条件が少なく、下限価格と加算条件だけで予算感を伝えられる(下限価格型の方が簡潔に伝えられます)
  • 条件の組み合わせが複雑で、概算の誤差が大きくなる(ヒアリングを前提にした見積もりが向きます)
  • 価格が固定で、プラン同士を比べてほしい(3プラン比較型や機能比較表型が向きます)

このワイヤーの特徴

自分の条件で「いくらになるか」をその場で確かめられる

案件ごとに価格が変わる商材では、料金ページを読んでも自分の場合の金額が分からず、問い合わせるまで予算に合うかどうかが見えません。
条件を選ぶだけで概算が出れば、問い合わせる前に、自分の条件での金額を確かめられます。
ページ数やオプションを変えながら、予算に収まる組み合わせを探すこともできます。

選ぶたびに金額が動き、何で価格が変わるのかが分かる

価格が変わる条件を文章で並べても、それぞれがどれだけ金額を動かすのかは伝わりにくいものです。
条件を変えるたびに金額と内訳が変わると、どの条件がどれだけ価格に効いているのかを、操作しながら理解できます。
見積もりの段階で「なぜこの金額なのか」を説明するときの土台にもなります。

内訳と前提を結果の横に置き、概算の根拠を見せる

金額だけが表示されると、その数字がどこから来たのかが分かりません。
基本料金と条件ごとの加算額、含まれないもの、正式な見積もりとの関係を結果カードにまとめることで、金額の根拠を理解しやすくなります。

選んだ条件を問い合わせに引き継ぎ、相談の一歩を軽くする

シミュレーションで条件を選んだあとに、同じ内容をフォームへ書き直すのは手間になります。
結果カードの相談ボタンから、選んだ条件をお問い合わせフォームに引き継ぐと、検討したところから、そのまま相談に進めます。

SPでは概算を画面下に固定し、入力しながら金額を追える

SPでは入力エリアと結果が縦に離れるため、条件を変えるたびに結果までスクロールするのは負担になります。
入力中は概算金額を画面下のバーに固定しているため、条件を選びながら金額の変化を確かめられます。

制作時のよくある失敗

精度を上げようとして、入力項目を増やしすぎる

正確な金額に近づけようとして項目を増やすと、結果にたどり着く前に入力をやめられる可能性があります。
価格への影響が大きい条件から3〜6項目に絞り、細かな条件は相談のときに確認する前提にします。

概算の幅が広すぎて、判断の材料にならない

「30万〜300万円」のような幅では、予算に合うかどうかを判断できません。
入力した条件で幅を狭められるように計算を組み、それでも幅が広くなる条件には、広くなる理由を注記で添えます。

何が含まれた金額なのかが書かれていない

税、サーバー費用、公開後の保守費用などが含まれているかどうかが分からないと、実際の見積もりとの差が「聞いていた話と違う」と受け取られます。
結果のすぐ近くに、含まれるものと別途かかる費用を書きます。

結果が確定した金額のように見える

金額を大きく表示すると、その金額で依頼できると受け取られやすくなります。
金額を1つで示す場合も幅で示す場合も、「入力内容からの概算」「正式な見積もりは内容を伺ってから」を結果のすぐ下に添えます。

結果を出したあとの行き先がない

結果の下に何も置かないと、金額を確かめたところで検討が止まります。
結果カードの中に相談ボタンを置き、選んだ条件がフォームに引き継がれることを一言添えます。

よくある質問

金額の計算方法をすべて公開することになりませんか?

画面に出すのは、概算の金額と主な内訳です。
予算の判断に必要なのは、計算式そのものより、何が金額を左右するかが分かることです。
基本料金と主な加算要素が分かれば、「何を追加すると、どのくらい金額が変わるのか」は伝えられます。
予算を検討するために必要な情報と、社内の詳細な計算ロジックは分けて考えます。

概算と正式な見積もりの金額がずれたら、どうすればいいですか?

結果の近くに、入力した条件からの概算であることと、正式な見積もりで金額が変わりやすい条件を書いておきます。
ずれる理由を事前に示しておくと、差が出たときも説明しやすくなります。
あわせて、実際の見積もり金額と概算を定期的に比べ、計算を見直すことをおすすめします。

下限価格型とどちらを選べばいいですか?

価格を左右する条件が少なく、目安を伝えれば十分な場合は下限価格型、条件によって金額が大きく変わり、検討者が自分で組み合わせを試したい場合はシミュレーション型が向いていると考えられます。
下限価格型の料金表の下にシミュレーターを置き、両方を組み合わせる構成もあります。
なお、決まったプランを直接比較して選べる場合は3プラン比較型、違いが分かりにくく、自分に合うプランを質問から知りたい場合はプラン診断型が向いています。

シミュレーターの金額は、実際の料金と完全に一致させる必要がありますか?

概算のため完全に一致するとは限りませんが、同じ入力条件なら、実際の見積もりに近い金額が安定して出る状態を目指します。
差が頻繁に大きくなる場合は、計算ルールや入力項目の見直しが必要です。
正式な見積もりで変わる条件と、概算に含まれない費用は結果の近くに示します。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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