PRC-001 公開  更新

3プラン比較型 料金表

3つの料金プランを横に並べ、価格と機能の差を見比べながら選んでもらう料金表の設計です。
中央の推奨プランに視線を集めつつ、他のプランも公平に比較できる構造にしています。
月額サービスやSaaSなど、プランの違いを数値で説明できる商材に向いています。

ワイヤーフレーム(PC)

3プラン比較型 料金表 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

3プラン比較型 料金表 SP版ワイヤーフレーム

SP版の特徴

  1. 推奨プランを先頭に置く:縦積みでは最初に見たカードが比較の基準になりやすいため、基準にしてほしい推奨プランを1枚目にしています。
  2. カード内の情報順はPC版と同じ:プラン名・料金・説明・機能・CTAの順を揃え、スクロールしながらでも同じ位置で見比べられるようにしています。
  3. 機能リストは3項目+「他2項目を見る」:カード1枚の高さを抑え、3プランを見終えるまでのスクロール量を減らしています。プラン選びを左右する違いは初期表示の3項目に入れ、開かなくても分かるようにしています。
  4. CTAはカードの横幅いっぱい:片手操作でも押しやすく、各カードの申し込み先が一目で分かるようにしています。

採用前の判断ポイント

向いているケース

  • プランが3〜4つで、上位ほど数値が増える形で差を説明できる(人数・容量・件数など)
  • 全プランの価格を公開できる
  • 多くの利用者にとって過不足のない中位プランを、推奨として案内したい
  • 月額サービス、SaaS、スクール、継続型のコンサルティング

向かないケース

  • プランごとに対象顧客がまったく違う(比較ではなく分岐のため、プラン診断型が向きます)
  • 機能差が数値で表せず、説明文が長くなる
  • 価格が案件ごとの見積もりになる
  • プランが5つ以上ある(PCで1枚が狭くなり、SPの縦スクロールが長くなります。4つ目が法人向けの要問い合わせプランなら、カードの下に帯で出す形で使えます)

このワイヤーの特徴

横に視線を流すだけで差分が読める

プラン名・料金・説明・機能リスト・CTAの縦位置を3カードで揃えています。
上下に目を動かさず、同じ高さを横に見るだけで「どこが違うのか」を把握できます。
比較しづらい料金表は、プラン選びの負担になります。

機能リストを共通項目にすると、差が「不足」として見える

各カードに別々の訴求を書くと比較になりません。
5項目を全プラン共通にし、含まれないものは「―」で行を残すことで、上位プランの価値が説明なしで伝わります。

推奨プランが、他を殺さずに立つ

中央カードは枠線の太さとCTAの塗りだけで強調し、文字サイズ・情報量・項目数は他カードと同一にしています。
推奨だけを大きくすると他が当て馬に見え、かえって不信につながる可能性があります。

CTAが各カード内にあるため、決めた瞬間に押せる

比較、決定、行動が1つのカード内で完結します。
料金表の下に共通CTAを1つ置く構成では「どれを選んだか」が引き継がれず、直前の判断が宙に浮きやすくなります。

SPで推奨プランを先頭に置ける

縦積みでは横並びの比較性が失われるため、比較させる設計から「推奨を提示して、必要なら他も見せる」設計へ役割を切り替えています。
各カード内の情報順はPC版と同一に保つことで、読む側の学習コストは増えません。

制作時のよくある失敗

料金の表記条件がカードごとにそろっていない

税込と税別、月額と年額、初期費用の有無がカードによって違うと、安く見えたプランが実は高いといった誤解が生まれます。
表記条件は全カードで統一し、「円/月(税別)」のような単位を金額のすぐ横に置きます。

機能リストの項目を増やしすぎる

伝えたいことを全部載せようと項目を増やすと、カードが縦に長くなり、縦位置の揃えも崩れて比較しにくくなります。
カードに載せるのはプラン間で差が出る5項目前後に絞り、残りは「全機能を比較する」から機能比較表へ案内します。

「おすすめ」に理由が添えられていない

ラベルだけで理由がないと、売りたいプランを押し付けられている印象になりやすくなります。
「もっとも利用の多いプラン」「5〜20名の組織向け」のように、推奨の理由をラベルの近くに一言添えます。

最安プランを極端に絞りすぎる

上位プランへ誘導したいあまり最安プランを実用に耐えない内容にすると、比較の起点として機能しなくなります。
「これでは使えない」と感じた人は、上位プランを選ぶのではなく、ページを離れる可能性があります。
最安プランにも、それだけで成り立つ利用者像を設定します。

ボタンの文言がすべて「詳しく見る」になっている

どのカードも同じ曖昧な文言だと、押した後に何が起きるのか分からず、申し込みの一歩が重くなります。
「このプランで申し込む」「14日間無料で試す」のように、押した後に起きることをそのまま書きます。

よくある質問

プランが4つある場合も、この型は使えますか?

使えなくはありませんが、PCで1カラムあたりの幅が狭くなり、SPでは縦に4枚積むことになるため、比較のしやすさは落ちる傾向があります。
4つ目が「個別見積もり」のような性質の違うプランであれば、3枚のカード+下部に1行で案内する形に分ける方が、比較の骨格を保ちやすいと考えられます。

全プランの価格を公開できない場合はどうすればいいですか?

この型は全プランの価格が並ぶことで比較が成立するため、一部でも「要相談」になると中央の推奨が機能しにくくなります。
価格が案件ごとに変わる場合は、下限だけを示す「〇〇円〜」型や、条件を入力して概算を出すシミュレーション型の方が向いている可能性があります。

「おすすめ」はどのプランに付けるべきですか?

売りたいプランではなく、実際に選ばれている、あるいは多くの利用者にとって過不足のないプランに付けるのが基本です。
根拠のない推奨は他のプランを当て馬に見せ、料金表全体への信頼を下げる可能性があります。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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