PRC-002 公開  更新

機能比較表型 料金表

プランを列、機能を行に並べた表で、すべての機能の有無を一覧で比べてもらう料金表の設計です。
機能を分類ごとにまとめ、見出し行を固定することで、項目が多くても迷わず比較できる構造にしています。
機能数の多いSaaSや、比較に時間をかけるBtoBサービスに向いています。

ワイヤーフレーム(PC)

機能比較表型 料金表 PC版ワイヤーフレーム

ワイヤーフレーム(SP)

機能比較表型 料金表 SP版ワイヤーフレーム

SP版の特徴

  1. 機能名を行の上に置く:機能名の列をなくすことで3プラン分の値を画面幅に収め、横スクロールなしで比較を続けられるようにしています。
  2. 見出しはプラン名と料金だけ:固定する見出しを低く抑え、表そのものが見える面積を確保しています。
  3. 分類ごとに折りたたむ:行数が多い表でも全体の長さを抑え、関心のある分類だけを開いて読めるようにしています。
  4. CTAは表の下に縦並び:固定見出しにボタンを入れると高さが増えるため、読み終えた位置に推奨プランから順に置いています。

採用前の判断ポイント

向いているケース

  • 機能数が多く、カード型では伝えきれない(10項目前後が目安)
  • 機能の有無や上限値でプランの差を説明できる
  • 情報システム部門や決裁者が、社内の稟議のために細かく比較する
  • SaaS、業務システム、クラウドサービス、法人向けの会員サービス

向かないケース

  • 機能が少なく、表にすると✓ばかりになる(3プラン比較型のカードの方が向きます)
  • 検討者が比較よりも「どれを選べばいいか」を知りたい(質問から合うプランを示すプラン診断型が向きます)
  • 価格が案件ごとの見積もりになる

このワイヤーの特徴

すべての機能の有無を1か所で確かめられる

カード型の料金表は主要な機能を絞って見せるのに向いていますが、表形式なら多くの機能を分類しながら一覧で比較できます。
検討者が「この機能は含まれるか」を確かめるために問い合わせたり資料を探したりする手間を減らせます。
機能が多い商材ほど、この網羅性が判断材料になると考えられます。

分類で区切るから、長い表でも迷わない

機能を「基本機能」「分析・レポート」「サポート」のように分類ごとにまとめ、分類名の行で区切っています。
読む側は関心のある分類だけを拾い読みでき、行数が多くても現在地を見失いにくくなります。

見出し行の固定で、どの列がどのプランかを見失わない

表が縦に長くなると、スクロールした先で列とプランの対応が分からなくなりがちです。
PCではプラン名・料金・CTAを含む見出し行を固定し、比較中も申し込みに進めるようにしています。
SPでは見出しをプラン名と料金に絞り、表を読むための画面の広さを確保しています。

値を「✓・―・数値」に絞ると、差が形で見える

セルに文章を入れると、読み比べに時間がかかります。
値を3種類に絞ると、上位プランほど✓が増える様子が形として読み取れ、説明を読まなくても差の大きさが伝わります。

SPでも横スクロールなしで3プランを比べられる

SPでは機能名を各行の上に全幅で置き、その下に3プランの値を横並びにしています。
機能名の列がなくなる分、3列を画面幅に収められるため、横スクロールで比較が途切れることがありません。

制作時のよくある失敗

表だけを置いて、最初から全項目を見せてしまう

料金ページを開いた直後に数十行の表が並ぶと、比較を始める前に読むのをやめられる可能性があります。
表の上に代表プランのカードや「どんな人にどのプランか」の要約を置き、全体像をつかんでから表で細部を確かめる順番にします。
表の見出しを「全機能を比較する」とすると、詳しく知りたい人だけが読み進める構成になります。

機能名が社内の呼び方や専門用語のままになっている

開発側や社内で使っている機能名をそのまま行の見出しにすると、検討者には何ができるのかが伝わりません。
「SSO」は「社内のアカウントでまとめてログイン」のように、できることを主語にした言葉に置き換えます。
正式名称を残したい場合は、括弧で補う程度にとどめます。

下位プランの列が「―」ばかりになっている

上位プランとの差を見せようとするほど、下位プランの列は「―」で埋まり、選ぶ理由のないプランに見えてしまいます。
見出し行のプラン名の下に「5名までのチーム向け」のような利用者像を添え、そのプランで十分な人がいることを示します。

✓と―の意味や、条件付きの機能に注記がない

「―」が「使えない」なのか「別料金で追加できる」なのかが分からないと、検討者は問い合わせるか、推測で判断することになります。
表の近くに記号の意味を明記し、オプション料金がかかる機能や上限つきの機能には、セル内または表の下に注記を添えます。

上限値の単位や書き方が行ごとにそろっていない

「10GB」「1,000MB」「無制限」「制限なし」のように同じ種類の値の書き方がばらつくと、差を読み取る前に換算や解釈が必要になります。
容量・人数・件数などは単位と表記ルールを表全体で統一し、「無制限」などの言い方も一つに決めておきます。

よくある質問

3プラン比較型と機能比較表型は、どう使い分ければいいですか?

比べる項目が5つ前後で、推奨プランへ導きたい場合は3プラン比較型、項目が多く、検討者が自分で細かく確かめたい場合は機能比較表型が向いていると考えられます。
上部に3プラン比較型のカード、その下に「全機能を比較する」として機能比較表を置き、両方を組み合わせる構成もよく使われます。

機能が何項目を超えたら、表にした方がいいですか?

明確な項目数の基準はありません。
カードが縦に長くなり、同じ機能をプラン間で見比べにくくなったときや、機能を分類して整理したくなったときが、表形式を検討する目安です。
10項目前後は一つの目安ですが、説明の長さや比較する内容によって判断します。

SPで表を横スクロールにしてはいけませんか?

横スクロールも選択肢です。
ただし、機能名の列を固定しないと、スクロールした先で何の項目か分かりにくくなります。
また、画面幅や列幅によっては、全プランを同時に表示できません。
このワイヤーでは、機能名を各行の上に移して3プランの値を画面内に収めています。
長い文章や数値が入る場合は、横スクロールも含めて検討します。

同じパーツのPattern

料金表の型の選び方と一覧を見る

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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